* {
    user-select: none;
    margin: 0;
}

:root {
    --bg: #1e1e2e;

    --sur0: #313244;
    --text: #cdd6f4;

    --green: #a6e3a1;
    --blue: #89b4fa;
}

body {
    background-color: var(--bg);
    color: var(--text);

    height: 100vh;

    font-family: "Montserrat", sans-serif;
    font-optical-sizing: auto;
    font-weight: 400;
    font-style: normal;

    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: column;
}

header {
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    align-items: center;

    min-height: 10vh;
    width: 100%;

    background-color: var(--sur0);

    & > h1 {
        font-weight: 650;
        letter-spacing: 5px;

        font-size: 35px;

        transition: all 0.3s;

        text-align: center;
        padding: 20px;
    }
    & > h1:hover {
        font-size: 40px;
    }

    & > p {
        padding: 5px 15px;
        margin: 20px 0;

        border: var(--blue) solid 2px;
        border-radius: 10px;

        font-size: 20px;
        text-align: center;
    }
}

a, a:active {
    color: var(--text);
}

footer {
    width: 100%;

    text-align: center;
    & > p {
        padding: 15px;
    }
}