:root {
  --clr1: #ccd9d0;
  --clr2: #b6b7a5;
  --clr3: #97998c;
  --clr4: #a0a881;
  --clr5: #6c795d;
  --clrletter: #384032;
  --clrposition: #4b5543;
}

@font-face {
  font-family: "font";
  src: url("https://static.igem.wiki/teams/5299/barlow-regular.woff")
    format("woff");
  font-weight: normal;
  font-style: normal;
}

* {
  padding: 0;
  margin: 0;
}

@font-face {
  font-family: "font2";
  src: url("https://static.igem.wiki/teams/5299/epilogue-regular.woff")
    format("woff");
  font-weight: normal;
  font-style: normal;
}

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

html {
  overflow-x: hidden;
  scroll-behavior: smooth;
  width: 100%;
  transition: scroll-behavior 5s ease-in-out;
}

html,
body {
  margin: 0;
  padding: 0;
  transition: filter 0.3s ease;
}

body {
  padding: 0;
  margin: 0;
  height: 100vh;
  width: 100%;
  flex-direction: column;
  display: flex;
  align-items: center;
  font-family: "font";
  text-align: center;
  background: var(--clr1);
  background-size: 400% 400%;
  animation: gradient 7s ease infinite;
  height: 100vh;
  color: var(--clrletter);
}

@keyframes gradient {
  0% {
    background-position: 0% 50%;
  }

  50% {
    background-position: 100% 50%;
  }

  100% {
    background-position: 0% 50%;
  }
}

.bg-dark {
  background-color: var(--clr1);
}

/* footer */
footer small {
  font-weight: bold;
}

footer {
  padding: 1.5rem;
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  background-color: var(--clr5);
  width: 100vw;
  color: white;
  border-radius: 25px 25px 0 0;
}

.footerbg {
  background: transparent;
  display: flex;
}

footer a {
  display: inline-block;
  font-weight: bold;
  text-decoration: none;
  color: var(--clr1);
}

footer a:hover {
  text-decoration: underline;
}

.loader {
  background-color: var(--clr1);
  height: 100vh;
  width: 100%;
  position: fixed;
  z-index: 9999;
  display: flex;
  justify-content: center;
  align-items: center;
  transition: opacity 0.5s ease;
}

.loader_gif {
  height: 30rem;
}

.fade-out {
  opacity: 0;
}

p,
li {
  font-size: 1.15rem;
}

.blocker {
  width: 100%;
  align-items: center;
  display: flex;
  height: 100vh;
  justify-content: center;
}

.teamtitle {
  display: block;
  font-size: 8rem;
  background: linear-gradient(
    to left,
    var(--clr2),
    var(--clr3),
    var(--clr4),
    var(--clr5),
    var(--clr2)
  );
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-size: 300% 100%;
  animation: gradientAnimation 10s infinite linear;
}

@keyframes gradientAnimation {
  from {
    background-position: 0% center;
  }

  to {
    background-position: -200% center;
  }
}

.blocker .svg {
  padding: 1rem;
}

/* width */
::-webkit-scrollbar {
  width: 10px;
}

/* Track */
::-webkit-scrollbar-track {
  background: whitesmoke;
}

/* Handle */
::-webkit-scrollbar-thumb {
  background: var(--clr5);
}

.icon {
  width: 1rem;
  fill: currentColor;
  height: 1rem;
  vertical-align: middle;
  margin-left: 0.2rem;
}

.container {
  display: flex;
  justify-content: center;
  padding: 0;
  margin: 0;
  width: 100%;
  flex-direction: column;
}

h1 {
  display: none;
}

.smallp {
  margin-bottom: 0.1rem;
  padding-top: 0;
  padding-bottom: 0;
}

.smallp1 {
  padding-top: 0;
  padding-bottom: 0;
}

.title {
  padding: 1.7rem;
  font-size: 1.25rem;
  display: block;
}

.titleh1 {
  padding: 1rem;
  color: transparent;
  display: block;
  font-weight: 999;
  font-size: 5rem;
  background-image: url("https://static.igem.wiki/teams/5299/resized-unnamed-1.jpg");
  background-size: 200%;
  /* Double the width for movement */
  background-clip: text;
  -webkit-background-clip: text;
  animation-name: a;
  animation-duration: 30s;
  animation-iteration-count: infinite;
}

@keyframes a {
  0% {
    background-position: 0 0;
    /* Start from left */
  }

  50% {
    background-position: 100% 50%;
    /* Move to right */
  }

  100% {
    background-position: 0 0;
    /* Return to left */
  }
}

h2 {
  display: block;
  padding: 1rem;
  font-size: 2.5rem;
}

.titleh3 {
  display: block;
  padding: 0rem;
  font-size: 2.1rem;
}

h4 {
  display: block;
  padding: 0rem;
  font-size: 1.9rem;
}

h5 {
  display: block;
  padding: 0rem;
  font-size: 1.7rem;
}

.row {
  display: flex;
  flex-direction: row;
  gap: 1rem;
  align-items: center;
  justify-content: center;
}

img {
  padding-left: 1rem;
  padding-right: 1rem;
  height: 25rem;
}

.description img {
  border-radius: 25px;
}

.column {
  display: flex;
  flex-direction: column;
}

.biblio {
  font-size: smaller;
  font-weight: 999;
  color: var(--clr5);
}

a {
  color: #32878f;
  font-weight: bold;
  text-decoration: none;
  display: inline;
}

ul li {
  color: black;
  margin: 5px;
}

ul {
  padding: 20px;
}

.disc ul {
  width: 45vw;
  text-align: left;
}

.disc ol {
  width: 45vw;
  text-align: left;
}

.bold {
  font-weight: bold;
}

.italicize {
  font-style: italic;
}

.italic {
  font-style: italic;
}

.totop {
  position: fixed;
  display: block;
  width: 8rem;
  height: 8rem;
  bottom: 3rem;
  right: 3rem;
  z-index: 9999;
  padding: 1rem;
  border: none;
  outline: none;
  cursor: pointer;
  transition: transform 0.3s ease;
  opacity: 0;
  transition: opacity 0.5s ease;
}

.totop.visible {
  opacity: 1;
  /* Fully visible */
}

.totop:hover {
  transform: scale(1.1);
}

h3 {
  font-weight: normal;
  font-weight: bold;
  margin-bottom: 1rem;
  font-size: 1.1rem;
}

.text-column {
  flex: 1;
  padding: 10px;
}

.steps {
  text-align: left;
  margin: 0;
  padding: 0;
  list-style-position: inside;
}

.steps li {
  margin-bottom: 5px;
  padding: 0;
  box-sizing: border-box;
}

.centered-div {
  text-align: left;
  max-width: 80%;
  padding: 20px;
  box-sizing: border-box;
}

.bold {
  font-weight: bold;
}

ol {
  width: 55vw;
  text-align: left;
}

ol p {
  padding: 0;
  margin: 0;
  margin-top: 3rem;
}

ol li {
  margin-bottom: 1rem;
}

.centered-div-row {
  text-align: left;
  display: flex;
  flex-direction: row;
  max-width: 80%;
  padding: 20px;
  box-sizing: border-box;
}

.icon {
  width: 1rem;
  height: 1rem;
  z-index: 999;
  margin-left: 3px;
  padding: 0;
}

p {
  color: var(--clrletter);
}

.container {
  align-items: center;
}

.a {
  display: block;
}

.c .row {
  display: flex;
  flex-direction: row;
}

.circle {
  overflow: visible;
  margin-bottom: 23rem;
  margin-top: 7rem;
  width: 200px;
  height: 200px;
}

.arrow {
  position: relative;
  overflow: visible;
  width: 316.072px;
  height: 326px;
  cursor: pointer;
  transition: background-color 0.3s ease;
  clip-path: polygon(
    283px 36.599px,
    283px 36.599px,
    277.739448px 42.141151px,
    272.729024px 47.407128px,
    268.038076px 52.324817px,
    263.735952px 56.822104px,
    259.892px 60.826875px,
    256.575568px 64.267016px,
    253.856004px 67.070413px,
    251.802656px 69.164952px,
    250.484872px 70.478519px,
    249.972px 70.939px,
    249.972px 70.939px,
    249.571525px 70.615047px,
    248.5784px 69.658256px,
    247.044075px 68.121829px,
    245.02px 66.058968px,
    242.557625px 63.522875px,
    239.7084px 60.566752px,
    236.523775px 57.243801px,
    233.0552px 53.607224px,
    229.354125px 49.710223px,
    225.472px 45.606px,
    201.5px 20.212px,
    200.826px 24.356px,
    200.826px 24.356px,
    200.703277px 25.144295px,
    200.559536px 26.12336px,
    200.398419px 27.265565px,
    200.223568px 28.54328px,
    200.038625px 29.928875px,
    199.847232px 31.39472px,
    199.653031px 32.913185px,
    199.459664px 34.45664px,
    199.270773px 35.997455px,
    199.09px 37.508px,
    199.09px 37.508px,
    197.219659px 49.07142px,
    194.373232px 60.49828px,
    190.590013px 71.71988px,
    185.909296px 82.66752px,
    180.370375px 93.2725px,
    174.012544px 103.46612px,
    166.875097px 113.17968px,
    158.997328px 122.34448px,
    150.418531px 130.89182px,
    141.178px 138.753px,
    141.178px 138.753px,
    138.594351px 140.715002px,
    135.675968px 142.824256px,
    132.552697px 144.997434px,
    129.354384px 147.151208px,
    126.210875px 149.20225px,
    123.252016px 151.067232px,
    120.607653px 152.662826px,
    118.407632px 153.905704px,
    116.781799px 154.712538px,
    115.86px 155px,
    115.86px 155px,
    115.72364px 154.717742px,
    115.58728px 153.901016px,
    115.4532px 152.594894px,
    115.32368px 150.844448px,
    115.201px 148.69475px,
    115.08744px 146.190872px,
    114.98528px 143.377886px,
    114.8968px 140.300864px,
    114.82428px 137.004878px,
    114.77px 133.535px,
    114.5px 112.07px,
    109.5px 116.816px,
    109.5px 116.816px,
    97.078906px 128.602236px,
    83.521688px 141.461608px,
    69.399042px 154.853312px,
    55.281664px 168.236544px,
    41.74025px 181.0705px,
    29.345496px 192.814376px,
    18.668098px 202.927368px,
    10.278752px 210.868672px,
    4.748154px 216.097484px,
    2.647px 218.073px,
    2.647px 218.073px,
    2.658175px 218.334299px,
    2.959px 218.859592px,
    3.527425px 219.624573px,
    4.3414px 220.604936px,
    5.378875px 221.776375px,
    6.6178px 223.114584px,
    8.036125px 224.595257px,
    9.6118px 226.194088px,
    11.322775px 227.886771px,
    13.147px 229.649px,
    13.147px 229.649px,
    15.146551px 231.559772px,
    17.365408px 233.681696px,
    19.753477px 235.966784px,
    22.260664px 238.367048px,
    24.836875px 240.8345px,
    27.432016px 243.321152px,
    29.995993px 245.779016px,
    32.478712px 248.160104px,
    34.830079px 250.416428px,
    37px 252.5px,
    37px 252.5px,
    39.309925px 254.716335px,
    42.0664px 257.35624px,
    45.196975px 260.350565px,
    48.6292px 263.63016px,
    52.290625px 267.125875px,
    56.1088px 270.76856px,
    60.011275px 274.489065px,
    63.9256px 278.21824px,
    67.779325px 281.886935px,
    71.5px 285.426px,
    71.5px 285.426px,
    75.189086px 288.936397px,
    78.951408px 292.522136px,
    82.719562px 296.118639px,
    86.426144px 299.661328px,
    90.00375px 303.085625px,
    93.384976px 306.326952px,
    96.502418px 309.320731px,
    99.288672px 312.002384px,
    101.676334px 314.307333px,
    103.598px 316.171px,
    103.598px 316.171px,
    105.238965px 317.75987px,
    106.81384px 319.26912px,
    108.300095px 320.67811px,
    109.6752px 321.9662px,
    110.916625px 323.11275px,
    112.00184px 324.09712px,
    112.908315px 324.89867px,
    113.61352px 325.49676px,
    114.094925px 325.87075px,
    114.33px 326px,
    114.33px 326px,
    114.436067px 325.690244px,
    114.543616px 324.793952px,
    114.650769px 323.360588px,
    114.755648px 321.439616px,
    114.856375px 319.0805px,
    114.951072px 316.332704px,
    115.037861px 313.245692px,
    115.114864px 309.868928px,
    115.180203px 306.251876px,
    115.232px 302.444px,
    115.5px 278.887px,
    128.5px 274.581px,
    128.5px 274.581px,
    133.780922px 272.80752px,
    138.567096px 271.14372px,
    142.965034px 269.54496px,
    147.081248px 267.9666px,
    151.02225px 266.364px,
    154.894552px 264.69252px,
    158.804666px 262.90752px,
    162.859104px 260.96436px,
    167.164378px 258.8184px,
    171.827px 256.425px,
    171.827px 256.425px,
    193.373652px 243.900587px,
    213.531856px 229.477936px,
    232.198784px 213.298629px,
    249.271608px 195.504248px,
    264.6475px 176.236375px,
    278.223632px 155.636592px,
    289.897176px 133.846481px,
    299.565304px 111.007624px,
    307.125188px 87.261603px,
    312.474px 62.75px,
    312.474px 62.75px,
    313.396003px 56.880278px,
    314.210624px 50.828624px,
    314.911281px 44.695406px,
    315.491392px 38.580992px,
    315.944375px 32.58575px,
    316.263648px 26.810048px,
    316.442629px 21.354254px,
    316.474736px 16.318736px,
    316.353387px 11.803862px,
    316.072px 7.91px,
    315.5px 2.319px,
    283px 36.599px
  );
}

.arrow_no_react {
  position: relative;
  overflow: visible;
  width: 316.072px;
  height: 326px;
  clip-path: polygon(
    283px 36.599px,
    283px 36.599px,
    277.739448px 42.141151px,
    272.729024px 47.407128px,
    268.038076px 52.324817px,
    263.735952px 56.822104px,
    259.892px 60.826875px,
    256.575568px 64.267016px,
    253.856004px 67.070413px,
    251.802656px 69.164952px,
    250.484872px 70.478519px,
    249.972px 70.939px,
    249.972px 70.939px,
    249.571525px 70.615047px,
    248.5784px 69.658256px,
    247.044075px 68.121829px,
    245.02px 66.058968px,
    242.557625px 63.522875px,
    239.7084px 60.566752px,
    236.523775px 57.243801px,
    233.0552px 53.607224px,
    229.354125px 49.710223px,
    225.472px 45.606px,
    201.5px 20.212px,
    200.826px 24.356px,
    200.826px 24.356px,
    200.703277px 25.144295px,
    200.559536px 26.12336px,
    200.398419px 27.265565px,
    200.223568px 28.54328px,
    200.038625px 29.928875px,
    199.847232px 31.39472px,
    199.653031px 32.913185px,
    199.459664px 34.45664px,
    199.270773px 35.997455px,
    199.09px 37.508px,
    199.09px 37.508px,
    197.219659px 49.07142px,
    194.373232px 60.49828px,
    190.590013px 71.71988px,
    185.909296px 82.66752px,
    180.370375px 93.2725px,
    174.012544px 103.46612px,
    166.875097px 113.17968px,
    158.997328px 122.34448px,
    150.418531px 130.89182px,
    141.178px 138.753px,
    141.178px 138.753px,
    138.594351px 140.715002px,
    135.675968px 142.824256px,
    132.552697px 144.997434px,
    129.354384px 147.151208px,
    126.210875px 149.20225px,
    123.252016px 151.067232px,
    120.607653px 152.662826px,
    118.407632px 153.905704px,
    116.781799px 154.712538px,
    115.86px 155px,
    115.86px 155px,
    115.72364px 154.717742px,
    115.58728px 153.901016px,
    115.4532px 152.594894px,
    115.32368px 150.844448px,
    115.201px 148.69475px,
    115.08744px 146.190872px,
    114.98528px 143.377886px,
    114.8968px 140.300864px,
    114.82428px 137.004878px,
    114.77px 133.535px,
    114.5px 112.07px,
    109.5px 116.816px,
    109.5px 116.816px,
    97.078906px 128.602236px,
    83.521688px 141.461608px,
    69.399042px 154.853312px,
    55.281664px 168.236544px,
    41.74025px 181.0705px,
    29.345496px 192.814376px,
    18.668098px 202.927368px,
    10.278752px 210.868672px,
    4.748154px 216.097484px,
    2.647px 218.073px,
    2.647px 218.073px,
    2.658175px 218.334299px,
    2.959px 218.859592px,
    3.527425px 219.624573px,
    4.3414px 220.604936px,
    5.378875px 221.776375px,
    6.6178px 223.114584px,
    8.036125px 224.595257px,
    9.6118px 226.194088px,
    11.322775px 227.886771px,
    13.147px 229.649px,
    13.147px 229.649px,
    15.146551px 231.559772px,
    17.365408px 233.681696px,
    19.753477px 235.966784px,
    22.260664px 238.367048px,
    24.836875px 240.8345px,
    27.432016px 243.321152px,
    29.995993px 245.779016px,
    32.478712px 248.160104px,
    34.830079px 250.416428px,
    37px 252.5px,
    37px 252.5px,
    39.309925px 254.716335px,
    42.0664px 257.35624px,
    45.196975px 260.350565px,
    48.6292px 263.63016px,
    52.290625px 267.125875px,
    56.1088px 270.76856px,
    60.011275px 274.489065px,
    63.9256px 278.21824px,
    67.779325px 281.886935px,
    71.5px 285.426px,
    71.5px 285.426px,
    75.189086px 288.936397px,
    78.951408px 292.522136px,
    82.719562px 296.118639px,
    86.426144px 299.661328px,
    90.00375px 303.085625px,
    93.384976px 306.326952px,
    96.502418px 309.320731px,
    99.288672px 312.002384px,
    101.676334px 314.307333px,
    103.598px 316.171px,
    103.598px 316.171px,
    105.238965px 317.75987px,
    106.81384px 319.26912px,
    108.300095px 320.67811px,
    109.6752px 321.9662px,
    110.916625px 323.11275px,
    112.00184px 324.09712px,
    112.908315px 324.89867px,
    113.61352px 325.49676px,
    114.094925px 325.87075px,
    114.33px 326px,
    114.33px 326px,
    114.436067px 325.690244px,
    114.543616px 324.793952px,
    114.650769px 323.360588px,
    114.755648px 321.439616px,
    114.856375px 319.0805px,
    114.951072px 316.332704px,
    115.037861px 313.245692px,
    115.114864px 309.868928px,
    115.180203px 306.251876px,
    115.232px 302.444px,
    115.5px 278.887px,
    128.5px 274.581px,
    128.5px 274.581px,
    133.780922px 272.80752px,
    138.567096px 271.14372px,
    142.965034px 269.54496px,
    147.081248px 267.9666px,
    151.02225px 266.364px,
    154.894552px 264.69252px,
    158.804666px 262.90752px,
    162.859104px 260.96436px,
    167.164378px 258.8184px,
    171.827px 256.425px,
    171.827px 256.425px,
    193.373652px 243.900587px,
    213.531856px 229.477936px,
    232.198784px 213.298629px,
    249.271608px 195.504248px,
    264.6475px 176.236375px,
    278.223632px 155.636592px,
    289.897176px 133.846481px,
    299.565304px 111.007624px,
    307.125188px 87.261603px,
    312.474px 62.75px,
    312.474px 62.75px,
    313.396003px 56.880278px,
    314.210624px 50.828624px,
    314.911281px 44.695406px,
    315.491392px 38.580992px,
    315.944375px 32.58575px,
    316.263648px 26.810048px,
    316.442629px 21.354254px,
    316.474736px 16.318736px,
    316.353387px 11.803862px,
    316.072px 7.91px,
    315.5px 2.319px,
    283px 36.599px
  );
}

.arrow1 {
  background-color: var(--clr5);
  z-index: 2;
  transform: rotate(90deg) translateX(40px) translateY(200px);
}

.arrow2 {
  background-color: var(--clr4);
  transform: rotate(0deg) translateY(-250px) translateX(47px);
}

.arrow3 {
  background-color: var(--clr2);
  transform: rotate(180deg) translateY(859px) translateX(164px);
}

.arrow4 {
  background-color: var(--clr3);
  transform: rotate(270deg) translateY(84px) translateX(1149px);
}

.arrow:hover {
  background-color: var(--clrletter) !important;
}

.engtitle {
  position: relative;
  font-size: 1.8rem;
  z-index: 10;
  top: 10.5rem;
}

.arrowtitle2 {
  position: absolute;
  top: 10rem;
  left: 10rem;
  color: white;
  background-color: transparent;
  font-weight: 999;
  font-size: 1.5rem;
  z-index: 10;
}

.arrowtitle1 {
  position: absolute;
  top: 10rem;
  left: 11rem;
  color: white;
  font-weight: 999;
  font-size: 1.5rem;
  z-index: 10;
  transform: rotate(-90deg);
}

.arrowtitle3 {
  position: absolute;
  top: 10rem;
  left: 11rem;
  color: white;
  font-weight: 999;
  font-size: 1.5rem;
  z-index: 10;
  transform: rotate(180deg);
}

.arrowtitle4 {
  position: absolute;
  top: 10rem;
  left: 11rem;
  color: white;
  font-weight: 999;
  font-size: 1.5rem;
  z-index: 10;
  transform: rotate(90deg);
}

.paper {
  width: 100%;
  display: flex;
  align-items: center;
  flex-direction: column;
  background: transparent;
  gap: 0.25rem;
}

.paper_bg {
  box-shadow: rgb(108, 121, 93, 0.4) 5px 5px, rgb(108, 121, 93, 0.3) 10px 10px,
    rgb(108, 121, 93, 0.2) 15px 15px, rgb(108, 121, 93, 0.1) 20px 20px,
    rgb(108, 121, 93, 0.05) 25px 25px;
  background: white;
  border-radius: 20px;
  padding: 3rem;
  width: 65vw;
  align-items: center;
  margin-top: 3rem;
  margin-bottom: 4rem;
}

.paper p {
  padding: 1rem;
  text-align: left;
  width: 100%;
}

/* styles.css */
.fade-in {
  opacity: 0;
  transition: opacity 1s;
  /* Adjust the duration as needed */
}

.fade-in.visible {
  opacity: 1;
}

.date {
  background: linear-gradient(to left, var(--clr4), var(--clr5));
  border-radius: 15px;
  padding: 0.4rem;
  padding-left: 0.5rem;
  padding-right: 0.5rem;
  color: white;
  font-size: 1rem;
  white-space: nowrap;
}

.p_three {
  width: 50% !important;
}

.three_container {
  width: 100%;
  padding: 2rem;
  padding-left: 5rem;
  padding-right: 5rem;
}

#hardware_three {
  width: 100%;
  height: auto;
  border-radius: 25px;
  aspect-ratio: 1.25/1;
  background-color: whitesmoke;
  background-image: radial-gradient(rgb(199, 199, 199) 3px, transparent 3px);
  background-size: 20px 20px;
}

.readmore {
  background: var(--clr5);
  width: 50%;
  border-radius: 45px;
  padding: 1rem;
  height: auto;
  margin: 1rem;
}

.readmorebtn {
  width: 100%;
  color: var(--clrletter);
  outline: none;
  border: none;
  padding: 1rem;
  background: var(--clr4);
  border-radius: 25px;
  font-weight: 999;
  font-family: "font";
  font-size: large;
  box-shadow: rgba(0, 0, 0, 0.24) 0px 3px 8px;
  cursor: pointer;
}

.readmore_content {
  display: none;
  flex-direction: column;
  opacity: 0;
  text-align: justify;
  align-items: center;
  height: min-content;
  overflow-y: visible;
  height: auto;
  justify-content: center;
  overflow: hidden;
  padding: 1rem;
  padding-bottom: 2rem;
  padding-top: 2rem;
}

.readmore_content p {
  color: white;
  padding: 1.5rem;
}

.readmore_content h3 {
  color: white;
}

.readmore_content a {
  color: #bad9dc;
}

.readmore_content .biblio {
  color: #bad9dc;
}

.readmore_content.show {
  display: flex !important;

  opacity: 1;
  /* Arbitrary large value to accommodate content */
}

.btn {
  font-family: "font";
  outline: none;
  background-color: var(--clr4);
  color: var(--clrletter);
  padding: 0.7rem;
  padding-left: 1rem;
  padding-right: 1rem;
  border-radius: 25px;
  border: none;
  box-shadow: rgba(0, 0, 0, 0.24) 0px 3px 8px;
  transition: transform 0.3s ease;
  margin: 0.5rem;
  text-decoration: none;
}

.btn:hover {
  transform: scale(1.1);
}

.description img {
  max-width: 90%;
  max-height: 90vh;
  /* 90% of the viewport height */
  width: auto;
  height: auto;
  border-radius: 25px;
  object-fit: contain;
}

#info {
  width: 800px;
  margin-left: auto;
  margin-right: auto;
}

.toggle {
  position: fixed;
  width: 4rem;
  top: 3rem;
  right: 3rem;
  height: 4rem;
  cursor: pointer;
  display: none;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  transition-duration: 0.5s;
  background-color: var(--clr5);
  border-radius: 50%;
  padding: 0.7rem;
  border: 2px solid var(--clr4);
  z-index: 9999;
}

.bars {
  width: 80%;
  height: 0.4rem;
  background-color: var(--clr4);
  border-radius: 4px;
  transition-duration: 0.5s;
}

#bar2 {
  transition-duration: 0.8s;
}

#bar1,
#bar3 {
  width: 70%;
}

.toggle.active .bars {
  position: absolute;
}

.toggle.active #bar2 {
  transform: scaleX(0);
  transition-duration: 0.4s;
}

.toggle.active #bar1 {
  transform: rotate(45deg);
  background-color: #ff7575;
}

.toggle.active #bar3 {
  transform: rotate(-45deg);
  background-color: #ff7575;
}

.toggle.active {
  transform: rotate(180deg);
  border: 2px solid #ff7575;
}

.menu {
  position: fixed;
  bottom: -120%;
  left: 0;
  width: 100vw;
  background-color: var(--clr5);
  transition: bottom 0.5s ease-in-out;
  z-index: 999;
  display: flex;
  flex-direction: column;
  border-radius: 25px 25px 0 0;
  padding: 1rem;
  gap: 1rem;
}

.menu.active {
  bottom: 0;
}

.dropdownmenu {
  display: none;
  justify-content: center;
  align-self: center;
  text-align: center;
  width: 80%;
  z-index: 1;
  gap: 1rem;
  flex-direction: column;
}

.dropdownmenushow {
  display: flex;
}

.menuicon {
  height: 3rem;
  width: 3rem;
  padding: 0.5rem;
}

.menu-item {
  align-items: center;
  display: flex;
  min-height: 4rem;
  justify-content: center;
  color: var(--clrletter);
  font-size: 2rem;
  padding: 0.5rem;
  text-decoration: none;
  background-color: var(--clr4);
  border-radius: 25px;
  width: 100%;
  font-weight: bold;
  box-shadow: 0px 8px 16px 0px rgba(0, 0, 0, 0.2);
}

.banner-container {
  width: 100%;
  overflow: hidden;
  border-radius: 25px;
}

.banner {
  display: flex;
  width: 100%;
}

.banner-content {
  display: flex;
  animation: scroll 20s linear infinite;
}

.banner-content img {
  height: 6rem;
  /* Set a fixed height */
  width: auto;
  /* Allow width to adjust based on aspect ratio */
  max-width: 20rem;
  /* Prevent extremely wide images from taking too much space */
  object-fit: contain;
  /* Ensure the entire image is visible */
  margin-right: 1rem;
}

@keyframes scroll {
  0% {
    transform: translateX(0);
  }

  100% {
    transform: translateX(-50%);
  }
}

/* Responsive Design for smaller screens */

.title-container {
  position: relative;
  font-size: 5rem;
  font-weight: bolder;
  text-align: center;
  padding: 20px 0;
  overflow: visible;
}

.title-layer {
  position: absolute;
  left: 0;
  right: 0;
  top: 50%;
  transform: translateY(-50%);
  transition: all 0.1s ease;
}

.layer-1 {
  color: rgba(182, 183, 165, 0.2);
}

.layer-2 {
  color: rgba(151, 153, 140, 0.4);
}

.layer-3 {
  color: rgba(160, 168, 129, 0.6);
}

.layer-4 {
  color: rgba(108, 121, 93, 0.8);
}

.layer-5 {
  color: var(--clrletter);
}

/* Add this to ensure the container takes up space */
.title-container::before {
  content: "AWESOME TITLE";
  visibility: hidden;
  display: block;
  margin: 4rem;
  height: 0;
}

.teamleaf {
  position: relative;
  width: 8rem;
  height: 8rem;
  z-index: 999;
  padding: 0;
  transform: translateX(0rem) translateY(0rem);
}

.teamleaf2 {
  z-index: 999;
  position: absolute;
  width: 6rem;
  height: 6rem;
  padding: 0;
}

.reference {
  font-size: 1rem;
}

.nopronouns {
  width: 1.4rem;
  height: 1.4rem;
  opacity: 0;
  background-color: var(--clr5);
}

h1 {
  font-family: "font2";
}

.section_container {
  height: 100vh;
  width: 100vw;
  box-sizing: border-box;
  overflow-y: hidden;
}

.section {
  font-family: "font";
  color: var(--clrletter);
  width: 100%;
  height: 100vh;
  display: flex;
  justify-content: center;
  align-items: center;
  font-family: Arial, sans-serif;
  font-size: 2em;
  flex-direction: column;
  color: white;
}

.section p {
  font-family: "font";
}

.tabviewer {
  top: calc(100% / 2 - 60px);
  position: fixed;
  height: auto;
  right: 10px;
}

.tabviewer li {
  list-style-type: none;
  width: 0.7rem;
  height: 0.7 rem;
  background-color: var(--clrletter);
  border-radius: 50%;
  margin: 20px 15px;
  transition: 0.3s ease;
}

#gamecontainer {
  display: flex;
  margin-top: 10rem;
  margin-bottom: 0rem;
  border: 3px solid var(--clrletter);
  background-color: var(--clr5);
}

.hover-text {
  position: relative;
  display: inline-block;
  cursor: pointer;
  color: var(--clr4);
  font-weight: 999;
}

/* Bubble style */
.hover-text .tooltip {
  visibility: hidden;
  width: 120px;
  background-color: var(--clr4);
  color: white;
  text-align: center;
  border-radius: 6px;
  padding: 5px;
  position: absolute;
  bottom: 100%;
  /* Position above the <p> */
  left: 50%;
  transform: translateX(-50%);
  margin-bottom: 0;
  opacity: 0;
  transition: opacity 0.3s;
}

/* Arrow style */
.hover-text .tooltip::after {
  content: "";
  position: absolute;
  top: 100%;
  /* Arrow pointing down */
  left: 50%;
  margin-left: -5px;
  border-width: 5px;
  border-style: solid;
  border-color: var(--clr4) transparent transparent transparent;
}

/* Show the bubble when hovering */
.hover-text:hover .tooltip {
  visibility: visible;
  opacity: 1;
}

.nav_container {
  margin-top: 0.5rem;
}

.metalcont {
  position: relative;
}

.metal {
  position: absolute;
  top: -30px;
  right: -30px;
  opacity: 0.9;
}

.maphome {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
}

.homemapimg {
  width: 65%;
  height: auto;
  z-index: 1;
}

.homemapimg2 {
  position: absolute;
  width: 65%;
  top: 0;
  border-radius: 50%;
  height: auto;
  transition: transform 0.5s ease;
  z-index: 2;
}

.homemapimg2:hover {
  transform: scale(1.1);
}

.section p {
  font-size: 1.5rem;
}

.fifty {
  width: 50%;
  align-items: center;
  display: flex;
  justify-content: center;
  flex-direction: column;
}

#homemapp1 {
  height: 10rem;
  padding-left: 20rem;
}

#homemapp2 {
  height: 10rem;
  display: none;
  padding-left: 20rem;
}

.fifty h1 {
  padding-left: 20rem;
}

table {
  width: 100%;
  border-collapse: separate;
  border-spacing: 0;
  font-family: Arial, sans-serif;
  border: 1px solid #ddd;
  border-radius: 10px;
  overflow: hidden;
  font-family: "font";
}

th,
td {
  border: none;
  padding: 12px;
  text-align: left;
}

th {
  background-color: #94aa9c;
  font-weight: bold;
}

tr:nth-child(even) {
  background-color: #f1f7f3;
}

tr:nth-child(odd) {
  background-color: white;
}

/* Remove individual corner radius as it's now applied to the table */
tr:first-child th:first-child,
tr:first-child th:last-child,
tr:last-child td:first-child,
tr:last-child td:last-child {
  border-radius: 0;
}

/* Add border to cells */
th,
td {
  border-bottom: 1px solid #ddd;
  border-right: 1px solid #ddd;
}

/* Remove right border from last column */
th:last-child,
td:last-child {
  border-right: none;
}

/* Remove bottom border from last row */
tr:last-child td {
  border-bottom: none;
}

.hometitleh1 {
  font-size: 4rem;
  font-family: "font2";
  display: flex;
  color: var(--clrletter);
}

.paper img {
  max-width: 90%;
  height: auto;
}

.accessibility {
  background-color: var(--clr5);
  border-radius: 100%;
  margin-left: 1rem;
  padding: 1rem;
}

.blocker {
  width: 4rem;
  height: 4rem;
  margin-right: 1rem;
}

.bloopers {
  display: none;
  /* Make sure to set display to block when needed */
  width: 4rem;
  height: 4rem;
  border-radius: 100%;
  opacity: 0;
  /* Start with opacity 0 */
  transition: opacity 0.5s, transform 0.5s;
  /* Transition for opacity and transform */
}

.accessibility img {
  width: 4rem;
  height: 4rem;
}

.bloopers:hover {
  opacity: 0.1;
  background-image: url(https://static.igem.wiki/teams/5299/bloopers.png);
  background-position: center;
  background-size: contain;
  background-repeat: no-repeat;
}

.code_card {
  background-color: #414e44;
  width: 80%;
  /* Background color for the card */
  color: white;
  /* Text color */
  border-radius: 8px;
  /* Rounded corners */
  padding: 0.5rem;
  font-size: 1.25rem;
  font-weight: 999;
  /* Padding around the card */
}

.readmore_content.show .code_card {
  margin-bottom: 20px;
}

.code {
  background-color: #282828;
  /* Background color for the code section */
  color: #b2ebb7;
  /* Code text color */
  text-align: left;
  /* Align text to the left */
  border-radius: 8px;
  /* Rounded corners */
  overflow-x: auto;
  /* Enable horizontal scrolling if needed */
}

.code pre {
  margin: 0;
  /* Remove default margin */
  padding: 1rem;
  /* Padding inside the pre block */
  font-size: 1.25rem;
  /* Font size for the code */
  white-space: pre-wrap;
  /* Preserve whitespace and wrap lines */
  word-wrap: break-word;
  /* Break long words to prevent overflow */
}

.left {
  opacity: 0;
  filter: blur(5px);
  transform: translateX(-100%);
  transition: all 1s;
}

.right {
  opacity: 0;
  filter: blur(5px);
  transform: translateX(100%);
  transition: all 1s;
}

.top {
  opacity: 0;
  filter: blur(5px);
  transform: translateY(-100%);
  transition: all 1s;
}

.bottom {
  opacity: 0;
  filter: blur(5px);
  transform: translateY(100%);
  transition: all 1s;
}

.show {
  opacity: 1;
  filter: blur(0);
  transform: translateX(0);
}

.homemapcontainer p {
  font-size: 1.5rem;
}

#codeicon {
  width: auto;
  height: 2.5rem;
  padding: 0.75rem;
  margin: 0.25rem;
  background-color: #323b34;
  border-radius: 5px;
  transition: all 0.2s;
}

#codeicon:hover {
  transform: scale(1.1);
  cursor: pointer;
}

.file_name {
  color: #b2ebb7;
  margin: 0;
}

.code_card_header {
  justify-content: space-between;
  display: flex;
}

#igem-attribution-form {
  background-color: white;
  width: 100%;
  padding: 1rem;
}

.attributions {
  padding: 1rem;
  background-color: blue;
  display: flex;
  justify-content: center;
  align-items: center;
  flex-direction: column;
}

iframe {
  box-sizing: border-box;
  width: 100%;
  height: 100%;
  border: none;
  border-radius: 25px;
}

.footer img {
  padding: 1rem;
}

.card_container {
  display: flex;
  justify-content: center;
  padding: 1rem;
  position: relative;
  z-index: 1;
}

.image_container {
  position: relative;
  width: 17vw;
  height: auto;
}

.pfp {
  display: block;
  width: 100%;
  height: 27rem;
  padding: 0;
  object-fit: cover;

  border-radius: 45px;
}

.teamcard:hover {
  transform: scale(1.1);
}

.teamcard {
  position: static;
  width: min-content;
  height: min-content;
  display: inline-block;
  background: radial-gradient(circle, var(--clr5), var(--clr4));
  padding: 0.5rem;
  border-radius: 60px;
  box-shadow: rgba(0, 0, 0, 0.24) 0px 3px 8px;
  transition: all 0.3s ease;
}

.connection_icons {
  position: absolute;
  bottom: 1rem;
  right: 1rem;
  padding: 0.5rem;
  bottom: 0;
  right: 0;
  display: flex;
  flex-direction: column;
  gap: 5px;
  background-color: var(--clr4);
  border-radius: 25px 0 25px 0;
}

.connection_icons a {
  text-decoration: none;
  background-color: transparent;
  color: var(--clrletter);
  padding: 3px;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 2.5rem;
  height: 2.5rem;
  transition: transform 0.3s ease;
}

.connection_icon img {
  width: 1.9rem;
  height: auto;
  padding: 0;
  border-radius: 0;
}

.connection_icons a:hover {
  transform: scale(1.1);
}

.name {
  display: block;
  text-align: center;
  font-size: 1.3rem;
  margin: 0;
  color: var(--clrletter);
  font-family: "font";
}

.position {
  font-family: "font";
  display: block;
  text-align: center;
  font-size: 1.25rem;
  margin-bottom: 1rem;
  color: var(--clrposition);
}

.pronouns {
  display: block;
  text-align: center;
  margin: 0;
  font-size: 1.5rem;
  color: var(--clrposition);
  font-family: "font";
}

.image_container {
  width: 17vw;
  height: auto;
  position: relative;
  margin: 1rem;
}

.teamrow {
  display: flex;
  flex-direction: row;
}

.notch {
  padding-left: 5rem !important;
}

.notch2 {
  padding-left: 10rem !important;
}

.sustainable img {
  width: 50%;
}

.Integrated .row {
  white-space: nowrap;
}

.Integrated h3 {
  font-weight: normal;
  font-weight: bold;
  margin-bottom: 1rem;
  font-size: 1.3rem;
}

.duo {
  display: flex;
  flex-direction: row;
}

.polaroid {
  width: 17vw;
  transform: rotate(0deg);
}

.duo {
  display: flex;
  flex-direction: row;
  transform: scale(0.7);
}

.duo img:first-child {
  transform: rotate(0deg);
}

.duo img:last-child {
  transform: rotate(-0deg);
  margin-top: 3rem;
}

.Integrated .titleh3 {
  font-size: 2.1rem;
}

.book {
  width: 37.5rem;

  height: 25rem;

  position: relative;
  perspective: 1500px;
  transition: width 0.6s;
  aspect-ratio: 2 / 3;
  margin-top: 5rem;
}

.book.single-page {
  width: 300px;
}

.page {
  position: absolute;
  width: 50%;
  height: 100%;
  border-radius: 0;
  transition: transform 0.6s, left 0.6s;
  transform-origin: left center;
  transform-style: preserve-3d;
  background-color: gray;

  left: 50%;
}

.book.single-page .page {
  width: 100%;
  left: 0;
}

.page-front,
.page-back {
  position: absolute;
  width: 100%;
  height: 100%;
  backface-visibility: hidden;
  display: flex;
  justify-content: center;
  align-items: center;
  font-size: 24px;
  color: #333;
  padding: 0;

  box-sizing: border-box;
}

.page-back {
  transform: rotateY(180deg);
  background-color: #f9f9f9;
}

.page.flipped {
  transform: rotateY(-180deg);
}

.buttons {
  display: flex;
  flex-direction: row;
  justify-content: center;
  margin-top: 3rem;
}

#prevBtn100,
#nextBtn100,
#prevBtn101,
#nextBtn101,
#prevBtn102,
#nextBtn102,
#prevBtn103,
#nextBtn103 {
  background-color: transparent;
  outline: none;
  border: none;
  color: white;
  font-weight: 999;
  border-radius: 25px;
  padding: 10px 20px;
  align-items: center;
  margin: 0 10px;
  font-size: 16px;
  cursor: pointer;
}

button img {
  width: 5rem;
}

.page img {
  object-fit: cover;
  max-width: 100%;
  padding: 0;
  border-radius: 0 !important;
}

.video {
  width: 100%;
  height: 60vh;
}

.hardware img {
  border-radius: 45px;
}

.half {
  width: 50%;
}

.Integrated .readmore_content img {
  width: 70%;
}

.parallax {
  padding: 0;
  overflow: hidden;
}

.parallax img {
  object-fit: cover;
  position: absolute;
  padding: 0;
  top: 0;
  left: 0;
  width: 100%;
  height: 100vh;
}

.par {
  scale: 1.1;
}

.fade {
  z-index: 8;

  top: none;
  bottom: 0;
}

.t1 {
  z-index: 7;
}

.t2 {
  z-index: 6;
}

.t3 {
  z-index: 5;
}

.t4 {
  z-index: 4;
}

.t5 {
  z-index: 3;
}

.t6 {
  z-index: 2;
}

.bg {
  z-index: 1;
}

.homemapcontainer {
  display: flex;
  flex-direction: row;
  justify-content: center;
  align-items: center;
  position: relative;
  z-index: 10;
  width: 100%;
  height: 100vh;
  background-color: var(--clr2);
}

.cube {
  height: 100vh;
}

.s1,
.s4,
.s3,
.s2 {
  position: relative;
}

.s1 img,
.s4 img,
.s3 img,
.s2 img {
  width: 100%;
  height: auto;
  position: absolute;
  top: 0;
  left: 0;
  z-index: 20;
  padding: 0;
  margin: 0;
}

.placeholder {
  width: 100%;
  height: auto;
  display: flex;
  align-items: center;
  justify-content: center;
}

.abox {
  position: relative;
  z-index: 30;
  width: 30vw;
}

.abox p {
  font-size: 1.5rem;
}

.abox h1 {
  font-size: 4rem;
  display: block;
}

.abox1 {
  left: 27vw;
}

.abox2 {
  color: var(--clr2);
  top: 10vw;
  right: 27vw;
}

.abox2 p {
  color: var(--clr2);
}

.abox3 {
  color: var(--clr2);
  top: 5vw;
}

.abox3 p {
  color: var(--clr2);
}

.abox4 {
  left: 27vw;
}

.homefooter {
  height: 100vh;
  width: 100%;
  position: relative;
  background-color: var(--clr2);
}

.lead2 {
  width: 100%;
  height: auto;
  padding: 0;
  margin: 0;
}

.s5container {
  position: relative;
}

.acenter {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translateX(-50%) translateY(-50%);
  z-index: 10;
  align-items: center;
  display: flex;
  flex-direction: column;
  justify-content: center;
}

.gamebox {
  background-color: rgb(255, 255, 255);
  border-radius: 25px;
  text-align: left;
  padding: 2rem;
  margin: 3rem;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  box-shadow: rgb(108, 121, 93, 0.4) 5px 5px, rgb(108, 121, 93, 0.3) 10px 10px,
    rgb(108, 121, 93, 0.2) 15px 15px, rgb(108, 121, 93, 0.1) 20px 20px,
    rgb(108, 121, 93, 0.05) 25px 25px;
}

.box {
  background-color: rgba(255, 255, 255, 0.712);
  border-radius: 25px;
  text-align: left;
  padding: 1rem;

  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
}

.box2 {
  background-color: rgba(255, 255, 255, 0.712);
  border-radius: 25px;
  text-align: left;
  padding: 1rem;
  margin-top: 5vh;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  width: 50%;
}

.box h3 {
  margin: 1rem;
}

.button1 {
  background: var(--clr4);
  border-radius: 25px;
  padding: 1rem;
  font-size: 1.5rem;
  font-weight: 300;
  border: none;
  outline: none;
  padding-left: 1.5rem;
  padding-right: 1.5rem;
  box-shadow: rgba(0, 0, 0, 0.35) 0px 5px 15px;
  color: white;
  transition: all 0.3s ease;
  cursor: pointer;
}

.button1:hover {
  transform: scale(1.1);
}

.s5container {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
}

.bigp {
  font-size: 2.1rem;
}

.edu img {
  width: 100%;
}
.award img {
  width: 10rem;
}
.award {
  display: flex;
  flex-direction: row;
  text-align: left;
  align-items: center;
}
.award img {
  transition: all 0.3s ease-in-out;
}
.award:hover img {
  transform: scale(1.2);
}
.awards {
  display: flex;
  flex-direction: column;
  gap: 2rem;
}
.award p {
  font-weight: 999;
  font-size: 2rem;
  background-color: #fef2bf;
  border-radius: 25px;
  border: 5px solid #f5d47a;
}
#startpage {
  background-color: var(--clr5);
  position: absolute;
  top: 0;
  left: 0;
  width: 100vw;
  height: 100vh;
  z-index: 9999;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
}
#start {
  background-color: var(--clr4);
  color: white;
  padding: 0.5rem;
  padding-left: 3rem;
  padding-right: 3rem;
  border: none;
  font-size: 3rem;
  border-radius: 25px;
  transition: all 0.3s ease-in-out;
}
#start:hover {
  transform: scale(1.1);
}
@media only screen and (max-width: 640px) {
  .paper_bg {
    width: 95vw;
  }
  body {
    overflow-x: hidden;
  }
  .fifty h1 {
    padding-left: 0;
  }

  .fifty {
    width: 100%;
  }

  .paper p {
    padding: 1rem;
  }

  .circle {
    transform: scale(0.5);
  }

  /* Reduce font sizes for smaller screens */
  .hometitle,
  .teamtitle {
    font-size: 5rem;
  }

  .title,
  .titleh1,
  .titleh2,
  .titleh3,
  p,
  li {
    font-size: 1rem;
    padding: 0.3rem;
  }

  .name,
  .position,
  .pronouns {
    font-size: 0.9rem;
  }

  /* Adjust card and image sizes */
  .image_container {
    width: 50vw;
  }

  .teamcard {
    padding: 0.3rem;
  }

  /* Make sure the footer fits well */
  footer {
    padding: 0.5rem;
    text-align: center;
  }

  .footerbg {
    flex-direction: column;
  }

  .totop {
    width: 4rem;
    height: 4rem;
    bottom: 1.5rem;
    border-radius: 0;
    right: 1.5rem;
  }

  /* Handle text alignment and overflow issues */
  .centered-div,
  .centered-div-row {
    padding: 1rem;
    max-width: 100%;
  }

  .nav_container {
    display: none;
  }

  .totop {
    display: none;
  }

  .toggle {
    display: flex;
  }

  .titleh1 {
    font-size: 1.5rem;
  }

  .hometitleh1 {
    font-size: 2.8rem;
  }

  h2 {
    font-size: 2.5rem;
  }

  .titleh3 {
    font-size: 1.2rem;
  }

  #homemapp1 {
    padding-left: 0;
    height: auto;
    width: 50vw;
  }

  #homemapp2 {
    padding-left: 0;
    height: auto;
    width: 90vw;
  }

  img {
    padding-left: 1rem;
    padding-right: 1rem;
  }

  .imgtree {
    height: auto;
    width: 12rem;
  }

  .imgdisk1 {
    height: auto;
    width: 12rem;
  }

  .imgdisk4 {
    height: auto;
    width: 12rem;
  }

  .leaf {
    display: none;
  }

  .side-nav {
    display: none;
  }

  .teamrow {
    flex-direction: column;
  }

  .homemapcontainer {
    width: 100vw;
  }

  .abox h1,
  h2,
  .titleh3,
  h3 {
    font-size: small;
  }

  .abox p {
    font-size: x-small;
  }

  .abox {
    background: white;
    padding: 1rem;
    border-radius: 25px;
  }

  .box p,
  h4 {
    font-size: x-small;
  }

  .button1 {
    font-size: x-small;
  }

  .homemapimg2,
  .homemapimg {
    width: 50vw;
  }

  .fifty p {
    font-size: x-small;
    width: 50vw;
  }

  .fifty h1 {
    font-size: small;
  }
}
.warning {
  color: red;
  font-size: 10rem;
}

.warningp {
  width: 80vw;
}
video {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.h1 {
  padding: 1rem;
  font-weight: 999;
  font-size: 5rem;
}
.blooper-container {
  top: 10rem;
  position: relative;
  z-index: 1;
  flex-direction: column;
  gap: 1rem;
  justify-content: center;
  align-items: center;
  display: none;
}
.blooper-container img {
  border-radius: 25px;
  width: 35%;
  height: auto;
}