/* CSS is how you can add style to your website, such as colors, fonts, and positioning of your
   HTML content. To learn how to do something, just try searching Google for questions like
   "how to change link color." */
:root {
  font-size: 62.5%;

  --flickertime: 2s;
  --circles_rows_index: 1000;
  --circles_rows_watched: 10000;

  --screen-min-width: 30;
  --screen-max-width: 120;

  --h1-min-size: 4;
  --h1-max-size: 7.8;

  --h2-min-size: 3.5;
  --h2-max-size: 6.8;

  --h3-min-size: 2.8;
  --h3-max-size: 5;

  --h4-min-size: 0.5;
  --h4-max-size: 3;

  --body-min-size: 1.5;
  --body-max-size: 2;

  --chart-label-min-size: 2.3;
  --chart-label-max-size: 3;

  --h1-slope: calc(
    (var(--h1-max-size) - var(--h1-min-size)) /
      (var(--screen-max-width) - var(--screen-min-width))
  );
  --h1-intersection: calc(
    (-1 * var(--screen-min-width) * var(--h1-slope)) + var(--h1-min-size)
  );
  --h1-preferred: calc(var(--h1-intersection) + (var(--h1-slope) * 100));

  --h1-min: calc(var(--h1-min-size) * 1rem);
  --h1-mid: calc(var(--h1-preferred) * 1vw);
  --h1-max: calc(var(--h1-max-size) * 1rem);

  --h1-font-size: clamp(var(--h1-min), var(--h1-mid), var(--h1-max));

  --h2-slope: calc(
    (var(--h2-max-size) - var(--h2-min-size)) /
      (var(--screen-max-width) - var(--screen-min-width))
  );
  --h2-intersection: calc(
    (-1 * var(--screen-min-width) * var(--h2-slope)) + var(--h2-min-size)
  );
  --h2-preferred: calc(var(--h2-intersection) + (var(--h2-slope) * 100));

  --h2-min: calc(var(--h2-min-size) * 1rem);
  --h2-mid: calc(var(--h2-preferred) * 1vw);
  --h2-max: calc(var(--h2-max-size) * 1rem);

  --h2-font-size: clamp(var(--h2-min), var(--h2-mid), var(--h2-max));

  --h3-slope: calc(
    (var(--h3-max-size) - var(--h3-min-size)) /
      (var(--screen-max-width) - var(--screen-min-width))
  );
  --h3-intersection: calc(
    (-1 * var(--screen-min-width) * var(--h3-slope)) + var(--h3-min-size)
  );
  --h3-preferred: calc(var(--h3-intersection) + (var(--h3-slope) * 100));

  --h3-min: calc(var(--h3-min-size) * 1rem);
  --h3-mid: calc(var(--h3-preferred) * 1vw);
  --h3-max: calc(var(--h3-max-size) * 1rem);

  --h3-font-size: clamp(var(--h3-min), var(--h3-mid), var(--h3-max));

  --h4-slope: calc(
    (var(--h4-max-size) - var(--h4-min-size)) /
      (var(--screen-max-width) - var(--screen-min-width))
  );
  --h4-intersection: calc(
    (-1 * var(--screen-min-width) * var(--h4-slope)) + var(--h4-min-size)
  );
  --h4-preferred: calc(var(--h4-intersection) + (var(--h4-slope) * 100));

  --h4-min: calc(var(--h4-min-size) * 1rem);
  --h4-mid: calc(var(--h4-preferred) * 1vw);
  --h4-max: calc(var(--h4-max-size) * 1rem);

  --h4-font-size: clamp(var(--h4-min), var(--h4-mid), var(--h4-max));

  --body-slope: calc(
    (var(--body-max-size) - var(--body-min-size)) /
      (var(--screen-max-width) - var(--screen-min-width))
  );
  --body-intersection: calc(
    (-1 * var(--screen-min-width) * var(--body-slope)) + var(--body-min-size)
  );
  --body-preferred: calc(var(--body-intersection) + (var(--body-slope) * 100));

  --body-min: calc(var(--body-min-size) * 1rem);
  --body-mid: calc(var(--body-preferred) * 1vw);
  --body-max: calc(var(--body-max-size) * 1rem);

  --body-font-size: clamp(var(--body-min), var(--body-mid), var(--body-max));

  --chart-label-slope: calc(
    (var(--chart-label-max-size) - var(--chart-label-min-size)) /
      (var(--screen-max-width) - var(--screen-min-width))
  );
  --chart-label-intersection: calc(
    (-1 * var(--screen-min-width) * var(--chart-label-slope)) +
      var(--chart-label-min-size)
  );
  --chart-label-preferred: calc(
    var(--chart-label-intersection) + (var(--chart-label-slope) * 100)
  );

  --chart-label-min: calc(var(--chart-label-min-size) * 1rem);
  --chart-label-mid: calc(var(--chart-label-preferred) * 1vw);
  --chart-label-max: calc(var(--chart-label-max-size) * 1rem);

  --chart-label-font-size: clamp(
    var(--chart-label-min),
    var(--chart-label-mid),
    var(--chart-label-max)
  );
}

html {
  scroll-behavior: smooth;
}

body {
  font-size: 1.5625rem;
  background-color: #090909;
  color: #d7e5dd;
  font-family: Courier;
  text-align: center;
  margin: 0;
  /*position: relative;*/
}

.normalbg {
  background-image: url(stars.jpg);
}

#bodybackground {
  background-image: url(stars.jpg);
  width: 100%;
  height: 75%;
  background-color: #090909;
  background-size: 100% 100%;
  background-blend-mode: luminosity;
  position: absolute;
  inset: 0;
}

#bodyparallaxcontainer {
    position: relative;
  min-height: 100vh;
}

#bodytext {
  min-height: 100vh;
    height: max-content;
    /*position: relative;*/

}

/*
#moviecontainer {
  position: relative;
}
*/

#moviecontainer {
  visibility: hidden;
}

#moviecontainer.hidespoilers .spoil{
  display: none;
}

#moviecontainer:not(.hidespoilers) .spoil{
  display: inline-block;
}

h1, h2, h3 {
  font-family: Garamond;
}
h1 {
  font-size: var(--h1-font-size); /* for 1200 */
  color: #faf6f2;
  text-shadow: 6px 6px 2px #161616;
}

h2 {
  font-size: var(--h2-font-size);
  color: #999999;
  text-shadow: 2px 2px 2px #161616;
}

h3 {
  font-size: var(--h3-font-size);
  color: #e0e9e0;
  text-shadow: 1px 1px 1px #161616;
}

.movie {
  border: 0.3rem dotted #576e53;
  width: 95%;
  margin: auto;
  margin-bottom: calc(1 * var(--h4-font-size));
  font-size: max(1rem, calc(0.75 * var(--h4-font-size)));
}

.heading {
  background-color: rgba(27, 27, 27, 0.75);
  margin: auto;
  margin-top: 25px;
  padding-bottom: 10px;
  /*position: relative;*/
  /*z-index: 100;*/
}

.watchedheading {
  /*blur to top edge?*/
  z-index: 2;
}

.indexheading {
  box-shadow: 0 0 2rem calc(4.5 * var(--h4-font-size)) rgba(27, 27, 27, 0.75);
}

.otherheading {
  box-shadow: 0 0 1rem calc(4 * var(--h4-font-size)) rgba(27, 27, 27, 0.75);
  z-index: -1;
}

.spoil {
  font-size: var(--body-font-size);
}

#floofing {
  background-image: url(https://www.google.co.in/images/branding/googlelogo/2x/googlelogo_color_272x92dp.png);
  background-repeat: no-repeat;
  background-blend-mode: screen;
  background-color: rgba(255, 230, 184, 0.66);
  position: relative;
  height: 100%;
  height: 300px;
  width: 960px;
}

#y2k {
  background-color: rgba(0, 0, 53, 0.3);
}

#bigbutton {
  color: #e0e9e0;
  background: rgba(54, 69, 51, 0.75);
  border-color: #758e75;
  font-family: Garamond;
  font-weight: bold;
  padding: 1.5rem;
  padding-right: 2.5rem;
  padding-left: 2.5rem;
  text-shadow: 1px 1px 1px #161616;
  border: 3px dashed;
  font-size: var(--h1-font-size);
  transition:
  background 1s,
  box-shadow 1s;
}

#bigbutton:hover {
  box-shadow: #576e53 0px 0px 8rem;
  background: #1c211b;
}

.indexbuttons {
  display: flex;
  justify-content: space-evenly;
  align-content: space-between;
  padding-top: var(--h3-font-size);
  height: calc(100vh - 7.5 * var(--h1-font-size));
  position: relative;
  z-index: 99999;
}

#menu {
  display: flex;
  position: sticky;
  top: 0;
  background-color: rgba(27, 27, 27, 0.96);
  padding-top: 2rem;
  padding-bottom: 1rem;
  box-shadow: 0 0 1rem calc(var(--h4-font-size)) rgba(27, 27, 27, 0.97);
  height: calc(1.5 * var(--h4-font-size));
  justify-content: space-evenly;
  align-items: center;
  z-index: 1;
}

.menubutton {
  font-family: Courier;
  background-color: #576e53;
  color: white;
  font-size: var(--h4-font-size);
  border: 0.1rem groove #e0e9e0;
  text-decoration: none;
  padding: 0.8rem;
  margin: auto;
  transition: all 0.6s;
  box-shadow: none;
  position: relative;
  clip-path: polygon(-100% 0%, 200% 0%, 200% 100%, -100% 100%);
}



.menubutton:hover {
  box-shadow: #576e53 0px 0px 14px !important;
  background: #546152 !important;
}


.menubutton::before {
  width: 50%;
  height: 0%;
  background:  radial-gradient(closest-side, white, rgba(0,0,0,0)), url('grainy.svg');
  filter: contrast(480%) brightness(900%);
  position: absolute;
  mask: radial-gradient(closest-side, white, rgba(0,0,0,0)) alpha;
  top: 50%;
  bottom: 50%;
  left: -150%;
  right: 150%;
  content: "";
  transition: all 1s ease;
  pointer-events: none;
  opacity: 0;
  z-index: 1;
}

.menubutton:hover::before {
  left: 25%;
  right: 25%;
  opacity: 0.5;
  height: 70%;
  top: 15%;
  bottom: 15%;
  transition: left 1s, right 1s, height 1s, width 1s, top 1s, bottom 1s, opacity 1s;
  display: inline-block;
}

#menu .menubutton#badbutton {
  clip-path: polygon(0% 0%, 200% 0%, 200% 100%, 0% 100%);
}


#menu > a:has(+ a > .menubutton:hover) > .menubutton::before {
  top: 50%;
  bottom: 50%;
  left: 200%;
  right: 400%;
}

#allthecircles {
  display: grid;
  grid-template-columns: repeat(100, 1%);
  grid-template-rows: repeat(
    calc(--circles_rows_index/100),
    calc(100% * 100 / --circles_rows_index)
  );
  z-position: 200;
  width: 100%;
  height: 100%;
  position: absolute;
  left: 0;
  top: 0;
}


.blinkingcircle {
  border: solid 2px;
  height: 0%;
  width: 40%;
  margin: 10%;
  border-radius: 50%;
  padding-bottom: 40%;
  background: #576e53;
  opacity: 0;
  animation-iteration-count: infinite, infinite;
  animation-timing-function: linear, ease-in;
}

.blinkingcircle.pale {
  box-shadow: 0px 0px 18px #e1e5e0;
}

.blinkingcircle.bright {
  box-shadow: 0px 0px 12px #e1e5e0;
}

.blinkingcircle.slow {
  animation-duration: 17s, 9s;
}

.blinkingcircle.med {
  animation-duration: 9s, 7s;
}

.blinkingcircle.fast {
  animation-duration: 7s, 5s;
}

.blinkingcircle.pale.slow {
  animation-name: blinkerpale, shivermore;
}

.blinkingcircle.pale.med, .blinkingcircle.pale.fast {
  animation-name: blinkerpale, shiver;
}

.blinkingcircle.bright.slow {
  animation-name: blinkerbright, shivermore;
}

.blinkingcircle.bright.fast, .blinkingcircle.bright.med {
  animation-name: blinkerbright, shiver;
}

.foot {
  position: absolute;
  width: 30px;
  height: 70px;
  z-index: 100000;
  opacity: 0;
  animation: footfade 1.9s;
}

@keyframes footfade {
  0% {
    opacity: 0;
  }
  21% {
    opacity: 0.35;
  }
  100% {
    opacity: 0;
  }
}

.currmenusection {
  box-shadow: #576e53 0px 0px 20px !important;
  background-color: #788b75 !important;
}

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

#graph {
  padding: calc(var(--h1-font-size));
  padding-top: clamp(1rem, 0.5 * calc(var(--h4-font-size)), 3.5rem);
  padding-bottom: clamp(1rem, 0.5 * calc(var(--h4-font-size)), 3.5rem);
  height: clamp(
    1rem,
    calc(80vh - 2 * var(--h1-font-size)),
    calc(8 * var(--h1-font-size))
  );
  display: block;
  position: relative;
  z-index: 102;
}

@keyframes blinkerpale {
  0% {
    opacity: 0.09;
  }
  50% {
    opacity: 0;
  }
  100% {
    opacity: 0.09;
  }
}

@keyframes blinkerbright {
  0% {
    opacity: 0;
  }
  50% {
    opacity: 0.12;
  }
  100% {
    opacity: 0;
  }
}

@keyframes shiver {
  0% {
    transform: translate(0);
  }
  50% {
    transform: translate(2px, 0);
  }
  100% {
    transform: translate(0);
  }
}

@keyframes shivermore {
  0% {
    transform: translate(0);
  }
  50% {
    transform: translate(5px, 0);
  }
  100% {
    transform: translate(0);
  }
}

#spoilerbutton {
  font-family: Courier;
  background-color: #364533;
  color: white;
  text-decoration: none;
  font-size: var(--h4-font-size);
  border: 2px groove #e0e9e0;
  padding: min(var(--h4-font-size), 2rem) min(var(--h4-font-size), 2rem);
  border-radius: 50%;
  font-weight: bold;
}

#spoilerbutton:hover {
  box-shadow: #576e53 0px 0px 14px !important;
  background: #2d3a2b !important;
  transition: all 0.6s;
}

#calendarimage {
  border-radius: 25%;
}

#calendarimage:hover {
  box-shadow: #576e53 0px 0px 14px !important;
  background: #2d3a2b !important;
  transition: all 0.6s;
}

#graphtype {
  position: absolute;
  top: var(--h4-font-size);
  left: var(--h4-font-size);
  display: grid;
  grid-template-columns: 2;
  grid-template-rows: 4;
  z-index: 200;
  column-gap: 2rem;
  row-gap: 1rem;
}

#graphinstructions {
  position: absolute;
  top: var(--h4-font-size);
  right: calc(2 * var(--h1-font-size));
  font-family: Garamond;
  font-size: calc(0.8 * var(--chart-label-font-size));
  z-index: 200;
}

#graphinst {
  grid-column-start: 1;
  grid-column-end: 2;
  grid-row-start: 6;
  grid-row-end: 7;
  font-family: Garamond;
  font-size: calc(0.6 * var(--chart-label-font-size));
  display: none;
}

#countriesgraph {
  display: flex;
  z-index: 3;
  opacity: 100%;
  color: black;
  flex-wrap: wrap;
  align-content: start;
  justify-content: space-around;
  position: relative;
}

#countrydesc {
  column-count: 1;
  grid-template-columns: repeat(
    auto-fill,
    calc(20 * 0.8 * var(--body-font-size))
  );
  font-size: calc(0.8 * var(--body-font-size));
  place-content: center;
  padding-top: clamp(2rem, calc(var(--h4-font-size)), 7rem);
  position: relative;
  transition: opacity 0.07s ease-out;
  flex-wrap: wrap;
  padding-bottom: clamp(2rem, calc(var(--h4-font-size)), 7rem);
}

#countrydesc.countrydescgrid {
  display: grid;
}

#countrydesc:not(.countrydescgrid) {
  display: flex;
  justify-content: space-around;
}

#countrydesc.fadedout {
  opacity: 0;
}

#countrydesc.fadedin {
  opacity: 1;
}


.graphusingmouse,
.graphviewingcountry,
.countryabbrev,
#shortfuck {
  display: none;
}

.graphusingtap,
.graphviewingyear,
#longfuck {
  display: inline-block;
}
.countrycircle {
  transition:
    width 2.25s ease-out,
    height 2.25s ease-out,
    font-size 2.25s ease-out,
    background 2.25s ease-out,
    box-shadow 2s ease-out,
    opacity 2.25s ease-out,
    filter 2.25s ease-out,
    border 2.25s ease-out;
  background: #81947e;
  height: calc(1.5 * var(--h1-font-size));
  width: calc(1.5 * var(--h1-font-size));
  border: solid #81947e 1px;
  border-radius: 50%;
  display: grid;
  place-content: center;
  place-items: center;
  font-size: calc(0.8 * var(--body-font-size));
  opacity: 0.8;
  box-shadow: #81947e 0px 0px 6px 1px;
}

.graphtypetext {
  grid-column-start: 1;
  grid-column-end: 2;
  grid-row-start: 1;
  grid-row-end: 5;
  align-self: center;
  font-family: Garamond;
  font-size: calc(0.8 * var(--chart-label-font-size));
}

.allbutton {
  grid-row-start: 1;
  grid-row-end: 2;
  background-color: rgba(129, 148, 126, 1);
  border-color: rgba(129, 148, 126, 1);
}

.bluebutton {
  grid-row-start: 2;
  grid-row-end: 3;
  background-color: #83cee8;
  border-color: #83cee8;
}

.foundbutton {
  grid-row-start: 3;
  grid-row-end: 4;
}

.graphbutton {
  font-family: Courier;
  font-size: calc(0.5 * var(--chart-label-font-size));
  border-radius: 2rem;
  font-weight: bold;
  box-shadow: 0 0.25rem rgb(64, 64, 64);
  grid-column-start: 2;
  grid-column-end: 3;
}

.graphbutton:active {
  box-shadow: 0 0.125rem rgb(27, 27, 27);
  transform: translateY(0.125rem);
}

.seeingcountry {
  height: calc(2 * var(--h1-font-size));
  width: calc(2 * var(--h1-font-size));
  font-size: calc(1 * var(--body-font-size));
  background: #a6b4a4;
  border: solid #a6b4a4 1px;
  box-shadow: #a6b4a4 0px 0px 5px 8px;
  opacity: 0.65;
}

.countrytext {
  grid-row: 1;
  grid-column: 1;
  width: inherit;
  height: inherit;
  place-content: center;
  display: inline-block;
}
.seeingcountry::before,
.seeingcountry::after {
  background: radial-gradient(
    circle at center,
    transparent 55%,
    #a6b4a4 60%,
    transparent 70%
  );
  position: relative;
  border-radius: 50%;
  content: "";
  grid-row: 1;
  grid-column: 1;
  place-content: center;
  opacity: 0;
  pointer-events: none;
}

.seeingcountry::before {   /*ig this is a child of countrytext?? weird tho*/
  animation: countryripple 8s;
}

.seeingcountry::after {   /*ig this is a child of countrytext?? weird tho*/
  animation: countryripple 22s;
}

@keyframes countryripple {
  0% {
    height: 125%;
    width: 125%;
    opacity: 0.2;
  }
  25% {
    height: 225%;
    width: 225%;
    opacity: 0;
  }
  90% {
    height: 225%;
    width: 225%;
    opacity: 0;
  }
  100% {
    height: 225%;
    width: 225%;
    opacity: 0;
  }
}

#countriesstuff {
  flex-direction: column;
  position: relative;
}

#pagecontent.showingother #otherstuff {
  border: solid white;
  position: relative;
  display: grid;
  grid: 1fr 1fr / 1fr 1fr;
  height: 100%;
  width: 100%;
  place-items: center center;
}

.otherthing {
  position: relative;
  width: 100px;
  height: 100px;
  border-radius: 50%;
  background: green;
}

#pagecontent.showingchart #myChart, #pagecontent.showingcountry #countriesstuff{
  display: flex;
}

#pagecontent.showingchart .graphviewingyear,
#pagecontent.showingcountry .graphviewingcountry,
#pagecontent.showingcountry .graphviewingother
{
  display: inline-block;
}

#pagecontent.showingcountry :is(#myChart,#otherstuff,.graphviewingyear, .graphviewingother),
#pagecontent.showingchart :is(#countriesstuff,#otherstuff,.graphviewingcountry, .graphviewingother),
#pagecontent.showingother :is(#countriesstuff,#myChart,.graphviewingcountry, .graphviewingyear) {
  display: none !important;
}

@property --chart-label {
  syntax: "<length>";
  inherits: true;
  initial-value: 0;
}

#myChart {
  --chart-label: var(--chart-label-font-size);
  position: absolute;
  z-index: 2;
}

@media screen and (max-width: 87rem) {
  #graphtype {
    grid-template-columns: 1;
    grid-template-rows: 5;
  }

  .graphbutton, .graphtypetext {
    grid-column-start: 1;
    grid-column-end: 2;
  }
  
  .graphtypetext {
    grid-row-start: 1;
    grid-row-end: 2;
    align-self: center;
  }

  .allbutton {
    grid-row-start: 2;
    grid-row-end: 3;
  }

  .bluebutton {
    grid-row-start: 3;
    grid-row-end: 4;
  }

  .foundbutton {
    grid-row-start: 4;
    grid-row-end: 5;
  }

  .countriesbutton {
    grid-row-start: 5;
    grid-row-end: 6;
  }

  #countriesstuff, #otherstuff {
    left: calc(8 * 0.5 * var(--chart-label-font-size));
    width: calc(100% - 10 * 0.5 * var(--chart-label-font-size));
  }

  #graphinstructions {
    display: none;
  }
  #graphinst {
    display: inline-block;
  }
}

@media screen and (max-width: 70rem) {
  #graphtype {
    top: calc(2.5 * var(--h1-font-size));
  }
}

@media screen and (max-width: 55rem) {
  .countryabbrev {
    display: inline-block !important;
  }
  .countrycircle {
    font-size: calc(1 * var(--body-font-size)) !important;
    height: calc(1 * var(--h1-font-size));
    width: calc(1 * var(--h1-font-size));
    transition: background 0.15s ease-out;
    box-shadow: none;
  }
  .seeingcountry {
    font-size: calc(1 * var(--body-font-size));
    box-shadow: none;
  }
  .seeingcountry::before,
  .seeingcountry::after,
  .countrytext {
    display: none !important;
  }
}

@media screen and (max-width: 40rem) {
  .indexbuttons {
    flex-direction: column;
    justify-content: space-evenly;
    padding-top: 0;
    gap: 1rem;
  }
  #longfuck {
    display: none;
  }
  #shortfuck {
    display: inline-block;
  }
}

@media (pointer: fine) {
  /* device has a mouse */
  .graphusingmouse {
    display: inline-block;
  }
  .graphusingtap {
    display: none;
  }
}