/* fonts */
@font-face {
  font-family: 'theatrical';
  src: url('./assets/theatrical.otf') format('opentype');
}
@font-face {
  font-family: 'qanect';
  src: url('./assets/qanect.otf') format('opentype');
}
@font-face {
    font-family: 'braven';
    src: url('./assets/braven.otf') format('opentype');
}

/* animation */
@keyframes fadeRight {
  from { 
    opacity: 0; 
    transform: translateX(-100px); 
    filter: blur(10px) drop-shadow(0px 0px 0px black);
  }
  to { 
    opacity: 1;  
    transform: translateX(0);  
    filter: blur(0px) drop-shadow(3px 2px 2px black);
  }
}

@keyframes starFlicker {
    0% { 
        opacity: 1 ; 
        scale: 1;
    } 

    100% { 
        opacity: 0; 
        scale: 0.9;
    }
}

@keyframes hoverStar {
    0% { transform: scale(1); }
    50% { transform: scale(1.1); }
    100% { transform: scale(1); }
}

@keyframes neonShadowFlicker {
    0%, 100% {
        text-shadow:
            0px 0px 8px rgb(186, 161, 249),
            3px 2px 2px black,
            0px 0px 25px rgb(108, 63, 234); 
    }
    50% {
        text-shadow:
            0px 0px 0px rgb(186, 161, 249),
            3px 2px 2px black,
            0px 0px 5px rgb(108, 63, 234); 
    }
}
/* body styles */
body {
    /* background */
    background: url('./assets/bg.svg') center center fixed;
    background-size: cover;
    height: 100vh;
    margin-top: 0;
    overflow-y:  scroll;
    overflow-x: hidden;
    background-color: rgb(19, 10, 103);

    /* text */
    color:rgb(195, 220, 232);
    font-family: 'braven', sans-serif;
    font-size: 4vh;
}

/* header styles */
header {
    
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    width: 100%;
    height: 20%;
    position: relative;
    z-index: 1;
}

header h1 {
    font-family: 'qanect', sans-serif;
    font-size: 9vh;
    margin-top: 0;
    margin-right: 3vh;
    color: rgb(255, 255, 255);
    padding: 5vh;
    padding-top: 6vh;
    /* shadow */
    text-shadow: 0vh 0vh 1.5vh rgb(134, 83, 220);
    font-weight: normal;
    animation-name: fadeRight;
    animation-duration: 2s;
    animation-timing-function: ease-in-out;
    animation-delay: 1s;
    animation-fill-mode: forwards;
    opacity: 0; 
}


.artist {
    z-index: 2;
    font-size: 4vh;
    color   : rgb(115, 142, 206);
    border-style: solid;
    border-color: rgb(64, 0, 161);
    background-color: rgb(10, 19, 66);
    border-width: 0.5px; 
    line-height: 1.7 ;
    padding: 3vh 4vh;
    margin: 3vh 10vh;
    border-radius: 2vh;
    text-align: center;
    text-decoration: none;
    display: block;
    font-weight: bold;
}

.artist:link {
    text-decoration: none;
}

.artist:hover {
    text-decoration: none;;
    background-color: rgb(20, 30, 86);
    text-decoration: underline wavy rgb(53, 95, 191);
    text-decoration-thickness: 0.2vh;
    text-underline-offset: 0.4vh; 
}

.artist:visited {
    color: rgb(115, 142, 206);
    text-decoration: none;
}


p {
    z-index: 2;
    font-size: 4vh;
    color   : rgb(58, 89, 163);
    /* border-style: solid;
    border-color: antiquewhite;
    border-width: 0.5px; */
    line-height: 1.7 ;
    padding-left: 7vh;
    padding-bottom: 3vh;



}
/* all stars */
.star {
    position: absolute;
    width: 10vh;
    /* border-style: solid;
    border-color: antiquewhite;
    border-width: 0.5vh;  */
    margin: 2vh;
    padding: 5vh;
    padding-top: 6vh;
}

/* hovering over stars */
.star:hover {
    animation: hoverStar 1s infinite;
} 


.jewel {
    position: inherit;
    width: 10vh;
    height: 10vh;
    image-rendering: pixelated;
    image-rendering: -moz-crisp-edges;
    image-rendering: crisp-edges;
}



footer {
    position: relative;
    bottom: 0;
    width: 100%;
    text-align: center;
    font-size: 2.5vh;
    color: rgb(195, 220, 232);
    padding-left: 3vh;
    padding-right: 3vh;
    padding-bottom: 7vh;
    font-family: 'braven', sans-serif;
}

.footer-decoration {
    display: flex;
    justify-content: center;
    align-items: center;
    margin-bottom: 3vh;
    gap: 2vh;
}

.footer-star {
    width: 3vh;
    height: 3vh;
    opacity: 0.6;
    animation: starFlicker 3s infinite;
}

.footer-star:nth-child(3) { /* children go from 1-5 including lines */
    animation-delay: 2s;
}

footer b {/* b == bolded part of footer == the text */ 
    text-shadow: 0.1vh 0.1vh 0.3vh black;

}

.footer-line {
    width: 20vh;
    height: 1px;
    background: linear-gradient(90deg, transparent 0%, royalblue, transparent 100%);
    margin: 0 2vh;
}

.footer-subtitle {
    font-size: 2vh;
    color: rgba(195, 220, 232, 0.7);
    margin-top: 1vh;
    font-style: italic;

}