@media (max-width: 1550px) {
    .activities-expand {
        width: 1000px;
    }
    .homework-expand .homework-heading {
        width: 990px;
    }
}

@media (max-width: 1250px) {
    .activities {
        width: 700px;
    }
    .recommended-display:nth-of-type(1) {
        margin-left: 7px;
    }
    .recommended-display {
        width: 235px;
    }
    .expand-homework.btn {
        right: -200px;
    }
    .activities-expand {
        width: 790px;
    }
    .homework-expand .homework-heading {
        width: 780px;
    }
    .homework-display {
        gap: 0rem;
    }
    .subject-homework {
        width: 10%;
    }
    .name-homework {
        width: 70%;
    }
    .teacher-homework, .due-homework {
        width: 10%;
    }
}

@media (max-width: 970px) {
    .subject-homework p{
        display: none;
    }
    .subject-homework {
        flex: 1;
    }
    .name-homework {
        flex: 10;
    }
    .teacher-homework, .due-homework {
        flex: 3;
    }
    .homework-piece.homework-heading {
        gap: 0rem;
    }
    .activities {
        width: 650px;
    }
    .expand-homework.btn {
        right: -160px;
    }
    .activities-expand {
        width: 680px;
    }
    .homework-expand .homework-heading {
        width: 670px;
    }
}
@media (max-width: 880px) {

    .close-icon {
        left: 20px;
        top: -55px;
        z-index: 2;
        width: 24px;
        height: 24px;
    }
}
@media (max-width: 830px) {
    .activities {
        width: 600px;
    }
    .expand-homework.btn {
        right: -130px;
    }
}
@media (max-width: 790px) {
    .expand-homework.btn {
        top: 14px;
        right: -50px;
    }
}

@media (max-width: 670px) {
    .subject-homework{
        display: none;
    }
    .activities {
        width: 600px;
    }
    .main-container {
        width: 470px;
        height: 270px;
    }
    .box-container {
        height: fit-content;
    }
    .header-student.header {
        margin-top: 1rem;
    }
    .main {
        height: fit-content;
    }
    #navProfileImg img{
            height: 60px;
            border-radius: 50px;
            border: 1px solid black;
    }
}
@media (max-width: 610px) {
    .activities {
        width: 96%;
    }
    .expand-homework.btn {
        top: 14px;
        right: -70px;
    }
    .select-container {
        width: 400px;
    }
    .select {
        gap: 2rem;
    }
    .select::after{ 
        transform: translateX(-100px);
        transition: all 600ms ease;
    }
    .select.underline-homework::after{
        transform: translateX(100px);
        transition: all 600ms ease;
    }
}

@media (max-width: 550px) {
    .name-homework {
        flex: 3;
        font-size: smaller;
    }
    .teacher-homework, .due-homework {
        flex: 1;
        font-size: 14px;
    }
    .expand-homework.btn {
        top: 14px;
        right: -50px;
    }
    .select {
        gap: 0rem;
    }
    .select::after{ 
        transform: translateX(-85px);
        transition: all 600ms ease;
        width: 130px;
    }
    .select.underline-homework::after{
        transform: translateX(85px);
        transition: all 600ms ease;
        width: 130px;
    }
    .user-plan-icon {
        width: 148px;
        height: 70px; /* height: 18%;  for other ones*/
        transform: translate(60px, -35px) rotate(-36deg); /* transform: translate(100px, -100px) rotate(-30deg); */
    }
    
}
@media (max-width: 510px) {
    .expand-homework.btn {
        top: 12px;
        right: -15px;
    }
    .select-homework, .select-recommended {
        position: relative;
        font-size: 18px;
    }
    .select-homework {
        right: 10px;
    }
    .select-recommended{
        left: 10px;
    }
    .select::after{ 
        transform: translateX(-75px);
        transition: all 600ms ease;
        width: 120px;
    }
    .select.underline-homework::after{
        transform: translateX(75px);
        transition: all 600ms ease;
        width: 120px;
    }
}

@media (max-width: 440px) {
    .name-homework {
        flex: 3;
        font-size: smaller;
    }
    .teacher-homework, .due-homework {
        flex: 1;
        font-size: 12px;
    }
    .expand-homework.btn {
        top: 14px;
        right: 10px;
        padding: 0.70rem 0.55rem;
    }
    .select-homework, .select-recommended {
        font-size: 16px;
    }
    .select-homework {
        right: 20px;
    }
    .select-recommended {
        left: 20px;
    }
    .select::after{ 
        transform: translateX(-65px);
        transition: all 600ms ease;
        width: 100px;
    }
    .select.underline-homework::after{
        transform: translateX(65px);
        transition: all 600ms ease;
        width: 110px;
    }
    .main-container {
        width: 114%;
    }
    .header::after {
        width: 350px; /* Width of the line */
    }
    .user-plan-text {
        transform: translate(150px, -10px);
    }
    .user-plan-icon {
        position: absolute;
        width: 116px;
        height: 55px; /* height: 18%;  for other ones*/
        transform: translate(55px, -20px) rotate(-36deg); /* transform: translate(100px, -100px) rotate(-30deg); */
    }
}

@media (max-width: 400px) {
    .select-homework {
        right: -5px;
        width: 100px;
    }
    .select-recommended {
        left: -5px;
        width: 100px;
    }
    .select::after{ 
        transform: translateX(-55px);
        transition: all 600ms ease;
        width: 100px;
    }
    .select.underline-homework::after{
        transform: translateX(55px);
        transition: all 600ms ease;
        width: 100px;
    }
    .expand-homework.btn {
        top: 14px;
        right: 25px;
        padding: 0.70rem 0.55rem;
    }
    .name-homework {
        flex: 5;
        font-size: 12px;
    }
    .teacher-homework, .due-homework {
        flex: 2;
        font-size: 12px;
    }
}

@media (max-height: 900px) {
    .main {
        min-height: 850px;
    }
    .activities {
        min-height: 315px;
    }

}