html {
    font-size: 14px;
    height: 100%;
}

@media (min-width: 768px) {
    html { font-size: 16px; }
}

body {
    display: flex;
    flex-direction: column;
    min-height: 100vh;
    margin: 0;

    section {
        flex: 1;
        width: 100%;
    }
}

header {
    > nav {
        background: linear-gradient(to right, transparent, #00000064), #023e8a;
    }
}

.server-link, .author {
    color: #90e0ef;
    transition: color 0.3s ease;

    &:hover {
        color: #00b4d8;
    }
}

.admin-button {
    color: #ffb703;
    transition: color 0.3s ease;

    &:hover {
        color: #fb8500;
    }
}

.background {
    background: linear-gradient(to right, #03045e, #001233);
}

footer {
    width: 100%;
    white-space: nowrap;
    background: linear-gradient(to right, transparent, #00000064), #023e8a;
}

.main-form, .login-form {
    margin: 2rem 15rem;

    .form-control {
        background: transparent;
        border: none;
        border-bottom: 2px solid rgba(255, 255, 255, 0.6);
        border-radius: 0;
        color: white;

        &:focus {
            border-bottom-color: white;
            box-shadow: none;
        }

        &::placeholder {
            color: rgba(255, 255, 255, 0.4);
        }
    }
}

.copy-cookie {

    &:hover {
        background-color: rgba(255, 255, 255, 0.6);
        color: #000;
    }

    svg {
        vertical-align: text-top;
    }
}