main section{
    padding: 1% 10%;
    display: flex;
    justify-content: space-between;
    gap: 20px;
    width: 100%;
}
main section>div{
    width: 100%;
    position: relative;
    display: flex;
}

main .information{
    display: flex;
    flex-direction: column;
    width: 100%;
    /* padding: 2%; */
    border-radius: 10px;
    background: linear-gradient(-180deg, #333 50% , whitesmoke 50%);
}
main .information .guidelines{
    display: flex;
    flex-direction: column;
    gap:20px
}
main .information .heading{
    font-size: var(--font-size-subHeading2) !important;
    color: whitesmoke;
    padding: 2%;
    padding-bottom: 20px;
    border-bottom: 1px dotted whitesmoke;
}
main .information .guidelines div{
    font-size: var(--font-size-text2);
    padding: 2%;
    width: 100%;
}
main .information .guidelines div:nth-child(2){
    background-color: #333;
}
main .information .guidelines div:nth-child(3){
    background-color: whitesmoke;
}
main .information .guidelines div:nth-child(2) h2,main .information .guidelines div:nth-child(2) li{
    color: whitesmoke !important;
}
main .information .guidelines div h2{
    font-size: var(--font-size-subHeading);
    color: #333;
    font-weight: 200;
}
main .information .guidelines div ul li{
    color: #333;
    margin: 3% 0;
    list-style: lower-roman;
    transform: translateX(5%);
}

main form{
    display: flex;
    position: relative;
    flex-direction: column;
    gap: 20px;
    width: 100%;
    min-width: 300px;
    max-width: 400px;
    background-color: white;
    border: 2px solid lightgray;
    padding: 20px;
    border-radius: 7px;
    font-size: var(--font-size-text2);
    top: 5%;
    right: 5%;
    align-self: center;
}
main form input, main form textarea{
    height: 40px;
    width: 100%;
    border: 2px solid lightgray;
    outline: none;
    border-radius: 5px;
    padding-left: 10px;
}
main form input[type="file"]{
    height: 40px;
    width: 100%;
    margin-top: 10px;
    border: none;
    outline: none;
}
main form textarea{
    padding: 10px;
    resize: vertical;
}
main form button{
    padding: max(10px,2%) max(10%,3%);
    border: 2px solid white;
    color: white;
    background-color: black;
    border-radius: 4px;
    width: fit-content;
    transition: all 300ms;
}
main form button:hover{
    border: 2px solid black;
    color: black;
    background-color: white;
}

@media screen and (max-width : 1112px) {
    main section>div{
        flex-direction: column;
    }
    main form{
        max-width: 100%;
        right: 0;
        margin-bottom: 100px;
    }
}