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

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

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

    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%;
    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); }
    }
}

@media (max-width: 767.98px) {
    header {
        .navbar-toggler {
            border-color: rgba(255, 255, 255, 0.5);

            .navbar-toggler-icon {
                background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 30 30'%3e%3cpath stroke='rgba%28255, 255, 255, 1%29' stroke-linecap='round' stroke-miterlimit='10' stroke-width='2' d='M4 7h22M4 15h22M4 23h22'/%3e%3c/svg%3e");
            }
        }

        .navbar-brand { font-size: 1.75rem; }

        .navbar-collapse {
            .nav-link, .text-light { font-size: 1.25rem; }
        }

        .server-link { font-size: 1.25rem; }
    }

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

        .form-label { font-size: 1.5rem; }

        .form-control {
            font-size: 1.25rem;
            padding: 0.75rem 0.5rem;
        }

        .btn {
            font-size: 1.5rem;
            padding: 0.75rem 2.5rem;
        }
    }

    .login-form h1 {
        font-size: 2.5rem;
    }
}

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

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