:root{
    /* Color Variables */
    --primary-color-1: #182834;
    --primary-color-2: #002030;
    --primary-color-3: #083344;
    --secondary-color-1: #239ec4;
    --secondary-color-2: #4bc6db;
    --secondary-color-3: #82e8f9;

    /* Other Variables */
    --main-transition: 0.4s;

    margin: 10px 200px 0px 200px;
    width: auto;
    transition-duration: var(--main-transition);
}
:focus {
    outline: none;
}

@media screen and (max-width: 900px) {
    :root {
        --primary-color-1: #182834;
        --primary-color-2: #002030;
        --primary-color-3: #083344;
        --secondary-color-1: #239ec4;
        --secondary-color-2: #4bc6db;
        --secondary-color-3: #82e8f9;
        margin-top: 10px;
        margin-left:10px;
        margin-right:10px;
        width: auto;
    }
}

@font-face {
    font-family: googleSoraFont;
    src: url(Storage/Sora-VariableFont_wght.ttf); }
@keyframes pulse {
    0% {
        transform: scale(1);}
    
    50% {
        transform: scale(1.1);}
    
    100% {
        transform: scale(1);}}

@keyframes fade-out {
    from{
        opacity: 1;}
    to{
        opacity: 0;}
}

@keyframes fade-in {
    from{
        opacity: 0;}
    to{
        opacity: 1;}
}
/* ____________________________________________________________________ Body */
body {
    background-color: #15181D;
    transition-duration: var(--main-transition);
    z-index: 1;
    background-color: var(--primary-color-1);
    color: var(--secondary-color-1);

    font-family: googleSoraFont;
    text-align: center;
}

#fader {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 999;
    pointer-events: none;
    background: var(--primary-color-1);
    animation-duration: 0.3s;
    animation-timing-function: ease-in-out;
}

#fader.fade-out {
    opacity: 0;
    animation-name: fade-out;
}

#fader.fade-in {
    opacity: 1;
    animation-name: fade-in;
}

/* ______________________________________________________________ Navigation */

nav {
    background: #182834;
    box-shadow:  -10px -10px 20px #14222c,
             10px 10px 20px #1c2e3c;
    padding: 20px;
    border-radius: 8px;
}

button{
    /* Colors */
    background: linear-gradient(315deg, #1a2b38, #16242f);
    color: var(--secondary-color-1);
    border-color: var(--primary-color-1);
    box-shadow: -5px -5px 13px #111c25, 5px 5px 13px #1f3443;

    /* Button Properties */
    transition-duration: var(--main-transition);
    font-family: inherit;
    font-size: larger;
    font-weight: bold;
    width: 120px;
    margin: 15px;
    padding: 15px;

    /*Border Properties*/
    border-style: solid;
    border-width: 0px;
    border-radius: 8px;
}

button:hover{
    animation: pulse 1s infinite;
    animation-delay: 2s;
    transition-duration: 0.3s;
    color: white;
    background: linear-gradient(315deg, #182834, #182834);
    box-shadow: 0px 0px 0px #111c25, 0px 0px 0px #1f3443;
    transition: ease-out 0.3s;
}

button:active{
    transition-duration: 0.2s;
    color: white;
    background-color: var(--secondary-color-1);
    border-color: var(--secondary-color-3);
    box-shadow: none;
}

button:focus{
    transition-duration: 0.2s;  
    color: white;
    border-color: white;
    animation: pulse 1s infinite;
    animation-delay: 2s;
}

button img {
    padding: 0px;
    margin-bottom: -5px;
    width: 75px;
    border-radius: 15px;
}

/* _________________________________________________________________ Classes */

.borderBox {
    transition-duration: var(--main-transition);
    margin: 10px 0px 10px 0px;
    padding:10px;   
    background-color: var(--primary-color-1);
    border-style: solid;
    border-width: 3px;
    border-radius: 8px;
    border-color: var(--primary-color-3);
}

.borderBox:hover{
    transition-duration: var(--main-transition);
    background-color: var(--primary-color-3);
    color: var(--secondary-color-3);
}

.borderlessBox {
    margin: 10px 0px 10px 0px;
    padding:10px;
}

/* ____________________________________________________________________ ID's */