*{
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

section{
    width: 100%;
    height: auto;
    padding: 5px 25px;
}

section h2{
    margin: 10px 0;
    color: rgb(249, 19, 19);
    font-size: 5vmin;
    text-align: center;
}

section h3{
    text-align: center;
    margin: 10px 0;
    color: blue;
    font-size: 4vmin;
}

/* form-page */

.box-1{
    margin-top: 15px;
    width: 100%;
    height: auto;
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
}

@media only screen and (min-width:750px) and (max-width:950px) {
    section h2{
        font-size: 4vmin;
    }

    section h3{
        font-size: 3.3vmin;
    }
}

@media only screen and (min-width: 500px) and (max-width: 750px) {
    section form{
        text-align: center;
    }
    section h2{
        font-size: 5vmin;
    }

    section h3{
        font-size: 4vmin;
    }

}

@media only screen and (min-width: 300px) and (max-width: 500px) {
    form{
        text-align: center;
    }

}


.box-2{
    margin-top: 15px;
    width: 100%;
    height: auto;
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
}


.box-3{
    margin-top: 15px;
    width: 100%;
    height: auto;
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
}

.box-3 select{
    width: 50vmin;
    height: 5vmin;
}


.box-4{
    margin-top: 15px;
    width: 100%;
    height: auto;
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
}

.box-4 select{
    width: 50vmin;
    height: 5vmin;
}


/* section form lable */

section label{
    font-size: 2.5vmin;
    font-weight: bold;
}

section input{
    padding-left: 10px;
    width: 50vmin;
    height: 5vmin;
}

section span{
    color: red;
    
}

@media only screen and (min-width:750px) and (max-width:950px) {

    section label{
        font-size: 2.5vmin;
    }

    section input{
        width: 40vmin;
        height: 4vmin;
    }  
    
    .box-3 select{
        width: 40vmin;
        height: 4vmin;
    }

    .box-4 select{
        width: 40vmin;
        height: 4vmin;
    }
    
}

@media only screen and (min-width:500px) and (max-width:750px) {

    section label{
        font-size: 3vmin;
    } 

    section input{
        width: 60vmin;
        height: 6vmin;
    }


    .box-1{ 
        display: flex;
        flex-direction: column;
    }

    .box-2{
        display: flex;
        flex-direction: column;
    }

    .box-3{
        display: flex;
        flex-direction: column;
    }

    .box-3 select{
        width: 60vmin;
        height: 6.5vmin;
        
    }

    .box-4{
        display: flex;
        flex-direction: column;
    }

    .box-4 select{
        width: 60vmin;
        height: 6.5vmin;
    }


}


@media only screen and (min-width:300px) and (max-width:500px) {

    section h2{
        font-size: 5.3vmin;
    }

    section h3{
        font-size: 5vmin;
    }

    section label{
        font-size: 5vmin;
    } 

    section input{
        width: 70vmin;
        height: 7vmin;
    }


    .box-1{ 
        display: flex;
        flex-direction: column;
    }

    .box-2{
        display: flex;
        flex-direction: column;
    }

    .box-3{
        display: flex;
        flex-direction: column;
    }

    .box-3 select{
        width: 70vmin;
        height: 6.9vmin;
        
    }

    .box-4{
        display: flex;
        flex-direction: column;
    }

    .box-4 select{
        width: 70vmin;
        height: 6.9vmin;
    }


}

/* main-page */

main{
    width: 100%;
    height: auto;
}

/* box-main-1 */

main .box-main-1{
    margin-top: 30px;

}


main .box-main-1 h3{
    text-align: center;
    font-size: 4vmin;
    color: blue;
}

main .box-main-1 .div-12{
    margin-top: 20px;
}

main .box-main-1 .div-12 label{
   
    font-size: 2.5vmin;

}

main .box-main-1 .div-12 input{
    margin-left: 20vmin;
    width: 50vmin;
    height: 5vim;
}


/* div-13 */

main .box-main-1 .div-13{
    margin-top: 30px;
    
}

main .box-main-1 .div-13 input{
    margin-left: 9.5vmin;
}


/* box-main-2 */

.box-main-2{
    margin-top: 20px;
    width: 100%;
    height: auto;

}

.box-main-2 .div-14{
    margin: 20px 0;
}

.box-main-2 .div-14 input{
    margin-left: 22vmin;
}

.box-main-2 .div-14 button{
    margin-left: 3vmin;
    width: 20vmin;
    height: 5vmin;
    border: 0;
    background: linear-gradient(rgb(153, 134, 251), rgb(25, 11, 222));
    border-radius: 8px;
    box-shadow: -1px 2px 20px black;
}

.box-main-2 .div-14 button:hover{
    scale: 1.08;
    transition: all 0.5s ease-in-out;
}

.box-main-2 .div-14 button a{
    text-decoration: none;
    color: aliceblue;
}




/* box-main-4 */
.box-main-4{
    width: 100%;
    height: auto;
    text-align: center;
    margin-bottom: 1rem;
}

.box-main-4 textarea{
    padding: 3px;
    width: 95%;
    height: 100px;
}


/* box-main-3 */

.box-main-3{
    text-align: center;
    width: 100%;
    height: auto;
    margin: 20px 0;
}

.box-main-3 #cancel{
    width: 15vmin;
    height: 5vmin;
    background: linear-gradient(rgb(253, 148, 148), red);
    border: 0;
    border-radius: 8px;
    box-shadow: -1px 2px 15px black;
}

.box-main-3 #cancel a{
    font-size: 15px;
    text-decoration: none;
    color: aliceblue;
}

/* preview-button */

.box-main-3 #preview{
    margin-left: 5vmin;
    width: 20vmin;
    height: 5vmin;
    background: linear-gradient(rgb(161, 237, 149), rgb(9, 235, 9));
    border: 0;
    border-radius: 8px;
    box-shadow: -1px 2px 15px black;

}

.box-main-3 #preview:hover{
    scale: 1.08;
    transition: all 0.5s ease-in-out;
}

.box-main-3 #preview a{
    font-size: 15px;
    text-decoration: none;
    color: rgb(3, 3, 3);
}


@media only screen and (min-width:750px) and (max-width:950px) {
    main .box-main-1 h3{
        font-size: 3.5vmin;
    }

    main .box-main-1 .div-12 label{
        font-size: 2.7vmin;
    }

    main .box-main-1 .div-12 input{
        margin-left: 18vmin;
        width: 40vmin;
    }

    main .box-main-1 .div-13 label{
        font-size: 2.7vmin;
    }

    main .box-main-1 .div-13 input{
        margin-left: 6vmin;
    }
}

@media only screen and (min-width:500px) and (max-width:750px) {

    main .box-main-1 h3{
        font-size: 4vmin;
    }

    main .box-main-1 .div-12 label{
        font-size: 3.2vmin;
    }

    main .box-main-1 .div-12 input{
        margin-left: 15vmin;
        width: 30vmin;
    }

    main .box-main-1 .div-12 button{
        width: 20vmin;
        height: 7vmin;
    }

    main .box-main-1 .div-12 button a{
        font-size: 2.5vmin;
    }

    main .box-main-1 .div-13 label{
        font-size: 3.2vmin;
    }

    main .box-main-1 .div-13 input{
        margin-left: 1vmin;
        width: 30vmin;
    }

    main .box-main-1 .div-13 button{
        width: 20vmin;
        height: 7vmin;
    }

    main .box-main-1 .div-13 button a{
        font-size: 2.5vmin;
    }

    /* main box-main-2 */

    main .box-main-2 h3{
        font-size: 4vmin;
    }

    main .box-main-2 .div-14 label{
        font-size: 3.2vmin;
    }

    main .box-main-2 .div-14 input{
        margin-left: 1vmin;
        width: 50vmin;
    }

    main .box-main-2 .div-14 button{
        width: 18vmin;
        height: 6vmin;
    }

    main .box-main-2 .div-14 button a{
        font-size: 2.3vmin;
    }

    main .box-main-3 #cancel{
        height: 7vmin;
    }

    main .box-main-3 #preview{
        height: 7vmin;
    }
}


/* min-300px  and  max-500px */



@media only screen and (min-width:300px) and (max-width:500px) {

    main .box-main-1 h3{
        font-size: 5vmin;
    }

    main .box-main-1{
        text-align: center;
    }

    main .box-main-1 .div-12 label{
        font-size: 5vmin;
    }

    main .box-main-1 .div-12 input{
        margin-left: 1vmin;
        width: 31vmin;
    }


    main .box-main-1 .div-13 label{
        font-size: 5vmin;
    }

    main .box-main-1 .div-13 input{
        margin-left: 0vmin;
        width: 31vmin;
    }


    /* main box-main-2 */

    main .box-main-2{
        text-align: center;
    }

    main .box-main-2 h3{
        font-size: 5vmin;
    }

    main .box-main-2 .div-14 label{
        font-size: 5vmin;
    }

    main .box-main-2 .div-14 input{
        margin-left: 1vmin;
        width: 50vmin;
    }

    main .box-main-2 .div-14 button{
        width: 15vmin;
        height: 32px;
    }

    main .box-main-2 .div-14 button a{
        font-size: 2.3vmin;
    }

/* box-main-3 */

    main .box-main-3 #cancel{
        width: 18vmin;
        height: 35px;
    }

    main .box-main-3 #preview{
        width: 20vmin;
        height: 35px;
    }

   

    
}