/* CSS is how you can add style to your website, such as colors, fonts, and positioning of your
   HTML content. To learn how to do something, just try searching Google for questions like
   "how to change link color." */

/* Fonts */
@font-face {
    font-family: Space;
    font-style: normal;
    font-weight: 200;
    src: url(https://rawcdn.githack.com/Oneriwien/WorldAnvilPersonalFonts/23f1f36dcfd57866101815b83b74a81fcffe3faa/AstroSpace.ttf);
    color: LicensedCommercialFontDoNotUse;
}

@font-face {
  font-family: Oswald;
  font-style: normal;
  font-weight: 400;
  src: url(https://fonts.gstatic.com/s/oswald/v36/TK3_WkUHHAIjg75cFRf3bXL8LICs1_FvsUZiZQ.woff2);
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

* {
/*Palette*/
    --Teal: #72b4ab;
        --NeonTeal: #47FFE0;
        --WhiteTeal: #C8EFED;
        --LightTeal: #a2d9ce;
        --DeepTeal: #61968e;
        --DarkTeal: #447376;
        --DarkerTeal: #274f52;
        --PitchTeal: #002528;
        --BlackTeal: #000f10;
    --Blue: #4B7481;
        --NeonBlue: #0AC6FF;
        --WhiteBlue: #cac8ef;
        --LightBlue: #56789b;
        --DeepBlue: #285D6C;
        --DarkBlue: #164460;
        --DarkerBlue: #0c3248;
        --PitchBlue: #00161C;
    --Purple: #63286B;
    --DullPurple: #582B52;
    --Glow: #C9E6E0;
/*Glass*/
    --TealGlass: rgba(0, 37, 40, 0.85);
    --TealGlass2: rgba(0, 37, 40, 0.95);
    --TealGlass3: rgba(0, 27, 30, 0.9);
    --NeonGlass: rgba(10, 198, 255, 0.8);
/*Glow*/
    --SlantNeon: inset 0px 0px 16px 4px var(--NeonTeal);
    --Neon: 0px 0px 8px 3px var(--NeonTeal);
    --NeonMed: 0px 0px 6px 2px var(--NeonTeal);
    --NeonSmall: 0px 0px 4px 2px var(--NeonTeal);

--TEXT: #000;
    --TextColor: var(--WhiteTeal);
    --HighColor: var(--NeonTeal);
--HEADERS: #000;
    --HeaderColor: #749dc7;
    --H1Color: var(--DarkBlue);
    --H2Color: var(--HeaderColor);
    --H3Color: var(--HeaderColor);
    --H4Color: var(--HeaderColor);
    --H5Color: var(--HeaderColor);


/*Colors*/
    --BlueGlass: rgba(19, 62, 113, 0.7);
    --Navy: #0d253f;
    --DeadBlue: #304864;
}

body {
    font-family: Oswald;
    background-image: url("https://www.worldanvil.com/i/1960529/render");
    background-color: var(--PitchTeal) ;
    background-position: center center;
    background-repeat: no-repeat;
    background-attachment: fixed;
    background-size: cover;
    color: var(--TextColor);
}

.page {
    background-color: var(--TealGlass);
    background-image: url("https://www.transparenttextures.com/patterns/dark-mosaic.png");
    background-size: 188px 178px;
    background-repeat: repeat;
    border: 2px solid var(--BlackTeal);
    box-shadow: 0px 0px 10px 10px var(--TealGlass), inset 0px 0px 0px 2px var(--BlackTeal);
    margin: 0%;
    padding: 20px;
}

@media (min-width: 800px) {
    .page {
        margin: 1.5%;
    }
}

@media (min-width: 1200px) {
    .page {
        margin-top: 1%;
        margin-left: 5%;
        margin-right: 5%;
    }
}

@media (min-width: 2000px) {
    .page {
        margin-top: 1%;
        margin-left: 8%;
        margin-right: 8%;
    }
}

.page-cover {
  display: block;
  height: 340px;
  width: 100%;
  background-image: url("https://morganbiscup.neocities.org/Images/VazdimetCover_Large.jpg");
  background-size:cover;
}

.center {
  text-align: center !important;
}

/* Text */
h1 {
    font-family: Space;
    color: var(--HighColor);
    font-size: calc(1.4rem + 1.6vw);
    font-weight: 300;
    letter-spacing: 0.5px;
    margin: 0px;
    margin-top: 40px;
    text-align: center;
}

.subtitle {
    font-size: calc(1rem + 1.2vw);
    margin-top: 0px;
}

h2 {
    color: var(--HeaderColor);
    text-shadow: 1px 0px #111, 0px 1px #111, -1px 0px #111, 0px -1px #111;
    font-size: calc(1rem + 1.5vw);
    font-weight: 400;
    line-height: 1.4;
}

a {
    color: var(--HighColor);
    text-decoration: none;
}

a:hover {
    border-bottom: 2px solid var(--HighColor);
    border-radius: 4px;
}


/* Button */
button {
    color: var(--HighColor);
    background: var(--DarkBlue);
    border: 3px solid var(--DarkerBlue);
    color: rgba(255, 255, 255, 1);
    font-size: 14pt;
    line-height: normal;
    padding: 8px;
    border-radius: 4px;
}

button:hover {
    background: var(--DarkerBlue);
    cursor: pointer;
}