@font-face {
    font-family: 'Roboto';
    src: url('../fonts/Roboto/static/Roboto-Regular.ttf');
}

body {
    animation: slideUp 500ms ease-out;
}

@keyframes slideUp {
    from {
        opacity: 0.5;
        transform: translateY(-2rem);
    }

    to {
        opacity: 1;
        transform: translateY(0);
    }
}

.system-name {
    font-family: 'Roboto';
}

.main-container {
    /* background-color: #0068ff26; */
    padding: 1rem;
    height: 100vh;
    display: flex;
    flex-direction: column;
    align-items: center;
    user-select: none;
}

.header-container {
    width: 100%;
}

.school-logo {
    height: 2.25rem;
}

.div-container {
    max-width: 500px;
    margin: auto;
    background-color: white;
}

.title, .input-label, .school-name, .system-name, u {
    color: #071976;
}

#btnSubmit, #btnRedirect {
    background-color: #071976;
    border-color: #071976;
    color: white;
}

#btnSubmit:hover {
    background-color: #0030b4ff;
    border-color: #0030b4ff;
}