@import url('https://fonts.googleapis.com/css2?family=Inter:wght@100..900&display=swap');

body {
    font-family: "Inter", sans-serif;
    background: #6CCDEC;
    text-align: center;
    padding: 10% 5%;
}

.admin_head {
    color: white;
    margin-top: 2%;
    font-size: 27px;
    margin-bottom: 5%;
    @media (max-width: 1600px) {
        font-size: 27px;
        margin-bottom: 5%;
        margin-top: 2%;
    };
    @media (max-width: 1000px) {
        font-size: 24px;
        margin-bottom: 6%;
        margin-top: 5%;
    };
    @media (max-width: 800px) {
        font-size: 21px;
        margin-bottom: 7%;
        margin-top: 10%;
    };
    @media (max-width: 600px) {
        font-size: 19px;
        margin-bottom: 8%;
        margin-top: 20%;
    };
    @media (max-width: 400px) {
        font-size: 17px;
        margin-bottom: 8%;
        margin-top: 25%;
    };
}


.admin_pass {
    width: 30%;
    padding: 1% 2%;
    border-radius: 20px;
    border: 1px solid silver;
    margin-bottom: 1%;
    @media (max-width: 1600px) {
        width: 30%;
        margin-bottom: 1%;
    };
    @media (max-width: 1000px) {
        width: 35%;
        margin-bottom: 2%;
    };
    @media (max-width: 800px) {
        width: 40%;
        margin-bottom: 3%;
    };
    @media (max-width: 600px) {
        width: 45%;
        margin-bottom: 4%;
    };
    @media (max-width: 400px) {
        width: 50%;
        margin-bottom: 5%;
    };
}

.admin_button {
    background: #6CCDEC;
    color: #FFF;
    border: 1px solid #FFF;
    border-radius: 20px;
    font-size: 19px;
    padding: 1% 4%;
    transition: all 0.3s linear;
    @media (max-width: 1600px) {
        font-size: 19px;
    };
    @media (max-width: 1000px) {
        font-size: 18px;
        padding: 1.5% 5%;
    };
    @media (max-width: 800px) {
        font-size: 17px;
        padding: 2% 6%;
    };
    @media (max-width: 600px) {
        font-size: 16px;
        padding: 2.5% 7%;
    };
    @media (max-width: 400px) {
        font-size: 15px;
        padding: 3% 8%;
    };
}

.admin_button:hover {
    background: #00AEEF;
}

.logo {
    position: absolute;
    top: 3%;
    left: 3%;
    width: 15%;
    @media (max-width: 1600px) {
        width: 15%;
    };
    @media (max-width: 1000px) {
        width: 20;
    };
    @media (max-width: 800px) {
        width: 25%;
    };
    @media (max-width: 600px) {
        width: 30%;
    };
    @media (max-width: 400px) {
        width: 35%;
    };
}