html {
    cursor: url('../Assets/Cursor.png') 11 2, auto;
}
body {
    margin: 0px;
    color: white;
    font-size: 30px;
    text-align: center;
    font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
    text-underline-offset: 12px;
}
h1 {
    transition: 0.25s;
}
h2 {
    transition: 0.25s;
}
h3 {
    transition: 0.25s;
}

a:link { color: rgb(98, 186, 253); }
a:active { color: royalblue; }
a:visited { color: slateblue; }

.StarDivider {
    font-family: arial;
    font-size: 30px;
    color: white;
    text-shadow: 0px 0px 4px rgb(98, 186, 253);
}

.Title {
    font-size: 50px;
}

.WindowButton {
    image-rendering: pixelated;
    border-radius: 2px;
    padding-right: 2px;
    transition: 0.25s;
}
.WindowButton:hover {
    transform: scale(1.25);
}

p {
    font-size: 18px;
    color: #ffffff;
}

@keyframes RainbowText {
    0% { text-shadow: 0px 0px 4px rgb(255, 0, 0);}
    10% { text-shadow: 0px 0px 4px rgb(255, 153, 0);}
    20% { text-shadow: 0px 0px 16px rgb(255, 213, 0);}
    30% { text-shadow: 0px 0px 4px rgb(76, 233, 3);}
    40% { text-shadow: 0px 0px 4px rgb(0, 238, 255);}
    50% { text-shadow: 0px 0px 16px rgb(16, 121, 201);}
    60% { text-shadow: 0px 0px 4px rgb(163, 8, 194);}
    70% { text-shadow: 0px 0px 4px rgb(255, 0, 179);}
    80% { text-shadow: 0px 0px 16px rgb(255, 0, 153);}
    100% { text-shadow: 0px 0px 4px rgb(255, 0, 0);}
}

.SmallScreenWarn {
    font-size: 30px;
    position: fixed;
    left: 0%;
    width: 100%;
    height: 100%;
    background-image: linear-gradient(to top, darkred, red);
    display: none;
    text-align: center;
    justify-content: center;
}
.SmallScreenContain {
    position: fixed;
    left: 0%;
    top: 25%;
    background-color: darkred; 
    width: 100%;
    margin: auto;
}

.CRT {
    position: fixed;
    left: 0%;
    width: 100%;
    height: 100%;
    opacity: 0.075;
    pointer-events: none;
}
.Links {
    text-decoration: none;
}
.LinkButton {
    width: 128px;
    height: 128px;
    transform: scale(1.33);
    image-rendering: pixelated;
    transition: 0.25s;
    background-color: transparent;
    border-radius: 2px;
    margin: 0px 25px 0px 25px;
    cursor: url('../Assets/Cursor_Hover.png') 18 6, pointer;
}
.LinkButton:hover {
    transform: scale(1.5);
    background-color: rgba(255, 255, 255, 0.404);
    box-shadow: 0 0 4px white;
}
.LinkButtonSmol {
    width: 56px;
    height: 56px;
    image-rendering: pixelated;
    margin: 25px 0px 5px;
    transition: 0.25s;
    border-radius: 2px;
    cursor: url('../Assets/Cursor_Hover.png') 18 6, pointer;
}
.LinkButtonSmol:hover {
    transform: scale(1.5);
    background-color: rgba(255, 255, 255, 0.404);
    box-shadow: 0 0 4px white;
}
input {
    cursor: url('../Assets/Cursor.png') 11 8, auto;
}
a {
    text-underline-offset: 4px;
    font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
    cursor: url('../Assets/Cursor_Hover.png') 18 6, auto;
    color: lightskyblue;
}
a:visited {
    color: mediumturquoise;
}
a:hover {
    color: white;
    text-shadow: 0px 0px 4px white;
}
textarea {
    font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
    background-image: linear-gradient(rgb(93, 93, 93) 0%, rgb(50, 50, 50) 45%, rgb(25, 25, 25) 55%, rgb(25, 25, 25) 80%, rgb(40, 40, 40) 100%);
    box-shadow: 0px 0px 5px gray;
    border: 2px gray solid;
    border-radius: 4px;
    color: white;
    cursor: url('../Assets/Cursor_Hover.png') 18 6, auto;
    transition: 0.25s;
}
textarea:hover {
    transform: scale(1.125);
    box-shadow: 0px 0px 8px white;
    border-color: white;
}
button {
    font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
    background-image: linear-gradient(rgb(93, 93, 93) 0%, rgb(50, 50, 50) 45%, rgb(25, 25, 25) 55%, rgb(25, 25, 25) 80%, rgb(40, 40, 40) 100%);  
    box-shadow: 0px 0px 4px gray;
    border: 2px gray solid;
    border-radius: 4px;
    color: white;
    cursor: url('../Assets/Cursor_Hover.png') 18 6, auto;
    transition: 0.25s;
}
button:hover {
    transform: scale(1.25);
    box-shadow: 0px 0px 8px white;
    border-color: white;
}
audio {
    background-color: gray;

    box-shadow: 0px 0px 4px gray;
    border: 4px gray ridge;
}
.WindowContainer {
    background-image: url('../Assets/BG04.png');
    box-shadow: 0px 0px 4px gray;
    border: 2px gray solid;
    width: 95%;
    margin: auto;
    image-rendering: pixelated;
    border-radius: 8px;
    font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
}
iframe {
    border-radius: 8px;
}
.StarBlanket {
    border: 2px gray solid;
    box-shadow: 0 0 4px gray;
    border-width: 0px 2px 2px;
			
    display: inline-block;
    border-radius: 4px;
    font-size: 30px;

    width: 62.5vw;
    background-blend-mode: normal, normal, normal, soft-light, normal;
    background-image: url('../Assets/Rose.png'), url('../Assets/Stars.png'), radial-gradient(#009dff3d, #000000a8), url('../Assets/BG07.gif'), url('../Assets/BG02.png');
    background-repeat: no-repeat, no-repeat, no-repeat, repeat, repeat;
    background-size: 240px, 320px, 100%, 75px, 60px;
    background-position: left bottom, right 22.5vw, 0px 0px, 0px 0px, 0px 0px;
    font-family: WanderersLost;
    image-rendering: pixelated;
}
.CoolParagraph {
    margin: 3.75vw;
    color: cornflowerblue;
    text-shadow: 2px 2px blue;
    border-radius: 8px;
    background-color: #0000008e;
}
.Window {
    background-color: #0000008e;
    box-shadow: 0px 0px 4px gray; border: 2px gray solid; border-width: 0px 2px 0px;

    vertical-align:middle;
    display: inline-block;

    border-radius: 12.5px;

    color: white;
    font-size: 30px;
    text-align: center;
    font-family: WanderersLost, 'Trebuchet MS', 'Lucida Sans Unicode', 'Lucida Grande', 'Lucida Sans', Arial, sans-serif
}
.FancyBox {
    font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
    font-size: 25px;
    text-underline-offset: 6px;

    padding: 5px;
    margin: auto;
    width: 40%;
    background-image: linear-gradient(rgb(93, 93, 93) 0%, rgb(50, 50, 50) 45%, rgb(25, 25, 25) 55%, rgb(25, 25, 25) 80%, rgb(40, 40, 40) 100%);  
    box-shadow: 0px 0px 4px gray;
    border: 2px gray solid;
    border-radius: 4px;
}
.MiniNavigateBar {
    position:sticky;
    top: 0vh;
    width: 99vw;
    height: 100px;
    margin: auto;
    justify-content: center;
    z-index: 1;

    background-image: linear-gradient(rgba(32, 32, 32, 0.75), black);
    border-radius: 0px 0px 12.5px 12.5px;
    vertical-align: middle;
    display: flex;

    box-shadow: 0px 0px 10px gray;
    border: 2px gray solid;
    border-top: none;
}
.Top {
    background-image: linear-gradient(rgb(93, 93, 93) 0%, rgb(50, 50, 50) 45%, rgb(25, 25, 25) 55%, rgb(25, 25, 25) 80%, rgb(60, 60, 60) 100%);
    border-radius: 24px 24px 0px 0px;
    position: relative;
    top: -25px;
    display: flex;
    justify-content: center;
            
    box-shadow: 0px 0px 4px gray;
    border: 2px gray solid;
    border-width: 2px 2px 0px;
    font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
}
.Top::before {
    width: 85%;
    height: 50%;
    border-radius: 15px;
    filter: blur(2px);

    position: absolute;
    top: 0px;
    background-image: linear-gradient(rgba(0, 0, 0, 0), rgba(255, 255, 255, 0.125));
    content: "";
}
#aero-ring {
    background-image: linear-gradient(white, #9fe2ff75 20%, #9fe2ff75 48%, #58617275 52%, #58617275 65%, #9fe2ff75), url('../Assets/BG09.png');
    background-size: cover;
    border-radius: 10px;
    text-shadow: -1px -1px blue, 1px -1px blue, 1px 1px blue, -1px 1px 4px blue;
    box-shadow: 0 0 4px rgba(0, 0, 0, 0.5),
        inset 0 2px 1px rgba(255, 255, 255, 0.15),
        inset 0 -2px 1px rgba(0, 0, 0, 0.35);
    font-family: sans-serif;
    margin: 10px auto 0px auto;
    max-width: 15rem;
    padding: 0.75rem;
    border: outset 2px blue;
}
#aero-ring:hover {
    box-shadow: 0px 0px 0px 2px aqua, 0px 0px 32px blue;
}
#aero-ring a,
#aero-ring a:visited {
    color: aqua !important;
    text-decoration: none;
}
#aero-ring a:focus,
#aero-ring a:hover,
#aero-ring a:active {
    transform: scale(1.2);
    color: white !important;
    text-shadow: 0px 0px 4px blue, 0px 0px 4px white;
}
blogtitlefont {
    text-align: center;
    font-size: 20px;
    margin: auto;
    background-color: rgba(0, 0, 0, 0.5);
    font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
}
blogcardp {
    font-size: 10px;
    background-color: rgba(0, 0, 0, 0.5);
    text-align: left;
    margin-top: 15px;
    padding: 2px;
    font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
}
.TextBox {
    background-color: #000000;
    background-image: url('../Assets/BG02.png');
    background-repeat: repeat;

    padding: 25px;
    vertical-align:middle;
    max-width: 1025px;
    display: inline-block;

    border-radius: 2px;
    border: 4px #292d3f solid;
    color: white;
    font-size: 30px;
    text-align: center;
    font-family: WanderersLost, Courier, monospace;
}
.BlogCard {
    background-color: #000000;
    background-image: url('../Assets/BG02.png');
    background-repeat: repeat;
    background-size: cover;

    margin-bottom: 20px;
    padding: 25px;
    vertical-align:middle;
    width: 300px;
    height: 145px;
    display: inline-block;

    box-shadow: 0px 0px 10px gray;
    border: 2px gray solid;
    border-radius: 4px;

    color: white;
    font-size: 15px;
    text-align: center;
    font-family: WanderersLost, Courier, monospace;
    transition: 0.25s;
}
.BlogCard:hover {
    transform: scale(1.25);
}
.ChangePageButton {
    display: flexbox;
    float:none;
    width: 120px;
    height: 80px;
    margin: 0px 30px 0px;
    cursor: url('../Assets/Cursor_Hover.png') 18 9, auto;
    text-align: center;
    color: gray;
    border: none;
    font-size: 40px;
    font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
    outline: none;
    transition: 0.25s;
    box-shadow: 0px 0px 10px gray;
    border: 2px gray solid;
    vertical-align: middle;
  }
  .ChangePageButton:hover {
    transform: scale(1.175);
    color: white;
    background-color: rgb(133, 142, 168);
  }
  .ChangePageButton.active {
    cursor: url('../Assets/Cursor_NuhUh.png') 11 8, auto;
    color: rgb(98, 186, 253);
    border-color: rgb(98, 186, 253);
    transform: scale(1.375);
    background-color: white;
  }
  thought {
    color: gray;
    font-size: 12px;
    text-shadow: 2px 2px black;
    font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
  }
  #linkWindow {
    border-radius: 2px;
  }
  .EuBox {
    width: 45vw;
    display: flex;
    justify-content: center;
    
    font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
    font-size: 25px;
    text-underline-offset: 6px;

    padding: 5px;
    margin: auto;
    background-image: radial-gradient(black, rgba(0, 0, 0, 0.66)), url('../Assets/Finland.png');
    background-size: contain;
    box-shadow: 0px 0px 4px gray;
    border: 2px gray solid;
    border-radius: 4px;
  }

  @media screen and (max-width: 650px) {
    .SmallScreenWarn {
        display: flex;
    }
    .CRT {
        display: none;
    }
    body {
        overflow: hidden;
    }
    .MiniNavigateBar {
        display: none;
    }
    .Window {
        display: none;
    }
    .LinkButton {
        display: none;
    }
    .WindowContainer {
        display: none;
    }
    .Top {
        display: none;
    }
    .MiniNavigateBar {
        display: none;
    }
    .BottomWindow {
        display: none;
    }
}