@import "pico.min.css";

html {
   scroll-behavior: smooth;
}

body {
   overflow-x: hidden;
}

main:has(#gallery), main:has(.bg), main:has(.audioContainer), main:has(.videoContainer) {
   padding-bottom: 0;
}

.backToTop {
   width: 4rem;
   display: flex;
   justify-content: center;
   align-items: center;
   position: fixed;
   z-index: 99;
   bottom: 4rem;
   right: 4rem;
   transform: translateX(10rem);
   opacity: 0;
}

.activeBTT {
   transform: translateX(0rem);
   opacity: 1;
   transition: .5s;
}

.backToTop > p {
   margin-bottom: 0;
   transform: scaleX(175%);
   font-size: 1.5rem;
}

.preloader {
   width: 100vw;
   height: 100vh;
   background: var(--background-color);
   display: flex;
   align-items: center;
   justify-content: center;
   padding-right: 25vw;
   padding-left: 25vw;
}

.fadeOut {
   opacity: 0;
   transition: .5s;
}

#backgroundVideo {
   height: 100vh;
   width: 100vw;
   overflow: hidden;
   object-fit: cover;
   z-index: -1;
   position: fixed;
}

.titleContainer {
   height: calc(110vh - 2 * var(--block-spacing-vertical));
   display: flex;
   justify-content: center;
   align-items: center;
   margin-bottom: var(--block-spacing-vertical);
   flex-wrap: wrap;
}

.title {
   font-size: 5vw;
   text-align: center;
}

.titleAnimation {
   animation: title 1s;
   animation-timing-function: ease;
   animation-fill-mode: forwards;
}

.title:hover {
   cursor: pointer;
}

.arrow {
   position: relative;
   transform: scaleX(535%) scaleY(1%);
   margin: 0;
   padding: 0;
   bottom: 4rem;
}

.titleContainer:first-child > div {
   height: fit-content;
   width: fit-content;
}

.titleContainer:first-child > div:hover .arrow{
   transform: scaleX(1000%) scaleY(75%);
   transition: .3s;
}

nav {
   position: fixed;
   width: 100vw;
   background-color: var(--background-color);
   padding-right: 10vw;
   padding-left: 10vw;
   z-index: 1;
   transition: .1s;
}

.active {
   text-decoration: underline;
}

[src="img/white.png"] {
   width: 5vw;
   height: auto;
}
.suppressed {
   opacity: .3;
   transform: translateY(-1rem);
   transition: .1s;
}

.suppressed:hover {
   opacity: 1;
   transform: translateY(0rem);
   transition: .1s;
}

.selected {
   font-weight: bold;
}

.selected:hover {
   cursor: pointer;
}

#aboutMe {
   background-color: var(--background-color);
}

.column {
   display: flex;
   align-items: center;
   padding-top: 5vh;
   justify-content: space-around;
   flex-wrap: wrap;
}

.bg{
   background-color: var(--background-color);
   position: relative;
   width: 100vw;
}

#gallery {
   width: 100vw;
   height: fit-content;
   display: flex;
   flex-wrap: wrap;
}

.frame, .overlay {
   width: 33.3vw;
   height: 42.5vh;
}

.overlay {
   position: relative;
   background: linear-gradient(to top, rgba(29, 29, 27, 0.5), rgba(255, 0, 0, 0));
   opacity: 0;
}

.overlay p {
   position: absolute;
   bottom: 0;
   left: 1rem;
   font-size: 1rem;
}

#orion:hover .overlay, #horsehead:hover .overlay, #bodes:hover .overlay, #soul:hover .overlay, #pleiades:hover .overlay, #andromeda:hover .overlay, #bubble:hover .overlay, #ghost:hover .overlay, #heart:hover .overlay, #moon:hover .overlay, #neowise:hover .overlay, #pacman:hover .overlay, #pelican:hover .overlay, #pinwheel:hover .overlay, #veil:hover .overlay {
   opacity: 1;
   cursor: pointer;
   transition: .5s;
}

.frame {
   background-position: center;
   background-size: cover;
}

#orion {
   background-image: url("../../img/orion.jpg");
}

#horsehead {
   background-image: url("../../img/horsehead.jpg");
}

#bodes {
   background-image: url("../../img/bodes.jpg");
}

#soul {
   background-image: url("../../img/soul.jpg");
}

#andromeda {
   background-image: url("../../img/andromeda.jpg");
}

#bubble {
   background-image: url("../../img/bubble.jpg");
}

#ghost {
   background-image: url("../../img/ghost.jpg");
}

#heart {
   background-image: url("../../img/heart.jpg");
}

#moon {
   background-image: url("../../img/moon.jpg");
}

#neowise {
   background-image: url("../../img/neowise.jpg");
}

#pacman {
   background-image: url("../../img/pacman.jpg");
}

#pelican {
   background-image: url("../../img/pelican.jpg");
}

#pinwheel {
   background-image: url("../../img/pinwheel.jpg");
}

#pleiades {
   background-image: url("../../img/pleiades.jpg");
}

#veil {
   background-image: url("../../img/veil.jpg");
}

.imgContainer {
   background-repeat: no-repeat;
   background-size: cover;
}

.imgContainer img{
   visibility: hidden;
}

.audioContainer {
   display: flex;
   padding-top: 5vh;
   justify-content: space-around;
   flex-wrap: wrap;

}

.musicCover {
   height: 18rem;
   width: 18rem;
   margin-top: 2rem;
   aspect-ratio: 1/1;
   background-size: cover;
   margin-bottom: 5rem;
}

audio {
   width: 100%;
   position: relative;
   top: 18rem;
}

#nightfall {
   background-image: url("../../img/cover/nightfall.jpg");
}

#nonamenotime {
   background-image: url("../../img/cover/nonamenotime.jpg");
}

#evolution {
   background-image: url("../../img/cover/evolution.jpg");
}

#journey {
   background-image: url("../../img/cover/journey.jpg");
}

#mysims {
   background-image: url("../../img/cover/mysims.jpg");
}

#creation {
   background-image: url("../../img/cover/creation.jpg");
}

video {
   width: 26rem;
   height: fit-content;
   margin-right: 1rem;
   margin-bottom: 1rem;
}

.videoContainer div {
   display: flex;
   justify-content: space-around;
}

.videoContainer > b {
   width: 26rem;
}

.videoContainer a {
   display: block ruby;
   margin-top: 0;
}

.videoContainer div div {
   display: block;
}

footer {
   background-color: var(--background-color);
}

footer > div.container {
   display: flex;
   justify-content: center;
   align-items: center;
}

footer > div.container > p {
   margin-bottom: 0;
   margin-right: 0.5vw;
}

footer > div.container > p.disclaimer {
   opacity: 50%;
}

footer > div.container

/*Animations*/
@keyframes title {
   0% {
      letter-spacing: 1vw;
   }
   100% {
      letter-spacing: 0;
   }
}


/*Queries*/
@media screen and (max-width: 992px) {
   ul:first-child {
      display: none;
   }
   video {
      width: 23rem;
   }
   footer > div.container > p.disclaimer {
      text-align: left;
   }
}

@media screen and (max-width: 1200px) {
   .videoContainer div {
      flex-wrap: wrap;
   }
   .videoContainer > b {
      width: 100%;
   }
   .arrow {
      bottom: 2.5rem;
   }
}