Untitled

<style>
@media (pointer:none), (pointer:coarse) {
    body {
        overflow-Y: scroll !important;
    }
}

@media (max-width:700px) {
    body {
        overflow-Y: scroll !important;
    }

    #links {
        width: 100% !important;
    }
}

body::before {
    height: 100vh;
    width: 100vw;
    content: "";
    position: fixed;
    top: 0px;
    left: 0px;
    z-index: -1; /* Ensure this stays under all elements */
    filter: blur(3px) saturate(70%) brightness(75%);
}

body {
    height: 100vh;
    width: 100vw;
    color: #FFF;
    overflow: hidden;
    background-color: black;
    background-image: url("https://cdn.discordapp.com/attachments/676989065769254912/681666633345007677/63-635006_gta-5-sunset-gta-5-background-hd.jpg");
    background-size: cover;
    background-repeat: no-repeat;
    background-position: center center;
    font-family: arial;
}

/* Page Layout **/
#grid-wrapper {
    display: grid;
    grid-template-rows: 3fr 5fr 2fr;
    min-height: 100vh;
    padding: 2vh 2vw 2vw 2vh;
}

header {
    display: grid;
    align-content: center;
    font-style: oblique;
    font-family: "Trebuchet MS";
    padding-left: 5vw;
    margin-bottom: 5vh;
    margin-top: -40vh;
}

header i {
    position: relative;
    top: -10px;
}

#headline h1 {
    font-size: 4em;
    margin-bottom: 0px;
    position: relative;
    z-index: 2;
    filter: drop-shadow(5px 5px 3px rgba(0,0,0,0.5));
    user-select: none;
}

#headline h1 i {
    margin-left: 25px;
    margin-right: 25px;
}

#headline h3 {
    font-size: 1.5em;
}

main {
    display: grid;
    align-content: center;
}

#links {
    display: grid;
    width: 50%;
    grid-template-columns: repeat( auto-fit, minmax(5em, 1fr) );
    grid-gap: 5em;
    margin-top: -50px;
}

#links a {
    color: white;
    font-size: 2em;
    text-decoration: none;
    display: grid;
    grid-row: 1fr 1fr;
    align-content: center;
    justify-content: center;
    text-align: center;
}

a:hover {
    transform: scale(0.99);
    filter: drop-shadow(3px 3px 2px rgba(0,0,0,0.5));
}

a i {
    font-size: 4em;
    margin-bottom: 20px;
}

a .text-link {

}

footer {
    display: grid;
    align-content: end;
    justify-content: center;
    padding-bottom: 2vh;
}
</style>

<html>
    <head>
        <title>Sunset Roleplay</title>
        <meta charset="UTF-8">
        <meta name="description" content="CC0 Landing Page Template for Minecraft">
        <link rel="stylesheet" type="text/css" href="https://cdnjs.cloudflare.com/ajax/libs/normalize/8.0.1/normalize.min.css">
        <link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.7.2/css/all.css" integrity="sha384-fnmOCqbTlWIlj8LyTjo7mOUStjsKC4pOpQbqyi7RrhN7udi9RwhKkMHpvLbHG9Sr" crossorigin="anonymous">
    </head>

    <body>

        <section id="grid-wrapper">
        <background>
            </background>
            <header id="headline">
                <img src="https://cdn.discordapp.com/attachments/676989065769254912/681656445321740302/SRPlogo.png" alt="SunsetRP" style="width:300px;height:300px;">
            </header>
            <main id="links">
                <a href="/apply"><i class="fas fa-book-open" style="color:#9DA6A6;"></i><span class="link-Text">Apply</span></a>
                <a href="/forum"><i class="far fa-comments" style="color:#9DA6A6;"></i><span class="link-Text">Forum</span></a>
                <a href="/gallery"><i class="fas fa-images" style="color:#9DA6A6;"></i><span class="link-Text">Gallery</span></a>
            </main>
            <footer id="footer">
                <p>&copy; 2020 Sunset RP</p>
            </footer>
        </section>
    </body>

</html>