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

/* variables */
:root {
    --background-color: #0FC;
    --text-color: #232;
    --header-background: #EEE;
}

body {
    background-color: var(--background-color);
    color: #232;
    font-family: verdana;
    min-height: 120svh; /* 100% of viewport height */
}

header {
    position: fixed; 
    top: 0; left: 0;
    width: 100%; /* need for position fixed, absolute */ 
    height: 80px; 
    background-color: #EEE;
    color: #232;
}

a.logo {
    width: 220px; height: 80px;
    display: block;
    background-color: #EEE;
    position: absolute;
    top: 0; left: 50%;
    transform: translateX(-50%);
    padding-top: 16px;
    /* border-top: 16px solid #EEE; */
}

a.menu_icon {
    display: block;
    width: 50px; height: 50px;
    position: relative;
    top: 15px; left: 15px;
}

a.menu_icon img {
    width: 100%; height: 100%;
}

.featured_photo {
    margin: 200px auto 80px auto;
    width: 700px; height: 300px;
    position: relative;
}

.featured_photo figcaption {
    width: 250px; height: 300px;
    background-color: rgb(253, 11, 91);
    color: var(--background-color);
    position: absolute;
    top: 0px; left: 0px;
}

.picture_frame {
    background-color: pink;
    width: 450px; height: 300px;
    position: absolute;
    right: 0px; top: 0px;
    background-image: url(../images/horse.jpg);
    background-size: cover;
    background-position: center;
}

/* psuedo element, something that doesn't exist */
.featured_photo figcaption::after {
    content: "";
    display: block;
    width: 40px; height: 40px;
    background-color: rgb(253, 11, 91);
    position: absolute; 
    top: 50%; right: -20px;
    z-index: 5; /* controls layering, big number on top */
    transform: translateY(-50%) rotate(45deg);
}