*{
  &::-webkit-scrollbar {
    display: none;
  }
    margin: 0;
    padding: 0;
}

h1{font-size: xx-large;}
a{text-decoration: none; color:azure;}
body{background-color:black; max-width:100%;}
 
header{
    top:0;
    position:sticky;
    z-index: 1000;
  background-color: rgb(236, 26, 7);
    color:rgb(255, 255, 255);
    font-size:2em;
    text-align: center;
    overflow: hidden;
    line-height:2;
    margin:0;
    height:2em;
   
   

}
nav{top: 2em;
  position: sticky;
  
  z-index:799;
height: 2.5rem;
background-color: rgb(209, 17, 17);
font-size: 2rem;
text-align: center;
margin:0;



}

nav a{text-decoration: none;
      color:whitesmoke;
      padding:0.1rem;
      margin:0;
      border-style: solid;
      font-size:1.1rem;
     
}

nav a:active{background-color: white;
color:black;}

nav a:hover{

  background-color: azure;
  color:black;
  font-style: italic;
  font-weight: bold;
}

main{
  overflow: scroll;

  display: grid;
grid-template-columns: repeat(auto-fit, minmax(14rem, 1fr));
    gap: 1.5rem;
    padding: 1.5rem;
    background-color: black;
    justify-content: center;
  padding:1.5rem;
  margin:0;
     background-color: black;
     color:whitesmoke;
     scroll-behavior: smooth;
}

.content{display:block;

}
.content img{width: 100%; height: auto;}

.movie-card{

 overflow:hidden;
display: flex;

background-color: rgb(23, 26, 25);
border: 1px solid #333;
flex-direction: column;
text-wrap:wrap;

}

.movie-card:hover{box-shadow: 5px 5px 5px rgb(249, 255, 255);
 scale:1.1;


}
.movie-card img{
aspect-ratio: 16/9;
margin:0;

display: inline-block;

}


.
footer{

background-color: rgb(249, 255, 255);
height:2.5%;
width:100%;

}



@media screen and (min-width:48.01rem) {

main{
Max-heigt:32rem;
max-width: 60rem;
margin-left:9rem;

}
.content{display:block; width=60rem;}
.content img{ aspect-ratio: 16/9; 

width: 100%;             /* Vult nu keurig de 60rem van je main */
    height: auto;
    aspect-ratio: 16 / 9;
    object-fit: cover;  
display: block;
}
   



  

aside{

display: none;

}

@media (min-width: 768px){

nav{display:none;}




aside{
top:2em;
float:left;
  position: fixed;
  display:block;
height: 54.35rem;
width:9rem;
background-color: rgb(209, 17, 17);
font-size: 2rem;
text-align: center;
margin:0;
padding-top:0.5rem;
 




}

aside a{
  display: flex;
  border:solid 0.1rem ;
  

}

aside a:hover{
  transition-duration: 1s;
  background-color : azure;
  color:black;
  font-style: italic;
  font-weight: bold;

}
                                                   