*,
*::after,
*::before {
    box-sizing: inherit;
}

@import url('https://fonts.googleapis.com/css2?family=Lora&display=swap');
:root {
    --black-background-color: #230044;
    --light-background-color: rgb(204, 204, 204);
}

html {
    width: 100%;
    height: 2000px;
    /* max-height: 150%; */
    box-sizing: border-box;
    margin: 0;
    padding: 0;
    color: aliceblue;
    font-family: "Trirong", sans-serif;
    user-select: none;
    text-decoration: none;
    font-size: 20px;
    font-weight: bolder;
}

.form_container {
    justify-content: center;
    padding: 10px;
    border: 0;
    margin-top: 10px;
}

.form_container input {
    margin: 10px;
    padding: 7px;
    display: table-cell;
    background-color: #b1c0c6;
    color: black;
    border-radius: 4px;
    border: none;
}

.form_container button {
    margin: 10px;
    padding: 10px;
    display: table-cell;
    background-color: #b1c0c6;
    color: black;
    border-radius: 8px;
    border: none;
}

.form_container label {
    display: table-cell;
}

.form_container form {
    display: grid;
}

html a:link {
    color: aliceblue;
    text-decoration: none;
}

html a:visited {
    color: aquamarine;
}

html a:hover {
    color: black;
    cursor: pointer;
}

html input {
    cursor: pointer;
}

html table {
    text-align: center;
    justify-content: center;
    border: 2px solid white;
    border-radius: 9px;
    border-spacing: 5px;
}

html td {
    border: 0;
    border-radius: 9px;
    border-right: 2px solid white;
    border-left: 2px solid white;
    padding: 3px;
    width: fit-content;
}

html th {
    width: 150px;
}

.header {
    top: 0;
    display: grid;
    text-overflow: 0;
    background-color: #2f2e2d;
    height: 6rem;
    width: 100%;
    border-radius: 0px 0px 400px 400px / 0px 0px 110px 110px;
}

.profile__container {
    background-color: white;
    width: 50px;
    height: 50px;
    display: flex;
    border-radius: 50%;
    margin-left: 6rem;
    margin-top: 1rem;
}

.user__info {
    position: absolute;
    margin-top: 1rem;
    margin-left: 4rem;
    width: max-content;
    height: max-content;
}

.header ul {
    padding: 0;
    margin-top: -2rem;
    margin-bottom: 0;
    display: flex;
    justify-self: center;
    width: fit-content;
    height: fit-content;
}

.header ul a {
    display: contents;
    color: aliceblue;
}

.header li {
    margin: 13px 4px;
    min-width: 100px;
    top: 0;
    background-color: cadetblue;
    list-style-type: none;
    border: 1px teal;
    padding: .2rem;
    border-radius: 5px;
    text-align: center;
}

.header li:hover {
    background-color: #230044;
    color: azure;
    transition: all 0.5s;
}

.footer__containter {
    position: relative;
    display: absolute;
    bottom: 0;
    margin: 0;
    padding: 0;
    text-align: center;
    background: rgb(63, 94, 251);
    background: radial-gradient(circle, rgba(63, 94, 251, 1) 0%, rgba(174, 90, 226, 1) 20%, rgba(87, 206, 133, 1) 46%, rgba(168, 81, 171, 1) 64%, rgba(75, 101, 215, 1) 82%, rgba(252, 70, 107, 1) 100%);
    width: 100%;
}

.scores__body {
    margin: 0;
    padding: 0;
}

.scores__containter table {
    border: 0;
    width: 80%;
    text-align: center;
    margin: 0;
    padding: 0;
    border-radius: 9px;
    margin-top: 0;
}

.scores__containter td {
    border-radius: 9px;
    background-color: rgb(21, 197, 138);
}

.base__body {
    margin: 0;
    padding: 0;
    background-image: url("pics/bg.jpg");
    background-repeat: repeat-y;
    background-size: cover;
}

.day__get__schedule__table {
    width: 70%;
    height: 100px;
    margin: 0;
    padding: 0;
    border-radius: 9px;
}

.day__get__schedule__table td {
    border-radius: 9px;
    background-color: rgb(21, 197, 138);
}

.day__get__schedule__table th {
    font-family: "BRoya";
    border-radius: 9px;
    background-color: rgb(21, 197, 138);
}

.class__date__get__schedle__table {
    border: 0;
    width: 65%;
    text-align: center;
    margin: 0;
    padding: 0;
    border-radius: 9px;
}

.class__date__get__schedle__table td {
    font-family: "BRoya";
    border-radius: 9px;
    background-color: rgb(21, 197, 138);
}

.scores__containter {
    width: 100%;
    display: flex;
    margin: 0;
}

.scores__container_tt {
    width: 50%;
    border: 0;
    margin: auto;
    padding: 0;
    margin-top: 0;
}

.scores__container_tt table {
    margin: 0;
    width: 100%;
    padding-top: 0.5rem;
}

.logo__container {
    width: 25%;
    height: 10%;
    max-height: fit-content;
    padding: 0;
    margin: 0;
    display: flex;
    flex-direction: row-reverse;
    position: absolute;
    right: 0;
}

.logo__galaxy__container {
    display: flex;
    padding: 0;
    margin: 0;
    margin-right: 6rem;
}

.logo__galaxy__container img {
    width: 170px;
    height: 69px;
    margin-top: 10px;
    margin-right: 10px;
    padding: 0;
    left: 0;
}

#myChart {
    background-color: rgb(255, 255, 255);
    max-width: 760px;
    width: 100%;
    height: 20rem;
    padding: 0;
    margin: 0;
    bottom: 0;
    margin-top: 1rem;
}

.print__btn__scores {
    background-color: transparent;
    width: 70px;
    height: 70px;
    border-radius: 50%;
    text-align: center;
    position: absolute;
    left: 1rem;
}

@media only screen and (max-width:412px) {
    .print__btn__scores {
        background-color: transparent;
        width: 30px;
        height: 30px;
        border-radius: 50%;
        text-align: center;
        position: absolute;
        left: .2rem;
        top: 4rem;
    }
    .profile__container {
        background-color: aliceblue;
        width: 50px;
        height: 50px;
        display: flex;
        border-radius: 50%;
        margin-left: 2rem;
        margin-top: 0.5rem;
    }
    .user__info {
        display: flex;
        flex-direction: column;
        margin-top: 1.5rem;
        margin-left: 0.8rem;
    }
    .header li {
        min-width: 50px;
    }
    .header {
        top: 0;
        display: grid;
        text-overflow: 0;
        background-color: #2f2e2d;
        height: 6rem;
        width: 100%;
        border-radius: 0px 0px 400px 400px / 0px 0px 110px 110px;
    }
    .logo__galaxy__container img {
        width: 170px;
        height: 69px;
        margin-top: 5px;
        margin-right: 5px;
        padding: 0;
        left: 0;
    }
    .header ul {
        padding: 0;
        margin: 0;
        margin-top: 2rem;
    }
    .logo__galaxy__container {
        display: flex;
        padding: 0;
        margin: 0;
        margin-right: 1rem;
    }
    #myChart {
        margin-top: 1rem;
        max-width: 900px;
    }
    .scores__containter {
        margin-top: 4rem auto;
        justify-content: center;
    }
    .scores__container_tt {
        flex-grow: 1;
        width: 70%;
        border: 0;
        margin: 0;
        padding: 0;
        margin-top: 1rem;
    }
    .scores__container_st {
        flex-grow: 1;
        width: 70%;
        border: 0;
        margin: 0;
        padding: 0;
        margin-top: 3rem;
    }
}