style.css

/*Getting font*/
@font-face {
    font-family: "odin-logo";
    src: url(./images/Norse-Bold.otf);
}



body {
    margin: 0%;
    height: 100vh;
    width: 100vw;
    display: flex;
    flex-direction: row;
}

/*leftside*/

.pic img{
    position: relative;
    width: 40vw;
    height: 100vh;
}

.odin_pic > img{
width:100px;
height: 120px;
}
.odin_pic  p{
    font-family: "odin-logo";
}

.odin_pic {
    justify-content: center;
    align-items: center;
    top: 5vh;
    height: 12vh;
    min-width: 40vw;
    position: absolute;
    display: flex;
    gap: 1em;
    font-size: 73px;
    color: white;
    background:linear-gradient(90deg,blue,purple) ;
    opacity: 0.2;
}




.pic_credit {
    bottom: 2vh;
    text-align: center;
    position: absolute;
    color: aliceblue;
    min-width: 40vw;
}



/*Right side*/
.right{
     position: absolute;
    display: flex;
    flex-direction: column;
    width: 60vw;
    height: 100vh;
    left: 40vw;
    top:0px;
}

.formInfo, .form, .accBtn{
    position: relative;
    min-height: 33.33vh;
    max-width: 60vw;
    background-color: #F0F0F0;
}

.formInfo p{
    justify-content: space-between;
    align-self: center;
    justify-self: center;
    display: flex;
    color: black;
    font-size:3.5vh;
    flex-wrap: wrap;
}

.form {
    margin-top: 3vh;
    max-height: 33.33%;
    background-color:white;
}

.form div{
    justify-self: center;
    align-self: center;
    display: block;

    margin: 3vh 5vw;
    padding: 5px 5px;
}

.form  label{
    margin: auto 1vw auto 1vw;
}
.form input{
border-radius: 5px;
}

.form span{
    display: inline;
    grid-template-columns: auto;
    margin: auto 2vw;
}


.form p{
    text-align: start;
    margin: 0px;
    font-size: 30px;
    padding: 5px;
}

form input:invalid{
border-color:rgb(156, 25, 25);
}

form input:valid{
    border-color: rgb(67, 67, 218);
}
.accBtn *{
margin: 20px 50px;
}


.accBtn > button{
    padding: 5px;
    background-color: #596D48;
    border-radius: 5px;
}