@font-face {
font-family: Roboto;
src: url(Roboto-Regular.ttf);


}



body {
font-family: Roboto;

background-color: rgb(255, 255, 255);
overflow-x: hidden;


}

    


.picturecontainer {
margin: none;
    justify-content: space-between;
    background-color: transparent;
    width: 100%;
    display: flex;
  
  flex-direction: column;
  align-items: center; 
justify-content: center;

    height: 59vh;
}






#height {
z-index: 200;
position: absolute;
    top: 30%;
    left: 30%;
    transform: translate(-50%, -50%);
    margin: 0;
}


#mainText {
z-index: 200;
position: absolute;
    top: 3%;
    left: 50%;
    transform: translate(-50%, -50%);
    margin: 0;

}



#width {
  z-index: 200;
position: absolute;
    top: 57%;
    left: 50%;
    transform: translate(-50%, -50%);
    margin: 0;
}






#notScaled {

position: relative;
  right: 32.5vw;
  bottom: 25vh;
  font-size: 2vw;
}

.picture {
margin-bottom: 2vh;
background-image: url(art.png);
background-size: cover;
  background-position: center; 
  background-repeat: no-repeat;
border-radius: 0.5vw;

display: grid; 
  grid-template-columns: 1fr 1fr; 
  justify-items: stretch; 
  align-items: center;



width: 30vw;
height: 40vh;


  display: flex;
  flex-direction: column;
  align-items: center; 
justify-content: center;



}



.inputcontainer button {
border: 0.11vw solid black;
    margin-top: 2vh;
color: black;
background-color: rgb(235, 233, 229);
font-size: 1.5vw;
width: 18vw;
height: 7vh;
border-radius: 0.5vw;

transition: ease-in 0.3s;

}





.inputcontainer button:hover {

  border: rgb(0, 140, 255, 1) solid 2px;
  transform: scale(1.05)


}

.inputcontainer input {
width: 18vw;
height: 7vh;
padding-left: 0.5vw;
border-radius: 0.2vw;
margin-top: 2vh;
color: black;
border: 0.11vw solid black;
font-size: 1.5vw;
transition: ease-in 0.2s;
font-family: Roboto;
outline: none;
}



.inputcontainer input:hover {
outline: none;
  border: rgb(0, 140, 255, 0.7) solid 2px;
  


}


.inputcontainer input:focus {
outline: none;
  transform: scale(1.03)
}


.inputcontainer input::placeholder {
outline: none;
color: black;
font-size: 1.5vw;

font-family: Roboto;

}

.inputcontainer {
border-top: 0.3svw solid black;
left: 0;
background-color: rgb(255, 255, 255);
bottom: 0;
width: 100%;


height: 40vh;
 display: flex;
  
  flex-direction: column;
  align-items: center; 
 position: absolute;

}