html {
 height: 100%;
 width: 100%;
 background-color: hsl(220.91deg, 62.86%, 13.73%);
 background-repeat: no-repeat;
 background-attachment: fixed;
 background-size: cover;
 background-origin: content-box;
 overflow-y: scroll;
 -ms-overflow-style: none;  /* IE and Edge */
 scrollbar-width: none;  /* Firefox */
}

html::-webkit-scrollbar {
    display: none; /* Chrome and the rest */
}

#photos {background-color:hsl(221.54deg, 62.24%, 13.68%);}
#posters {background-color: #0B363E;}
#videos {background-color:hsl(216deg, 70.59%, 5.16%);}

* {
 margin: 0;
 padding: 0;
 box-sizing: border-box;
}

body {
 font-family: Verdana, sans-serif;
}

.header {
 display:flex;
 justify-content: center;
 padding: 2rem 0;
 margin: 1rem;
 align-items: center;
}

.header h1 {
 font-size: 50px;
}

.container {
 padding: 2rem 5%;
}

.container .image-container {
 columns: 15rem 3;
 gap: 1rem;
}

.container .image-container img {
 width: 100%;
 height: auto;
 margin-bottom: 1rem;
}

.container .poster-container {
 columns: 25rem 3;
 justify-content: start;
 gap: 1rem;
}

.container .poster-container img {
 width: 100%;
 height: auto;
 margin-bottom: 1rem;
}

.container .video-container {
 columns: 20rem 2;
 justify-content: start;
 gap: 1rem;
}

.container .video-container iframe {
 display: block;
 height: auto;
 width: 100%;
 margin-bottom: 1rem;
 aspect-ratio: 16/9;
}