@media (max-width:800px){
    * {
        margin: 0;
        padding: 0;
    }
    
    body {
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: space-evenly;
    }
    
    
    .arrow{
        opacity: 1;
        object-fit: cover;
        transform: rotate(270deg);
        transition: all 0.3s ease-out;
        width: 15%;
    }
    
    #simg{
        width: 100%;
        height: 100%;
        object-fit: cover;
    }
    
    #bhead{
        text-align: center;
        color: white;
        width: 100%;
        font-size: 8rem;
        font-weight: 400;
    }
    
    .sol{
        padding: 0;
        margin: 0;
        width: 100%;
        height: 700px;
        display: flex;
        flex-direction: column;
        margin-top: 20px;
        margin-bottom: 0px;
        align-items: center;
    }
    
    .box{
        display: flex;
        align-items: center;
        align-self: center;
        flex-direction: row;
        justify-content: space-around;
        border-radius: 15px;
        width: 90%;
        margin: 0;
        margin-bottom: 10px;
        height: 13%;
        background-color: var(--blue);
        cursor: pointer;
        box-shadow: 0px 10px 10px rgba(0, 0, 0, 0.10);
        transition: all 0.7s ease;
    }
    
    .box h2{
        margin-left: 20px;
        justify-content: flex-start;
        font-family: 'ivymode';
        white-space: nowrap;
        transition: all 0.3s ease;
        height: 40%;
        display: flex;
        flex: 1 1 0;
        align-items: center;
        font-weight: 400;
        color: var(--lblue);
        padding: 0;
        writing-mode:unset;
        opacity: 1;
        transform: rotate(0deg);
    }
    
    .box .isol{
        margin: 0;
        display: none;
        width: 75%;
        transition: all 0.3s ease;
        box-shadow: 0px 10px 10px rgba(0, 0, 0, 0.10);
        border-radius: 7px;
    }
    
    .box a{
        text-decoration: none;
        display: none;
    }
    
    .box h1{
        font-family: 'ivymode';
        display: flex;
        align-items: center;
        justify-content: center;
        transition: all 0.4s ease-in-out;
        opacity: 1;
        width: 30%;
        text-align: center;
        height: 100%;
        color:var(--lblue);
        font-size: 2.4rem;
        font-weight: 400;
    }
    
    .box ul{
        transition: all 0.3s ease-in-out;
        display: none;
    }
    
    .box:hover h1,.box:hover h2{
        opacity: 1;
    }
    
    .box:hover .arrow{
        opacity: 1;
    }
    
    .btn1 {
        color: var(--blue);
        background-color: white;
        border: 1px solid var(--blue);
        font-size: 1rem;
        display: flex;
        padding: 10px 20px;
        border-radius: 30px;
        transition: all 0.3s ease-in-out;
        opacity: 0;
        visibility: hidden;
    }
    
    
    .btn1:hover {
        background-color: var(--blue);
        color: white;
        cursor: pointer;
    }
    
    .hidden:checked + .box{
        align-items: center;
        flex-direction: column;
        justify-content: space-around;
        cursor: default;
        background-color: white;
        border: 2px solid var(--blue);
        width: 90%;
        height: 60%;
    }
    
    .hidden:checked + .box .isol{
        display: block;
    }
    
    .hidden:checked + .box .btn1{
        opacity: 1;
        visibility: visible;
    }
    
    .hidden:checked + .box h2{
        display: flex;
        justify-content: center;
        text-align: center;
        margin: 0;
        width: 100%;
        transition: none;
        opacity: 1;
        flex: 0 0 0;
        color: var(--blue);
    }
    
    .hidden:checked + .box h1{
        display: none;
    } 
    
    .hidden:checked + .box a{
        display: block;
    }
    
    .hidden:checked + .box .arrow{
        display: none;
    }
    
    .hidden:checked + .box ul{
        height: auto;
        list-style-position: inside;
        display: flex;
        flex-direction: column;
        width: 95%;
        font-weight: 300;
        padding: 0;
        padding-left: 30px;
    }
    
    .hidden{
        display: none;
    }
    
    .bb{
        position: relative;
        width: 100%;
        height: 300px;
    }
    
    #bhead{
        position: absolute;
        top: 60%;
        left: 50%;
        transform: translate(-50%,-50%);
        font-size: 3rem;
    }
    
    h1{
        font-family: "ivymode";
    }
    
    input[type="radio"]:focus {
        outline: none;
        box-shadow: none;
        -webkit-appearance: none;
        -moz-appearance: none;
        appearance: none;
        -webkit-tap-highlight-color: transparent;
    }
    
    label{
        -webkit-tap-highlight-color: transparent;
    }    
}