body{
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    height: 90vh;
    gap:8px;
    font-family: Verdana, Geneva, Tahoma, sans-serif;
}
input{
    min-width: 386px;
    min-height: 32px;
    padding: 0 8px ;
}
button{
    min-height: 32px;
    min-width: 198px;
    align-self: center;
    border: none;
    background-color: rgba(0, 0, 0, 0.79);
    color: rgb(237, 239, 241);
    font-weight: 600;
}
.logo{
    margin-top: 10px;
    width: 100%;
    text-align: end;
    align-self: flex-end;
    font-family: Verdana, Geneva, Tahoma, sans-serif;
    font-weight: 800;
    color: rgba(20, 12, 12, 0.683);
    margin-bottom: 32px;
}

.grade_point{
    width : 16px;
    height: 16px;
    border: 4px solid #ffffff;
    border-top: 4px solid #1f022d;
    border-radius:50%;
    animation: spin 1s linear infinite;
    margin: 20px auto;
}
@keyframes spin{
    0%{transform:rotate(0deg);}
    25%{transform:rotate(45deg);
        border-top: 4px solid #ffffff;
        background-color: rgb(255, 255, 255);}
    50%{transform:rotate(90deg);
        border-top: 4px solid #ffffff;
        background-color: #100217;}
    100%{transform:rotate(360deg);}
}