@media (max-width: 1186px) and (min-width: 0px) {
    /* HOME PAGE */
        #home-page img {
            width: 85%;
            margin: 50px 0;
        }


    /* PROFILE PAGE */
        #profile div.flex-between.w-80 {
            width: 100%;
        }
}   

@media (max-width: 991px) and (min-width: 757px) {
    #change-details > section button {
        margin-top: 15px;
    }

    #change-details > section input {
        width: 100%;
    }

    #change-details > section {
        margin-top: 15px;
        margin-bottom: 35px;
    }

    .error-container {
        margin: 0;
        padding-left: 65px;
    }
}



@media (max-width: 896px) and (min-width: 0px) {
    /* GENERAL */
        .card {
            margin-top: 0;
        }

        #index,
        #profile,
        #attendance-wrapper {
            width: 90%;
            margin: auto;
        }

        #jobs-container.mt-8,
        #profile  {
            margin-top: 110px;
        }

        #index{
            padding-top: 65px;
        }

        #attendance-wrapper.my-3 {
            margin-bottom: 45px;
        }

        #attendance-page #header p {
            width: 100%;
        }

        #attendance-page button {
            margin-top: 25px;
        }

        #scan-text {
            width: 100%;
            margin: auto;
        }


    /* LOGIN / REGISTER */
        #form {
            width: 75%;
            margin: auto;
        }

        nav#logreg-navbar {
            position: unset;
            background-color: unset;
        }


    /* INDEX PAGE  */
        #home-page div.flex-between {
            padding: 30px 10px;
        }

        #home-page img {
            width: 80%;
            margin: 0;
        }

        #home-page p.xxsm {
            font-size: 19px;
        }

        #signup img {
            margin-bottom: 30px;
        }


    /* PROFILE PAGE */
        #profile {
            margin-bottom: 65px;
        }

        #profile > div.my-2 {
            margin-top: 0px;
        }

        #profile div.flex.break {
            width: 100%;
            padding-top: 25px;
        }

        #profile img {
            width: 150px;
            height: 150px;
        }
        
        #profile div.flex.break > div.ml-3 {
            width: 100%;
            margin-left: 0;
        }

        #profile div.flex.break > section {
            width: fit-content;
            margin: auto;
        }

        #profile div.flex.break > div {
            width: fit-content;
            margin: 0;
        }

        #profile div.flex.break > div p.xsm {
            font-size: 24px;
        }
        
        #profile div.flex-between.w-80 button{
            width: fit-content;
            margin: 0;
            margin-top: 10px;
        }

        #profile div.flex-between.w-80 > section {
            width: 100%;
            margin: 0;
            margin-top: 25px;
        }


    /* MARK ATTENDANCE */
        #mark-attendance {
            width: 90%;
            margin: auto;
            margin-top: 120px;
        }

        #register-alert-container {
            width: 100%;
            margin: auto;
        }
        
        #register-alert {
            width: 80%;
            margin: auto;
        }

        #register-alert #jobs-container {
            width: 100%;
        }

        p.user-image#first-letter-value {
            font-size: 40px;
            margin-top: 15px;
            width: 160px;
            height: 160px;
        }

        #change-details > section,
        #change-details > section.flex.break {
            width: 100%;
            margin: 0;
        }

        #change-details > section input {
            width: 100%;
            margin: 0;

        }

        
        #change-details > section{
            width: 100%;
            margin-top: 35px;
        }

        #change-details section input,
        #change-details section select,
        #change-details .flex.break  {
            width: 100%;
            margin: 0;
        }

    /* FOOTER */
        footer {
            width: 100%;
        }

        footer div.flex-between {
            padding: 25px;
        }

        footer section.w-50,
        footer section.w-40 {
            width: 100%;
        }

        footer section.w-40 {
           padding-top: 35px;
        }
}



@media (max-width: 757px) and (min-width: 0px) {
    /* FORUM  */   
        #forum {
            margin: 0;
        }

        #new-post {
            margin: 0;
            width: 100%;
        }

        .author-image {
            width: 35px;
            height: 35px;
            border-radius: 50%;
        }

        #comment-box {
            width: 100%;
            margin: 0;
            margin-top: 0;
            max-width: unset;
        }

        .post-engagements ul li {
            padding: 10px 15px;
            position: relative;
        }

        .forum-post {
            width: 100%;
            margin: 0;
            padding: 15px;
        }
         
        #new-post #comment-box .post-img {
            max-width: unset;
            height: 100%;
            width: 100%;
        }

        #forum .post-details img,
        #forum .post-details video.author {
            max-height: unset;
            width: 100%;
            height: auto;
        }

        #change-details > section button {
            margin-top: 15px;
        }
    
        #change-details > section {
            margin-top: 15px;
            margin-bottom: 35px;
        }

}



@media (max-width: 575px) and (min-width: 0px) {
    /* GENERAL */
        .card {
            padding: 15px;
        }

        p.mn-color.md {
            margin-top: 50px;
        }

        .error-container {
            margin: 0;
            padding-left: 0px;
        }

    
    /* PROFILE PAGE */
        #profile {
            margin-bottom: 45px;
        }
            

    /* LOGIN / REGISTER PAGE */
        header.px-5 {
            padding: 0 25px;
        }

        header img {
            height: 50px;
        }

        #sign-up #form > div:first-child {
            padding-bottom: 35px;
        }

        #form {
            width: 90%;
            margin: auto;
            padding: 45px 15px;
        }
        
        .input-container {
            padding: 0;
            width: 85%;
            padding-bottom: 0;
        }

        #password-visibility {
            height: 52px;
        }
        
        .input-field {
            width: 100%;
            border-radius: 5px;
            padding-right: 0;
            border: 2px solid #452A68;
        }

        .input-field span {
            margin: auto;
            padding: 18px 15px;
        }

        .input-container {
            width: 95%;
        }
        
        input,
        #select {
            border: 0;
        }

    
        /* pagination */       
        #pagination {
            width: 80%;
            margin: auto;
        }

        .page {
            height: 60px;
            width: 50px;
            width: fit-content;
            font-size: 12px;
            padding: 12px 25px;
        } 

        .not-show {
            display: none;
        }

        .sub-comment {
            width: 90%;
            margin-left: 10%;
        }

        #comment-container {
            padding: 25px 0;
            border-radius: 0;
        }
        
        .comment,
        .sub-comment {
            font-size: 14px;
        }
                
        .comment img,
        .sub-comment img,
        .comment p.user-image,
        #first-letter-value,
        p.user-image {
            height: 35px;
            width: 35px;
            font-size: 19px;
            line-height: 35px;
        }

        .comment section:first-child,
        .sub-comment section:first-child {
            margin-right: 8px;
        }
               
    /* POST PAGE */
        .comment,
        .sub-comment {
            font-size: 14px;
        }

        
    /* MARK ATTENDANCE */
        #mark-attendance {
            margin-top: 110px;
            margin-bottom: -35px;
        }
  
        #scanner::after {
            left: -25%;
            width: 170px;
        }

        #register-alert {
            width: 90%;
            margin: auto;
        }

        #register-alert #jobs-container > div.flex.break > div.text-left {
            margin: 0;
            width: 100%;
        }

        #register-alert #jobs-container > div.flex.break > section:first-child {
            margin: auto;
            width: fit-content;
        }
        
        #register-alert #jobs-container > div.flex.break {
            padding: 0;
            margin: 0;
            width: 100%;
            margin-top: 25px;
        }

        #register-alert #jobs-container > p {
            padding: 0;
        }

        p.user-image#first-letter-value {
            font-size: 40px;
            width: 160px;
            height: 160px;
        }

        section.w-90.success,
        section.w-90.danger {
            width: 100%;
        }

        .attendee p.user-image {
            width: 60px;
            height: 60px;
            display: flex;
            align-items: center;
            justify-content: center;
        }

        #change-details > section,
        #change-details > section.flex.break {
            width: 100%;
        }

        #change-details > section input,
        #change-details > section select,
        #change-details > section.flex.break  {
            width: 100%;
            margin: 0;
        }
        

    /* FOOTER */
        footer section.w-50 {
            flex-direction: column;
            text-align: center;
        }

        footer section.w-50 section:first-child {
            width: fit-content;
            margin: auto;
        }
}



@media (max-width: 475px) and (min-width: 0px) {
    /* PROFILE PAGE */
        #profile p.xxsm {
            font-weight: 800;
        }


    /* RANDOM */
        .mobile-view {
            display: flex;
            align-items: center;
        }

        .desktop-view {
            display: none;
        }

        .mobile-view section {
            display: block;
            margin-right: 10px;
        }

        .mobile-view a {
            font-size: 14px;
            font-weight: 900;
            margin-top: -21px;
        } 

        #register-alert {
            width: 90%;
            margin: auto;
        }

        #cancel {
            top: -10px;
            height: 40px;
            width: 40px;
            right: -15px;
            font-size: 19px;
        }

        #jobs-container #attendance-wrapper {
            margin-bottom: 10px;
        }

        #attendance-page {
            margin-bottom: 10px;
        }

        #home-page .mobile-center:last-child {
            padding-block: 0;
        }

        #form {
            margin-top: -20px;
        }

        #add-class {
            margin-top: -5px;
            margin-bottom: 75px;
        }

        #profile p.user-image-big,
        img.user-image-big
        p.user-image#first-letter-value {
            width: 150px;
            height: 150px;
            font-size: 40px;
            border-radius: 50%;
        }

        #change-details section{
            width: 100%;
        }

        #change-details section input,
        #change-details section select,
        #change-details section.flex.break  {
            width: 100%;
            margin: 0;
        }
}



@media (max-width: 445px) and (min-width: 0px) {        
    /* REGISTER / LOGIN */
        .input-field span {
            display: none;
        }
        
        input {
            width: 100%;
            font-size: 14px;
            padding: 0;
            padding: 18px;
        }

        #starred_headline {
            font-size: 10px;
            margin: 0;
        }

        #password-visibility {
            right: 0%;
            width: 43px;
            height: 57px;
        }

    
    /* FORUM PAGE */
        /* FORUM PAGE */
        .post-engagements section.w-100 {
            width: 95%;
            margin: auto;
        }

        .post-engagements ul li:first-child {
            margin-right: -10px;
        }

        .post-engagements ul li p {
            color: #000;
            font-size: 10px;
            font-weight: 700;
        }

        .post-engagements ul li i {
            font-size: 24px;
        }

        .post-engagements ul li span {
            padding: 0;
            top: 2px;
            left: 5px;
            width: 20px;
            height: 20px;
            font-size: 7px;
            display: flex;
            justify-content: center;
            align-items: center;
        }

}



@media (max-width: 350px) and (min-width: 0px) {
    #jobs-container #attendance-wrapper {
        margin-bottom: 50px;
    }

    #attendance-page {
        margin-bottom: 50px;
    }

    #home-page .mobile-center:last-child {
        padding-block: 0;
    }

    #form {
        margin-top: 20px;
    }

    #add-class {
        margin-top: 25px;
        margin-bottom: 85px;
    }
}