@font-face {
    font-family: 'arial-rounded-mt-bold';
    src: url('../fonts/Arial Rounded MT Bold/arialroundedmtbold.ttf');
}

body {
    display: flex;

    flex-direction: column;

    justify-content: center;
    align-items: center;
}

p {
    font-family: 'arial-rounded-mt-bold';
}

.Sign-container {
    display: flex;
    flex-direction: column;

    justify-content: center;
    align-items: center;

    width: 55vh;
    height: 95vh;
}

.Auth-container {
    display: flex;
    flex-direction: column;

    justify-content: flex-start;
    align-items: center;

    margin-top: 2vh;

    width: 100%;
    height: 15%;
}

.Auth {
    display: flex;

    justify-content: center;
    align-items: center;

    width: 98%;
    height: 30%;

    border: #bfbfbf 0.8vh solid;
    border-radius: 1.5vh;

    margin: 0.5vh;

    font-family: arial-rounded-mt-bold;
    font-size: 2.5vh;
    color: black;
}

.or-container {
    display: flex;
    flex-direction: row;

    justify-content: center;
    align-items: center;

    width: 100%;
    height: 3%;
}

.line {
    width: 45%;
    height: 0;

    border: #bfbfbf 0.4vh solid;
    border-radius: 1.5vh;
}

.or {
    font-family: arial-rounded-mt-bold;
    font-size: 3vh;
    color: #bfbfbf;

    top: 0;

    margin-left: 1vh;
    margin-right: 1vh;
}

.info-container {
    display: flex;
    flex-direction: column;

    justify-content: center;
    align-items: center;

    width: 100%;
    height: 25%;
}

.name-container {
    display: flex;
    flex-direction: row;

    justify-content: center;
    align-items: center;

    width: 100%;
    height: 20%;

    margin-bottom: 1.4vh;
}

.info {
    display: flex;
    flex-direction: row;

    justify-content: center;
    align-items: center;

    width: 98%;
    height: 5vh;

    font-family: arial-rounded-mt-bold;
    font-size: 2.5vh;
    color: #bfbfbf;

    border: #bfbfbf 0.8vh solid;
    border-radius: 5vh;

    margin: 0.5vh;

}

.btn-container {
    display: flex;
    flex-direction: column;

    justify-content: center;
    align-items: center;

    width: 100%;
    height: 15%;
}

.btn {
    display: flex;

    justify-content: center;
    align-items: center;

    width: 50%;
    height: 40%;

    background: #59c4f6;
    border-radius: 5vh;

    font-family: arial-rounded-mt-bold;
    font-size: 2.5vh;
    color: white;

    transition: 0.2s;
}

.btn:hover {
    opacity: 0.7;
}

.btn:active {
    opacity: 0.5;
}

.btn-link {
    margin-top: 0.8vh;

    font-family: arial-rounded-mt-bold;
    font-size: 1.5vh;
    color: #4b76ed;
}

.support-email {
    font-family: arial-rounded-mt-bold;
    font-size: 1.5vh;
    color: black;
}