*{
    margin:0;
    padding:0;
    box-sizing:border-box;
}
ul{
    list-style:none;
}
body{
	background:#000000;
	display:grid;
	font-size:1.3rem;
	grid-template-columns:1fr;
	grid-template-rows:1fr 1fr auto;
	height:100vh;
	justify-items:center;
    margin:0 auto;
    width:clamp(20rem,99vw,99vw);
}
@media(min-width:1080px){
	body{
		font-size:1.5rem;
		width:clamp(20rem,50rem,60rem);
	}
}
.logo{
	margin:1rem 0;
}
header, section{
	background:#ebebeb;
	border:.1rem solid #ff0000;
	border-radius:1rem;
	margin:.5rem .25rem 0;
	padding:.5rem;
}
@media(min-width:1080px){
	header, section{
		margin:2rem 0 0;
		padding:1rem;
	}
}
section p{
	padding:.25rem;
}
@media(min-width:1080px){
	section p{
		padding:.5rem .25rem;
	}
}
h3{
	padding:.25rem 0 0;
}
@media(min-width:1080px){
	h3{
		padding:.5rem 0 0;
	}
}
h4{
	padding:.25rem 0 0 .5rem;
}
h4~p{
	padding:.25rem 0 0 .5rem;
}
blockquote{
	background:#cccccc;
	margin:.5rem;
	padding:.5rem;
}
#latest p:not(:last-of-type),#dive-deeper p:not(:last-of-type){
	border-bottom:.1rem solid #cccccc;
}
#latest p:first-of-type{
	border-bottom:none;
}
.hamburger-button{
    background:#ffffff;
    border:none;
    cursor:pointer;
    padding:3rem 2rem 1rem;
}
@media(min-width:1080px){
    .hamburger-button{
        display:none;
    }
}
.hamburger-line {
    background:#000000;
    display:block;
    height:.15rem;
    position:relative;
    width:1.75rem;
}
.hamburger-line::before,
.hamburger-line::after{
    background:#000000;
    content:'';
    display:block;
    height:100%;
    position:absolute;
    transition:all .2s ease-out;
    width:100%;
}
@media(prefers-color-scheme:dark){
    .hamburger-line,.hamburger-line::before,.hamburger-line::after{
        background:#cccccc;
    }
}
.hamburger-line::before{
    top:.35rem;
}
.hamburger-line::after{
    top:-.35rem;
}
#mobile-menu:popover-open ~ .hamburger-button .hamburger-line{
    background:transparent;
}
#mobile-menu:popover-open ~ .hamburger-button .hamburger-line::before{
    transform:rotate(-45deg);
    top:0;
}
#mobile-menu:popover-open ~ .hamburger-button .hamburger-line::after{
    transform:rotate(45deg);
    top:0;
}

#mobile-menu{
    border:none;
    box-shadow:-2px 0 10px rgba(0,0,0,0.1);
    inset:unset;
    top:0;
    right:0;
    bottom:0;
    margin:0;
    padding:2rem;
    position:fixed;
    transform:translateX(100%);
    transition:transform 0.3s ease, display 0.3s allow-discrete;
    width:min(15rem, 80vw);
}
#mobile-menu:popover-open{
    background:#ffffff;
    border-bottom:.25rem solid #000000;
    border-left:.1rem solid #000000;
    box-shadow:.25rem .25rem .1rem #cccccc;
    position:fixed;
    top:4.9rem;
    transform:translateX(0);
}
.nav-menu{
    display:flex;
    flex-direction:column;
    list-style:none;
    margin:0 0 .25rem;
    padding:0;
}
#mobile-menu li{
    border-bottom:1px solid #eee;
}
#mobile-menu li:last-of-type{
    border-bottom:none;
}
#mobile-menu a{
    color:#696969;
    display:block;
    font-size:1.5rem;
    padding:.5rem 0 .5rem .5rem;
    text-decoration:none;
}
#mobile-menu a:hover{
    background:#000000;
    color:#ffffff;
}
@media(min-width:1080px){
    #mobile-menu{
        align-self:end;
        background:#ffffff;
        box-shadow:unset;
        display:block;
        margin:0;
        padding:0;
        position:unset;
        top:0;
        right:0;
        bottom:0;
        transform:none;
        transition:transform 0.3s ease, display 0.3s allow-discrete;
        width:48rem;
    }
    #mobile-menu:popover-open{
        position:unset;
        top:unset;
    }
    #mobile-menu:popover-open a:hover{
        #000000;
    }
    #mobile-menu li{
        border:none;
    }
    .nav-menu{
		align-items:center;
        flex-direction:row;
        text-align:center;
    }
    #mobile-menu a{
        border:none;
        color:#696969;
        font-size:1.5rem;
        padding:0 1rem;
    }
    #mobile-menu a:hover{
        color:#ffffff;
    }
}