body {
background-image: linear-gradient(to right, #848081, #C8C8C8);
overflow-x: hidden;
overflow-y: hidden;
width: 100%;
height: 100vh;
}

@media (min-width: 320px) and (max-width: 767px ) {

.floor {
position: fixed;
background-color: white;
width: 100%;
height: 50vh;
top: 50%;
left: 0px;
}

.loginbox {
position: fixed;
width: 75%;
height: 55%;
border-radius: 10px;
background-image: linear-gradient(to top, #7b7c7d, #dddcde);
top: 20%;
left: 12%;
box-shadow: 0px 10px 15px rgba(0.2,0,0,0.5);
border: none;
}

#back {
width: 100px;
height: 50px;
background-color: white;
color: black;
font-family: arial;
border-radius: 35px;
border: none;
text-decoration: none;
}

#back:hover {
transition-duration: 0.5s;
transform: scale(1.13);
}

#email {
position: relative;
top: 180px;
left: 15px;
width: 250px;
height: 27.5px;
border-radius: 10px;
border: none;
}

#password {
position: relative;
top: 200px;
left: 15px;
width: 250px;
height: 27.5px;
border-radius: 10px;
border: none;
}

#firstname {
position: relative;
top: 20px;
left: 15px;
width: 250px;
height: 27.5px;
border-radius: 10px;
border: none;
}

#lastname {
position: relative;
top: 40px;
left: 15px;
width: 250px;
height: 27.5px;
border-radius: 10px;
border: none;
}

#phone {
position: relative;
top: 160px;
left: 15px;
width: 90px;
height: 37.5px;
border-radius: 5px;
border: none;
}

#signup {
position: relative;
top: 212.5px;
left: -85px;
height: 25px;
width: 95px;
border-radius: 20px;
border-color: black;
}

#login {
position: relative;
top:  180px;
left: 170px;
height: 26px;
width: 95px;
border-radius: 20px;
border-color: black;
}

h1 {
position: absolute;
left: 32.5%;
font-family: helvetica;
}

.g_id_signin {
position: relative;
top: 13.1vh;
left: 180px;
width: 90px;
height: 18.5px;
border-radius: 5px;
}
    
.area {
position: relative;
right: 2%;
}    
}

@media (min-width: 768px) and (max-width: 1366px) {


.loginbox {
position: relative;
width: 31.11%;
height: 62.5vh;
border: 2px solid black;
border-radius: 10px;
background-image: linear-gradient(to top, #7b7c7d, #dddcde);
top: -30vh;
left: 33vw;
transform: translate(0%, -17%); 
box-shadow: 0px 10px 15px rgba(0.2,0,0,0.5);
border: none;
}

#back {
width: 7.32%;
height: 6.51%;
background-color: white;
color: black;
font-family: arial;
border-radius: 35px;
border: none;
text-decoration: none;
}

#back:hover {
transition-duration: 0.5s;
transform: scale(1.13);
    
}

#email {
position: relative;
top: 27vh;
left: 0.732vw;
width: 29.28vw;
height: 4.58vh;
border-radius: 10px;
border: none;
}

#password {
position: relative;
top: 29.5vh;
left: 0.732vw;
width: 29.28vw;
height: 4.58vh;
border-radius: 10px;
border: none;
}

#firstname {
position: relative;
top: 2.60vh;
left: 0.732vw;
width: 29.28vw;
height: 4.58vh;
border-radius: 10px;
border: none;
}

#lastname {
position: relative;
top: 5.2vh;
left: 0.732vw;
width: 29.28vw;
height: 4.58vh;
border-radius: 10px;
border: none;
}

#phone {
position: relative;
top: 22vh;
left: 0.732vw;
width: 13.18vw;
height: 5.50vh;
border-radius: 5px;
border: none;
}

#signup {
position: relative;
top: 30.67vh;
left: -13.18vw;
height: 3.26vh;
width: 13.91vw;
border-radius: 20px;
border-color: black;
}

#login {
position: relative;
top: 26vh;
left: 16.30vw;
height: 3.26vh;
width: 13.91vw;
border-radius: 20px;
border-color: black;
}

.floor {
position: relative;
background-color: white;
width: 102vw;
height: 50vh;
top: 50%;
left: -2%;
}

h1 {
position: absolute;
left: 10.98vw;
font-family: helvetica;
}

.g_id_signin {
position: relative;
top: 13.1vh;
left: 16.98vw;
width: 13.18vw;
height: 4.82vh;
border-radius: 10px;
}
}
@media (min-width: 1367px) and (max-width: 1920px ) {

.loginbox {
position: relative;
width: 31.11%;
height: 62.5vh;
border: 2px solid black;
border-radius: 10px;
background-image: linear-gradient(to top, #7b7c7d, #dddcde);
top: -30vh;
left: 33vw;
transform: translate(0%, -17%); 
box-shadow: 0px 10px 15px rgba(0.2,0,0,0.5);
border: none;
}

#back {
width: 7.32%;
height: 6.51%;
background-color: white;
color: black;
font-family: arial;
border-radius: 35px;
border: none;
text-decoration: none;
}

#back:hover {
transition-duration: 0.5s;
transform: scale(1.13);
    
}

#email {
position: relative;
top: 27vh;
left: 0.732vw;
width: 29.28vw;
height: 4.58vh;
border-radius: 10px;
border: none;
}

#password {
position: relative;
top: 29.5vh;
left: 0.732vw;
width: 29.28vw;
height: 4.58vh;
border-radius: 10px;
border: none;
}

#firstname {
position: relative;
top: 2.60vh;
left: 0.732vw;
width: 29.28vw;
height: 4.58vh;
border-radius: 10px;
border: none;
}

#lastname {
position: relative;
top: 5.2vh;
left: 0.732vw;
width: 29.28vw;
height: 4.58vh;
border-radius: 10px;
border: none;
}

#phone {
position: relative;
top: 22vh;
left: 0.732vw;
width: 13.18vw;
height: 5.50vh;
border-radius: 5px;
border: none;
}

#signup {
position: relative;
top: 30.67vh;
left: -13.18vw;
height: 3.26vh;
width: 13.91vw;
border-radius: 20px;
border-color: black;
}

#login {
position: relative;
top: 26vh;
left: 16.30vw;
height: 3.26vh;
width: 13.91vw;
border-radius: 20px;
border-color: black;
}

.floor {
position: relative;
background-color: white;
width: 100vw;
height: 50vh;
top: 50%;
left: 0px;
}

h1 {
position: absolute;
left: 10.98vw;
font-family: helvetica;
}

.g_id_signin {
position: relative;
top: 13.1vh;
left: 16.98vw;
width: 13.18vw;
height: 4.82vh;
border-radius: 10px;
}
}

@media (min-width: 1921px) and (max-width: 2560px ) {


.loginbox {
position: relative;
width: 31.11%;
height: 62.5vh;
border: 2px solid black;
border-radius: 10px;
background-image: linear-gradient(to top, #7b7c7d, #dddcde);
top: -30vh;
left: 33vw;
transform: translate(0%, -17%); 
box-shadow: 0px 10px 15px rgba(0.2,0,0,0.5);
border: none;
}

#back {
width: 7.32%;
height: 6.51%;
background-color: white;
color: black;
font-family: arial;
border-radius: 35px;
border: none;
text-decoration: none;
}

#back:hover {
transition-duration: 0.5s;
transform: scale(1.13);
    
}

#email {
position: relative;
top: 27vh;
left: 0.732vw;
width: 29.28vw;
height: 4.58vh;
border-radius: 10px;
border: none;
}

#password {
position: relative;
top: 29.5vh;
left: 0.732vw;
width: 29.28vw;
height: 4.58vh;
border-radius: 10px;
border: none;
}

#firstname {
position: relative;
top: 2.60vh;
left: 0.732vw;
width: 29.28vw;
height: 4.58vh;
border-radius: 10px;
border: none;
}

#lastname {
position: relative;
top: 5.2vh;
left: 0.732vw;
width: 29.28vw;
height: 4.58vh;
border-radius: 10px;
border: none;
}

#phone {
position: relative;
top: 22vh;
left: 0.732vw;
width: 13.18vw;
height: 5.50vh;
border-radius: 5px;
border: none;
}

#signup {
position: relative;
top: 30.67vh;
left: -13.18vw;
height: 3.26vh;
width: 13.91vw;
border-radius: 20px;
border-color: black;
}

#login {
position: relative;
top: 26vh;
left: 16.30vw;
height: 3.26vh;
width: 13.91vw;
border-radius: 20px;
border-color: black;
}

.floor {
position: relative;
background-color: white;
width: 100vw;
height: 50vh;
top: 50%;
left: 0px;
}

h1 {
position: absolute;
left: 10.98vw;
font-family: helvetica;
}

.g_id_signin {
position: relative;
top: 13.1vh;
left: 16.98vw;
width: 13.18vw;
height: 4.82vh;
border-radius: 10px;
}
}