/* ==== FONTS ==== */
@font-face{
font-family:"Mikodacs";
src:url("Mikodacs.otf");
}

@font-face{
font-family:"PressStart";
src:url("PressStart2P.ttf");
}

/* ==== BODY ==== */
body{
margin:0;
padding:0;
background:url("https://static.vecteezy.com/system/resources/previews/024/059/452/large_2x/synthwave-red-cyber-laser-grid-with-stars-in-background-and-horizon-on-starry-space-background-design-for-poster-cover-wallpaper-web-banner-free-photo.jpg");
background-size:cover;
font-family:"PressStart";
color:#bbbbbb;
}

/* ==== CONTAINER ==== */
#container{
width:940px;
height:1200px;
margin:auto;
margin-top:20px;
background:url("https://64.media.tumblr.com/1a155d76c24277e673c39a1386507ea4/tumblr_nz1056qc8U1u93tuuo3_250.png");
border:3px solid #c54989;
position:relative;
overflow:hidden;
}

/* ==== HEADER ==== */
#header{
height:120px;
border-bottom:3px solid #5c184e;
display:flex;
align-items:center;
}

#homegif img{
height:120px;
}

#title{
flex-grow:1;
text-align:center;
font-family:"Mikodacs";
font-size:32px;
color:#5c184e;

text-shadow: 
0 0 5px #c54989,
0 0 10px #c54989,
0 0 20px #c54989;
}

/* ==== COMMENTARY ==== */
#commentary{
padding:15px;
border-bottom:2px solid #633666;
text-align:center;
}

#commentary span{
background:#c54989;
color:#5c184e;
padding:8px;
display:inline-block;
}

/* ==== BUTTON BAR ==== */
#buttons{
display:flex;
justify-content:space-around;
padding:10px;
}

.button{
background:#5c184e;
padding:8px;
cursor:pointer;
border:2px solid #c54989;
}

.button:hover{
background:#c54989;
}

/* ==== GALLERY BOX ==== */
#gallery{
width:90%;
height:600px;
margin:auto;
overflow-y:scroll;
border:2px solid #633666;
padding:10px;
display:grid;
grid-template-columns:repeat(4,1fr);
gap:10px;
}

/* ==== IMAGES ==== */
#gallery img{
width:100%;
cursor:pointer;
transition:0.3s;
}

#gallery img:hover{
transform:scale(1.1);
}

/* ==== LIGHTBOX ==== */
#lightbox{
position:fixed;
top:0;
left:0;
width:100%;
height:100%;
background:rgba(0,0,0,0.9);
display:none;
align-items:center;
justify-content:center;
z-index:999;
}

#lightbox img{
max-width:80%;
max-height:80%;
}

/* ==== BOTTOM COMMENTARY ==== */
#bottom{
position:absolute;
bottom:0;
width:100%;
padding:15px;
border-top:2px solid #633666;
text-align:center;
}

#bottom span{
background:#c54989;
color:#5c184e;
padding:8px;
display:inline-block;
}