/* Mobile devices */
@media only screen and (max-width: 480px) {

    
    #challenge-page {
        flex-direction: column;
        justify-content: center;
        gap: 3rem;
        padding: 1rem;
    }  

    .image-wrap {
        width: 100%;
        max-width: 720px;
        height: max-content;
        margin-inline-start: 0rem;
        margin-top: 0rem;
    }

    .info-wrap {
        display: flex; justify-content: center; align-items: start; flex-direction: column;
        width: 100%; max-width: 700px; gap: 2.5rem; margin-bottom: 1.2rem;
    }

    #logo-show {
        display: block !important;
        margin-block: 3rem;
    }

    .logo-wrap {
        display: flex !important; justify-content: center; align-items: center;
        left: 30%; top: 1.2rem; gap: 1.1rem;
    }

    #title-logo-fixed {
        position:static;
        width: 50px; height: auto;
    }

    .logo-desktop {
        display: none;
    }

    .logo-text {
        font-size: 50px;
    }

    .info-level {
        font-size: 25px;
    }

    .title-wrap {flex-wrap: wrap;}

    #title-logo {width: 90px;}
    .title-text {font-size: max(min(100px, 8rem));}

}
  
/* iPads, Tablets */
@media only screen and (min-width: 481px) and (max-width: 900px) {
    
    #challenge-page {
        flex-direction: column;
        justify-content: center;
        gap: 3rem;
        margin-bottom: 4rem;
    }  

    .image-wrap {
        width: 100%;
        max-width: 720px;
        height: max-content;
        margin-inline-start: 0rem;
    }

    .info-wrap {
        display: flex; justify-content: center; align-items: start; flex-direction: column;
        width: 100%; max-width: 700px; gap: 5rem; margin-bottom: 5rem;
    }

    #logo-show {
        display: block !important;
        margin-block: 3rem;
    }

    .logo-wrap {
        display: flex !important; justify-content: center; align-items: center;
        left: 30%; top: 1.2rem; gap: 2.1rem;
    }

    #title-logo-fixed {
        position:static;
        width: 70px; height: auto;
    }

    .logo-desktop {
        display: none;
    }

    .title-wrap {flex-wrap: wrap;}

    #title-logo {width: 110px;}
    .title-text {font-size: max(min(120px, 8rem));}
}
  
/* Small screens, laptops */
@media only screen and (min-width: 901px) and (max-width: 1075px) {
  
    #challenge-page {
        flex-direction: column;
        justify-content: center;
        gap: 3rem;
    }  

    .image-wrap {
        width: 100%;
        max-width: 720px;
        height: max-content;
        margin-inline-start: 0rem;
        margin-top: 0rem;
    }

    .info-wrap {
        display: flex; justify-content: center; align-items: start; flex-direction: column;
        width: 100%; max-width: 700px; gap: 5rem;
    }

    #logo-show {
        display: block !important;
        margin-block: 3rem;
    }

    .logo-wrap {
        display: flex !important; justify-content: center; align-items: center;
        left: 30%; top: 1.2rem; gap: 2.1rem;
    }

    #title-logo-fixed {
        position:static;
        width: 70px; height: auto;
    }

    .logo-desktop {
        display: none;
    }



}
  
/* Desktops, large screens */
@media only screen and (min-width: 1076px) and (max-width: 1200px) {
    
}
  
  /* Extra large screens, TV */
@media only screen and (min-width: 1201px) {
    
}