body{
font-family: 'Lato', sans-serif;
  background-color:#222831;
}
h1{
  font-size:200px;
  color:#dddddd;
transition:transform 0.1s;
}
h1:hover{
  transform:scale(1.1);
}
table{
margin: 0 auto;
width:200px;
}

button{
width:80px;
height:80px;
  border-style:none;
  transition: width 2s, height 4s;
}

table{
  transition: transform 0.2s;
}
table:hover{
    transform:scale(1.1);
}

input{
  font-size:30px;
  background-color:#222831;
  color:white;
  width:350px;
  border-style:none;
  outline:none;
  border-bottom:1px #30475e solid;
  margin-bottom:20px;
  transition: transform 0.2s;
}

input:hover{
  transform:scale(1.1);
}

.btn{
  margin:5px;
  box-shadow: 0 0 10px #191d24;
  border-style:none;
  border-radius:20px;
    transition: transform 0.2s;
    color:white;
}
.btn:hover{
  border-radius:30px;
transform:scale(1.3);
}

.section_1{
text-align:center;
transition: transform 0.2s;
position:relative;
top:20px;
}

.pi{
  width:94%;
  transition: transform 0.2s;
}

.pi:hover{
    transform:scale(1.1);
}
.zero{
  width:94%;
transition: transform 0.2s;
}

.zero:hover{
  transform:scale(1.1);
}

.dot{
  width:94%;
  transition: transform 0.2s;
}

.dot:hover{
  transform:scale(1.1);
}

@media only screen and (max-width: 600px) {
h1{
  font-size:80px;
position:relative;
top:10px;
}

button{
height:55px;
}
.desktop{
  display:none;
}
}

@media only screen and (min-width:600px) and (max-width: 1024px){
  h1{
font-size:80px;
  }
input{
  width:600px;
}

button{
width:75px;
  height:35px;
}

}

@media only screen and (min-width:1024px) {
  h1{
  font-size:100px;
  }
input{
  width:900px;
}
button{
width:120px;
height:45px;
}

.btn:hover{
  border-radius:30px;
  transform:scale(1.2);
}

}