.register-contents{
    background-color: var(--secondary);
}
.register-contents{
    border-radius: 8px;
    align-items: stretch;
    padding: 0%;
    text-align: left;
}
.reg-form{
    background-color: var(--secondary);
    padding: 2% 6%;
    color: var(--primary);
    border-radius: 8px;
    width: 50%;
    
}
.form-container{
    display: flex;
    flex-direction: column;
    justify-content: space-around;
    
    gap: 2%;
}
.reg-form .fields{
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    margin: 2% 0%;
}
.reg-form .fields label{
    font-size: 0.8rem;
    font-weight: bold;
}
.reg-form input{
    border: 1px solid var(--primary);
    background-color: var(--tertiary);
    color: var(--primary);
    padding: 0.8rem;
    font-family: 'Courier New', Courier, monospace;
    outline: none;
    border-radius: none !important;
}
.reg-form .steps{
    
    display: flex;
    flex-direction: row;
    float: right;
    justify-content: space-between;
    gap: 1;
}
.reg-form .steps button{
    margin: 1% 0%;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    gap: 1;
    padding: 0.8rem;
    background-color: var(--primary);
    color: var(--secondary);
    font-weight: bold;
    width: 100%;
    text-align: center;
    border: none;
    border-left: 2px solid var(--tertiary);
}
.reg-img{
    background-image: linear-gradient(
        rgb(0, 100, 50, 0.614),
        rgba(0, 100, 50, 0.614)),
        url(../media/pexels-elvis-mkera-14909652\ \(1\)-compressed\ \(1\).jpg)
    ;
    object-fit:fill;
    background-size: cover;
    border-radius: 8px;
    border: 1px solid var(--primary);
    text-align: left;
    margin: 0% 0% 0% 2%;
    color: var(--tertiary);
    width: 55%;
}


@media screen and (max-width: 768px){
    .register-contents{
        display: flex;
        flex-direction: column;
        justify-content: space-between;
        align-items: center;
        gap: 2%;
        align-items: stretch;
    }
    .reg-img{
        display: none;
    }
    .reg-form{
        width: 90%;
    }
}

/* Large Tablets Laptops*/
@media screen and (min-width: 769px) and (max-width: 1199px){
    .register-contents{
        display: flex;
        flex-direction: row;
        justify-content: space-between;
        align-items: center;
        
    }
    .reg-img{
        height: 55vh;
    }
    .reg-form{
        width: 70%;
    }
}

/*Desktops*/
@media screen and (min-width:1200px){
    .register-contents{
        display: flex;
        flex-direction: row;
        justify-content: space-around;
        align-items: flex-start;
        place-content: center;

    }
    .reg-form{
        width: 45%;
    }
    .reg-img{
        margin: 0%;
        width: 45%;
        height: 55vh;
    }
}