@font-face {
    font-family: 'Metropolis-Light';
    src: url('/fonts/Metropolis-Light.woff2') format('woff2'),
         url('/fonts/Metropolis-Light.woff') format('woff');
    font-weight: normal;
    font-style: normal;
}

@font-face {
    font-family: 'Metropolis-SemiBold';
    src: url('/fonts/Metropolis-SemiBold.woff2') format('woff2'),
         url('/fonts/Metropolis-SemiBold.woff') format('woff');
    font-weight: normal;
    font-style: normal;
}

body {
  background-image: url("/images/web2025 orchidwater bg 4.png");
  background-repeat: no-repeat;
  background-size: cover;
  background-attachment: fixed;
  font-size: 20px;
  font-family: 'Metropolis-Light';
}

div {
  border: 20px double white;
  border-radius: 20px;
}

a:link {
  text-decoration: none;
}

.content_div{
  position: relative;
  z-index: 2;
  color: white;
  text-align: center;
}

.content_div::before{
  content: "";
  position: absolute;
  z-index: -1;
  top: 0;
  left: 0;
  display: inline;
  width: 100%;
  height: 100%;
  background-image: url("/images/stripes.png");
  background-attachment:fixed;
  opacity: 25%;
  background-size: 3vh;
  animation: background_scroll 3s linear 0s infinite;
  clip-path: polygon(20% 0%, 100% -10%, 100% 70%);
}

.content_div::after{
  content: "";
  position: absolute;
  z-index: -1;
  top: 0;
  left: 0;
  display: inline;
  width: 100%;
  height: 100%;
  background-image: url("/images/stripes.png");
  background-attachment:fixed;
  opacity: 25%;
  background-size: 3vh;
  animation: background_scroll_2 3s linear 0s infinite;
  clip-path: polygon(0% 50%, 50% 100%, 0% 100%);
}

.link {
    width: auto;
    height: fit-content;
    background-color: white;
    border-radius: 10px;
    padding: 5%;
    padding-bottom: 13%;
    margin: 3%;
    margin-top: 5%;
    margin-bottom: 2%;
    color:rgb(255, 255, 255);
    border: 12.5px double white;
}

.link:hover{
  transition: transform 0.1s;
  transition-timing-function:cubic-bezier(0.1,0.1,0.1,2);
}

.link:hover{
  transform: scale(110%);
}

.link img {
    display: block;
    width: 15%;
    float: left;
    margin: auto;
    margin-top: -1%;
    filter: drop-shadow(0px 0px 5px rgb(255, 255, 255));
}

.link h3 {
    box-shadow: none;
    float: left;
    margin: 0%;
    margin-top: 1%;
    margin-left: 4%;
    font-size: 2vh;
}

.main_content{
  max-width: 60%;
  display: grid;
  grid-template-columns: 25% 45% 30%;
  margin: auto;
  border: none;
}

.sidebar_container{
  border: none;
  margin-right: 5%;
  display:grid;
  grid-template-rows: 10% 85% 5%;
  height: 95vh;
}

.sidebar_header{
  text-align: center;
  position: relative;
  background-color: rgb(150, 94, 255);
  border-bottom-left-radius: 0%;
  border-bottom-right-radius: 0%;
  border-bottom: 10px solid white;
}

.sidebar_header h1{
  font-size: 3.5vh;
}

.sidebar_div{
  position: relative;
  background-color: rgba(90, 49, 184, 0.562);
  border-top: none;
  border-bottom: none;
  border-radius: 0%;
  margin: 0%;
  overflow-x: hidden;
  overflow-y: scroll;
  scrollbar-width: none;
}

.sidebar_div h2 {
  margin: 5%;
  font-size: 2.5vh;
}

.sidebar_footer{
  position: relative;
  background-color: rgb(150, 94, 255);
  border-top-left-radius: 0%;
  border-top-right-radius: 0%;
  border-top: 10px solid white;
}

.mid_div {
  display:grid;
  grid-template-rows: 15% 35% 50%;
  border: none;

}

.header_div{
  background-color: rgba(255, 239, 95, 0.774);
}

.header_div h1{
  margin-top: 5%;
  font-size: 4vh;
}

.about_div{
  background-color: rgba(104, 161, 158, 0.637);
  margin-bottom: 2%;
  margin-top: 2%;
}

.about_div p{
  font-size: 1.75vh;
}

.main_div{
  background-color: rgba(72, 0, 167, 0.63);
}

.fanart_div{
  border: none;
  margin-left: 5%;
  display:grid;
  grid-template-rows: 10% 85% 5%;
}

.fanart_header{
  text-align: center;
  position: relative;
  background-color: rgb(212, 37, 119);
  border-bottom-left-radius: 0%;
  border-bottom-right-radius: 0%;
  border-bottom: 10px solid white;
}

.fanart_header h1 {
  margin-top: 2%;
  font-size: 3vh;
}

.fanart_header p {
  margin-top: -5%;
  font-size: 2vh;
}


.fanart_main{
  overflow: hidden;
  background-color: rgba(184, 45, 110, 0.733);
  border-radius: 0%;
  border-top: none;
  border-bottom: none;
}

.fanart_footer{
  position: relative;
  background-color: rgb(212, 37, 119);
  border-top-left-radius: 0%;
  border-top-right-radius: 0%;
  border-top: 10px solid white;
}

.fanart_container{
  position: absolute;
  background-color: rgb(212, 37, 119);
  border: solid white 10px;
  width: 95%;
  transform: translatey(-150%);
  animation: fanart_scroll 20s linear infinite;
  animation-delay: inherit;
}

.fanart_container img{
  width: 25vh;
  height: 25vh;
  border-radius: 10px;
  margin: 10px;
  border: solid white 10px;
}

.fanart_container h3 {
  box-shadow: none;
  font-size: 2.5vh;
  margin: 2%;
  margin-top: -2%;
  color: white;
  text-decoration: none;
}

@keyframes fanart_scroll {
  from {
    transform: translatey(-150%)
  }
  to {
    transform: translatey(300%)
  }
}

@keyframes background_scroll {
  0% {
    background-position-x: 0px;
  }
  100% {
    background-position-x: 3vh;
  }
}

@keyframes background_scroll_2 {
  0% {
    background-position-x: 0px;
  }
  100% {
    background-position-x: -3vh;
  }
}

@media only screen and (max-width: 1000px) {
  .main_content {
    max-width: 100%;
    display: grid;
    grid-template-columns: 25% 45% 30%;
    margin: auto;
    border: none;
  }
  .sidebar_header h1 {
    font-size: 2.5vh;
  }
}