@font-face {
    font-family: BKoodak;
    src: url("../font/B\ Koodak\ Bold_0.ttf");
}

* {
    font-family: BKoodak;
}

@media screen and (width > 768px) {
    body {
        width: 100%;
        height: 100dvh;
        padding: 0;
        margin: 0;
        background-color: rgba(9, 9, 81, 0.945);
        display: flex;
        justify-content: center;
    }

    * {
        user-select: none;
        box-sizing: border-box;
    }

    main {
        width: 90%;
        border-radius: 10px;
        display: flex;
        align-items: center;
        height: 100dvh;
        position: relative;
        flex-direction: column;
    }

    .title {
        height: 10%;
        position: fixed;
        color: white;
        font-size: 50px;
        margin: 10px;
        padding-top: 10px;

    }

    .school-name {
        top: 10%;
        height: 10%;
        position: fixed;
        color: white;
        font-size: 25px;
        margin: 10px;
        padding-top: 10px;
    }

    .container {
        position: fixed;
        top: 18%;
        width: 100%;
        height: 80%;
        display: grid;
        justify-content: center;
        flex-direction: column;
        overflow-y: scroll;
    }

    .payeh {
        display: flex;
        align-items: center;
        flex-direction: column;
        margin: 5px;
    }

    .payesh_name {
        width: 400px;
        background-color: orange;
        height: 80px;

        display: flex;
        align-items: center;
        justify-content: center;
        flex-direction: column;
        font-size: 40px;
        color: white;
        font-weight: bold;
        border-radius: 10px;
        box-shadow: 0 0 10px orange;
        transition: 0.5s;
        z-index: 1;
    }

    .payesh_name:hover {
        box-shadow: 0 0 10px rgb(185, 121, 1);
        background-color: rgb(185, 121, 1);

    }

    .lessons_container {

        width: 100%;
        height: 0;
        background-color: antiquewhite;
        transform: translateY(-15px);
        z-index: 0;
        border-radius: 0 0 5px 5px;
        overflow: hidden;
        padding-top: 0px;
    }

    .lessons {
        display: flex;
        align-items: center;
        flex-direction: column;
        width: 100%;

        font-size: 40px;
        border-bottom: 1px solid black;
        transition: 0.5s;
    }

    .lessons:last-child {

        border-bottom: 0px solid black;
    }

    .inshow .lessons_container {
        padding-top: 20px;
        height: 100%;
        transition: 0.5s;
    }

    .lesons a,
    a {
        width: 100%;
        height: 80px;
        padding: 5px;
        text-decoration: none;
        color: black;
        margin: 10px;
        display: flex;
        align-items: center;
        justify-content: center;
    }

    .lessons a:hover {
        background-color: rgba(19, 17, 14, 0.361);
    }
}

@media screen and (width < 768px) {
    body {
        width: 100%;
        height: 100dvh;
        padding: 0;
        margin: 0;
        background-color: rgba(9, 9, 81, 0.945);
        display: flex;
        justify-content: center;
    }

    * {
        user-select: none;
        box-sizing: border-box;
    }

    main {
        width: 90%;
        height: 100%;
        border-radius: 10px;
        display: flex;
        align-items: center;
        flex-direction: column;
    }

    .title {
        padding-top: 10px;
        position: fixed;
        color: white;
        margin: 10px;
        height: 8dvb;
        top: 0;

    }

    .school-name {
        position: fixed;
        color: white;
        margin: 10px;
        height: 8dvb;
        top: 9dvh;
    }

    .container {
        position: fixed;
        top: 15dvh;
        width: 100%;
        height: 82dvh;
        display: grid;
        justify-content: center;
        flex-direction: column;
        overflow-y: scroll;
        scrollbar-width: none;
    }

    .payeh {
        display: flex;
        flex-direction: column;
        margin: 5px;
    }

    .payesh_name {
        width: 250px;
        background-color: orange;
        height: 50px;

        display: flex;
        align-items: center;
        justify-content: center;
        flex-direction: column;
        font-size: 30px;
        color: white;
        font-weight: bold;
        border-radius: 10px;
        box-shadow: 0 0 10px orange;
        transition: 0.5s;
        z-index: 1;
        padding: 5px;
    }

    .payesh_name:hover {
        box-shadow: 0 0 10px rgb(185, 121, 1);
        background-color: rgb(185, 121, 1);

    }

    .lessons_container {

        width: 100%;
        height: 0;
        background-color: antiquewhite;
        transform: translateY(-15px);
        z-index: 0;
        border-radius: 0 0 5px 5px;
        overflow: hidden;
        padding-top: 10px;
    }

    .lessons {
        display: flex;
        align-items: center;
        flex-direction: column;
        width: 100%;

        font-size: 20px;
        border-bottom: 1px solid black;
        transition: 5s;
    }

    .lessons:last-child {

        border-bottom: 0px solid black;
    }



    .inshow .lessons_container {
        padding-top: 20px;
        height: 100%;
        transition: 0.5s;
    }

    .lessons a,
    a {
        width: 100%;
        height: 50px;
        padding: 5px;
        text-decoration: none;
        color: black;
        margin: 5px;
        display: flex;
        align-items: center;
        justify-content: center;
        bottom: 0;
    }

    .lessons a:hover {
        background-color: rgba(19, 17, 14, 0.361);
    }
}