body {
  overflow: hidden;
  color: var(--black_recolor);
  background-color: var(--white_recolor);
}

path {
  fill:none;
  stroke:var(--black_recolor);
}

p {
  margin: 0;
}

.delay_force * {
  transition-delay: 0s !important;
}

.trans_force * {
  transition-duration: 0s !important;
}

/* drift */
.drift_container {
  user-select: none;
  position: absolute;
  width: 100%;
  height: 100%;
  left: 0;
  top: 0; 
}

.drifter {
  position: absolute;
  --start-x: 0;
  --start-y: 0;
  --end-x: 0;
  --end-y: 0;
  animation: drift 5s linear 1;
  color: var(--black_recolor);
  font-size: 0;
}
@keyframes drift {
  0% {left: var(--end-x); top: var(--start-y); opacity: 0.75}
  100% {left: var(--end-x); top: var(--end-y); opacity: 0}
}

@font-face {
    font-family: "SAL"; /*this just means that itll be referenced like this in styles*/
    src: url("Shapes_and_Lines.ttf"); 
    /* src: url("https://github.com/yu7UyPKh/website-stuff/blob/main/Shapes_and_Lines.ttf"); */
}

#main_div {
  position: absolute;
  width: 20vw;
  /* height: 45vw; */
  height: 0;
  left: 50%;
  top: 50%;
  transform: translate(-50%,-50%);
}

#text_div {
  position: absolute;
  top: -50vh;
  left: 50%;
  /* width: 0;
  height: 0; */
}

#qiinr_text {
  cursor: pointer;
  opacity: 0;
  font-size: 0px;
  user-select: none;
  font-family: "SAL";
  color: var(--black_recolor);
  -webkit-text-stroke-width: 2px;
  -webkit-text-stroke-color: var(--white_recolor);

  transition-duration: 1s;
  transition-delay: 1s;
  transition-property: font-size, opacity;
}

#main_div.clicked #qiinr_text {
  transition-delay: 1s;
  opacity: 1;
  font-size: 50px;
}

#text_rise_div {
  font-size: 75px;
  transition-delay: 0s;
  transition-duration: 0.85s;
  transition-property: transform;
  transform: translate(-50%, calc(50vh - 50px));
}

#main_div.clicked #text_rise_div {
  transition-delay: 3s;
  transform: translate(-50%, 50px) scale(3);
}

#svg_1, #svg_2 {
  width: 10vw;
  aspect-ratio: 2/9;
  transition-delay: 1s;
  transition-duration: 1s;
  transition-property: transform;
  stroke-width:2;
}

#pulse_div {
  position: absolute;
  top: -50%;
  left: -50%;
  white-space: nowrap;
  pointer-events: none;
  cursor: none;
}

#svg_1_p, #svg_2_p {
  width: 20vw;
  aspect-ratio: 2/9;
  display: inline-block;
}

#main_div.clicked #svg_1 {transform: translate(-100px, 0);}
#main_div.clicked #svg_2 {transform: translate(100px, 0);}

#rot_div {
  transition-duration: 1s;
  transition-delay: 2s;
  /* transform: rotate(90deg); */
}

#pulse_div {
  /* transition-delay: 2s; */
  animation: pulse forwards 1.5s;
  animation-play-state: paused;
}

#main_div.clicked #pulse_div {
  transition-delay: 0s;
}

@keyframes pulse {
  /* 0% {filter: drop-shadow(0px 0px 0.01px)};
  100% {filter: drop-shadow(0px 0px 100px)} */
  0% {
    filter: blur(0px); 
    stroke-width: 0;
    opacity: 0.3;
  }
  20% {
    opacity: 0.3;
  }
  90% {
    opacity: 0;
  }
  100% {
    filter: blur(50px);
    stroke-width: 20;
    transform: scale(2);
    opacity: 0;
  };
}

@keyframes toby_dance {
  0%, 100% {
    transform: scaleX(1);
  }
  50% {
    transform: scaleX(-1);
  }
}

/* after first anim */


#svg_div_1, #svg_div_2 {
  display: inline-block;
  transition-delay: 0s;
  transition-duration: 1s;
}
#fade_div {
  transform: translate(0, -50%);
  transition-duration: 0.5s;
  opacity: 1;
  cursor: pointer;
}
#fade_div.clicked {
  transition-delay: 2s;
  opacity: 0;
}

#main_div.clicked #svg_div_1 {
  transition-delay: 2s;
  transform: translate(-1200px, 0);
}

#main_div.clicked #svg_div_2 {
  transition-delay: 2s;
  transform: translate(1200px, 0);
}

/* text rising... */

#credits_text {
  transform: translate(-50%, 0);
  position: absolute;
  top: calc(-50vh + 135px);
  left: 50%;
  /* width: 750px; */
  /* max-width: 950px; */
  white-space: nowrap;
}

.text_rise {
  user-select: none;
  opacity: 0;
  font-size: 0px;
  display: inline-block;
  transition-duration: 0.5s;
  transition-delay: 0s;
  margin-left: 15px;
  
  transform: translate(0, 300px);
}
.text_rise:first-child {
  margin: 0;
}

#main_div.clicked .text_rise {
  font-size: min(5vw, 35px);
  opacity: 1;
  transform: none;
}

#main_div.clicked #text_rise_1 {transition-delay: 4s;}
#main_div.clicked #text_rise_2 {transition-delay: 4.1s;}
#main_div.clicked #text_rise_3 {transition-delay: 4.2s;}
#main_div.clicked #text_rise_4 {transition-delay: 4.3s;}
#main_div.clicked #text_rise_5 {transition-delay: 4.4s;}

.info_tab_rise {
  transition-duration: 0.5s;
}

.info_tab_rise:not(#gate_rise)::before {
  transition-duration: 0.5s;
  opacity: 0;
  content: "<";
}
.info_tab_rise:not(#gate_rise)::after {
  transition-duration: 0.5s;
  opacity: 0;
  content: ">";
}

.info_tab_rise.clicked:not(#gate_rise)::before {
  opacity: 1;
  content: "<";
}
.info_tab_rise.clicked:not(#gate_rise)::after {
  opacity: 1;
  content: ">";
}

/* handle box appearances */
#info_box {
  position: absolute;
  /*   adjust this for top spacing            v     */
  top: calc(-50vh + 125px + min(5vw, 35px) + 35px);
  left: 50%;

  transform: translate(-50%, 0);
  backdrop-filter: blur(3px);
  width: 80vw;
  /*  this is what adjusts the margin   from the bottom       v       */
  height: calc(100vh - (125px + min(5vw, 35px) + 35px) - min(75px, 10vw));

  border: var(--black_recolor) 5px solid;
  border-radius: 5px;
  opacity: 0;

  transition-duration: 1s;
  transition-delay: 0s;
  transition-property: opacity;

  pointer-events: none;
}

#main_div.clicked #info_box {
  transition-delay: 5s;
  opacity: 1;
  pointer-events: all;
}

#info_tab_box {
  display: flex;
  justify-content: space-around;
  margin-top: 20px;
}

.info_tab_rise {
  user-select: none;
  cursor: pointer;
  opacity: 0;
  font-size: 0px;
  transition-duration: 0.5s;
  transition-delay: 0s;

  -webkit-text-stroke-width: 0.75px;
  -webkit-text-stroke-color: var(--black_recolor);
}

/* #info_rise {
  margin-left: -10px;
  margin-top: 40px;
} */

#gate_rise {
  color: var(--white_recolor);
  -webkit-text-stroke-color: var(--black_recolor);
  -webkit-text-stroke-width: 1.5px;
  background-color: var(--black_recolor);
  cursor: none;
  height: 0;
}
/* evil ass important hacks */

.info_tab_rise:hover:not(#gate_rise) {
  transition-delay: 0s !important;
  font-size: 50px !important;
}

/* info box click */
.info_tab_rise.clicked:not(#gate_rise) {
  -webkit-text-stroke-width: 0.75px;
  -webkit-text-stroke-color: var(--white_recolor);
}

#main_div.clicked .info_tab_rise {
  font-size: min(5vw, 30px);
  opacity: 1;
}
#main_div.clicked #info_rise {transition-delay: 5.25s;}
#main_div.clicked #art_rise {transition-delay: 5.5s;}
#main_div.clicked #friends_rise {transition-delay: 5.75s;}
#main_div.clicked #gate_rise {
  transition-delay: 6s;
  
  width: min(25vw, 145px);
  height: calc(min(5vw, 30px) + 5px);
}

/* info boxes */
#aro_link:link {
  color: var(--black_recolor);
  -webkit-text-stroke-width: 0.5px;
  -webkit-text-stroke-color: var(--white_recolor);
}
#aro_link:visited {
  color: var(--black_recolor);
  -webkit-text-stroke-width: 0.5px;
  -webkit-text-stroke-color: var(--white_recolor);
}

#page_info {
  margin: min(4vw, 20px) 35px;
  position: relative;
  height: 100%;
  width: 100%;
}

.info_content_box {
  border: 5px var(--black_recolor) solid;
  border-radius: 10px;

  /* margin: min(4vw, 20px) 35px; */
  padding: 10px;

  max-height: calc(100% - min(4vw, 20px) - min(5vw, 30px) - 50px - 35px);
  overflow: scroll;

  position: absolute;
  top: 0;
  left: 0;

  width: calc(80vw - 35px * 2 - 30px);

  transition-duration: 0.5s;
  transition-delay: 0;
}

.visits_box {
  border: 5px var(--black_recolor) solid;
  border-radius: 10px;

  /* margin: min(4vw, 20px) 35px; */
  padding: 10px;

  max-height: calc(100% - min(4vw, 20px) - min(5vw, 30px) - 50px - 35px);
  overflow: scroll;

  position: absolute;
  bottom: 115px;
  left: 0;

  font-size: 25px;

  /* width: calc(80vw - 35px * 2 - 30px); */

  transition-duration: 0.5s;
  transition-delay: 0;
}

.info_content_box.hidden, .visits_box.hidden {
  pointer-events: none;
  opacity: 0;
  transition-delay: 0.5s;
}

/* art */
@media (max-width: 800px) {
  .art_holder {
    column-count: 1; 
    -moz-column-count: 1;
    -webkit-column-count: 1;

    height: auto !important;
  }
} 

@media (min-width: 500px) {
  .art_holder {
    column-count: 2; 
    -moz-column-count: 2;
    -webkit-column-count: 2;

    height: auto !important;
  }
}

.art_container {
  width: calc(100% - 30px);
  height: auto;
  margin: 10px 10px;
  border: 5px var(--black_recolor) solid;
  border-radius: 5px;
  white-space: nowrap;
  display: inline-block;

  text-align: center;
  padding: 5px;
}

.art_container p {
  font-size: 20px;
  margin-top: 5px;
  white-space: wrap;
}

.art_piece {
  width: 100%;
}

/*  */

/* #info {
  size: 0px;

  border: 5px black solid;
  border-radius: 10px;

  margin: 35px;
  padding: 10px;

  opacity: 1;
} */