/* font face ideas: 
Flamingo; for cursive 
Ragazza; also for cursive
Fairwater: maybe 
*/

@font-face {
    font-family: 'Carved Runic';
    src: url('../Resources/BeowulfRunic-vKvM.ttf') format('truetype');
}

@font-face {
    font-family: 'Runic';
    src: url('../Resources/OdinsonLight-vMZD.ttf') format('truetype');
}

::-webkit-scrollbar {
}

::selection {
    background-color: rgb(133, 133, 133);
    color: rgb(53, 15, 86);
}

main {
    font: optional;
    margin-top: 200px;
    animation: slidein 0.9s ease-in-out;
    z-index: 1000;
}

@keyframes slidein {
    from {
        opacity: 0;
        transform: translateX(-30px);
    }
    to {
        opacity: 1;
        transform: translateX(0);
    }
}


h1 {
    color: azure;
    font-family: Arial, Helvetica, sans-serif;

}

p {
    color: azure;
    font-family: Arial, Helvetica, sans-serif;

}

/* ======================= Navigation, Nav Buttons and Background Button =========================*/

nav {
    display: flex;
    background-color: rgb(28, 36, 37, 0.4);
    padding: 1em 300px;
    width: 100%;
}

header {
    position: absolute;
    width: 100%;
    left: 0;
    top: 0;
    padding: 0vh 0;
    background-color: rgb(28, 36, 37, 0.4);
    z-index: 1000;
}

.nav-btn {
    width: 120px;
    height: 40px;
    background-color: rgba(52, 63, 62, 0.555);
    color: azure;
    border: 11px solid transparent;
    border-radius: 20px;
    border-image: url("../resources/Brown_Kaldheim_Border.png") 30 round;
    border-image-slice: 68 58;
    border-image-repeat: repeat stretch;
    position: relative;
    margin: 0.25vw 0.25vw;
    padding: 2px 2px;
    left: -23%;

}

.nav-btn:hover {
    transform: scale(1.1);
    background-color: teal;
    cursor: pointer;
}

.Background-btn {
    background-color: rgba(52, 63, 62, 0.555);
    border: 11px solid transparent;
    border-radius: 20px;
    border-image: url("../resources/Brown_Kaldheim_Border.png") 30 round;
    border-image-slice: 68 58;
    border-image-repeat: repeat stretch;
    color: azure;
    width: 120px;
    height: 40px;
    margin: 0.25vw 0.25vw;
}

.dropdown {
    position: relative;
    left: 25%;
    display: inline-block;
}

.dropdown-content {
    display: none;
    flex-direction: column;
    position: absolute;
    background-color: black;
    border: 1.5px solid rgb(17, 186, 122);
    border-radius: 3px;
    min-width: 20px;
    box-shadow: 0px 8px 16px rgba(0,0,0,0.3);
}

.dropdown-content button {
    background: rgb(28, 36, 37, 0.4);
    color: azure;
    padding: 10px 10px;
    text-align: center;
    border: none;
    border-bottom: 1px solid rgb(17, 186, 122);
    width: 100%;
    cursor: pointer;

}

#Midnight-btn:hover {
    background: linear-gradient(rgba(8, 16, 43, 1), rgba(2, 6, 18, 1));
}

#Emerald-Veil:hover {
    background: linear-gradient(rgba(25, 255, 168, 1), rgba(4, 63, 102, 1));
}

#Polar-Dawn:hover {
    background: linear-gradient(rgba(46, 178, 255, 1), rgba(0, 45, 104, 1));
}

#Violet-Drift:hover {
    background: linear-gradient(rgba(168, 105, 255, 1), rgba(32, 11, 83, 1));
}

#Cycle-btn:hover {
    animation-name: cycle;
    animation-duration: 10s;
    animation-iteration-count: infinite;
    animation-timing-function: linear;
}

@keyframes cycle {
    10% {
        background-color: red;
    }
    20% {
        background-color: orange;
    }
    30% {
        background-color: yellow;
    }
    40% {
        background-color: green;
    }
    50% {
        background-color: blue;
    }
    60% {
        background-color: purple;
    }
    70% {
        background-color: rgb(147, 5, 69);
    }
    100% {
        background-color: red;
    }
}

.dropdown:hover .dropdown-content {
    display: flex;
}


@keyframes slidedown-appear {
    from {

    }
    to {


    }
}

/* ============================================================================================== */
/* =================================== Random Stuff ============================================= */

.Quote-Container {
    position: relative;
    background-color: rgba(52, 63, 62, 0.555);
    border: 50px solid transparent;
    border-radius: 20px;
    border-image: url("../resources/Brown_Kaldheim_Border.png") 30 round;
    border-image-slice: 68 58;
    border-image-repeat: repeat stretch;
    backdrop-filter: blur(20px);
    color: azure;
    text-align: center;
    margin-top: 80px;
    margin-left: 50px;
    margin-right: 50px;
    font-size: 40px;
    padding-bottom: 20px;
    z-index: 1000;
}

#Quote-Of-The-Day {
    margin-bottom: 10px;
    z-index: 1000;
}

#Author {
    margin-top: 5px;
}

.Contact-Section {
    background-color: rgb(3, 151, 136);
    border: 25px solid transparent;
    border-radius: 20px;
    border-image: url("../resources/Kaldheim_Border.png") 30 round;
    color: azure;
    text-align: center;
}

.Contact-Section:hover {
    transform: scaleX(1.01) translateY(-5px);
    background-color: teal;
}

#Progress_Note {
    text-align: center;
    font-size: 60px;
}


/* =============================== Background and Aurora =========================================*/

#Gradient_Shifter {
    width: 100%;
    height: 100%;
    position: fixed;
    top: 0;
    left: 0;
    z-index: -1;
    pointer-events: none;
    image-rendering: pixelated;
    z-index: -3;
}

canvas {
    width: 100vw;
    height: 100vh;
    display: block;
}

#aurora {
    filter: drop-shadow(0 0 40px rgba(0, 255, 200, 0.4))
            drop-shadow(0 0 80px rgba(0, 200, 255, 0.2));
    animation: Appear 20s ease-in-out,
    auroraGlow 8s ease-in-out infinite;
    z-index: -2;
    margin-top: -90%;
}

@keyframes Appear {
    from {
        opacity: 0;
    }
    to {
        opacity: 1;
    }
}

@keyframes auroraGlow {
  0%, 100% {
    filter: drop-shadow(0 0 30px rgba(0, 255, 200, 0.566))
            drop-shadow(0 0 80px rgba(0, 179, 255, 0.486));
  }
  50% {
    filter: drop-shadow(0 0 60px rgba(0, 255, 221, 0.068))
            drop-shadow(0 0 100px rgba(0, 179, 255, 0.112));
  }
}

/*================================================================================================*/