/* ==== FONTS ==== */
@font-face{
font-family:"Throwupz";
src:url("Throwupz-z7vX.ttf");
}

@font-face{
font-family:"Sion";
src:url("SionPossible.otf");
}

/* ==== BODY ==== */
body{
margin:0;
padding:0;
background:url("https://64.media.tumblr.com/04753ebb14b94f5722413508e8402319/tumblr_inline_n5br6ouyuM1r4ugnn.png");
font-family:"Sion";
color:#e4a8ca;
}

/* ==== CONTAINER ==== */
#container{
width:940px;
margin:auto;
margin-top:20px;
background:#884499;
padding-bottom:20px;
border:3px solid #bb6588;
}

/* ==== HEADER ==== */
#header{
position:relative;
width:900px;
height:300px;
margin:auto;
}

#header img{
width:900px;
height:300px;
display:block;
}

#homebtn{
position:absolute;
bottom:0;
left:0;
width:100px;
height:100px;
z-index:2;
}

#homebtn img{
width:100%;
height:100%;
object-fit:cover;
}

#homebtn img{
width:100%;
height:100%;
}

/* ==== BLOG LIST ==== */
.entry-preview{
width:90%;
margin:10px auto;
padding:10px;
background:#8889cc;
border:2px solid #ccaa87;
cursor:pointer;
transition:0.3s;
}

.entry-preview:hover{
background:#bb6588;
}

/* ==== ENTRY TEXT ==== */
.entry-title{
font-family:"Throwupz";
font-size:24px;
}

.entry-date{
font-size:18px;
color:#ccaa87;
}

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

.popup-content{
width:900px;
height:400px;
background:#8889cc;
border:3px solid #ccaa87;
display:flex;
padding:10px;
}

/* TEXT SIDE */
.popup-text{
width:600px;
overflow-y:scroll;
padding-right:10px;
color:#000080; /* navy blue */
}

/* IMAGE SIDE */
.popup-image{
width:300px;
height:300px;
}

.popup-image img{
width:100%;
height:100%;
object-fit:cover;
}

/* CLOSE ON CLICK */
#popup:hover{
cursor:pointer;
}