:root {
    --b1: #111516;
    --b2: #0D0E0F;
    --b3: #111516c3;
    --c2: #559BE4;
    --c3: #1d395a;
    --t: #FFFFFF;
    --b: 1px ridge var(--c2);
}

* {
    margin: 0;
    padding: 0;
    font-family: 'Zalando';
    text-shadow: black 0px 0px 9px;
    transition-duration: 0.3s all ease;
    scroll-behavior: smooth;

    p {
        font-size: 1.225rem;
    }

    h1 {
        color: var(--c2);
        font-style: italic;
        font-weight: bold;
        font-size: 2.5em;
    }

    p,
    h1,
    h2,
    h3,
    h4,
    h5,
    h6 {
        position: relative;
    }

    body {
        background-color: var(--b1);
        color: var(--t);
        background: var(--b2);
        /* background: #3a414f;
        background: linear-gradient(180deg, rgb(36, 40, 48) 0%, rgba(13, 14, 15, 1) 100%); */
        display: flex;
        flex-direction: column;
        align-items: center;
        text-align: center;
        width: 100vw;
        height: 100vh;

        nav {
            box-shadow: #2b2d2f 0px 0px 1em;
            top: 1em;
            position: sticky;
            background-color: var(--b3);
            display: flex;
            flex-direction: row;
            width: 90%;
            margin: -3.2em;
            border-radius: 5px;
            border: var(--b);
            backdrop-filter: blur(50px);
            z-index: 5;

            * {
                margin: .5%;
                border: none !important;
            }

            *:nth-child(2) {
                align-self: center;
                text-align: end;
                flex-grow: 1;

                * {
                    margin: 0%;
                }
            }
        }

        .border {
            border-bottom: 10px solid var(--c3);
        }

        header {
            background-image: url('/img/banner.png');
            background-size: cover;
            align-items: center;
            display: flex;
            flex-direction: column;
            justify-content: center;
            width: 100%;
            min-height: 1180px;
            height: 1180px;
            font-size: 300%;

            h1 {
                animation: header1 2s ease 0s normal none;
            }

            h2 {
                animation: header2 2.3s ease 0s normal none;
                font-size: 50%;
            }

            a {
                animation: header2 2.3s ease 0s normal none;
                margin: .5em;
                background-color: var(--b1);
            }
        }

        section {
            width: 100%;
            display: flex;
            flex-direction: column;
            padding: 1em 0em 1em 0em;
            background-color: var(--b1);
        }

        hr {
            width: 30%;
            height: .2em;
            transform: translateX(115%);
            margin: 1em 0em 1em 0em;
            background: var(--c2);
            background: radial-gradient(circle, var(--c2) 80%, rgba(13, 14, 15, 0) 100%);
            opacity: 70%;
            border: none;
        }

        a {
            color: var(--c2);
            text-decoration: none;
            border-radius: 8px;
            padding: .5em;
            border: 3px solid transparent;
            transition: border-color 0.5s ease;

            &:hover {
                background-color: var(--b1);
                border-color: var(--c2);
            }
        }

        img {
            max-height: 50px;
        }

        footer {
            margin: 10px;
            padding: 10px;
            opacity: 40%;
        }

        form {
            display: flex;
            flex-direction: column;
            align-self: center;
            justify-content: center;
            width: 100%;
            margin: 1em;

            * {
                background-color: transparent;
                color: var(--td);
                border: 1px ridge var(--c2);
                font-size: 100%;
                width: 100%;
                max-width: 100%;
                margin-bottom: .5em;
                padding: .5em;
                box-sizing: border-box;
                -moz-box-sizing: border-box;

                &:hover {
                    border: var(--b);
                }
            }

            button {
                background-color: var(--c2);
            }
        }

        .icon * {
            font-family: 'Symbol';
        }

        .row {
            display: flex;
            flex-direction: row;
            align-items: center;
            justify-content: center;
        }

        .card {
            background-color: var(--b2);
            display: flex;
            flex-direction: column;
            align-items: center;
            justify-content: center;
            padding: 1em;
            margin: 1em;
            max-width: 20vw;
            height: 25em;
            min-height: 25em;
            max-height: 25em;
            border-bottom: 3px solid transparent;
            transition: border-color 0.5s ease;

            p {
                height: 10% !important;
                font-size: 100%;
            }

            .icon {
                user-select: none;
                transition: scale 0.5s ease;
                width: min-content;
                font-size: 1em;
                scale: 3;
                opacity: 60%;
                border: .1em solid;
                padding: .5em .6em .5em .6em;
                margin: 2em;
                margin-bottom: 5em;
                transform: rotate(45deg);

                div {
                    transform: rotate(-45deg)
                }

                p {
                    font-size: 10%;
                }
            }

            &:hover {
                border-color: var(--c2);

                .icon {
                    scale: 3.5;
                }
            }

            p {
                margin: 1em;
                opacity: 60%;
            }
        }
    }
}

@font-face {
    font-family: 'Zalando';
    src: url('/font/ZalandoSans-Regular.ttf');
}

@font-face {
    font-family: 'Symbol';
    src: url('/font/SymbolsNerdFontMono-Regular.ttf');
}

@keyframes header1 {
    0% {
        opacity: 0%;
        transform: translateX(-500px);
    }

    100% {
        opacity: 100%;
        transform: translateX(0px);
    }
}

@keyframes header2 {
    0% {
        opacity: 0%;
    }

    100% {
        opacity: 100%;
    }
}

@media (max-width: 1000px) {
    :root {
        --b1: #111516c3 --b2: #0D0E0F;
        --b3: #111516c3;
        --c2: #559BE4;
        --c3: #1d395a;
        --t: #FFFFFF;
        --b: 1px ridge var(--c2);
    }

    html,
    body {
        overflow-x: hidden;
    }

    img {
        min-width: 130px;
    }

    header {
        min-height: 150px !important;
        img{
            min-height: 1.4em !important;
        }
        h1 {
            font-size: 1em;
        }
    }

    h1 {
        font-size: 2em;
    }

    p {
        font-size: 1.3em !important;
        scale: .9;
    }

    hr{
        transform: none !important;
    }

    * {
        margin: 0em;
        padding: 0em;
        min-width: 100%;
        max-width: 100%;
        flex-direction: column !important;
    }

    .card {
        min-height: 0px !important;
        max-height: 140px !important;
        margin: 0em !important;
        padding: 0em !important;

        &:hover {
            border-color: transparent !important;
        }
    }

    div.flex:nth-child(1),
    form {
        scale: .9 !important;
    }

    .desktop,
    .icon {
        display: none !important;
    }
}