@import url("animations.css");

@font-face {                  
  font-family: 'F5.6';
  src: url(https://humantooth.neocities.org/fonts/F5.6-Regular.woff) format('woff');
  font-weight: normal;
  font-style: normal;
} 

.f56 {
  font-family: "F5.6", Verdana;
}

.widelatin {
  font-family: "Wide Latin", Verdana; 
}

html {
  font-size: clamp(10px, 2vh, 72px);
}


body {
  font-family: "Verdana";
  background-color: black;
  justify-content: center;  
  align-items: center;
  margin:0;
  display: flex;
  min-height: 100vh;
  color: white;
}

.fadein {
  filter: blur(1rem);
  animation: fadeIn 1s forwards; 
}

.content {
  position: relative;
  margin: auto;
  width: clamp(50%, 50vh, 100%);
  height: 80vh;
  border-radius: 5px;
  display: flex;
  flex-direction: column;
  z-index: 1;
}

.shadow {
  box-shadow : 0 0 10px 10px #000000 ;
}

.narrow {
  width: clamp(35%, 35vh, 100%);
}

#title {
  margin: 0 auto;
}

#scroll {
  text-align: center;
  margin:5px;
  border-right: 0;
  border-left: 0;
}

#main {
  height:100%;
  gap: 0.5rem;
}

#main p {
  text-align: center;
}

.grid {
  display: grid;
  grid-template-columns: 33% 33% 33%;
  grid-template-rows: 33% 33% 33% 4%;  
}

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

.menu {
  min-width: 33%;
  display: contents;
  flex-direction: column;
  height: 100%; 
}

#sidebar a:hover {
  animation: slide-right 0.2s forwards;
  z-index:2;
}

#home-sideimg {
  z-index: 5;
  position: fixed;   
  top: 0;
  left: clamp(0%, 7vw, 20%);
  height: clamp(200px, 80vw, 100%);
  pointer-events: none;
}

.sideimg {
  z-index: 5;
  position: fixed;   
  top: 0;
  left: 80vw;
  height: 100%;
  width: auto;
  pointer-events: none;
}


.sidechibi {
  position: fixed;
  width: clamp(50px, 15vw, 500px);
  bottom:clamp(0px, 25vh, 50%);
  animation: chibi 2s linear 0.5s infinite normal;
}

.bottomchibi {
  position: fixed;
  bottom: 1rem;
  height: 20vh;
  z-index:-1
}  

.left {
  left: clamp(10px, 25vw, 30%);  
}

.right {
  right: clamp(10px, 25vw, 30%);  
}

#intro {
  grid-column: 2 / span 2;
  grid-row: 1 / span 2;
  margin: 1vh 1vw;
  scrollbar-width: thin;
}

#main p +  p {
  margin-top: 1rem;
}

.card {
 background-size: cover;
 margin: 0 0 5px 0;
 display:flex;
 flex: 1;
 text-align: center;
 border-radius: 5px;
 box-sizing: border-box;
}

.clickable:hover {
  filter:contrast(200%) grayscale(100%);
  box-shadow: 0 0 5px 5px #888888aa;
}

.menu .card {
  height: 100%;
  justify-content: center;
}


#bottombar a:hover {
  animation: slide-up 0.2s forwards;
  z-index:2;
}

.menu .card p {
  align-self: flex-end;
  background: black;
}


.h3 {
  font-size: 1.2rem;  
}

.h2 {
  font-size: 1.6rem;
  padding:1rem;
}

.h1 {
  font-size: clamp(2rem, 5vw, 4.7rem);  
}

.menu a, .btn {
  text-decoration:none;  
}

#footer {
  width: 100%;
  text-align: center;
  grid-column: 1 / span 3;
  grid-row: 4;
}

#footer a:hover {
  color: #00ff73 
}

.no-margin, p {
  margin: 0;
}

a {
  color: white;
  cursor: pointer;
}
  
.green-filter{
 filter: sepia(100%) saturate(300%) hue-rotate(93deg);
}


#warning {
  position:relative;
  top: clamp(10%, 10vh, 20%);
  display:flex;
  flex-direction: column;
  gap: 2vh;
  min-width: 400px;
  max-width: 90%;
}

#warning-header img {
  height: clamp(10px, 20vh, 4rem);
  margin-bottom: 5vh;
}

.blinking-box {
  animation: blink 1.5s linear 0s infinite alternate;
}

.blinking-text {
  animation: blink-text 1.5s linear 0s infinite alternate;
}

.green-text {
  color: #00ff73;
  text-shadow: 0 0 10px #00ff73, 0 0 5px #00ff73;
  animation: blink-text 1.5s linear 1s infinite alternate;
  margin:-2px;
  padding:0;
}

.green-text:hover {
  color: #fff;
  transition: 0.5s;
  cursor: pointer;
  text-shadow: 0 0 10px #00ff73, 0 0 5px #00ff73;
}


.top {
  position:absolute;
  top:0;
  margin: 5px;
}

/* i stole this from https://www.buttons.cool/button/bGOJQOy whoops*/
.btn {
  box-sizing: content-box;
  border: solid 3px transparent;
  padding: 1rem 1rem;
  border-radius: 1em;
  text-decoration: none;
}

.btn-grey {
  box-shadow: inset 0 0 0 3px rgba(180, 180, 180, 0.2), inset 0 -1.25em 1.25em -1.25em #2f3134;
  --ini: circle farthest-side at;
  --lst: 0, transparent 100%, #25282b;
  --set: bottom 1.25em/ 0.625em 0.625em no-repeat padding-box;
  background: radial-gradient(var(--ini) 100% var(--lst)) left 0 var(--set), radial-gradient(var(--ini) 0 var(--lst)) right 0 var(--set), linear-gradient(#3f4244, #2d3033 50%, #202225 0) padding-box, linear-gradient(#1c1e21, #121316) border-box;
  color: white;
  text-shadow: 1px 1px #2b2b2b, 1px 1px 3px #1f1f1f;
  text-decoration: none;
}

.btn-black {
  box-shadow: inset 0 0 0 3px rgba(120, 120, 120, 0.2), inset 0 -1.25em 1.25em -1.25em #1f2124;
  --ini: circle farthest-side at;
  --lst: 0, transparent 100%, #1c1e21;
  --set: bottom 1.25em/ 0.625em 0.625em no-repeat padding-box;
  background: radial-gradient(var(--ini) 100% var(--lst)) left 0 var(--set), radial-gradient(var(--ini) 0 var(--lst)) right 0 var(--set), linear-gradient(#2c2f32, #1f2225 50%, #16181b 0) padding-box, linear-gradient(#141618, #0f1113) border-box;
  color: #f0f0f0;
  text-shadow: 1px 1px #1a1a1a, 1px 1px 3px #101010;
  text-decoration: none;
}


.btn-green {
  box-shadow: inset 0 0 0 3px rgba(255, 255, 255, 0.2), inset 0 -1.25em 1.25em -1.25em #494b4f;
  --ini: circle farthest-side at;
  --lst: 0, transparent 100%, #054f26;
  --set: bottom 1.25em/ 0.625em 0.625em no-repeat padding-box;
  background: radial-gradient(var(--ini) 100% var(--lst)) left 0 var(--set), radial-gradient(var(--ini) 0 var(--lst)) right 0 var(--set), linear-gradient(#00ff73, #13703d 50%, #054f26 0) padding-box, linear-gradient(#0e8a46, #0f3b23) border-box;
  color: white;
  text-shadow: 1px 1px #356149, 1px 1px 3px #0b361e;
}

.scrollable {
  overflow-y: auto;
  scrollbar-color: white transparent;
}

/* scrollbar stuff for chrome */
.scrollable::-webkit-scrollbar-track {
  background: transparent;
}

.scrollable::-webkit-scrollbar-thumb {
  background-color: white;
  border-radius: 10px;
}

#floaties {
  position:fixed;
  right: clamp(1vw, 8vw, 20%);
  display: flex;
  flex-direction: column;
}

.floatie {
  width: 15vw;
  max-height: 12vh;
  margin: 1rem 0px;
  display: flex;
  flex-direction: column;
  text-align:left;
  flex:1;
  animation: floating 2.5s ease-in-out 0s infinite alternate;
}

ul {
  list-style-type:none;
  padding: 0;relative
}

li {
  margin: 1vh 0px;  
}

@media (max-width: 800px) {
  #sideimg {display:none}
  .sidechibi {display:none}
  .content {max-width: 100vw; height: 100vh;}
  .narrow {width: auto; margin: 10vw}
}


.sidenav {
  height: 100vh;
  width: 18rem;
  position: fixed;
  z-index: 1;
  top: 0;
  left: 0;
  background-color: black;
  overflow-x: hidden;
}

.sidenav a {
  text-decoration: none;
  color: #fff;
  display: block;
}

.sidenav div {
  position: relative;
  width: 95%;
  left:2.5%
}

.sidenav .card {
  margin: 1rem 0px
}

.main {
  margin-left: 20rem;
  margin-right: 15rem;
  height:100%;
  max-height: 100%;
}

.main-content {
  margin:1rem
}


#bottom {
  position: relative;
  bottom: 0;
  left: 0;
  right: 0;
}


.p5 {
  padding: 2.5rem 0px;
}

.gallery-year {
  padding: 1rem;
  text-decoration: underline;
  font-weight: bold;
}

.gallery-items {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
}

.gallery-item {
  position: relative;
  height: 15rem;
  width:auto;
  cursor: pointer;
  margin: 0px 0.5rem;
  border-radius: 5px;
  border: solid 2px #222
}

.modal {
  display: none;
  position: fixed;
  z-index: 1000;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  background-color: rgba(0, 0, 0, 0.8);
  align-items: center;
  justify-content: center;
}

.modal-content {
  position: relative;
  max-width: 90%;
  max-height: 80%;
  overflow: hidden;
  border:1px solid white 
}

.modal.show {
  display: flex;
  opacity: 1;
}

.close {
  position: absolute;
  top: 1rem;
  right: 1rem;
  color: #ffffff;
  font-size: 2rem;
  cursor: pointer;
  transition: transform 0.3s;
}

.caption {
  position: absolute;
  bottom: 1rem;
  width: 100%;
  text-align: center;
  color: #ffffff;
}

hr {
  border-top: 2px solid #00ff7333;
  border-bottom: 2px solid #00ff7333;
  border-right: 0px ;
  border-left: 0px ;
  border-radius: 5px;
}


::selection {
    background-color: #00ff84;
}

::-moz-selection {
    background-color: #00ff84;
}

::-webkit-selection {
    background-color: #00ff84;
}

.green-filter::selection {
  filter: none;
  }