:root {
    --white: #FFFFFF;
    --blue: #39a9dc;
    --dark: #1c1c1e;
    --font-size: 16px;
}

@font-face {
    font-family: Poppins;
    src: url('https://fonts.googleapis.com/css2?family=Poppins:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;0,800;0,900;1,100;1,200;1,300;1,400;1,500;1,600;1,700;1,800;1,900&display=swap');
}

@font-face {
    font-family: "NeuropolXRg-Regular";
    src: url("font/neuropol_x_rg.eot?") format("eot"), url("font/neuropol_x_rg.woff") format("woff"), url("font/neuropol_x_rg.ttf") format("truetype"), url("font/neuropol_x_rg.svg#NeuropolXRg-Regular") format("svg");
    font-weight: normal;
    font-style: normal;
}


body {
    background-color: var(--dark);
    margin: 0;
    font-size: var(--font-size);
    color: var(--white);
    background-image: linear-gradient(to right, var(--dark), var(--dark), var(--dark), var(--dark), var(--blue));
}

main {
    display: flex;
    justify-content: center;
    align-items: center;
    height: 100vh;
    padding: 0 16px;
    backdrop-filter: saturate(130%) blur(75px);
}

.content {
    text-align: center;
    width: 100%;
}

h1 {
    font-size: 1.75rem;
    font-weight: 200;
}

.h1-blue {
    font-family: NeuropolXRg-Regular;
    color: var(--blue);
    text-transform: uppercase;
    font-weight: 700;
    font-size: 2.25rem;
}

h3 {
    font-size: 1.25rem;
    font-weight: 200;
}

.wishvi-logo {
    width: 75%;
    margin: 50px 0;
    max-width: 600px;
}

@media screen and (min-width: 767px) {
    h1 {
        font-size: 2.75rem;
        font-weight: 100;
    }

    .h1-blue {
        font-size: 2.75rem;
        text-transform: none;
    }

    h3 {
        font-size: 1.75rem;
        font-weight: 200;
    }
}