:root {
    --background: #446;
}

* {
    box-sizing: border-box;
}

html {
    display: flex;
    flex-direction: row;
    background: black;
    background-image: repeating-conic-gradient(from 45deg, #1e1e1e 0 25%, #222 25% 50%);
    background-size: 16px 16px;
    color: white;
}

body {
    margin: 0 auto;
    max-width: 50em;
    width: 100%;
    filter: drop-shadow(10px 10px 0 #0008);
}

header {
    display: flex;
    flex-direction: row;
    align-content: center;
    justify-content: space-between;

    h1 {
        margin-block: 0;
    }
}

nav.main-navigation {
    height: 100%;
    margin-block: auto;

    ul {
        list-style: none;
        margin: 0;
        padding: 0;
        display: flex;
        flex-direction: row;

        li {
            display: block;
        }
    }
}

.panel {
    background: #446;
    --cutout: 32px;
    padding: var(--cutout);
    margin-block: 16px;
    clip-path: polygon(
    	0 var(--cutout),
    	var(--cutout) 0,
    	100% 0,
    	100% calc(100% - var(--cutout)),
    	calc(100% - var(--cutout)) 100%,
    	0 100%
    	);
}

footer {
    display: flex;
    justify-content: space-between;

    a {
        margin-block: auto;
    }
}

a {
    color: #0ee;
}

a:hover {
    color: #9ff;
}