@media only screen and (min-width: 841px) {

    nav{
        height: 12svh;
        margin: 0;
        padding: 0 5%;
    }

    main{
        margin: 0;
        padding: 5%;
    }

    main h2{
        margin-bottom: 5%;
    }

    form{
        width: 450px;
        aspect-ratio: 1/1.05;
        border-radius: 25px;
        margin-bottom: 20px;
    }

    .step #div1{
        width: 20%;
        aspect-ratio: 1/1;
    }

    .otp-container{
        gap: 10px;
        width: 85%;
        height: 80px;
    }

    .otp-input{
        width: 15%;
        border-radius: 12px;
    }

    form button{
        width: 70%;
        height: 12%;
        border-radius: 50px;
        padding: 0 5%;
    }

    form button:hover{
        transform: translateY(0px);
    }

    .image-selector {
        height: 100%;
        padding: 5%;
        border-radius: 10px;
        font-size: 14px;
    }

    /* .step section{
    } */

    #step-2 .image-generation-right{
        height: 500px;
    }

    .image-selector input {
        width: 100%;
        height: 100%;
    }
    .image-preview {
        height: 60%;
        aspect-ratio: 1/1;
        margin-bottom: 10px;
        border-radius: 100%;
    }

    #previewCanvas{
        height: 100%;
    }

    .change-image-label {
        width: 25px;
        padding: 0 5.2% 1%;
        margin-left: -19%;
    }

                            /***** Track Styles *****/
    /***** Chrome, Safari, Opera, and Edge Chromium *****/
    input[type="range"]::-webkit-slider-runnable-track {
        height: 0.3rem;
        border-radius: 0.15rem;
    }
    
    /******** Firefox ********/
    input[type="range"]::-moz-range-track {
        height: 0.3rem;
        border-radius: 0.15rem;
    }

    /***** Thumb Styles *****/
    /***** Chrome, Safari, Opera, and Edge Chromium *****/
    input[type="range"]::-webkit-slider-thumb {
        height: 2rem;
        width: 1rem;    
        margin-top: -0.2rem;
    }

    .results-container{
        width: 88%;
        margin-top: 10px;
        margin-bottom: 30px;
    }

    .results-container .result{
        width: 31%;
        aspect-ratio: 1/1;
        outline: solid 2px var();
        outline-offset:-1px;
        padding: 0;
        font-size: large;
        border-radius: 100%;
    }
    /* .results-container .result:hover{
    } */
    .results-container .result:focus{
        transform: translateY(5px);
    }

    .results-container .result *{
        width: 100%;
        margin: 0;
    }
    .buttons{
        width: 60%;
    }
    .bottom-button{
        width: 40%;
        height: 50px;
        border-radius: 50px;
    }

    footer{
        height: 20svh;
    }
   
}