Scroll body on height < 900px

Question

Trying to make a responsive design.

There are 3 buttons with a background, the buttons which are to the bottom, disappearing when I have 900px height.
I tried max-height: 900px with overflow-y: auto; but the buttons disappeared and it was just the logo and the text after. as i can see in the run code you cant see the buttons as the height is low and it wont scroll

```css


body {
background-color: black;
background: linear-gradient(rgba(0, 0, 0, 0.7), rgba(0, 0, 0, 0.7)),url("../Bloc\ Nisipari/View03.jpg") no-repeat center center fixed;
-webkit-background-size: cover; /* For WebKit*/
-moz-background-size: cover;    /* Mozilla*/
-o-background-size: cover;      /* Opera*/
background-size: cover;         /* Generic*/
margin: 0;
width: 90%;
height: 100%;
max-width: 100%;
overflow: hidden;
max-height: 750px;


   
 
  } 
 

  div1
  {
color: white;
position: relative; 
left:200px;
top:300px; 
width: 200px;
height: auto;
margin: auto;
font-size:24px;
   font-family: 'montserrat';
   src : url("../Montserrat/Montserrat-Italic-VariableFont_wght.ttf");
   
  }
  .textlogo
  {
  width: 500px;
  }
  .logo{
  width: 300px;
  }


.container
{
position: relative;
left: 200px;
top: 500px;
width:100%; 
height: auto;
min-height: 100vmax;
margin: auto;


font-family: 'montserrat';
   src : url("../Montserrat/Montserrat-Italic-VariableFont_wght.ttf")



}

.btn-1
{
width: 200px;
height: 60px;
border: none;
color: rgb(255, 255, 255);
   
transition: ease-out 0.3s;
background-color: transparent;
font-size:32px;
outline:none;
   
position: relative;
z-index:1;
font-family: 'montserrat';
   src : url("../Montserrat/Montserrat-Italic-VariableFont_wght.ttf")


}

.btn-1:hover{
color: rgb(0, 0, 0);
cursor: pointer;
text-decoration: none;
}

.btn-1:before{
transition: 0.5s all ease;
position: absolute;
top: 0;
left: 150%;
right: 150%;
bottom: 0;
opacity: 0;
content:"";
background-color: #ffffff;

}

.btn-1:hover::before{
transition: 0.5 all ease;
left: 0;
right: 0;
opacity:1;
z-index: -1;

}

.btn-2
{
width: 200px;
height: 60px;
border: none;
color: rgb(255, 255, 255);

transition: ease-out 0.3s;
background-color: transparent;
font-size:32px;
outline:none;
   
position: relative;
z-index:1;
font-family: 'montserrat';
   src : url("../Montserrat/Montserrat-Italic-VariableFont_wght.ttf")


}

.btn-2:hover{
color: rgb(0, 0, 0);
cursor: pointer;
text-decoration: none;
}

.btn-2:before{
transition: 0.5s all ease;
position: absolute;
top: 0;
left: 50%;
right: 50%;
bottom: 0;
opacity: 0;
content:"";
background-color: #ffffff;

}

.btn-2:hover::before{
transition: 0.5 all ease;
left: 0;
right: 0;
opacity:1;
z-index: -1;
}

.btn-3
{
width: 200px;
height: 60px;
border: none;
color: rgb(255, 255, 255);

transition: ease-out 0.3s;
background-color: transparent;
font-size:32px;
outline:none;
   
position: relative;
z-index:1;
font-family: 'montserrat';
   src : url("../Montserrat/Montserrat-Italic-VariableFont_wght.ttf")


}

.btn-3:hover{
color: rgb(0, 0, 0);
cursor: pointer;
text-decoration: none;
}

.btn-3:before{
transition: 0.5s all ease;
position: absolute;
top: 0;
left: 50%;
right: 50%;
bottom: 0;
opacity: 0;
content:"";
background-color: #ffffff;

}

.btn-3:hover::before{
transition: 0.5 all ease;
left: 0;
right: -13%;
opacity:1;
z-index: -1;
}
@media only screen and (max-width: 900px)
{
div1
{
  color: white;
  position: fixed; 
  left: 60px;
  top:50px; 
  width: 300px; /*Takes 90% width from WebContainer*/
  height: auto;
  margin: auto;
  font-size:18px;
 font-family: 'montserrat';
 src : url("../Montserrat/Montserrat-Italic-VariableFont_wght.ttf")

}
.textlogo
{
    width:90%
    
    
}
.logo
{
    display:block;
    margin-left: auto;
    margin-right: auto;
    top: 50px;
    width: 200px;
}
.container
{
position: fixed;
left: 60px;
top: 300px;
width:200px; /*Takes 90% width from WebContainer*/
height: auto;
margin: auto;


font-family: 'montserrat';
   src : url("../Montserrat/Montserrat-Italic-VariableFont_wght.ttf")



}

.btn-1
{
width: 200px;
height: 60px;
border: none;
color: rgb(255, 255, 255);
top: 50px;
left: 30px;
font-size:32px;
   
transition: ease-out 0.3s;
background-color: transparent;

outline:none;
   
position: relative;
z-index:1;
font-family: 'montserrat';
   src : url("../Montserrat/Montserrat-Italic-VariableFont_wght.ttf")


}

.btn-1:hover{
color: rgb(0, 0, 0);
cursor: pointer;
text-decoration: none;
}

.btn-1:before{
transition: 0.5s all ease;
position: absolute;
top: 0;
left: 150%;
right: 150%;
bottom: 0;
opacity: 0;
content:"";
background-color: #ffffff;

}

.btn-1:hover::before{
transition: 0.5 all ease;
left: 0;
right: 0;
opacity:1;
z-index: -1;

}

.btn-2
{
width: 200px;
height: 60px;
border: none;
color: rgb(255, 255, 255);
top: 100px;
left: 30px;

transition: ease-out 0.3s;
background-color: transparent;
font-size:32px;
outline:none;
   
position: relative;
z-index:1;
font-family: 'montserrat';
   src : url("../Montserrat/Montserrat-Italic-VariableFont_wght.ttf")


}

.btn-2:hover{
color: rgb(0, 0, 0);
cursor: pointer;
text-decoration: none;
}

.btn-2:before{
transition: 0.5s all ease;
position: absolute;
top: 0;
left: 50%;
right: 50%;
bottom: 0;
opacity: 0;
content:"";
background-color: #ffffff;

}

.btn-2:hover::before{
transition: 0.5 all ease;
left: 0;
right: 0;
opacity:1;
z-index: -1;
}

.btn-3
{
width: 200px;
height: 60px;
border: none;
color: rgb(255, 255, 255);
top: 150px;
left: 30px;

transition: ease-out 0.3s;
background-color: transparent;
font-size:32px;
outline:none;
   
position: relative;
z-index:1;
font-family: 'montserrat';
   src : url("../Montserrat/Montserrat-Italic-VariableFont_wght.ttf")


}

.btn-3:hover{
color: rgb(0, 0, 0);
cursor: pointer;
text-decoration: none;
}

.btn-3:before{
transition: 0.5s all ease;
position: absolute;
top: 0;
left: 50%;
right: 50%;
bottom: 0;
opacity: 0;
content:"";
background-color: #ffffff;

}

.btn-3:hover::before{
transition: 0.5 all ease;
left: -5%;
right: -20%;
opacity:1;
z-index: -1;
}
  
}

@media only screen and (max-width: 350px)
{
div1
{
  color: white;
  position: fixed; 
  left: 10px;
  width: 250px;

  height: auto;
  margin: auto;
  font-size:18px;
 font-family: 'montserrat';
 src : url("../Montserrat/Montserrat-Italic-VariableFont_wght.ttf")

}

.textlogo
{
    width: 240px;
    margin-left: auto;
}
.logo
{
    display:block;
    margin-left: auto;
    margin-right: auto;
    
}
.container
{
position: fixed;
left: 00px;
top: 300px;
width:200px; /*Takes 90% width from WebContainer*/
height: auto;
margin: auto;


font-family: 'montserrat';
   src : url("../Montserrat/Montserrat-Italic-VariableFont_wght.ttf")



}

.btn-1
{
width: 200px;
height: 60px;
border: none;
color: rgb(255, 255, 255);
top: 20px;
margin-left: auto;
    margin-right: auto;
font-size:32px;
   
transition: ease-out 0.3s;
background-color: transparent;

outline:none;
   
position: relative;
z-index:1;
font-family: 'montserrat';
   src : url("../Montserrat/Montserrat-Italic-VariableFont_wght.ttf")


}

.btn-1:hover{
color: rgb(0, 0, 0);
cursor: pointer;
text-decoration: none;
}

.btn-1:before{
transition: 0.5s all ease;
position: absolute;
top: 0;
left: 150%;
right: 150%;
bottom: 0;
opacity: 0;
content:"";
background-color: #ffffff;

}

.btn-1:hover::before{
transition: 0.5 all ease;
left: 0;
right: 0;
opacity:1;
z-index: -1;

}

.btn-2
{
width: 200px;
height: 60px;
border: none;
color: rgb(255, 255, 255);
top: 30px;
margin-left: auto;
    margin-right: auto;

transition: ease-out 0.3s;
background-color: transparent;
font-size:32px;
outline:none;
   
position: relative;
z-index:1;
font-family: 'montserrat';
   src : url("../Montserrat/Montserrat-Italic-VariableFont_wght.ttf")


}

.btn-2:hover{
color: rgb(0, 0, 0);
cursor: pointer;
text-decoration: none;
}

.btn-2:before{
transition: 0.5s all ease;
position: absolute;
top: 0;
left: 50%;
right: 50%;
bottom: 0;
opacity: 0;
content:"";
background-color: #ffffff;

}

.btn-2:hover::before{
transition: 0.5 all ease;
left: 0;
right: 0;
opacity:1;
z-index: -1;
}

.btn-3
{
width: 200px;
height: 60px;
border: none;
color: rgb(255, 255, 255);
top: 40px;
margin-left: auto;
    margin-right: auto;

transition: ease-out 0.3s;
background-color: transparent;
font-size:32px;
outline:none;
   
position: relative;
z-index:1;
font-family: 'montserrat';
   src : url("../Montserrat/Montserrat-Italic-VariableFont_wght.ttf")


}

.btn-3:hover{
color: rgb(0, 0, 0);
cursor: pointer;
text-decoration: none;
   }

   .btn-3:before{
transition: 0.5s all ease;
position: absolute;
top: 0;
left: 50%;
right: 50%;
bottom: 0;
opacity: 0;
content:"";
background-color: #ffffff;

}

.btn-3:hover::before{
transition: 0.5 all ease;
left: -5%;
right: -20%;
opacity:1;
z-index: -1;
}
  
}






  

body {
background-color: black;
background: linear-gradient(rgba(0, 0, 0, 0.7), rgba(0, 0, 0, 0.7)),url("../Bloc\ Nisipari/View03.jpg") no-repeat center center fixed;
-webkit-background-size: cover; /* For WebKit*/
-moz-background-size: cover;    /* Mozilla*/
-o-background-size: cover;      /* Opera*/
background-size: cover;         /* Generic*/
margin: 0;
width: 90%;
height: 100%;
max-width: 100%;
overflow: hidden;
max-height: 750px;


   
 
  } 
 

  div1
  {
color: white;
position: relative; 
left:200px;
top:300px; 
width: 200px;
height: auto;
margin: auto;
font-size:24px;
   font-family: 'montserrat';
   src : url("../Montserrat/Montserrat-Italic-VariableFont_wght.ttf");
   
  }
  .textlogo
  {
  width: 500px;
  }
  .logo{
  width: 300px;
  }


.container
{
position: relative;
left: 200px;
top: 500px;
width:100%; 
height: auto;
min-height: 100vmax;
margin: auto;


font-family: 'montserrat';
   src : url("../Montserrat/Montserrat-Italic-VariableFont_wght.ttf")



}

.btn-1
{
width: 200px;
height: 60px;
border: none;
color: rgb(255, 255, 255);
   
transition: ease-out 0.3s;
background-color: transparent;
font-size:32px;
outline:none;
   
position: relative;
z-index:1;
font-family: 'montserrat';
   src : url("../Montserrat/Montserrat-Italic-VariableFont_wght.ttf")


}

.btn-1:hover{
color: rgb(0, 0, 0);
cursor: pointer;
text-decoration: none;
}

.btn-1:before{
transition: 0.5s all ease;
position: absolute;
top: 0;
left: 150%;
right: 150%;
bottom: 0;
opacity: 0;
content:"";
background-color: #ffffff;

}

.btn-1:hover::before{
transition: 0.5 all ease;
left: 0;
right: 0;
opacity:1;
z-index: -1;

}

.btn-2
{
width: 200px;
height: 60px;
border: none;
color: rgb(255, 255, 255);

transition: ease-out 0.3s;
background-color: transparent;
font-size:32px;
outline:none;
   
position: relative;
z-index:1;
font-family: 'montserrat';
   src : url("../Montserrat/Montserrat-Italic-VariableFont_wght.ttf")


}

.btn-2:hover{
color: rgb(0, 0, 0);
cursor: pointer;
text-decoration: none;
}

.btn-2:before{
transition: 0.5s all ease;
position: absolute;
top: 0;
left: 50%;
right: 50%;
bottom: 0;
opacity: 0;
content:"";
background-color: #ffffff;

}

.btn-2:hover::before{
transition: 0.5 all ease;
left: 0;
right: 0;
opacity:1;
z-index: -1;
}

.btn-3
{
width: 200px;
height: 60px;
border: none;
color: rgb(255, 255, 255);

transition: ease-out 0.3s;
background-color: transparent;
font-size:32px;
outline:none;
   
position: relative;
z-index:1;
font-family: 'montserrat';
   src : url("../Montserrat/Montserrat-Italic-VariableFont_wght.ttf")


}

.btn-3:hover{
color: rgb(0, 0, 0);
cursor: pointer;
text-decoration: none;
}

.btn-3:before{
transition: 0.5s all ease;
position: absolute;
top: 0;
left: 50%;
right: 50%;
bottom: 0;
opacity: 0;
content:"";
background-color: #ffffff;

}

.btn-3:hover::before{
transition: 0.5 all ease;
left: 0;
right: -13%;
opacity:1;
z-index: -1;
}
@media only screen and (max-width: 900px)
{
div1
{
  color: white;
  position: fixed; 
  left: 60px;
  top:50px; 
  width: 300px; /*Takes 90% width from WebContainer*/
  height: auto;
  margin: auto;
  font-size:18px;
 font-family: 'montserrat';
 src : url("../Montserrat/Montserrat-Italic-VariableFont_wght.ttf")

}
.textlogo
{
    width:90%
    
    
}
.logo
{
    display:block;
    margin-left: auto;
    margin-right: auto;
    top: 50px;
    width: 200px;
}
.container
{
position: fixed;
left: 60px;
top: 300px;
width:200px; /*Takes 90% width from WebContainer*/
height: auto;
margin: auto;


font-family: 'montserrat';
   src : url("../Montserrat/Montserrat-Italic-VariableFont_wght.ttf")



}

.btn-1
{
width: 200px;
height: 60px;
border: none;
color: rgb(255, 255, 255);
top: 50px;
left: 30px;
font-size:32px;
   
transition: ease-out 0.3s;
background-color: transparent;

outline:none;
   
position: relative;
z-index:1;
font-family: 'montserrat';
   src : url("../Montserrat/Montserrat-Italic-VariableFont_wght.ttf")


}

.btn-1:hover{
color: rgb(0, 0, 0);
cursor: pointer;
text-decoration: none;
}

.btn-1:before{
transition: 0.5s all ease;
position: absolute;
top: 0;
left: 150%;
right: 150%;
bottom: 0;
opacity: 0;
content:"";
background-color: #ffffff;

}

.btn-1:hover::before{
transition: 0.5 all ease;
left: 0;
right: 0;
opacity:1;
z-index: -1;

}

.btn-2
{
width: 200px;
height: 60px;
border: none;
color: rgb(255, 255, 255);
top: 100px;
left: 30px;

transition: ease-out 0.3s;
background-color: transparent;
font-size:32px;
outline:none;
   
position: relative;
z-index:1;
font-family: 'montserrat';
   src : url("../Montserrat/Montserrat-Italic-VariableFont_wght.ttf")


}

.btn-2:hover{
color: rgb(0, 0, 0);
cursor: pointer;
text-decoration: none;
}

.btn-2:before{
transition: 0.5s all ease;
position: absolute;
top: 0;
left: 50%;
right: 50%;
bottom: 0;
opacity: 0;
content:"";
background-color: #ffffff;

}

.btn-2:hover::before{
transition: 0.5 all ease;
left: 0;
right: 0;
opacity:1;
z-index: -1;
}

.btn-3
{
width: 200px;
height: 60px;
border: none;
color: rgb(255, 255, 255);
top: 150px;
left: 30px;

transition: ease-out 0.3s;
background-color: transparent;
font-size:32px;
outline:none;
   
position: relative;
z-index:1;
font-family: 'montserrat';
   src : url("../Montserrat/Montserrat-Italic-VariableFont_wght.ttf")


}

.btn-3:hover{
color: rgb(0, 0, 0);
cursor: pointer;
text-decoration: none;
}

.btn-3:before{
transition: 0.5s all ease;
position: absolute;
top: 0;
left: 50%;
right: 50%;
bottom: 0;
opacity: 0;
content:"";
background-color: #ffffff;

}

.btn-3:hover::before{
transition: 0.5 all ease;
left: -5%;
right: -20%;
opacity:1;
z-index: -1;
}
  
}

@media only screen and (max-width: 350px)
{
div1
{
  color: white;
  position: fixed; 
  left: 10px;
  width: 250px;

  height: auto;
  margin: auto;
  font-size:18px;
 font-family: 'montserrat';
 src : url("../Montserrat/Montserrat-Italic-VariableFont_wght.ttf")

}

.textlogo
{
    width: 240px;
    margin-left: auto;
}
.logo
{
    display:block;
    margin-left: auto;
    margin-right: auto;
    
}
.container
{
position: fixed;
left: 00px;
top: 300px;
width:200px; /*Takes 90% width from WebContainer*/
height: auto;
margin: auto;


font-family: 'montserrat';
   src : url("../Montserrat/Montserrat-Italic-VariableFont_wght.ttf")



}

.btn-1
{
width: 200px;
height: 60px;
border: none;
color: rgb(255, 255, 255);
top: 20px;
margin-left: auto;
    margin-right: auto;
font-size:32px;
   
transition: ease-out 0.3s;
background-color: transparent;

outline:none;
   
position: relative;
z-index:1;
font-family: 'montserrat';
   src : url("../Montserrat/Montserrat-Italic-VariableFont_wght.ttf")


}

.btn-1:hover{
color: rgb(0, 0, 0);
cursor: pointer;
text-decoration: none;
}

.btn-1:before{
transition: 0.5s all ease;
position: absolute;
top: 0;
left: 150%;
right: 150%;
bottom: 0;
opacity: 0;
content:"";
background-color: #ffffff;

}

.btn-1:hover::before{
transition: 0.5 all ease;
left: 0;
right: 0;
opacity:1;
z-index: -1;

}

.btn-2
{
width: 200px;
height: 60px;
border: none;
color: rgb(255, 255, 255);
top: 30px;
margin-left: auto;
    margin-right: auto;

transition: ease-out 0.3s;
background-color: transparent;
font-size:32px;
outline:none;
   
position: relative;
z-index:1;
font-family: 'montserrat';
   src : url("../Montserrat/Montserrat-Italic-VariableFont_wght.ttf")


}

.btn-2:hover{
color: rgb(0, 0, 0);
cursor: pointer;
text-decoration: none;
}

.btn-2:before{
transition: 0.5s all ease;
position: absolute;
top: 0;
left: 50%;
right: 50%;
bottom: 0;
opacity: 0;
content:"";
background-color: #ffffff;

}

.btn-2:hover::before{
transition: 0.5 all ease;
left: 0;
right: 0;
opacity:1;
z-index: -1;
}

.btn-3
{
width: 200px;
height: 60px;
border: none;
color: rgb(255, 255, 255);
top: 40px;
margin-left: auto;
    margin-right: auto;

transition: ease-out 0.3s;
background-color: transparent;
font-size:32px;
outline:none;
   
position: relative;
z-index:1;
font-family: 'montserrat';
   src : url("../Montserrat/Montserrat-Italic-VariableFont_wght.ttf")


}

.btn-3:hover{
color: rgb(0, 0, 0);
cursor: pointer;
text-decoration: none;
}

.btn-3:before{
transition: 0.5s all ease;
position: absolute;
top: 0;
left: 50%;
right: 50%;
bottom: 0;
opacity: 0;
content:"";
background-color: #ffffff;

}

.btn-3:hover::before{
transition: 0.5 all ease;
left: -5%;
right: -20%;
opacity:1;
z-index: -1;
}
  
}

<div1>

  <img class="logo" src="../site/image/logo.png" alt="logo">
  <p class="textlogo">"Neque porro quisquam est qui dolorem ipsum quia dolor sit amet, consectetur, adipisci velit..."</p>

</div1>
<div class="container">
  <button class="btn-1"><span>proiectare</span></button>

  <button class="btn-2"><span>constructii</span></button>

  <button class="btn-3"><span>infrastructura</span></button>
</div>



<h1> </h1>

<p>

</p>