html, body {background-color: black;
          color: white;
          font-family: Verdana, Geneva, Tahoma, sans-serif;
}

.jersey-10-regular {
  font-family: "Jersey 10", sans-serif;
  font-weight: 400;
  font-style: normal;
}
img {
    max-width: 100%;
    height: auto;
}
/*THIS IS DOCUMENTATION FOR THE LOGO THAT WILL BE ON TOP OF THE SCREEN ON EACH PAGE*/
 .logo {
            display: block;
           position: sticky;
            width: 24rem;
            height: auto;
           top: 0;
            margin-left: auto;
            margin-right: auto;
            padding-bottom: 1.219%;
            padding-top: 1.219%;
    
        }
.button {
          display: flex;
          justify-content: center;
}
/*THIS IS THE DOCUMENTATION FOR THE BUTTONS AS FAR AS THEIR LAYOUT GOES*/
.leftbutton {
          display: inline-block;
          padding: 0.56%;
          padding-right: 5.221%;
}
/*THIS IS THE DOCUMENTATION FOR THE MIDDLE BUTTON AS FAR AS THEIR LAYOUT GOES*/
.midbutton {
          display: inline-block;
          padding: 0.56%;
}
/*THIS IS THE DOCUMENTATION FOR THE Right BUTTON AS FAR AS THEIR LAYOUT GOES*/
.rightbutton {
          display: inline-block;
          padding: 0.56%;
          padding-left: 5.221%;
}
/*THIS IS THE STARTER CODE FOR THE WEBSITE LAYOUT!!*/
.container {
          display: grid;
          grid-gap: 0.625rem;
          grid-template:
                    "header header header"
                    "main main main"
                    "footer footer footer"
                    / 1fr 2fr 1fr;
}
.video-wrapper {
          width: 100%;
          max-width: 62rem;

          height: auto;
}
.highlight-wrapper {
          width: 100%;
          max-width: 74rem;
          height: auto;
}
iframe {
          width: 100%;
          aspect-ratio: 16/9
}

.caption {
    margin-top: 0.5rem;
    font-size: clamp(1.5rem, 2vw, 2.5rem);
}
.Tbody {
    margin-top: 0.7rem;
    font-size: clamp(0.9rem, 2vw, 1.7rem);
}

.News {
          display: inline-block;
          height: 91%;
          scale: 100%;
          overflow-y: auto;
          width: 100%;
          max-width: 10rem;
          min-width: 5rem;
          border: dashed 3px;
          border-radius: 8px;
          margin-right: 1rem;
}
.Links {
          display: inline-block;
          scale: 100%;
          overflow-y: auto;
          width: 100%;
          max-width: 10rem;
          height: 100%;
          max-height: 10rem;
          border: dashed 3px;
          border-radius: 8px;
}
.Stacktest {
          display: inline-block;
          margin-top: 3rem;
          overflow-y: auto;
          height: 58%;
          scale: 100%;
          width: 100%;
          max-width: 10rem;
          text-align: center;
          border: dashed 3px;
          border-radius: 8px;
}
header {grid-area: header; background-color: black;
}
.leftside {     
          justify-content: right;
}
.rightside {
          display: block;
          scale: 100%;
          width: 100%;
          max-width: 10rem;
          justify-content: left;
          margin-left: 1rem;
          
}
main {grid-area: main;
          position: relative; display: flex; text-align: center;
}
amain {grid-area: amain; border: dotted white 1px; border-radius: 34px; overflow-y: auto; max-height: 40.25rem;
}
footer {grid-area: footer;
}

.aboutcontainer {
          display: grid;
          grid-gap: 0.625rem;
          grid-template:
                    "header"
                    "amain"
                    "footer"
                    / 1fr;
}
.projectscontainer {
          display: grid;
          justify-content: center;
          grid-gap: 0.625rem;
          grid-template:
                    "header"
                    "pmain"
                    "footer"
                    / 1fr;
}
pmain {   grid-area: pmain;
          display: flex;
}