*{
    margin: 0;
    padding: 0;
    font-family: 'Be Vietnam Pro', sans-serif;
    color:#FFFFFF;
    box-sizing: border-box;
}
body{
  /*the bbackground image from the photo that i had fits the whole screen in any width so i made a quick replace for it (footer shows white).*/
    background-image:url(https://c4.wallpaperflare.com/wallpaper/707/220/899/gradient-blue-pink-abstract-art-wallpaper-preview.jpg);
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
   
}
.Logo img{
    height: 100px;
}
.Title{
    padding:0 20%;
    text-align: center;
}
.Main-Title, .Sub-Title{
    font-size: 4rem;
    font-weight: bolder;
}
.Sub-Title{
    font-size: 2rem;
    font-weight: 600;
    margin-top: 20px;
}

.row-1, .row-2, .row-3{
    width: 100%;
    display: flex;
}

label{
    display: none; /* // Here i set the label's display to none; I couldnt figure out how to get the label to be above the box while maintaining flexbox.*/
    padding-bottom: 90PX;
}
select, input, textarea, option{
    color: black;
    width: 100%;
    margin: 10px 10px;
    border-radius: 10px;
    border: none;
    padding: 20px;
}

form{
    width: 70%;
    margin: 40px auto;
    padding: 40px 40px 15px 40px;
    border-radius: 30px;
    background-color: #cdd5e07a;
    
 }

/* Button Styling */
.btncont{
    margin-top: 15px;
    width: 100%;
}
button[type=submit]{
    background-color:#ffffff;
    width: 100%;
    border: none;
    padding: 15px;
    color: #4036A9;
    font-weight: bolder;
    border-radius: 15px;
    
}
@media only screen and (max-width: 768px) {

/* body{
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
} */
.Logo img{
    height: 100px;
}
.Title{
    padding:0 20%;
    text-align: center;
}
.Main-Title{
    font-size: 3rem;
    font-weight: bolder;
}
.Sub-Title{
    font-size: 1.5rem;
    margin-top: 20px;
}

.row-1, .row-2, .row-3{
    width: 100%;
    /* display: flex; */
    display: block;
}

label{
    display: inline;
}
select, input, textarea, option{
    color: black;
    width: 100%;
    margin: 10px 0 ;
    border-radius: 10px;
    border: none;
    padding: 20px;
}

form{
    width: 70%;
    margin: 40px auto;
    padding: 40px 40px 15px 40px;
    border-radius: 30px;
    background-color: #cdd5e07a;
    
 }

/* Button Styling */
.btncont{
    margin-top: 15px;
    width: 100%;
}
button[type=submit]{
    background-color:#ffffff;
    width: 100%;
    border: none;
    padding: 15px;
    color: #4036A9;
    font-weight: bolder;
    border-radius: 15px;
    
}
}