body {
    padding: 0;
    margin: 0;
    box-sizing: border-box;
    font-family: "Kanit", sans-serif;
    font-weight: 100;
    font-style: normal;
    
}

.container {
    display: flex;
    flex-direction: row;
    margin: 5%;

    height: auto;
}

.left {
    width: 50%;
    height: auto; 
    position: relative;
    background-image: url('https://nopainamerica.com/wp-content/uploads/2024/11/test-scaled.jpg'); 
    background-size: cover; 
    background-position: center;  
    background-repeat: no-repeat; 
    box-sizing: border-box;
}



.right {
    width: 50%;
    background-color: rgb(40, 36, 36);
    padding: 2em 1em;
    display: flex;
    flex-direction: column;
    height: auto; 
    box-sizing: border-box;
}


form {
    display: flex;
    flex-direction: column;
    align-items: center;
    width: 100%;
}

form input, form select, form button {
    width: 80%;
    height: 3em; 
    margin: 1em 0;
    padding: 0.5em;
    border-radius: 10px;
    border: 2px solid rgb(40, 36, 36);
    font-size: 1rem;
    box-sizing: border-box; 
}

form button {
    background-color: yellow;
    color: #333333;
    cursor: pointer;
    transition: background-color 0.7s ease-in-out, color 0.7s ease-in;
}
form select {
    background-color: white;  
    color: #333333;          
    border-radius: 10px;      
    padding: 0.5em;          
    font-size: 1rem;         
    border: 2px solid rgb(40, 36, 36); 
    appearance: none;        
    cursor: pointer;         
    -webkit-appearance: none; 
    -moz-appearance: none;   
}

.logMain{
    padding: 0;
    margin: 0 auto;
    /* width: 20%; */
    height: 270px;
    margin-top: -60px;
    margin-bottom: -70px;
}
form input:focus, form button:focus, form select:focus {
    outline: none;
    border: 2px solid yellow; 

}
form button:hover {
    background-color: #333333;
    color: yellow;
}
.moto{
    padding: 0 2em;
    color: aliceblue;
    font-weight: 500;
    text-align: center;
    font-size: xx-large;
    visibility: visible;
    animation: fadeIn 1s forwards;
}
@keyframes fadeIn {
    0% {
        opacity: 0; 
    }
    100% {
        opacity: 1; 
    }
}
#text-ii {
    font-size: xxx-large;
    color: yellow;
    visibility: visible;
    animation: Two 3s forwards;
}
@keyframes Two {
    0% {
        opacity: 0; 
    }
    20% {
        opacity: 0.2; 
    }
    40% {
        opacity: 0.4; 
    }
    60% {
        opacity: 0.6; 
    }
    80% {
        opacity: 0.8; 
    }
    100% {
        opacity: 1; 
    }
}


@media (max-width: 719px) {
   .container{
    flex-direction: column-reverse;
    margin: 0px;
   }
   .left, .right{
    width: 100%;
   }
   .logMain{
    height: 200px;
   }
   .moto{
    padding: 0 0.7em;
    font-size: x-large;
    
}
    
    }
@media (min-width: 720px) and (max-width: 1023px){

    .logMain{
        height: 150px;
    }
    .moto{
        padding: 0 1em;
        font-size: x-large;
        
    }
}
@media (min-width: 1024px) and (max-width: 1279px){

        .logMain{
            height: 200px;
        }
        .moto{
            padding: 0 1em;
            
        }
    
}