/* Idea for this one:
Basically everything is flex. To make it responsive switch direction from flex row to flex column
*/
body.darkmode {
  filter: invert(1) hue-rotate(180deg);
}

@keyframes scaleup {
  0% {
    transform: scale(1);
  }
  50% {
    transform: scale(1.26);
  }
  100% {
    transform: scale(1);
  }
}
@keyframes scaleupless {
  0% {
    transform: scale(1);
  }
  50% {
    transform: scale(1.1);
  }
  100% {
    transform: scale(1);
  }
}
.linkbox a i:hover {
  cursor: pointer;
  animation: scaleup 1.2s ease 1 forwards;
}

/* for about.html */
.icons a:hover {
  cursor: pointer;
  animation: scaleupless 1.2s ease 1 forwards;
}

.substackcontainer a .bi-substack:hover {
  animation: scaleupless 1.2s ease 1 forwards;
  /* remove it for now: */
}

.copyanddownload i:hover {
  cursor: pointer;
  animation: scaleupless 1.2s ease 1 forwards;
}

.fa-linkedin:hover {
  color: #0e6899 !important;
}

.icons a .bi-substack:hover {
  fill: #f36822;
}

/* add animations for GitHub and LinkedIn icons later as well */
@keyframes scaleandspin {
  0% {
    transform: scale(1) rotate(0deg);
  }
  50% {
    transform: scale(1.35) rotate(360deg);
  }
  53% {
    transform: scale(1.35) rotate(360deg);
  }
  100% {
    transform: scale(1) rotate(720deg);
  }
}
footer #smalllogo:hover {
  cursor: pointer;
  animation: scaleandspin 2.6s ease 1 forwards;
}

@keyframes shiftleft {
  0% {
    transform: translateX(0px);
    transform: scale(1);
  }
  25% {
    transform: translateX(50px) scale(1.3);
    color: lightskyblue;
  }
  /* 
  40% {
    transform: translateX(25px);
    color: lightskyblue;
  } */
  50% {
    transform: translateX(0px);
    color: rgb(77, 158, 208);
  }
  /*   
  60% {
    transform: translateX(-25px);
    color: lightskyblue;
  } */
  /* 
  70% {
    transform: translateX(-50px);
    color: lightskyblue;
  } */
  75% {
    transform: translateX(-50px);
    color: lightskyblue;
    background-color: aquamarine;
  }
  /* 
  80% {
    transform: translateX(-25px);
    color: lightskyblue;
  }

  90% {
    transform: translateX(-10px);
    color: lightskyblue;
  } */
  100% {
    transform: translateX(0px) scale(1);
  }
}
/* I should also add spans around each word so I can animate columns as well.  */
.tableanimationforwards {
  /* custom curve */
  /* get this two seconds value in javascript */
  animation: shiftleft 2s cubic-bezier(0.42, 0, 0.58, 1) forwards;
  animation-delay: calc(var(--order) * 300ms);
}

@keyframes updownog {
  0% {
    transform: translateY(0px) scale(1);
  }
  50% {
    transform: translateY(20px) scale(1);
    background-color: rgb(182, 227, 255);
    font-size: 20px;
  }
  100% {
    transform: translateY(0px) scale(1);
  }
}
.updownblue {
  animation: updownog 2s cubic-bezier(0.42, 0, 0.58, 1) forwards;
  animation-delay: calc(var(--order) * 300ms);
}

@keyframes updownred {
  0% {
    transform: translateY(0px) scale(1);
  }
  50% {
    transform: translateY(20px) scale(1);
    background-color: rgb(251, 241, 58);
    font-size: 20px;
  }
  100% {
    transform: translateY(0px) scale(1);
  }
}
.updownred {
  animation: updownred 2s cubic-bezier(0.42, 0, 0.58, 1) forwards;
  animation-delay: calc(var(--order) * 300ms);
}

@keyframes updown_ut {
  0% {
    transform: translateY(0px) scale(1);
  }
  50% {
    transform: translateY(20px) scale(1);
    background-color: rgba(243, 105, 50, 0.71);
    font-size: 20px;
  }
  100% {
    transform: translateY(0px) scale(1);
  }
}
.updown_ut {
  animation: updown_ut 2s cubic-bezier(0.42, 0, 0.58, 1) forwards;
  animation-delay: calc(var(--order) * 300ms);
}

.tooltip {
  position: relative;
  display: inline-block;
  cursor: pointer;
  text-decoration: none;
  color: #fff;
  font-size: 18px;
}
.tooltip .tooltiptext {
  visibility: hidden;
  opacity: 0;
  width: -moz-max-content;
  width: max-content;
  background-color: #333;
  color: #fff;
  text-align: center;
  padding: 6px 10px;
  border-radius: 6px;
  font-size: 14px;
  position: absolute;
  z-index: 1;
  bottom: 125%;
  left: 50%;
  transform: translateX(-50%);
  transition: opacity 0.3s;
}
.tooltip .tooltiptext::after {
  content: "";
  position: absolute;
  top: 100%;
  left: 50%;
  margin-left: -5px;
  border-width: 5px;
  border-style: solid;
  border-color: #333 transparent transparent transparent;
}
.tooltip:hover .tooltiptext {
  visibility: visible;
  opacity: 1;
}

/* Idea for this one:
Basically everything is flex. To make it responsive switch direction from flex row to flex column
*/
footer {
  height: 300px;
  width: 100%;
  background-color: rgba(0, 24, 75, 0.4549019608);
  color: rgb(255, 255, 255);
  padding: 20px;
  font-size: 16px;
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: center;
  gap: 20px;
  -moz-column-gap: 20%;
       column-gap: 20%;
  font-family: Helvetica, sans-serif;
  position: relative;
  overflow: visible;
}
footer .footerleft {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  justify-content: center;
  row-gap: 15px;
}
footer .footerleft .links {
  width: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 20px;
  align-items: flex-start;
  -moz-column-gap: 35px;
       column-gap: 35px;
}
footer .footerright #smalllogo {
  /* animation has been added in animations.css  */
  width: 85px;
  height: 85px;
  border-radius: 10px;
  border: 3px solid #081a75;
}
footer .footerright #statement {
  font-family: "Barlow", sans-serif;
  font-size: 25px;
  margin: 0;
  margin-top: 19px;
  font-weight: 700;
}
footer a {
  color: white;
  font-family: Helvetica, sans-serif;
  font-weight: 500;
  font-style: normal;
  font-size: 23px;
  text-decoration: none;
}
@media screen and (max-width: 500px) {
  footer a {
    font-size: 19px;
  }
}
footer a:hover {
  text-decoration: underline;
  text-decoration-thickness: 4px;
  text-underline-offset: 3px;
}

#animatebutton {
  border: 1px solid rgb(35, 44, 116);
  color: white;
  background-color: #153f66;
  width: 75px;
  padding: 0px 6px;
  height: 40px;
  border-radius: 25px;
  margin-right: 10px;
  font-weight: bold;
  font-family: "Segoe UI", Tahoma, Geneva, Verdana, sans-serif;
  transition: background-color 0.5s;
}
#animatebutton:hover {
  cursor: pointer;
  background-color: #fdfbfa;
  color: #153f66;
  border: 3px solid rgb(15, 29, 89);
}

/* Idea for this one:
Basically everything is flex. To make it responsive switch direction from flex row to flex column
*/
:root {
  --secondarynavy: #153f66;
  --lighterblue: #284dbc;
  --statsnameorder: 1;
}

/* Idea for this one:
Basically everything is flex. To make it responsive switch direction from flex row to flex column
*/
/* Idea for this one:
Basically everything is flex. To make it responsive switch direction from flex row to flex column
*/
:root {
  --secondarynavy: #153f66;
  --lighterblue: #284dbc;
  --vibrantorange: rgb(244, 102, 70);
}

:root {
  --secondarynavy: #153f66;
  --lighterblue: #284dbc;
}

*,
*::before,
*::after {
  box-sizing: border-box;
  scroll-behavior: smooth;
}

/* 

This is all nav bar stuff:*/
/* end nav bar stuff */
.sitecontainer#departmentpage {
  /* add share icon in the future */
  /* delete 2nd row */
  /* style first row bold */
  /* add border radius to the whole #departmentcoursestable */
  /* change alignment */
  /* alternating bcg for lines */
  /* style Degreeview Logo */
  /* 
  Above mainsite and its children
  */
  /* topnav beginning */
  /* 

  still in top nav, but now the homeandabout section

  */
  /* now outside of top nav */
  /* now done with above main site... */
  /* mainsite will be the name, plus some of the files, plus some images. But there can be stuff below it in, Since sitecontainer is flex column  */
  /* 
  Begin left content stuff
  */
  /* this controls this h3 elements in files container */
  /* this changes the styling on the names of the file like "Sample Semester PDF */
  /* add animations to these mf's */
  /* end left content stuff */
  /* 





  */
  /* 





  */
  /* add share icon in the future */
  /* all table styling is in tablestyling.css  */
  /* beginning of all the media quieries */
  /* 

  Mobile Screens

  */
  /* even smaller screensizes here */
}
.sitecontainer#departmentpage .mainsite {
  display: flex;
  flex-direction: row;
  background-color: rgb(255, 255, 255);
  width: 100%;
  flex: 1 1 350px;
  border-top: 10px solid var(--secondarynavy);
  border-bottom: 10px solid var(--secondarynavy);
}
.sitecontainer#departmentpage .mainsite .leftcontent {
  /* this affects the width */
  flex: 40%;
  background-color: #ffffff;
  padding: 15px;
  padding-top: 120px;
  padding-bottom: 40px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: flex-start;
  row-gap: 35px;
}
.sitecontainer#departmentpage .mainsite .leftcontent .filescontainer {
  border: 4px dashed rgb(16, 11, 82);
  border-radius: 26px;
  width: 92%;
  padding: 20px 29px;
}
.sitecontainer#departmentpage .mainsite .leftcontent .filescontainer h3 {
  color: #284dbc;
}
.sitecontainer#departmentpage .mainsite .leftcontent .filescontainer .filesname {
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: flex-start;
  -moz-column-gap: 10px;
       column-gap: 10px;
}
.sitecontainer#departmentpage .mainsite .leftcontent .filescontainer .filesname i {
  font-size: 20px;
}
.sitecontainer#departmentpage .mainsite .leftcontent .filescontainer ul {
  list-style-type: none; /* Removes bullets */
  /* indent */
  padding-left: 30px;
}
.sitecontainer#departmentpage .mainsite .leftcontent .filescontainer ul .linkbox {
  display: flex;
  flex-direction: row;
  /* make the download text all even */
  justify-content: space-between;
  align-items: center;
  -moz-column-gap: 40px;
       column-gap: 40px;
}
@media screen and (max-width: 700px) {
  .sitecontainer#departmentpage .mainsite .leftcontent .filescontainer ul .linkbox {
    display: flex;
    flex-direction: column;
    /* make the download text all even */
    justify-content: center;
    align-items: flex-start;
    row-gap: 20px;
  }
}
.sitecontainer#departmentpage .mainsite .leftcontent .filescontainer ul .linkbox p:first-of-type {
  margin-top: 10px;
  font-weight: bold;
  max-width: 137px;
}
.sitecontainer#departmentpage .mainsite .leftcontent .filescontainer ul .linkbox #underconstruction {
  display: block; /* or block if you want it on its own line */
  margin-top: 10px;
  margin-bottom: 3px;
  color: rgb(209, 76, 14);
  border-bottom: 2px solid rgb(209, 76, 14);
}
.sitecontainer#departmentpage .mainsite .leftcontent .filescontainer ul .linkbox a i {
  color: rgb(21, 21, 69);
}
.sitecontainer#departmentpage .mainsite .leftcontent .filescontainer ul .linkbox span#original {
  color: white;
  -webkit-text-stroke: 0.5px black; /* outline around text */
  text-decoration: underline;
  text-decoration-thickness: 2px;
  text-underline-offset: 4px; /* pushes the underline away from the text */
  text-decoration-color: #284dbc; /* underline is red, text can be another color */
}
.sitecontainer#departmentpage .mainsite .leftcontent .filescontainer ul .linkbox span#darktheme {
  color: #041442;
  text-decoration: underline;
  text-decoration-thickness: 2px;
  text-underline-offset: 4px; /* pushes the underline away from the text */
  text-decoration-color: #041442; /* underline is red, text can be another color */
}
.sitecontainer#departmentpage .mainsite .leftcontent .filescontainer ul .linkbox span#greentheme {
  color: #238808;
  text-decoration: underline;
  text-decoration-thickness: 2px;
  text-underline-offset: 4px; /* pushes the underline away from the text */
  text-decoration-color: #238808; /* underline is red, text can be another color */
}
.sitecontainer#departmentpage .mainsite .leftcontent .filescontainer ul .linkbox span#deserttheme {
  color: #603303;
  text-decoration: underline;
  text-decoration-thickness: 2px;
  text-underline-offset: 4px; /* pushes the underline away from the text */
  text-decoration-color: #603303; /* underline is red, text can be another color */
}
.sitecontainer#departmentpage .mainsite .leftcontent .filescontainer ul .linkbox span#greyscaletheme {
  color: #5f6470;
  text-shadow: 2px 2px 5px rgba(0, 0, 0, 0.5);
  text-decoration: underline;
  text-decoration-thickness: 2px;
  text-underline-offset: 4px; /* pushes the underline away from the text */
  text-decoration-color: #2e3138; /* underline is red, text can be another color */
}
.sitecontainer#departmentpage .mainsite .leftcontent .filescontainer ul .linkbox span#oceantheme {
  color: #033f60;
  text-decoration: underline;
  text-decoration-thickness: 2px;
  text-underline-offset: 4px; /* pushes the underline away from the text */
  text-decoration-color: #033f60; /* underline is red, text can be another color */
}
.sitecontainer#departmentpage .mainsite .leftcontent .filescontainer ul .linkbox span#pasteltheme {
  color: #925c8b;
  text-decoration: underline;
  text-decoration-thickness: 2px;
  text-underline-offset: 4px; /* pushes the underline away from the text */
  text-decoration-color: #925c8b; /* underline is red, text can be another color */
}
.sitecontainer#departmentpage .mainsite .leftcontent .filescontainer ul .linkbox span#primarytheme {
  color: rgb(249, 55, 55);
  text-decoration: underline;
  text-decoration-thickness: 2px;
  text-underline-offset: 4px; /* pushes the underline away from the text */
  text-decoration-color: #d8024d; /* underline is red, text can be another color */
}
.sitecontainer#departmentpage .mainsite .leftcontent .filescontainer ul .linkbox span#blacktheme {
  color: #000000;
  text-decoration: underline;
  text-decoration-thickness: 2px;
  text-underline-offset: 4px; /* pushes the underline away from the text */
  text-decoration-color: #000; /* underline is red, text can be another color */
}
.sitecontainer#departmentpage .mainsite .leftcontent .filescontainer ul .linkbox span#neontheme {
  color: #dd098b;
  text-decoration: underline;
  text-decoration-thickness: 2px;
  text-underline-offset: 4px; /* pushes the underline away from the text */
  text-decoration-color: #dd098b; /* underline is red, text can be another color */
}
.sitecontainer#departmentpage .mainsite .rightcontent {
  flex: 60%;
  background-color: rgb(113, 179, 185);
  padding: 0px 20px 30px 20px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: flex-start;
  height: auto;
}
@media screen and (max-width: 700px) {
  .sitecontainer#departmentpage .mainsite .rightcontent {
    padding-top: 40px;
  }
  .sitecontainer#departmentpage .mainsite .rightcontent .displaynamebox {
    margin-bottom: 50px;
  }
  .sitecontainer#departmentpage .mainsite .rightcontent .displaynamebox #displayname {
    font-size: 20px;
    overflow-wrap: anywhere; /* lets words break anywhere if needed */
    word-break: break-word; /* fallback */
  }
}
.sitecontainer#departmentpage .mainsite .rightcontent .displaynamebox {
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: center;
  /* padding top 30 plus this height 50  equals 80 which is padding top of right content */
  height: 120px;
  width: 100%;
}
.sitecontainer#departmentpage .mainsite .rightcontent .displaynamebox #displayname {
  color: white;
  font-size: 25px;
  margin: 0; /* reset browser h3 margins */
  margin-bottom: 20px;
}
.sitecontainer#departmentpage .mainsite .rightcontent .displaynamebox #charticon {
  font-size: 30px;
  color: white;
  display: inline;
  margin: 0 0 0 0;
  margin-left: -40px; /* small space between text and icon */
  margin-bottom: 20px;
  vertical-align: middle; /* aligns icon with text baseline */
}
.sitecontainer#departmentpage .mainsite .rightcontent .departmentstats {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 20px;
  justify-content: flex-start;
  width: 90%;
  height: auto;
  border-right: 10px solid #1c94e5;
  border-left: 0px solid white;
}
@media screen and (max-width: 700px) {
  .sitecontainer#departmentpage .mainsite .rightcontent .departmentstats section.statsline {
    font-size: 14px;
    height: 200px !important;
  }
}
.sitecontainer#departmentpage .mainsite .rightcontent .departmentstats section.statsline {
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: center;
  gap: 20px;
  justify-content: center;
  gap: 0;
  border-top: 10px solid #1c94e5;
  border-bottom: 10px solid #1c94e5;
  width: 100%;
  height: 100px;
  font-weight: bold;
  font-family: Helvetica, sans-serif;
  align-items: stretch;
}
.sitecontainer#departmentpage .mainsite .rightcontent .departmentstats section.statsline div.statsname {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 20px;
  gap: 0;
  width: 30%;
  margin: 0 10px;
  order: var(--statsnameorder);
}
.sitecontainer#departmentpage .mainsite .rightcontent .departmentstats section.statsline div.statscontent {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 20px;
  gap: 0;
  width: 70%;
  padding: 0px 10px;
  background-color: white;
}
.sitecontainer#departmentpage .mainsite .rightcontent .departmentstats .statsline.shortbox .statsname {
  width: 80%;
}
.sitecontainer#departmentpage .mainsite .rightcontent .departmentstats .statsline.shortbox .statscontent {
  font-size: 25px;
  width: 20%;
}
.sitecontainer#departmentpage .mainsite .rightcontent .departmentstats #coursecount .statsname {
  width: 60%;
}
.sitecontainer#departmentpage .mainsite .rightcontent .departmentstats #coursecount .statscontent {
  font-size: 25px;
  width: 40%;
}
.sitecontainer#departmentpage .mainsite .rightcontent .departmentstats #longestname .statscontent {
  font-size: 15px;
}
.sitecontainer#departmentpage .mainsite .rightcontent .departmentstats #shortestname .statsname {
  width: 60%;
}
.sitecontainer#departmentpage .mainsite .rightcontent .departmentstats #shortestname .statscontent {
  width: 40%;
}
.sitecontainer#departmentpage .mainsite .rightcontent .departmentstats #uppercount .statscontent {
  font-size: 25px;
  width: 40%;
}
.sitecontainer#departmentpage .mainsite .rightcontent .departmentstats #uppercount .statsname {
  width: 60%;
}
.sitecontainer#departmentpage .mainsite .rightcontent .departmentstats #lowercount .statscontent {
  font-size: 25px;
  width: 40%;
}
.sitecontainer#departmentpage .mainsite .rightcontent .departmentstats #lowercount .statsname {
  width: 60%;
}
.sitecontainer#departmentpage .mainsite .rightcontent .departmentstats #gradcount .statscontent {
  font-size: 25px;
  width: 40%;
}
.sitecontainer#departmentpage .mainsite .rightcontent .departmentstats #gradcount .statsname {
  width: 60%;
}
.sitecontainer#departmentpage .mainsite .rightcontent .departmentstats #samenamecount .statscontent {
  font-size: 25px;
  width: 40%;
}
.sitecontainer#departmentpage .mainsite .rightcontent .departmentstats #samenamecount .statsname {
  width: 60%;
}
.sitecontainer#departmentpage .mainsite .rightcontent .departmentstats #averagelength .statsname {
  width: 60%;
}
.sitecontainer#departmentpage .mainsite .rightcontent .departmentstats #averagelength .statscontent {
  font-size: 25px;
  width: 40%;
}
.sitecontainer#departmentpage .undermainsite {
  background-color: rgb(255, 255, 255);
  width: 100%;
  /* this is for now essentially footer top margin */
  height: auto;
  padding: 20px 0px 50px 0px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 20px;
}
.sitecontainer#departmentpage .undermainsite #departmenttableheading {
  color: #284dbc;
  font-size: 26px;
  margin: 19px;
  margin-bottom: 6px;
}
.sitecontainer#departmentpage .undermainsite .copyanddownload {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  padding: 10px;
  -moz-column-gap: 19px;
       column-gap: 19px;
  height: 50px;
  width: 90%;
  margin: -20px 0px -14px 0px;
}
.sitecontainer#departmentpage .undermainsite .copyanddownload #animatebutton {
  border: 1px solid rgb(35, 44, 116);
  color: white;
  background-color: #153f66;
  width: 75px;
  padding: 0px 6px;
  height: 40px;
  border-radius: 25px;
  margin-right: 10px;
  font-weight: bold;
  font-family: "Segoe UI", Tahoma, Geneva, Verdana, sans-serif;
  transition: background-color 0.5s;
}
.sitecontainer#departmentpage .undermainsite .copyanddownload #animatebutton:hover {
  cursor: pointer;
  background-color: #fdfbfa;
  color: #153f66;
  border: 3px solid rgb(15, 29, 89);
}
.sitecontainer#departmentpage .undermainsite .copyanddownload i {
  font-size: 28px;
  color: rgb(21, 21, 69);
}
.sitecontainer#departmentpage .undermainsite .copyanddownload i:hover {
  cursor: pointer;
}
.sitecontainer#departmentpage .undermainsite #departmentcoursestable {
  width: 90%;
  border-radius: 26px;
  /* border: 5px solid #081a75; */
  padding: 0px;
  min-height: 100px;
  height: auto;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch; /* smoother scroll on mobile */
}
.sitecontainer#departmentpage #departmentcoursestable {
  border-collapse: collapse;
  margin-top: 20px;
  margin-bottom: 20px;
  width: 100%;
}
@media screen and (max-width: 700px) {
  .sitecontainer#departmentpage #departmentcoursestable {
    overflow-wrap: anywhere; /* lets words break anywhere if needed */
    word-break: break-word; /* fallback */
  }
}
.sitecontainer#departmentpage #departmentcoursestable td,
.sitecontainer#departmentpage #departmentcoursestable th {
  border: 1px solid #ccc;
  padding: 15px 9px;
  min-height: 40px;
}
.sitecontainer#departmentpage #departmentcoursestable tr:first-child {
  font-weight: bold;
  background-color: var(--vibrantorange);
  color: white;
  border: none;
  font-size: 20px;
  padding: 18px;
}
.sitecontainer#departmentpage #departmentcoursestable tr:first-child td:first-child {
  text-align: left;
  border: none;
}
.sitecontainer#departmentpage #departmentcoursestable tr:first-child td:nth-child(2) {
  text-align: right;
  border: none;
}
.sitecontainer#departmentpage #departmentcoursestable tr:first-child td:nth-of-type(1) {
  border-top-left-radius: 10px;
  padding-left: 10px;
}
.sitecontainer#departmentpage #departmentcoursestable tr:first-child td:nth-of-type(2) {
  border-top-right-radius: 10px;
  padding-right: 15px;
}
.sitecontainer#departmentpage #departmentcoursestable tr:last-child td:nth-of-type(1) {
  border-bottom-left-radius: 10px;
}
.sitecontainer#departmentpage #departmentcoursestable tr:last-child td:nth-of-type(4) {
  border-bottom-right-radius: 10px;
  border: 1px solid #ccc;
  border-collapse: separate;
}
.sitecontainer#departmentpage #departmentcoursestable tr:nth-of-type(2) td {
  font-weight: bold;
}
.sitecontainer#departmentpage td:nth-child(1),
.sitecontainer#departmentpage th:nth-child(1) {
  text-align: left;
}
.sitecontainer#departmentpage td:nth-child(2),
.sitecontainer#departmentpage th:nth-child(2) {
  text-align: left;
}
.sitecontainer#departmentpage td:nth-child(3),
.sitecontainer#departmentpage th:nth-child(3) {
  text-align: center;
}
.sitecontainer#departmentpage td:nth-child(5) {
  display: none;
}
.sitecontainer#departmentpage tr:nth-child(even) {
  background-color: #f2f2f2;
}
.sitecontainer#departmentpage tr:nth-child(odd) {
  background-color: #ffffff;
}
.sitecontainer#departmentpage #departmentcoursestable tr:last-child {
  background-color: #fff;
}
.sitecontainer#departmentpage #departmentcoursestable tr:last-child td:first-child {
  font-weight: bold;
  color: #0c48a5;
  font-family: "Barlow";
  font-weight: 600;
  font-size: 30px;
}
.sitecontainer#departmentpage {
  min-height: 100vh;
  height: auto;
  width: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  flex: 1 1;
}
.sitecontainer#departmentpage .abovemainsite {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  justify-content: center;
  width: 100%;
  height: 300px;
}
.sitecontainer#departmentpage .topnav {
  /* change this color to see it and make changes */
  background-color: #eee;
  width: 100%;
  height: 100px;
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: space-between;
  filter: drop-shadow(4px 0px 2px rgb(67, 66, 66));
}
.sitecontainer#departmentpage .breadcrumbs {
  background-color: #eee;
  width: 70%;
  height: 100px;
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: flex-start;
}
.sitecontainer#departmentpage .breadcrumbs ul {
  display: flex;
  flex-direction: row;
  padding-left: 30px;
  -moz-column-gap: 19px;
       column-gap: 19px;
  list-style-type: none;
  color: #081a75;
  /* this is for the icon in the breadcrumbs */
}
.sitecontainer#departmentpage .breadcrumbs ul li#current {
  /* this is the current page the user is on */
  text-decoration: none;
  color: rgb(200, 74, 12);
  font-size: 16px;
  font-weight: bold;
  font-family: "Segoe UI", Tahoma, Geneva, Verdana, sans-serif;
}
.sitecontainer#departmentpage .breadcrumbs ul li a {
  text-decoration: none;
  color: #081a75;
  font-size: 16px;
  font-weight: bold;
  font-family: "Segoe UI", Tahoma, Geneva, Verdana, sans-serif;
}
.sitecontainer#departmentpage .breadcrumbs ul li a:hover {
  text-decoration: underline;
  text-decoration-thickness: 4px;
  text-underline-offset: 3px;
}
.sitecontainer#departmentpage .breadcrumbs ul .fa-chevron-right {
  vertical-align: middle; /* or baseline, or -2px tweak */
  font-size: 12px; /* adjust size */
  margin: 5px 0 0px 0; /* spacing */
  color: #081a75;
}
.sitecontainer#departmentpage .homeandabout {
  background-color: var(--secondarynavy);
  width: 25%;
  height: 100px;
  display: flex;
  flex-direction: row;
  /* this jsut centers the ul */
  align-items: center;
  justify-content: center;
}
.sitecontainer#departmentpage .homeandabout ul {
  display: flex;
  flex-direction: row;
  width: 100%;
  height: 100%;
  align-items: center;
  justify-content: center;
  list-style-type: none;
  padding-left: 0;
}
.sitecontainer#departmentpage .homeandabout ul li {
  /* make them big so you can hover */
  /* each one takes up 1/3 width */
  flex: 1;
  display: flex;
  height: 100%;
  align-items: center;
  justify-content: center;
  transition: background-color 0.3s;
}
.sitecontainer#departmentpage .homeandabout li:hover {
  background-color: #284dbc;
}
.sitecontainer#departmentpage .homeandabout ul li a {
  text-decoration: none;
  color: white;
  font-size: 16px;
  font-weight: bold;
  /* nice font when bolded */
  font-family: "Segoe UI", Tahoma, Geneva, Verdana, sans-serif;
  /* make the whole li box clickable */
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: 100%;
}
.sitecontainer#departmentpage .degreenamebox {
  /* border: 4px solid black; */
  width: 60%;
  height: 200px;
  padding-left: 39px;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  justify-content: center;
}
.sitecontainer#departmentpage #departmenttitle {
  font-size: 45px;
  color: #060212;
}
.sitecontainer#departmentpage .leftcontent {
  /* this affects the width */
  flex: 40%;
  background-color: #ffffff;
  padding: 15px;
  padding-top: 80px;
  padding-bottom: 40px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: flex-start;
  row-gap: 35px;
}
.sitecontainer#departmentpage .linksvg {
  /* filter: invert(100%) brightness(200%); */
  width: 20px;
  height: auto;
  position: absolute;
  margin-top: 0px;
}
.sitecontainer#departmentpage .filescontainer {
  border: 4px dashed rgb(16, 11, 82);
  border-radius: 26px;
  width: 92%;
  padding: 20px 29px;
}
.sitecontainer#departmentpage .filescontainer h3 {
  color: #284dbc;
}
.sitecontainer#departmentpage .renderedcsvdiv {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  width: 100%;
}
.sitecontainer#departmentpage #csvheading {
  color: #284dbc;
  font-size: 26px;
  margin: 19px;
  margin-bottom: 6px;
}
.sitecontainer#departmentpage .copyanddownload {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  padding: 10px;
  -moz-column-gap: 19px;
       column-gap: 19px;
  height: 50px;
  width: 90%;
  margin: -20px 0px -14px 0px;
}
.sitecontainer#departmentpage .copyanddownload i {
  font-size: 28px;
  color: rgb(21, 21, 69);
}
.sitecontainer#departmentpage .copyanddownload i:hover {
  cursor: pointer;
}
@media screen and (min-width: 700px) and (max-width: 1272px) {
  .sitecontainer#departmentpage {
    /* all the following is in left content */
  }
  .sitecontainer#departmentpage #departmenttitle {
    font-size: clamp(40px, 9.5vw, 43px);
    color: #060212;
  }
  .sitecontainer#departmentpage .leftcontent {
    padding: 25px 10px;
  }
  .sitecontainer#departmentpage .filescontainer {
    border: 4px dashed rgb(16, 11, 82);
    width: 92%;
    padding: 20px 20px;
  }
  .sitecontainer#departmentpage .linkbox {
    display: flex;
    flex-direction: column;
    /* make the download text all even */
    justify-content: center;
    align-items: flex-start;
    row-gap: 20px;
  }
  .sitecontainer#departmentpage .linkbox p {
    margin: 0;
  }
  .sitecontainer#departmentpage .linkbox p:first-of-type {
    margin-top: 26px;
    font-weight: bold;
  }
  .sitecontainer#departmentpage #csvheading {
    margin: 19px;
    margin-bottom: 35px;
  }
}
@media screen and (max-width: 1135px) {
  .sitecontainer#departmentpage {
    /* theres already padding here from the originally declared style */
    /* add some right padding */
  }
  .sitecontainer#departmentpage .abovemainsite {
    display: flex;
    flex-direction: column;
    /* more height to allow both title and breadcrumbs to be seen */
    height: 300px;
  }
  .sitecontainer#departmentpage .degreenamebox {
    flex-grow: 0;
    flex-shrink: 0;
    flex-basis: auto;
    height: 200px;
    width: 100%;
    padding-left: 20px;
  }
  .sitecontainer#departmentpage .topnav {
    background-color: #eee;
    width: 100%;
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: space-between;
  }
  .sitecontainer#departmentpage .breadcrumbs {
    background-color: #eee;
    flex-basis: auto;
    width: 69%;
    height: 100px;
    /* the breadcrumbs content will possibly wrap */
  }
  .sitecontainer#departmentpage .breadcrumbs ul {
    padding-left: 30px;
    padding-right: 10px;
  }
  .sitecontainer#departmentpage .homeandabout {
    width: 30%;
  }
}
@media screen and (max-width: 700px) {
  .sitecontainer#departmentpage {
    /* 



    this one here is pretty important */
  }
  .sitecontainer#departmentpage .abovemainsite {
    display: flex;
    flex-direction: column;
    /* more height to allow both title and breadcrumbs to be seen */
    /* bigger height as well for the bigger topnav */
    height: 345px;
  }
  .sitecontainer#departmentpage .degreenamebox {
    height: 190px;
    width: 100%;
    flex: none;
    padding-bottom: 25px;
    padding-left: 10px;
  }
  .sitecontainer#departmentpage #departmenttitle {
    font-size: 35px;
    color: #060212;
  }
  .sitecontainer#departmentpage .topnav {
    display: flex;
    flex-direction: column;
    /* height larger to have both on top of each other */
    height: 155px;
    /* removed the fixed navbar */
    filter: none;
  }
  .sitecontainer#departmentpage .homeandabout {
    /* bring it to the top */
    /* order: 1; */
    height: 75px;
    width: 100%;
    /* instead make this be the new fixed one */
    /* ok this wont work as long as I had the filter on topnav. For now I will keep the filter over the fixed positoin */
    /* position: fixed;
    top: 0;
    z-index: 999;*/
    filter: drop-shadow(4px 0px 2px rgb(67, 66, 66));
  }
  .sitecontainer#departmentpage .breadcrumbs {
    background-color: #eee;
    width: 100%;
    flex: none;
    /* margin top needs to be added since home and about is now fixed position */
    height: 80px;
    order: 2;
    /*  */
  }
  .sitecontainer#departmentpage .breadcrumbs ul {
    padding-left: 30px;
    padding-right: 10px;
  }
  .sitecontainer#departmentpage .mainsite {
    flex-direction: column;
  }
  .sitecontainer#departmentpage .leftcontent {
    padding: 25px 10px;
  }
  .sitecontainer#departmentpage #csvheading {
    /* add more spacing */
    margin-bottom: 50px;
  }
  .sitecontainer#departmentpage #pdfcontainer .linkbox,
  .sitecontainer#departmentpage #csvcontainer .linkbox {
    flex-direction: column;
    row-gap: 3px;
    justify-content: center;
    align-items: flex-start;
  }
  .sitecontainer#departmentpage #pdfcontainer .linkbox p,
  .sitecontainer#departmentpage #csvcontainer .linkbox p {
    margin: 6px;
  }
  .sitecontainer#departmentpage #pdfcontainer .linkbox p:first-of-type,
  .sitecontainer#departmentpage #csvcontainer .linkbox p:first-of-type {
    margin-top: 15px;
    font-weight: bold;
    max-width: 137px;
  }
}
@media screen and (max-width: 550px) {
  .sitecontainer#departmentpage .breadcrumbs ul li a {
    color: #081a75;
    font-size: 14px;
  }
  .sitecontainer#departmentpage .breadcrumbs #current {
    /* this is the current page the user is on */
    font-size: 14px;
    font-weight: bold;
    font-family: "Segoe UI", Tahoma, Geneva, Verdana, sans-serif;
  }
}
@media screen and (max-width: 450px) {
  .sitecontainer#departmentpage .breadcrumbs ul li a {
    color: #081a75;
    font-size: 13px;
  }
  .sitecontainer#departmentpage .breadcrumbs #current {
    /* this is the current page the user is on */
    font-size: 13px;
    font-weight: bold;
    font-family: "Segoe UI", Tahoma, Geneva, Verdana, sans-serif;
  }
  .sitecontainer#departmentpage .abovemainsite {
    display: flex;
    flex-direction: column;
    /* more height to allow both title and breadcrumbs to be seen */
    /* bigger height as well for the bigger topnav */
    height: 375px;
  }
  .sitecontainer#departmentpage .degreenamebox {
    height: 210px;
    width: 100%;
    flex: none;
    padding-bottom: 25px;
    padding-left: 35px;
  }
  .sitecontainer#departmentpage #departmenttitle {
    font-size: 35px;
    color: #060212;
  }
  .sitecontainer#departmentpage .topnav {
    display: flex;
    flex-direction: column;
    /* height larger to have both on top of each other */
    height: 165px;
    /* removed the fixed navbar */
    filter: none;
  }
  .sitecontainer#departmentpage .homeandabout {
    /* bring it to the top */
    /* order: 1; */
    height: 75px;
    width: 100%;
    /* instead make this be the new fixed one */
    /* ok this wont work as long as I had the filter on topnav. For now I will keep the filter over the fixed positoin */
    /* position: fixed;
    top: 0;
    z-index: 999;*/
    filter: drop-shadow(4px 0px 2px rgb(67, 66, 66));
  }
  .sitecontainer#departmentpage .breadcrumbs {
    background-color: #eee;
    width: 100%;
    flex: none;
    /* margin top needs to be added since home and about is now fixed position */
    height: 90px;
    order: 2;
    /*  */
  }
  .sitecontainer#departmentpage .breadcrumbs ul {
    padding-left: 30px;
    padding-right: 10px;
  }
}

/* Idea for this one:
Basically everything is flex. To make it responsive switch direction from flex row to flex column
*/
.sitecontainer#unihomepage .selector {
  box-sizing: border-box;
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: center;
  gap: 20px;
  font-family: "Roboto", sans-serif;
  font-weight: bold;
  font-size: 23px;
  border-radius: 26px;
  height: 100px;
  gap: 0;
  width: 60%;
  margin-bottom: -60px;
}
.sitecontainer#unihomepage .selector #currentpage {
  color: rgb(255, 239, 239);
  background-color: #284dbc;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 20px;
  flex: 1;
  height: 100%;
  transition: all 0.5s;
}
.sitecontainer#unihomepage .selector #currentpage:hover {
  background-color: #1f42a9;
}
.sitecontainer#unihomepage .selector .degreeplans {
  color: black;
  flex: 1;
  height: 100%;
  border-bottom-right-radius: inherit;
  border-top-right-radius: inherit;
}
.sitecontainer#unihomepage .selector .degreeplans a {
  width: 100%;
  height: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 20px;
  text-decoration: none;
  background-color: rgb(255, 255, 255);
  transition: all 0.5s;
  border-bottom-right-radius: inherit;
  border-top-right-radius: inherit;
  border: 2px solid #284dbc;
  color: #284dbc;
}
.sitecontainer#unihomepage .selector .degreeplans a:hover {
  background-color: rgb(103, 125, 226);
  color: white;
}
.sitecontainer#unihomepage .selector .degreeplans a:active {
  background-color: var(--secondarynavy);
}
.sitecontainer#unihomepage .selector .degreeplans a:visited {
  text-decoration: none;
}
.sitecontainer#unihomepage .selector .coursedata {
  border-top-left-radius: inherit;
  border-bottom-left-radius: inherit;
}
@media screen and (max-width: 800px) {
  .sitecontainer#unihomepage .selector {
    flex-direction: column;
    width: 80%;
    border-radius: 0;
    gap: 0;
  }
  .sitecontainer#unihomepage .selector .coursedata {
    width: 100%;
    border-radius: 0;
    padding: 10px;
  }
  .sitecontainer#unihomepage .selector .degreeplans {
    width: 100%;
  }
  .sitecontainer#unihomepage .selector .degreeplans a {
    border-radius: 0;
    padding: 10px;
  }
}
@media screen and (max-width: 400px) {
  .sitecontainer#unihomepage .selector {
    flex-direction: column;
    width: 80%;
    border-radius: 0;
    gap: 0;
    font-size: 19px;
  }
  .sitecontainer#unihomepage .selector .coursedata {
    width: 100%;
    border-radius: 0;
    padding: 10px;
  }
  .sitecontainer#unihomepage .selector .degreeplans {
    width: 100%;
  }
  .sitecontainer#unihomepage .selector .degreeplans a {
    border-radius: 0;
    padding: 10px;
  }
}

/* 
  This is for an older version of DegreeView where the departments where divided up by letters.

  But the code here is still good and can be used somewhere in the future.

  */
.sitecontainer#unihomepage {
  /* this div contains all the a's */
}
.sitecontainer#unihomepage .homepage-ul {
  width: 90%;
  height: auto;
  background-color: #eee;
  list-style-type: none;
  padding: 45px 35px;
  border-radius: 26px;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: 30px;
  /* 1/3 width for each column. Use media quieries to change width */
  /* finish this later */
}
.sitecontainer#unihomepage .homepage-ul .homepage-column {
  /*  add padding too */
  /* regenerate the  */
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
}
.sitecontainer#unihomepage .homepage-ul .homepage-column a {
  background-color: #d45c21;
  width: 100%;
  height: 190px;
  border-radius: 25px;
  padding: 25px 30px 30px 40px;
  font-family: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen, Ubuntu, Cantarell, "Open Sans", "Helvetica Neue", sans-serif;
  color: white;
  text-decoration: none;
  font-weight: bold;
  font-size: 25px;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  justify-content: center;
  transition: background-color 0.4s border 0.4s;
}
.sitecontainer#unihomepage .homepage-ul .homepage-column a .contentdiv {
  width: 100%;
  height: 100%;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  justify-content: center;
  font-family: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen, Ubuntu, Cantarell, "Open Sans", "Helvetica Neue", sans-serif;
  color: white;
  text-decoration: none;
  font-weight: bold;
  font-size: 25px;
}
.sitecontainer#unihomepage .homepage-ul .homepage-column a:hover {
  background-color: #bf5701;
  border: 2px solid white;
}
@media (min-width: 1000px) {
  .sitecontainer#unihomepage .homepage-ul {
    /* this is the width that it will be 3 columns until */
    grid-template-columns: repeat(3, 1fr);
  }
}
@media screen and (max-width: 550px) {
  .sitecontainer#unihomepage .homepage-ul {
    grid-template-columns: repeat(1, 90%);
    justify-content: center;
  }
  .sitecontainer#unihomepage .homepage-ul .homepage-column a {
    padding: 25px 15px 30px 18px;
  }
  .sitecontainer#unihomepage .homepage-ul .homepage-column a .contentdiv {
    font-size: 18px;
  }
}
@media screen and (max-width: 550px) and (max-width: 375px) {
  .sitecontainer#unihomepage .homepage-ul .homepage-column a .contentdiv {
    word-break: break-all;
  }
}

:root {
  --secondarynavy: #153f66;
  --lighterblue: #284dbc;
}

*,
*::before,
*::after {
  box-sizing: border-box;
  scroll-behavior: smooth;
}

/* 

This is all nav bar stuff:*/
/* end nav bar stuff */
.sitecontainer#unihomepage {
  min-height: 100vh;
  width: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: flex-start;
  /* 
  Above mainsite and its children
  */
  /* topnav beginning */
  /* now done with above main site... */
  /* mainsite will be the name, plus some of the files, plus some images. But there can be stuff below it in, Since sitecontainer is flex column  */
  /* index code */
  /* this is the ul */
  /* 

  Begin left content stuff
  */
  /* end all the linking stuff */
  /* this controls this h3 elements in files container */
  /* this changes the styling on the names of the file like "Sample Semester PDF */
  /* add animations to these mf's */
  /* end left content stuff */
  /* 





  */
  /* Right content stuff */
  /* 




  */
  /* beginning of all the media quieries */
  /* 

  Mobile Screens

  */
  /* even smaller screensizes here */
}
.sitecontainer#unihomepage .abovemainsite {
  display: flex;
  flex-direction: column;
  width: 100%;
  height: 270px;
}
.sitecontainer#unihomepage .abovemainsite .topnav {
  /* change this color to see it and make changes */
  background-color: #dce2e6;
  width: 100%;
  height: 60px;
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: space-between;
  /* keep this */
  filter: drop-shadow(4px 0px 2px rgb(67, 66, 66));
}
.sitecontainer#unihomepage .abovemainsite .biglogobox {
  height: 200px;
  width: 100%;
  overflow: hidden; /* optional: clips the image if it's too big */
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: center;
}
.sitecontainer#unihomepage .abovemainsite .biglogobox a#homeimagelink {
  /* height the same as topnav here, 100px */
  height: 70%;
  width: auto;
  transition: transform 0.5s ease;
}
.sitecontainer#unihomepage .abovemainsite .biglogobox a#homeimagelink:hover {
  cursor: pointer;
  transform: translateY(10px);
}
.sitecontainer#unihomepage .abovemainsite .biglogobox a#homeimagelink .biglogo {
  height: 100%;
  width: auto;
}
.sitecontainer#unihomepage .mainsite {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  row-gap: 55px;
  width: 100%;
  padding: 40px 30px;
  flex: 1 1 600px;
  border-top: 10px solid #153f66;
}
.sitecontainer#unihomepage .introbox {
  width: 90%;
  border: 5px black dashed;
  border-radius: 26px;
  padding: 30px 35px;
  font-family: Helvetica, sans-serif;
  font-weight: 600;
  font-size: 20px;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  justify-content: center;
  height: auto;
}
.sitecontainer#unihomepage .middlenav {
  width: 90%;
  display: flex;
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: center;
  gap: 20px;
  gap: 0;
}
.sitecontainer#unihomepage .leftcontent {
  /* this affects the width */
  flex: 50%;
  background-color: #1792ae;
  padding: 10px;
  padding-top: 80px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: flex-start;
  row-gap: 25px;
  min-height: 300px;
}
.sitecontainer#unihomepage .schoollistheaderbox {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  height: 80px;
  width: 100%;
}
.sitecontainer#unihomepage .schoollistbox {
  border: 4px solid rgb(164, 12, 12);
  border-radius: 26px;
  width: calc(100% - 80px);
  padding: 20px 10px 20px 40px;
}
.sitecontainer#unihomepage .schoollistbox ul {
  list-style-type: none;
  display: flex;
  flex-direction: column;
  row-gap: 15px;
  /* control paddig in the schoollistbox instead, its easier */
  padding: 0;
}
.sitecontainer#unihomepage .schoollink {
  list-style-type: none;
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: flex-start;
  -moz-column-gap: 10px;
       column-gap: 10px;
  font-weight: bold;
}
.sitecontainer#unihomepage .schoollink a {
  text-decoration: none;
  color: white;
  font-weight: bold;
}
.sitecontainer#unihomepage .linksvg {
  filter: invert(100%) brightness(200%);
  width: 20px;
  height: auto;
  margin-top: 6px;
}
.sitecontainer#unihomepage .filescontainer {
  border: 4px dashed rgb(16, 11, 82);
  border-radius: 26px;
  width: 92%;
  padding: 20px 29px;
}
.sitecontainer#unihomepage .filescontainer h3 {
  color: #284dbc;
}
.sitecontainer#unihomepage .filescontainer ul {
  list-style-type: none; /* Removes bullets */
  /* indent */
  padding-left: 30px;
}
.sitecontainer#unihomepage .linkbox {
  display: flex;
  flex-direction: row;
  /* make the download text all even */
  justify-content: space-between;
  align-items: center;
  -moz-column-gap: 40px;
       column-gap: 40px;
}
.sitecontainer#unihomepage .linkbox p:first-of-type {
  margin-top: 10px;
  font-weight: bold;
  max-width: 137px;
}
.sitecontainer#unihomepage .linkbox a i {
  color: rgb(21, 21, 69);
}
.sitecontainer#unihomepage .rightcontent {
  flex: 50%;
  background-color: rgb(232, 80, 56);
  padding: 0px 20px 30px 20px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: flex-start;
  color: white;
  padding: 40px 30px;
}
.sitecontainer#unihomepage .undermainsite {
  background-color: rgb(255, 255, 255);
  width: 100%;
  /* this is for now essentially footer top margin */
  height: 90px;
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: center;
}
.sitecontainer#unihomepage .home_random_stats {
  /* its 100% of middlenav, which is 80% */
  width: 100%;
  height: 95px;
  display: flex;
  flex-direction: row;
  /* this jsut centers the ul */
  align-items: center;
  justify-content: center;
}
.sitecontainer#unihomepage .home_random_stats ul {
  display: flex;
  flex-direction: row;
  width: 100%;
  height: 100%;
  align-items: center;
  -moz-column-gap: 90px;
       column-gap: 90px;
  /* since doing space evenly, remove gap */
  justify-content: center;
  list-style-type: none;
  padding-left: 0;
}
.sitecontainer#unihomepage .home_random_stats ul li {
  /* make them big so you can hover */
  width: 25%;
  display: flex;
  height: 100%;
  align-items: center;
  justify-content: center;
  transition: background-color 0.3s, color 0.3s;
  background-color: #153f66;
  border-radius: 35px;
  padding: 20px;
}
.sitecontainer#unihomepage .home_random_stats li:hover {
  background-color: #284dbc;
  cursor: pointer;
}
.sitecontainer#unihomepage .home_random_stats ul li a {
  text-decoration: none;
  color: white;
  font-size: 19px;
  font-weight: bold;
  /* nice font when bolded */
  font-family: "Segoe UI", Tahoma, Geneva, Verdana, sans-serif;
  /* make the whole li box clickable */
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: 100%;
  transition: color 0.3s;
}
.sitecontainer#unihomepage #randompagebutton {
  border: 3px solid rgb(35, 44, 116);
  color: white;
}
.sitecontainer#unihomepage #randompagebutton:hover {
  background-color: #fdfbfa;
  border: 5px solid rgb(15, 29, 89);
  border-radius: 25px;
}
.sitecontainer#unihomepage #randompagebutton:hover a {
  color: #153f66 !important;
}
@media screen and (min-width: 700px) and (max-width: 1272px) {
  .sitecontainer#unihomepage #headingtitle {
    font-size: 45px;
    color: #060212;
  }
}
@media screen and (max-width: 1135px) {
  .sitecontainer#unihomepage {
    /* for the home_random_stats stuff */
    /* theres already padding here from the originally declared style */
  }
  .sitecontainer#unihomepage .abovemainsite {
    display: flex;
    flex-direction: column;
    /* more height to allow both title and breadcrumbs to be seen */
    height: 270px;
  }
  .sitecontainer#unihomepage .headingbox {
    flex-grow: 0;
    flex-shrink: 0;
    flex-basis: auto;
    height: 150px;
    width: 100%;
    padding-left: 20px;
  }
  .sitecontainer#unihomepage .topnav {
    background-color: #dce2e6;
    width: 100%;
    height: 60px;
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: space-between;
    /* top nav currently 250px */
  }
  .sitecontainer#unihomepage .middlenav {
    width: 90%;
  }
  .sitecontainer#unihomepage .home_random_stats ul {
    -moz-column-gap: 60px;
         column-gap: 60px;
  }
}
@media screen and (max-width: 700px) {
  .sitecontainer#unihomepage {
    /* 



    this one here is pretty important */
  }
  .sitecontainer#unihomepage .abovemainsite {
    display: flex;
    flex-direction: column;
    /* more height to allow both title and breadcrumbs to be seen */
    /* bigger height as well for the bigger topnav */
    /* add the 2px for the border bottom */
    height: 272px;
  }
  .sitecontainer#unihomepage .topnav {
    background-color: #dce2e6;
    width: 100%;
    height: 60px;
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: space-between;
    /* keep this */
    filter: drop-shadow(4px 0px 2px rgb(67, 66, 66));
  }
  .sitecontainer#unihomepage .middlenav {
    width: 90%;
    /* 300 px plus gap of 30 for 3 */
    height: 390px;
  }
  .sitecontainer#unihomepage .home_random_stats {
    /* bring it to the top */
    width: 100%;
  }
  .sitecontainer#unihomepage .home_random_stats ul {
    display: flex;
    flex-direction: column;
    height: 405px;
    row-gap: 35px;
  }
  .sitecontainer#unihomepage .home_random_stats ul li {
    width: 60%;
    height: 25%;
  }
  .sitecontainer#unihomepage .biglogobox {
    background-color: #fff;
    width: 100%;
    height: 200px;
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: center;
    /*  */
  }
  .sitecontainer#unihomepage .biglogo {
    height: 65%;
    width: auto;
  }
  .sitecontainer#unihomepage .mainsite {
    flex-direction: column;
  }
  .sitecontainer#unihomepage .platformsbox {
    width: 40%;
    min-width: 200px;
    padding: 10px 30px;
    border-radius: 26px;
    font-family: Helvetica, sans-serif;
    font-weight: 600;
    font-size: 16px;
  }
  .sitecontainer#unihomepage .icons {
    display: flex;
    flex-direction: row;
    justify-content: flex-start;
    align-items: center;
    -moz-column-gap: 15px;
         column-gap: 15px;
    /* this was that icon stuff I was trying to find */
    width: 100%;
  }
  .sitecontainer#unihomepage .icons a .fa-linkedin {
    font-size: 30px;
    width: 30px;
    height: 30px;
    color: #0072b1;
    margin-bottom: 7px;
  }
  .sitecontainer#unihomepage .icons a .bi-substack {
    font-size: 10px;
    width: 27px;
    height: 27px;
    fill: #ff7731; /* for SVG */
  }
}
@media screen and (max-width: 550px) {
  .sitecontainer#unihomepage .abovemainsite {
    display: flex;
    flex-direction: column;
    /* more height to allow both title and breadcrumbs to be seen */
    /* bigger height as well for the bigger topnav */
    height: 220px;
  }
  .sitecontainer#unihomepage .topnav {
    background-color: #dce2e6;
    width: 100%;
    height: 60px;
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: space-between;
    /* keep this */
    filter: drop-shadow(4px 0px 2px rgb(67, 66, 66));
  }
  .sitecontainer#unihomepage .biglogobox {
    width: 100%;
    /* keep in mind its still flex center */
    height: 160px;
    /*  */
  }
  .sitecontainer#unihomepage .biglogo {
    height: 70%;
    width: auto;
  }
  .sitecontainer#unihomepage .home_random_stats {
    /* bring it to the top */
    /* order: 1; */
    height: 65px;
    width: 100%;
    /* instead make this be the new fixed one */
    /* ok this wont work as long as I had the filter on topnav. For now I will keep the filter over the fixed positoin */
    /* position: fixed;
    top: 0;
    z-index: 999;*/
  }
}
@media screen and (max-width: 450px) {
  .sitecontainer#unihomepage .abovemainsite {
    display: flex;
    flex-direction: column;
    /* more height to allow both title and breadcrumbs to be seen */
    /* bigger height as well for the bigger topnav */
    height: 220px;
  }
  .sitecontainer#unihomepage .biglogo {
    height: 65%;
    width: auto;
  }
  .sitecontainer#unihomepage .topnav {
    background-color: #dce2e6;
    width: 100%;
    height: 60px;
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: space-between;
    /* keep this */
  }
  .sitecontainer#unihomepage .home_random_stats {
    height: 65px;
    width: 100%;
  }
}

.sitecontainer#sorted-departments div.tablediv div.table-scroll {
  /* for aniamtions

  */
  /* style first row bold */
  /* add border radius to the whole table */
  /* change alignment */
  /* alternating bcg for lines */
  /* style Degreeview Logo */
}
.sitecontainer#sorted-departments div.tablediv div.table-scroll table {
  border-collapse: collapse;
  margin-top: 20px;
  margin-bottom: 20px;
  width: 100%;
}
.sitecontainer#sorted-departments div.tablediv div.table-scroll table tr {
  /* transition: font-size calc(var(--order) * 300ms) ease; */
}
.sitecontainer#sorted-departments div.tablediv div.table-scroll table td,
.sitecontainer#sorted-departments div.tablediv div.table-scroll table th {
  border: 1px solid #ccc;
  padding: 15px 9px;
  min-height: 40px;
}
.sitecontainer#sorted-departments div.tablediv div.table-scroll table tr:first-child td {
  font-weight: bold;
  background-color: var(--vibrantorange);
  color: white;
  border: none;
  text-align: left;
  font-size: 20px;
  padding: 18px;
}
.sitecontainer#sorted-departments div.tablediv div.table-scroll table tr:first-child td:nth-of-type(1) {
  border-top-left-radius: 10px;
  padding-left: 10px;
}
.sitecontainer#sorted-departments div.tablediv div.table-scroll table tr:first-child td:nth-last-of-type(1) {
  border-top-right-radius: 10px;
  padding-right: 15px;
}
.sitecontainer#sorted-departments div.tablediv div.table-scroll table tr:last-child td:nth-of-type(1) {
  border-bottom-left-radius: 10px;
}
.sitecontainer#sorted-departments div.tablediv div.table-scroll table tr:last-child td:nth-of-type(5) {
  border-bottom-right-radius: 10px;
  border: 1px solid #ccc;
  border-collapse: separate;
}
.sitecontainer#sorted-departments div.tablediv div.table-scroll td:nth-child(1),
.sitecontainer#sorted-departments div.tablediv div.table-scroll th:nth-child(1) {
  text-align: left;
  padding-right: 15px !important;
  font-weight: bold;
  font-size: 17px;
}
.sitecontainer#sorted-departments div.tablediv div.table-scroll td:nth-child(2),
.sitecontainer#sorted-departments div.tablediv div.table-scroll th:nth-child(2) {
  text-align: left;
}
.sitecontainer#sorted-departments div.tablediv div.table-scroll td:nth-child(3),
.sitecontainer#sorted-departments div.tablediv div.table-scroll th:nth-child(3) {
  text-align: left;
}
.sitecontainer#sorted-departments div.tablediv div.table-scroll td:nth-child(4) {
  text-align: center;
}
.sitecontainer#sorted-departments div.tablediv div.table-scroll td:nth-child(5),
.sitecontainer#sorted-departments div.tablediv div.table-scroll th:nth-child(5) {
  /* this would remove the schoolname normally */
  /* display: none; */
}
.sitecontainer#sorted-departments div.tablediv div.table-scroll tr:nth-child(even) {
  background-color: #f2f2f2;
}
.sitecontainer#sorted-departments div.tablediv div.table-scroll tr:nth-child(odd) {
  background-color: #fafafa;
}
.sitecontainer#sorted-departments div.tablediv div.table-scroll table tr:last-child {
  background-color: #fff;
}
.sitecontainer#sorted-departments div.tablediv div.table-scroll table tr:last-child td:first-child {
  font-weight: bold;
  color: #0c48a5;
  font-family: "Barlow";
  font-weight: 600;
  font-size: 30px;
  text-align: left;
}
.sitecontainer#sorted-departments div.tablediv div.table-scroll table tr:last-child td:last-child {
  color: transparent;
}
.sitecontainer#sorted-departments div.tablediv div.table-scroll .dummytd {
  background-color: yellow;
}
@media screen and (max-width: 550px) {
  .sitecontainer#sorted-departments div.tablediv div.table-scroll {
    /* now semester table */
    /* make the logo box smaller */
  }
  .sitecontainer#sorted-departments div.tablediv div.table-scroll table td {
    width: 95%;
    padding: 15px 4px;
    font-size: 15.5px;
  }
  .sitecontainer#sorted-departments div.tablediv div.table-scroll table tr:last-child td:first-child {
    font-weight: bold;
    color: #0c48a5;
    font-family: "Barlow";
    font-weight: 600;
    /* make the logo box smaller */
    font-size: 20px !important;
  }
  .sitecontainer#sorted-departments div.tablediv div.table-scroll table td {
    width: 95%;
    padding: 15px 4px;
    font-size: 15px;
  }
  .sitecontainer#sorted-departments div.tablediv div.table-scroll table tr:last-child td:first-child {
    font-weight: bold;
    color: #0c48a5;
    font-family: "Barlow";
    font-weight: 600;
    font-size: 20px !important;
  }
}
@media screen and (max-width: 450px) {
  .sitecontainer#sorted-departments div.tablediv div.table-scroll {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch; /* smoother scroll on mobile */
  }
}

/* yeah so I just copy pasted the entire degreepage2 css and slightly modified the heading text instead of redoing  */
/* degreename stuff */
/* Idea for this one:
Basically everything is flex. To make it responsive switch direction from flex row to flex column
*/
:root {
  --secondarynavy: #153f66;
  --lighterblue: #284dbc;
}

*,
*::before,
*::after {
  box-sizing: border-box;
  scroll-behavior: smooth;
}

/* 

This is all nav bar stuff:*/
/* end nav bar stuff */
.sitecontainer#sorted-departments {
  min-height: 100vh;
  width: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  flex: 1 1;
  /* 
  Above mainsite and its children
  */
  /* topnav beginning */
  /* this is for the icon in the breadcrumbs */
  /* 

  still in top nav, but now the homeandabout section

  */
  /* now outside of top nav */
  /* now done with above main site... */
  /* mainsite will be the name, plus some of the files, plus some images. But there can be stuff below it in, Since sitecontainer is flex column  */
  /* 
  Begin left content stuff
  */
  /* this controls this h3 elements in files container */
  /* this changes the styling on the names of the file like "Sample Semester PDF */
  /* add animations to these mf's */
  /* end left content stuff */
  /* 





  */
  /* Right content stuff */
  /* 





  */
  /* add share icon in the future */
  /* all table styling is in tablestyling.css  */
  /* beginning of all the media quieries */
  /* 

  Mobile Screens

  */
  /* even smaller screensizes here */
}
.sitecontainer#sorted-departments .abovemainsite {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: 250px;
}
.sitecontainer#sorted-departments .topnav {
  /* change this color to see it and make changes */
  background-color: #eee;
  width: 100%;
  height: 100px;
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: space-between;
  filter: drop-shadow(4px 0px 2px rgb(67, 66, 66));
}
.sitecontainer#sorted-departments .breadcrumbs #current {
  /* this is the current page the user is on */
  text-decoration: none;
  color: #081a75;
  font-size: 16px;
  font-weight: bold;
  font-family: "Segoe UI", Tahoma, Geneva, Verdana, sans-serif;
}
.sitecontainer#sorted-departments .breadcrumbs {
  background-color: #eee;
  width: 70%;
  height: 100px;
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: flex-start;
}
.sitecontainer#sorted-departments .breadcrumbs ul {
  display: flex;
  flex-direction: row;
  padding-left: 30px;
  -moz-column-gap: 19px;
       column-gap: 19px;
  list-style-type: none;
  color: #081a75;
}
.sitecontainer#sorted-departments .breadcrumbs ul li a {
  text-decoration: none;
  color: #081a75;
  font-size: 16px;
  font-weight: bold;
  font-family: "Segoe UI", Tahoma, Geneva, Verdana, sans-serif;
}
.sitecontainer#sorted-departments .breadcrumbs ul li a:hover {
  text-decoration: underline;
  text-decoration-thickness: 4px;
  text-underline-offset: 3px;
}
.sitecontainer#sorted-departments .fa-chevron-right {
  vertical-align: middle; /* or baseline, or -2px tweak */
  font-size: 12px; /* adjust size */
  margin: 5px 0 0px 0; /* spacing */
  color: #081a75;
}
.sitecontainer#sorted-departments .homeandabout {
  background-color: var(--secondarynavy);
  width: 25%;
  height: 100px;
  display: flex;
  flex-direction: row;
  /* this jsut centers the ul */
  align-items: center;
  justify-content: center;
}
.sitecontainer#sorted-departments .homeandabout ul {
  display: flex;
  flex-direction: row;
  width: 100%;
  height: 100%;
  align-items: center;
  justify-content: center;
  list-style-type: none;
  padding-left: 0;
}
.sitecontainer#sorted-departments .homeandabout ul li {
  /* make them big so you can hover */
  /* each one takes up 1/3 width */
  flex: 1;
  display: flex;
  height: 100%;
  align-items: center;
  justify-content: center;
  transition: background-color 0.3s;
}
.sitecontainer#sorted-departments .homeandabout li:hover {
  background-color: #284dbc;
}
.sitecontainer#sorted-departments .homeandabout ul li a {
  text-decoration: none;
  color: white;
  font-size: 16px;
  font-weight: bold;
  /* nice font when bolded */
  font-family: "Segoe UI", Tahoma, Geneva, Verdana, sans-serif;
  /* make the whole li box clickable */
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: 100%;
}
.sitecontainer#sorted-departments .degreenamebox {
  /* border: 4px solid black; */
  width: 80%;
  height: 150px;
  padding: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
}
.sitecontainer#sorted-departments #degreenametitle {
  font-size: 35px;
  color: #284dbc;
}
.sitecontainer#sorted-departments .mainsite {
  display: flex;
  flex-direction: row;
  width: 100%;
  flex: 1 1 350px;
  border-top: 10px solid var(--secondarynavy);
  border-bottom: 10px solid var(--secondarynavy);
}
.sitecontainer#sorted-departments .leftcontent {
  /* this affects the width */
  flex: 40%;
  background-color: #ffffff;
  padding: 10px;
  padding-top: 80px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: flex-start;
  row-gap: 25px;
}
.sitecontainer#sorted-departments .filescontainer {
  border: 4px dashed rgb(16, 11, 82);
  border-radius: 26px;
  width: 92%;
  padding: 20px 29px;
}
.sitecontainer#sorted-departments .filescontainer h3 {
  color: #284dbc;
}
.sitecontainer#sorted-departments .filescontainer .filesname {
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: flex-start;
  -moz-column-gap: 10px;
       column-gap: 10px;
}
.sitecontainer#sorted-departments .filescontainer .filesname i {
  font-size: 20px;
}
.sitecontainer#sorted-departments .filescontainer ul {
  list-style-type: none; /* Removes bullets */
  /* indent */
  padding-left: 30px;
}
.sitecontainer#sorted-departments .linkbox {
  display: flex;
  flex-direction: row;
  /* make the download text all even */
  justify-content: space-between;
  align-items: center;
  -moz-column-gap: 40px;
       column-gap: 40px;
}
.sitecontainer#sorted-departments .linkbox p:first-of-type {
  margin-top: 10px;
  font-weight: bold;
  max-width: 137px;
}
.sitecontainer#sorted-departments .linkbox a i {
  color: rgb(21, 21, 69);
}
.sitecontainer#sorted-departments .rightcontent {
  flex: 60%;
  background-color: rgb(113, 179, 185);
  padding: 0px 20px 30px 20px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: flex-start;
}
.sitecontainer#sorted-departments .displayedpdfnamebox {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  /* padding top 30 plus this height 50  equals 80 which is padding top of right content */
  height: 80px;
  width: 100%;
}
.sitecontainer#sorted-departments .visuals {
  height: calc(100% - 100px);
  width: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
}
.sitecontainer#sorted-departments .displayedpdfnamebox #displayedpdfname {
  color: white;
}
.sitecontainer#sorted-departments .visuals .displayedpdf {
  border-radius: 26px;
}
.sitecontainer#sorted-departments .tablediv {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: auto;
  flex: 1 1 350px;
  border-top: 10px solid var(--secondarynavy);
  border-bottom: 10px solid var(--secondarynavy);
  height: auto;
  padding: 40px 0px 50px 0px;
  padding-right: 80px;
  padding-left: 80px;
}
.sitecontainer#sorted-departments .tablediv .copyanddownload {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  padding: 19px;
  -moz-column-gap: 19px;
       column-gap: 19px;
  height: 50px;
  width: 90%;
  margin: -20px 0px -14px 0px;
}
.sitecontainer#sorted-departments .tablediv .copyanddownload i {
  font-size: 28px;
  color: rgb(21, 21, 69);
}
.sitecontainer#sorted-departments .tablediv .copyanddownload i:hover {
  cursor: pointer;
}
.sitecontainer#sorted-departments .tablediv .table-scroll {
  width: 100%;
  height: auto;
}
@media screen and (min-width: 700px) and (max-width: 1272px) {
  .sitecontainer#sorted-departments {
    /* all the following is in left content */
  }
  .sitecontainer#sorted-departments #degreenametitle {
    font-size: clamp(32px, 7.5vw, 35px);
    color: #284dbc;
  }
  .sitecontainer#sorted-departments .leftcontent {
    padding: 25px 10px;
  }
  .sitecontainer#sorted-departments .filescontainer {
    border: 4px dashed rgb(16, 11, 82);
    width: 92%;
    padding: 20px 20px;
  }
  .sitecontainer#sorted-departments .linkbox {
    display: flex;
    flex-direction: column;
    /* make the download text all even */
    justify-content: center;
    align-items: flex-start;
    row-gap: 20px;
  }
  .sitecontainer#sorted-departments .linkbox p {
    margin: 0;
  }
  .sitecontainer#sorted-departments .linkbox p:first-of-type {
    margin-top: 26px;
    font-weight: bold;
  }
}
@media screen and (max-width: 1135px) {
  .sitecontainer#sorted-departments {
    /* theres already padding here from the originally declared style */
    /* add some right padding */
  }
  .sitecontainer#sorted-departments .abovemainsite {
    display: flex;
    flex-direction: column;
    /* more height to allow both title and breadcrumbs to be seen */
    height: 300px;
  }
  .sitecontainer#sorted-departments .degreenamebox {
    flex-grow: 0;
    flex-shrink: 0;
    flex-basis: auto;
    height: 200px;
    width: 100%;
    padding-left: 20px;
  }
  .sitecontainer#sorted-departments .topnav {
    background-color: #eee;
    width: 100%;
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: space-between;
  }
  .sitecontainer#sorted-departments .breadcrumbs {
    background-color: #eee;
    flex-basis: auto;
    width: 69%;
    height: 100px;
    /* the breadcrumbs content will possibly wrap */
  }
  .sitecontainer#sorted-departments .breadcrumbs ul {
    padding-left: 30px;
    padding-right: 10px;
  }
  .sitecontainer#sorted-departments .homeandabout {
    width: 30%;
  }
}
@media screen and (max-width: 700px) {
  .sitecontainer#sorted-departments {
    /* 




    this one here is pretty important */
  }
  .sitecontainer#sorted-departments .abovemainsite {
    display: flex;
    flex-direction: column;
    /* more height to allow both title and breadcrumbs to be seen */
    /* bigger height as well for the bigger topnav */
    height: 345px;
  }
  .sitecontainer#sorted-departments .degreenamebox {
    height: 190px;
    width: 100%;
    flex: none;
    padding-bottom: 25px;
    padding-left: 10px;
  }
  .sitecontainer#sorted-departments #degreenametitle {
    font-size: 30px;
    color: #284dbc;
  }
  .sitecontainer#sorted-departments .topnav {
    display: flex;
    flex-direction: column;
    /* height larger to have both on top of each other */
    height: 155px;
    /* removed the fixed navbar */
    filter: none;
  }
  .sitecontainer#sorted-departments .homeandabout {
    /* bring it to the top */
    /* order: 1; */
    height: 75px;
    width: 100%;
    /* instead make this be the new fixed one */
    /* ok this wont work as long as I had the filter on topnav. For now I will keep the filter over the fixed positoin */
    /* position: fixed;
    top: 0;
    z-index: 999;*/
    filter: drop-shadow(4px 0px 2px rgb(67, 66, 66));
  }
  .sitecontainer#sorted-departments .breadcrumbs {
    background-color: #eee;
    width: 100%;
    flex: none;
    /* margin top needs to be added since home and about is now fixed position */
    height: 80px;
    order: 2;
    /*  */
  }
  .sitecontainer#sorted-departments .breadcrumbs ul {
    padding-left: 30px;
    padding-right: 10px;
  }
  .sitecontainer#sorted-departments .breadcrumbs ul li a {
    color: #081a75;
    font-size: 13.5px;
  }
  .sitecontainer#sorted-departments .breadcrumbs #current {
    /* this is the current page the user is on */
    font-size: 13.5px;
    font-weight: bold;
    font-family: "Segoe UI", Tahoma, Geneva, Verdana, sans-serif;
  }
  .sitecontainer#sorted-departments .mainsite {
    flex-direction: column;
  }
  .sitecontainer#sorted-departments .leftcontent {
    padding: 25px 10px;
  }
  .sitecontainer#sorted-departments #pdfcontainer .linkbox,
  .sitecontainer#sorted-departments #csvcontainer .linkbox {
    flex-direction: column;
    row-gap: 3px;
    justify-content: center;
    align-items: flex-start;
  }
  .sitecontainer#sorted-departments #pdfcontainer .linkbox p,
  .sitecontainer#sorted-departments #csvcontainer .linkbox p {
    margin: 6px;
  }
  .sitecontainer#sorted-departments #pdfcontainer .linkbox p:first-of-type,
  .sitecontainer#sorted-departments #csvcontainer .linkbox p:first-of-type {
    margin-top: 15px;
    font-weight: bold;
    max-width: 137px;
  }
}
@media screen and (max-width: 550px) {
  .sitecontainer#sorted-departments .abovemainsite {
    display: flex;
    flex-direction: column;
    /* more height to allow both title and breadcrumbs to be seen */
    /* bigger height as well for the bigger topnav */
    height: 265px;
  }
  .sitecontainer#sorted-departments .degreenamebox {
    height: 190px;
    width: 100%;
    flex: none;
    padding-bottom: 25px;
    padding-left: 10px;
  }
  .sitecontainer#sorted-departments #degreenametitle {
    font-size: 30px;
    color: #284dbc;
  }
  .sitecontainer#sorted-departments .topnav {
    display: flex;
    flex-direction: column;
    /* height larger to have both on top of each other */
    height: 75px;
    /* removed the fixed navbar */
    filter: none;
  }
  .sitecontainer#sorted-departments .homeandabout .breadcrumbs ul li a {
    color: #081a75;
    font-size: 14px;
  }
  .sitecontainer#sorted-departments .breadcrumbs {
    height: 80px;
    font-size: 10px;
  }
}
@media screen and (max-width: 450px) {
  .sitecontainer#sorted-departments .breadcrumbs ul li a {
    color: #081a75;
    font-size: 9px;
  }
  .sitecontainer#sorted-departments .breadcrumbs #current {
    /* this is the current page the user is on */
    font-weight: bold;
    font-family: "Segoe UI", Tahoma, Geneva, Verdana, sans-serif;
    font-size: 9px;
  }
  .sitecontainer#sorted-departments .abovemainsite {
    display: flex;
    flex-direction: column;
    /* more height to allow both title and breadcrumbs to be seen */
    /* bigger height as well for the bigger topnav */
    height: 375px;
  }
  .sitecontainer#sorted-departments .degreenamebox {
    height: 210px;
    width: 100%;
    flex: none;
    padding-bottom: 25px;
    padding-left: 35px;
  }
  .sitecontainer#sorted-departments .topnav {
    display: flex;
    flex-direction: column;
    /* height larger to have both on top of each other */
    height: 165px;
    /* removed the fixed navbar */
    filter: none;
  }
  .sitecontainer#sorted-departments .homeandabout {
    /* bring it to the top */
    /* order: 1; */
    height: 75px;
    width: 100%;
    /* instead make this be the new fixed one */
    /* ok this wont work as long as I had the filter on topnav. For now I will keep the filter over the fixed positoin */
    /* position: fixed;
    top: 0;
    z-index: 999;*/
    filter: drop-shadow(4px 0px 2px rgb(67, 66, 66));
  }
  .sitecontainer#sorted-departments .breadcrumbs {
    background-color: #eee;
    width: 100%;
    flex: none;
    /* margin top needs to be added since home and about is now fixed position */
    height: 90px;
    order: 2;
    /*  */
  }
  .sitecontainer#sorted-departments .breadcrumbs ul {
    padding-left: 30px;
    padding-right: 10px;
  }
}

/*  */
.sitecontainer#statspage .statscontainer2 {
  /* this is the top one */
  width: 100%;
  background-color: rgba(255, 49, 49, 0.8823529412);
  border-radius: 26px;
  padding: 30px 35px;
  font-family: Helvetica, sans-serif;
  font-weight: 600;
  font-size: 20px;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  justify-content: center;
  gap: 35px;
  height: auto;
  min-height: 300px;
  color: white;
}
.sitecontainer#statspage .statscontainer2 .statsbox .title {
  font-weight: bold;
}
.sitecontainer#statspage .statscontainer2 .statsbox .content {
  text-decoration: underline;
}
.sitecontainer#statspage .statscontainer2 .statsbox .content .dept_ul {
  border: 3px solid black;
}

.sitecontainer#statspage {
  /* begin .sheetjs div */
  /* style first row bold */
  /* add border radius to the whole table */
  /* change alignment */
  /* alternating bcg for lines */
  /* style Degreeview Logo */
  /* select the 2nd to last child */
}
.sitecontainer#statspage .renderedcsvdiv {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
}
.sitecontainer#statspage #csvtablecontainer {
  width: 90%;
  border-radius: 26px;
  /* border: 5px solid #081a75; */
  min-height: 100px;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch; /* smoother scroll on mobile */
}
.sitecontainer#statspage #csvheading {
  margin: 30px;
  color: #284dbc;
  font-size: 23px;
}
.sitecontainer#statspage #csvtablecontainer table {
  border-collapse: collapse;
  margin-top: 20px;
  margin-bottom: 20px;
  width: 100%;
}
.sitecontainer#statspage #csvtablecontainer table td,
.sitecontainer#statspage #csvtablecontainer table th {
  border: 1px solid #ccc;
  padding: 15px 9px;
  min-height: 40px;
}
.sitecontainer#statspage #csvtablecontainer table tr:first-child td {
  font-weight: bold;
  background-color: var(--secondarynavy);
  color: white;
  border: none;
  text-align: left;
  font-size: 20px;
  padding: 18px;
}
.sitecontainer#statspage #csvtablecontainer table tr:first-child td:nth-of-type(1) {
  border-top-left-radius: 10px;
  padding-left: 15px;
}
.sitecontainer#statspage #csvtablecontainer table tr:first-child td:nth-of-type(6) {
  border-top-right-radius: 10px;
  padding-right: 10px;
  /* color: #ff731f; */
}
.sitecontainer#statspage #csvtablecontainer table tr:last-child td:nth-of-type(1) {
  border-bottom-left-radius: 10px;
}
.sitecontainer#statspage #csvtablecontainer table tr:last-child td:nth-of-type(4) {
  border: none;
  border-bottom-right-radius: 10px;
  border: 1px solid #ccc;
  border-collapse: separate;
}
.sitecontainer#statspage #csvtablecontainer table tr:nth-of-type(3) td {
  font-weight: bold;
}
.sitecontainer#statspage td:nth-child(1),
.sitecontainer#statspage th:nth-child(1) {
  text-align: left;
}
.sitecontainer#statspage td:nth-child(2),
.sitecontainer#statspage td:nth-child(3),
.sitecontainer#statspage td:nth-child(4),
.sitecontainer#statspage td:nth-child(5),
.sitecontainer#statspage td:nth-child(6) {
  text-align: center;
}
.sitecontainer#statspage tr:nth-child(even) {
  background-color: #f2f2f2;
}
.sitecontainer#statspage #csvtablecontainer table tr:last-child td:first-child {
  font-weight: bold;
  color: #0c48a5;
  font-family: "Barlow";
  font-weight: 600;
  font-size: 30px;
}
.sitecontainer#statspage #csvtablecontainer table tr:nth-last-of-type(2) {
  display: none;
}
.sitecontainer#statspage #csvtablecontainer table tr:nth-of-type(2) {
  display: none;
}
.sitecontainer#statspage #csvtablecontainer td.schooltd {
  border-bottom: #eb7d46 solid 3px;
  font-weight: bold;
}

.sitecontainer#statspage .sectioncontainer {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 20px;
  border: 3px solid black;
  border-radius: 15px;
  width: 100%;
}
.sitecontainer#statspage .sectioncontainer .minimainsite {
  display: flex;
  flex-direction: row;
  width: 100%;
  flex: 1 1 350px;
  border-top: 10px solid #740d40;
  border-bottom: 10px solid #740d40;
}
.sitecontainer#statspage .sectioncontainer .minimainsite .leftcontent {
  /* this affects the width */
  flex: 40%;
  background-color: #ffffff;
  padding: 30px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: flex-start;
  row-gap: 25px;
}
.sitecontainer#statspage .sectioncontainer .minimainsite .leftcontent .filescontainer {
  border: 4px dashed rgb(16, 11, 82);
  border-radius: 26px;
  width: 92%;
  padding: 20px 29px;
}
.sitecontainer#statspage .sectioncontainer .minimainsite .leftcontent .filescontainer h3 {
  color: #284dbc;
}
.sitecontainer#statspage .sectioncontainer .minimainsite .leftcontent .filescontainer ul {
  list-style-type: none; /* Removes bullets */
  /* indent */
  padding-left: 30px;
}
.sitecontainer#statspage .sectioncontainer .minimainsite .leftcontent .filescontainer ul .linkbox {
  display: flex;
  flex-direction: row;
  /* make the download text all even */
  justify-content: space-between;
  align-items: center;
  -moz-column-gap: 40px;
       column-gap: 40px;
}
.sitecontainer#statspage .sectioncontainer .minimainsite .leftcontent .filescontainer ul .linkbox p:first-of-type {
  margin-top: 10px;
  font-weight: bold;
  max-width: 137px;
}
.sitecontainer#statspage .sectioncontainer .minimainsite .leftcontent .filescontainer ul .linkbox a i {
  color: rgb(21, 21, 69);
}
.sitecontainer#statspage .sectioncontainer .minimainsite .rightcontent {
  flex: 60%;
  background-color: rgb(232, 80, 56);
  padding: 30px 20px 30px 20px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: flex-start;
  color: white;
}

:root {
  --secondarynavy: #153f66;
}

*,
*::before,
*::after {
  box-sizing: border-box;
  scroll-behavior: smooth;
}

.sitecontainer#statspage {
  min-height: 100vh;
  width: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: flex-start;
  /* topnav beginning */
  /* this is for the icon in the breadcrumbs */
  /* 

  still in top nav, but now the homeandabout section

  */
  /* now outside of top nav */
  /* now done with above main site... */
  /* mainsite will be the name, plus some of the files, plus some images. But there can be stuff below it in, Since sitecontainer is flex column  */
  /*
  Begin left content stuff
  */
  /* this controls this h3 elements in files container */
  /* this changes the styling on the names of the file like "Sample Semester PDF */
  /* add animations to these mf's */
  /* end left content stuff */
  /* 





  */
  /* Right content stuff */
  /* 




  */
  /* end under main site */
  /* beginning of all the media quieries */
  /* 

  Mobile Screens

  */
  /* even smaller screensizes here */
}
.sitecontainer#statspage .abovemainsite {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  justify-content: center;
  width: 100%;
  height: 250px;
}
.sitecontainer#statspage .topnav {
  /* change this color to see it and make changes */
  background-color: #eee;
  width: 100%;
  height: 100px;
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: space-between;
  /* keep this */
  filter: drop-shadow(4px 0px 2px rgb(67, 66, 66));
}
.sitecontainer#statspage .biglogobox {
  height: 100%;
  overflow: hidden; /* optional: clips the image if it's too big */
}
.sitecontainer#statspage .biglogo {
  /* height the same as topnav here, 100px */
  height: 100%;
  width: auto;
}
.sitecontainer#statspage .breadcrumbs {
  background-color: #eee;
  width: 70%;
  height: 100px;
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: flex-start;
}
.sitecontainer#statspage .breadcrumbs ul {
  display: flex;
  flex-direction: row;
  padding-left: 30px;
  -moz-column-gap: 19px;
       column-gap: 19px;
  list-style-type: none;
  color: #081a75;
}
.sitecontainer#statspage .breadcrumbs ul li a {
  text-decoration: none;
  color: #081a75;
  font-size: 16px;
  font-weight: bold;
  font-family: "Segoe UI", Tahoma, Geneva, Verdana, sans-serif;
}
.sitecontainer#statspage .breadcrumbs ul li a:hover {
  text-decoration: underline;
  text-decoration-thickness: 4px;
  text-underline-offset: 3px;
}
.sitecontainer#statspage .breadcrumbs li#current {
  /* this is the current page the user is on */
  text-decoration: none;
  color: rgb(200, 74, 12);
  font-size: 16px;
  font-weight: bold;
}
.sitecontainer#statspage .fa-chevron-right {
  vertical-align: middle; /* or baseline, or -2px tweak */
  font-size: 12px; /* adjust size */
  margin: 5px 0 0px 0; /* spacing */
  color: #081a75;
}
.sitecontainer#statspage .homeandabout {
  background-color: #153f66;
  width: 25%;
  height: 100px;
  display: flex;
  flex-direction: row;
  /* this jsut centers the ul */
  align-items: center;
  justify-content: center;
}
.sitecontainer#statspage .homeandabout ul {
  display: flex;
  flex-direction: row;
  width: 100%;
  height: 100%;
  align-items: center;
  justify-content: center;
  list-style-type: none;
  padding-left: 0;
}
.sitecontainer#statspage .homeandabout ul li {
  /* make them big so you can hover */
  /* each one takes up 1/3 width */
  flex: 1;
  display: flex;
  height: 100%;
  align-items: center;
  justify-content: center;
  transition: background-color 0.3s;
}
.sitecontainer#statspage .homeandabout li:hover {
  background-color: #284dbc;
}
.sitecontainer#statspage .homeandabout ul li a {
  text-decoration: none;
  color: white;
  font-size: 16px;
  font-weight: bold;
  /* nice font when bolded */
  font-family: "Segoe UI", Tahoma, Geneva, Verdana, sans-serif;
  /* make the whole li box clickable */
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: 100%;
}
.sitecontainer#statspage .headingbox {
  /* border: 4px solid black; */
  width: 100%;
  height: 150px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
}
.sitecontainer#statspage #headingtitle {
  font-size: 45px;
  color: #060212;
}
.sitecontainer#statspage .mainsite {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  width: 100%;
  padding: 40px 30px;
  flex: 1 1 500px;
  border-top: 10px solid #153f66;
  border-bottom: 10px solid #153f66;
  row-gap: 35px;
}
.sitecontainer#statspage .mainsite ul#other_pages_links {
  display: flex;
  flex-direction: row;
  width: 100%;
  height: 100px;
  align-items: center;
  -moz-column-gap: 90px;
       column-gap: 90px;
  /* since doing space evenly, remove gap */
  justify-content: center;
  list-style-type: none;
  padding-left: 0;
}
.sitecontainer#statspage .mainsite ul#other_pages_links li {
  /* make them big so you can hover */
  width: 25%;
  display: flex;
  height: 100%;
  align-items: center;
  justify-content: center;
  transition: background-color 0.3s, color 0.3s;
  background-color: #153f66;
  border-radius: 35px;
  padding: 20px;
}
.sitecontainer#statspage .mainsite ul#other_pages_links li a {
  text-decoration: none;
  color: white;
  font-size: 19px;
  font-weight: bold;
  /* nice font when bolded */
  font-family: "Segoe UI", Tahoma, Geneva, Verdana, sans-serif;
  /* make the whole li box clickable */
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: 100%;
  transition: color 0.3s;
}
.sitecontainer#statspage .mainsite ul#other_pages_links li:hover {
  background-color: #284dbc;
  cursor: pointer;
}
.sitecontainer#statspage .topstats {
  /* this is the top one */
  width: 100%;
  background-color: #ff7731;
  border-radius: 26px;
  padding: 30px 35px;
  font-family: Helvetica, sans-serif;
  font-weight: 600;
  font-size: 20px;
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: center;
  flex-wrap: wrap;
  gap: 35px;
  height: auto;
  min-height: 300px;
}
.sitecontainer#statspage .topstats sup {
  font-size: 11px;
}
.sitecontainer#statspage .footnotes {
  display: flex;
  width: 100%;
  /* border: 3px solid black; */
  align-items: center;
  justify-content: flex-end;
  margin-top: -32px;
  margin-bottom: -23px;
}
.sitecontainer#statspage .rightfootnotes {
  font-family: Arial, Helvetica, sans-serif;
  font-size: 13px;
}
.sitecontainer#statspage .minimainsite {
  display: flex;
  flex-direction: row;
  width: 100%;
  flex: 1 1 350px;
  border-top: 10px solid #740d40;
  border-bottom: 10px solid #740d40;
}
.sitecontainer#statspage .leftcontent {
  /* this affects the width */
  flex: 40%;
  background-color: #ffffff;
  padding: 30px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: flex-start;
  row-gap: 25px;
}
.sitecontainer#statspage .filescontainer {
  border: 4px dashed rgb(16, 11, 82);
  border-radius: 26px;
  width: 92%;
  padding: 20px 29px;
}
.sitecontainer#statspage .filescontainer h3 {
  color: #284dbc;
}
.sitecontainer#statspage .filescontainer ul {
  list-style-type: none; /* Removes bullets */
  /* indent */
  padding-left: 30px;
}
.sitecontainer#statspage .linkbox {
  display: flex;
  flex-direction: row;
  /* make the download text all even */
  justify-content: space-between;
  align-items: center;
  -moz-column-gap: 40px;
       column-gap: 40px;
}
.sitecontainer#statspage .linkbox p:first-of-type {
  margin-top: 10px;
  font-weight: bold;
  max-width: 137px;
}
.sitecontainer#statspage .linkbox a i {
  color: rgb(21, 21, 69);
}
.sitecontainer#statspage .rightcontent {
  flex: 60%;
  background-color: rgb(232, 80, 56);
  padding: 30px 20px 30px 20px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: flex-start;
  color: white;
  /* just put some stats in this mf */
}
.sitecontainer#statspage #degreecountpng {
  width: 90%;
  height: auto;
  border-radius: 26px;
  min-width: 300px;
}
.sitecontainer#statspage .morestats {
  width: 100%;
  background-color: rgb(67, 153, 67);
  height: 550px;
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: center;
  -moz-column-gap: 70px;
       column-gap: 70px;
  border-radius: 26px;
  padding: 50px 10px;
}
.sitecontainer#statspage .morestats img {
  width: 40%;
  height: auto;
  border-radius: 26px;
  min-width: 300px;
}
.sitecontainer#statspage .undermainsite {
  background-color: rgb(255, 255, 255);
  width: 100%;
  /* this is for now essentially footer top margin */
  height: 200px;
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: center;
}
.sitecontainer#statspage #returnbutton {
  width: 20%;
  height: 95px;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: background-color 0.3s, color 0.3s;
  background-color: #153f66;
  border-radius: 35px;
  padding: 20px;
  color: white;
}
.sitecontainer#statspage #returnbutton a {
  text-decoration: none;
  color: white;
  font-size: 19px;
  font-weight: bold;
  /* nice font when bolded */
  font-family: "Segoe UI", Tahoma, Geneva, Verdana, sans-serif;
  /* make the whole li box clickable */
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: 100%;
  transition: color 0.3s;
}
.sitecontainer#statspage #returnbutton:hover {
  cursor: pointer;
  background-color: #284dbc;
}
.sitecontainer#statspage .visuals {
  height: calc(100% - 100px);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
}
.sitecontainer#statspage .visuals #displayeditemname {
  color: blue;
}
.sitecontainer#statspage .visuals .displayedpdf {
  border-radius: 26px;
}
@media screen and (min-width: 700px) and (max-width: 1272px) {
  .sitecontainer#statspage #headingtitle {
    font-size: 45px;
    color: #060212;
  }
}
@media screen and (max-width: 1135px) {
  .sitecontainer#statspage .abovemainsite {
    display: flex;
    flex-direction: column;
    /* more height to allow both title and breadcrumbs to be seen */
    height: 250px;
  }
  .sitecontainer#statspage .headingbox {
    flex-grow: 0;
    flex-shrink: 0;
    flex-basis: auto;
    height: 150px;
    width: 100%;
    padding-left: 20px;
  }
  .sitecontainer#statspage .topnav {
    background-color: #eee;
    width: 100%;
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: space-between;
    /* top nav currently 250px */
  }
  .sitecontainer#statspage .homeandabout {
    width: 30%;
  }
  .sitecontainer#statspage .minimainsite {
    flex-direction: column;
  }
  .sitecontainer#statspage .morestats {
    flex-direction: column;
    gap: 70px;
    height: auto;
  }
  .sitecontainer#statspage .morestats img {
    width: 87%;
    height: auto;
    border-radius: 26px;
    min-width: 300px;
  }
  .sitecontainer#statspage #returnbutton {
    width: 40%;
  }
}
@media screen and (max-width: 700px) {
  .sitecontainer#statspage {
    /* 



    this one here is pretty important */
  }
  .sitecontainer#statspage .abovemainsite {
    display: flex;
    flex-direction: column;
    /* more height to allow both title and breadcrumbs to be seen */
    /* bigger height as well for the bigger topnav */
    height: 352px;
  }
  .sitecontainer#statspage .headingbox {
    height: 185px;
    width: 100%;
    flex: none;
    padding-bottom: 25px;
    padding-left: 10px;
  }
  .sitecontainer#statspage #headingtitle {
    font-size: 45px;
    color: #060212;
  }
  .sitecontainer#statspage .topnav {
    display: flex;
    flex-direction: column;
    /* height larger to have both on top of each other */
    height: 177px;
    /* removed the fixed navbar */
    position: static;
    filter: none;
  }
  .sitecontainer#statspage .homeandabout {
    /* bring it to the top */
    order: 1;
    height: 65px;
    width: 100%;
    filter: drop-shadow(4px 1px 3px rgb(67, 66, 66));
  }
  .sitecontainer#statspage .biglogobox {
    background-color: #eee;
    width: 100%;
    flex: none;
    height: 110px;
    order: 2;
    border-bottom: 2px solid #eee;
    /*  */
  }
  .sitecontainer#statspage .biglogo {
    height: 100%;
    width: auto;
  }
  .sitecontainer#statspage .mainsite {
    flex-direction: column;
  }
  .sitecontainer#statspage .linkbox {
    display: flex;
    flex-direction: column;
    /* make the download text all even */
    justify-content: center;
    align-items: flex-start;
    row-gap: 20px;
  }
  .sitecontainer#statspage .linkbox p {
    margin: 0;
  }
  .sitecontainer#statspage .linkbox p:first-of-type {
    margin-top: 26px;
    font-weight: bold;
  }
  .sitecontainer#statspage .sheetjs {
    /* make it not visible on small screens to avoid headache */
    display: none;
  }
}
@media screen and (max-width: 550px) {
  .sitecontainer#statspage .abovemainsite {
    display: flex;
    flex-direction: column;
    /* more height to allow both title and breadcrumbs to be seen */
    /* bigger height as well for the bigger topnav */
    height: 360px;
  }
  .sitecontainer#statspage .headingbox {
    height: 185px;
    width: 100%;
    flex: none;
    padding-bottom: 25px;
    padding-left: 10px;
  }
  .sitecontainer#statspage #headingtitle {
    font-size: 45px;
    color: #060212;
  }
  .sitecontainer#statspage .topnav {
    display: flex;
    flex-direction: column;
    /* height larger to have both on top of each other */
    height: 185px;
    /* removed the fixed navbar */
    filter: none;
  }
  .sitecontainer#statspage .homeandabout {
    /* bring it to the top */
    /* order: 1; */
    height: 65px;
    width: 100%;
    /* instead make this be the new fixed one */
    /* ok this wont work as long as I had the filter on topnav. For now I will keep the filter over the fixed positoin */
    /* position: fixed;
    top: 0;
    z-index: 999;*/
    filter: drop-shadow(4px 1px 3px rgb(67, 66, 66));
  }
  .sitecontainer#statspage .biglogobox {
    background-color: #eee;
    width: 100%;
    flex: none;
    height: 110px;
    order: 2;
    border-bottom: 2px solid #eee;
    /*  */
  }
  .sitecontainer#statspage .biglogo {
    height: 100%;
    width: auto;
  }
  .sitecontainer#statspage .topstats {
    /* this is the top one */
    padding: 30px 15px;
    font-size: 18px;
    row-gap: 35px;
    min-height: 300px;
  }
  .sitecontainer#statspage .statscontent {
    font-size: 30px;
  }
  .sitecontainer#statspage .statstitle {
    font-size: 18px;
  }
  .sitecontainer#statspage #csvtablecontainer {
    width: 95%;
  }
  .sitecontainer#statspage #csvtablecontainer table td {
    width: 95%;
    padding: 15px 4px;
  }
  .sitecontainer#statspage #csvtablecontainer table td {
    font-size: 14px;
  }
  .sitecontainer#statspage #csvtablecontainer table tr:last-child td:first-child {
    font-weight: bold;
    color: #0c48a5;
    font-family: "Barlow";
    font-weight: 600;
    font-size: 20px !important;
  }
}
@media screen and (max-width: 450px) {
  .sitecontainer#statspage .abovemainsite {
    display: flex;
    flex-direction: column;
    /* more height to allow both title and breadcrumbs to be seen */
    /* bigger height as well for the bigger topnav */
    height: 360px;
  }
  .sitecontainer#statspage .headingbox {
    height: 185px;
    width: 100%;
    flex: none;
    padding-bottom: 25px;
    padding-left: 10px;
  }
  .sitecontainer#statspage #headingtitle {
    font-size: 45px;
    color: #060212;
  }
  .sitecontainer#statspage .topnav {
    display: flex;
    flex-direction: column;
    /* height larger to have both on top of each other */
    height: 175px;
    /* big logo box is 110 plus homeandabout is 175 */
    /* removed the fixed navbar */
    filter: none;
  }
  .sitecontainer#statspage .homeandabout {
    /* bring it to the top */
    /* order: 1; */
    height: 65px;
    width: 100%;
    /* instead make this be the new fixed one */
    /* ok this wont work as long as I had the filter on topnav. For now I will keep the filter over the fixed positoin */
    /* position: fixed;
    top: 0;
    z-index: 999;*/
    filter: drop-shadow(4px 1px 3px rgb(67, 66, 66));
  }
}

/* 

This is all nav bar stuff:*/
/* end nav bar stuff */
/* 
Above mainsite and its children
*/
body {
  scroll-behavior: smooth;
  display: flex;
  flex-direction: column;
  align-items: center;
  font-family: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen, Ubuntu, Cantarell, "Open Sans", "Helvetica Neue", sans-serif;
  height: auto;
  width: 100%;
  margin: 0;
  padding: 0;
  box-sizing: border-box;
  max-width: 100vw;
  gap: 10px;
  /* filter: invert(100%); */
  /* filter: grayscale(50%); */
  filter: contrast(110%);
  /* filter: blur(3px); */
  filter: saturate(110%);
}
body #hiddeninfo {
  display: none;
}/*# sourceMappingURL=main.css.map */