/* Variables */
:root {
    --color-landing-blue: #417590;
    --color-background: #E3E7D3;
    --color-visible: #588180;
    --color-concealed: #D1A388;
    --color-orange: #DD6622;
    --color-deep-orange: #B04A10;
    --color-beige: #EDCBB1;
    --color-brown: #56483F;
    --color-off-brown: #625E56;
    --color-light-brown: #7B7263;
    --color-dark-brown: #494949;
    --color-true-black: #000000;
    --color-black: #222222;
    --color-light-black: #444444;
    --color-gray: #666666;
    --color-light-gray: #888888;
    --color-white: #F8F8F8;
    --color-off-white: #EEEEEE;
    --color-dark-white: #DDDDDD;
    --color-yellow: #F7D08A;
    --color-purple: #CF8BA3;
    --color-deep-purple: #884488;
    --color-myth-purple: #510D51;
    --color-blue: #476C9B;
    --color-deep-blue: #1B406F;
    --color-green: #3F784C;
    --color-deep-green: #134B1F;
    --color-red: #BB2222;
    --color-deep-red: #700000;
    --color-bright-red: #FF0000;
    --color-light-red: #AB4E68;
    --color-light-orange: #EC864D;
    --color-lighter-orange: #FFA775;
    --color-light-blue: #6388b7;
    --color-light-green: #55a267;
    --color-light-yellow: #f8d9a1;
    --color-pale-green: #AAD1B3;
    --color-weight-none: #DDDDDD;
    --color-weight-small: #CDB99F;
    --color-weight-medium: #BD9560;
    --color-weight-large: #9C6D3D;
    --color-weight-huge: #432818;
    --color-weight-colossal: #33251D;
    --color-weight-epic: #201000;
    --color-night-blend: #666666;
    --color-golden-border: #ffb000;
    --border-radius: 5px;
    --text-outline: 1px 1px 0px var(--color-black), -1px -1px 0px var(--color-black), 1px -1px 0px var(--color-black), -1px 1px 0px var(--color-black);
    --time-dial-height: 12vh;
}

/* Font Families */
@font-face {
    font-family: 'Cinzel Decorative';
    src: url(fonts/CinzelDecorative-Regular.ttf) format('truetype');
    font-weight: normal;
    font-style: normal;
}
@font-face {
    font-family: 'NovaMono';
    src: url(fonts/NovaMono-Regular.ttf) format('truetype');
    font-weight: normal;
    font-style: normal;
}
@font-face {
    font-family: 'VT323';
    src: url(fonts/VT323-Regular.ttf) format('truetype');
    font-weight: normal;
    font-style: normal;
}
@font-face {
    font-family: 'Calligraffitti';
    src: url(fonts/Calligraffitti-Regular.ttf) format('truetype');
    font-weight: normal;
    font-style: normal;
}
@font-face {
    font-family: 'MedievalSharp';
    src: url(fonts/MedievalSharp-Regular.ttf) format('truetype');
    font-weight: normal;
    font-style: normal;
}
@font-face {
    font-family: 'AlexBrush';
    src: url(fonts/AlexBrush-Regular.ttf) format('truetype');
    font-weight: normal;
    font-style: normal;
}
@font-face {
    font-family: 'Akaya Telivigala';
    src: url(fonts/AkayaTelivigala-Regular.ttf) format('truetype');
    font-weight: normal;
    font-style: normal;
}
@font-face {
    font-family: 'Lato';
    src: url(fonts/Lato-Regular.ttf) format('truetype');
    font-weight: normal;
    font-style: normal;
}
@font-face {
    font-family: 'XanhMono';
    src: url(fonts/XanhMono-Regular.ttf) format('truetype');
    font-weight: normal;
    font-style: normal;
}

/* Medieval Buttons*/
/*https://codepen.io/MatthewLeFevre/details/zYvybgR*/
.a_btn {
    position: relative;
    background-image: url(images/textures/light-paper-fibers.png);
    background-color: var(--color-brown);
    border-radius: 9px;
    outline: none;
    cursor: pointer;
    color: var(--color-white);
    padding: 0.5em;
    font-size: 1.1em;
    font-weight: bold;
    text-decoration: none;
    text-shadow: var(--text-outline);
    filter: drop-shadow(3px 4px rgba(0, 0, 0, 0.5));
    transition-property: box-shadow, filter;
    transition-duration: 0.2s;
    transition-timing-function: ease-out;
    border-top: 4px ridge var(--color-golden-border);
    border-left: 4px groove var(--color-golden-border);
    border-right: 4px ridge var(--color-golden-border);
    border-bottom: 4px groove var(--color-golden-border);
    box-shadow: inset 0px 0px 5px 3px rgba(0,0,0,0.3);
    filter: brightness(100%);
}
.a_btn:hover {
    filter: brightness(105%);
    box-shadow: inset 0px 0px 5px 3px rgba(255,176,0,0.1);
}
body .a_btn:active {
    filter: drop-shadow(1px 1px rgba(0, 0, 0, 0.5));
}

@keyframes FadeIn {
    0% {
        opacity: 0;
    }
    100% {
        opacity: 1;
    }
}