:root {
    --primary-bg-color: #C3CC9B;
    --paper-color: white;
    --pencil-color: #4B4B4D;
    
    --line-height: 4vw;
    --page-width: 90vw;
    --hor-line-offset: 12.5vw;
    --ver-line-offset: 14.5vw;
    --punchhole-diameter: 3.5vw;
    --punchhole-offset: 2.5vw;
    --p-font-size: 2vw;
    --h1-font-size: 4vw;
    --content-padding-top: 6vw;
    --content-padding-gen: 1.5vw;
    --profile-img-height: 20vw;
}

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

body {
    background-color: var(--primary-bg-color);
    display: grid;
    grid-template-rows: repeat(auto-fit, var(--line-height));
    grid-auto-rows: var(--line-height);
    font-family: 'Caveat', cursive;
}

.a4-page {
    position: relative;
    width: var(--page-width);
    height: auto;
    aspect-ratio: 852 / 1104;
    background-color: var(--paper-color);
    box-shadow: 0 10px 40px rgba(0, 0, 0, 0.2);
    margin: 20px auto;
    overflow: hidden;
}

/* light red vertical lines */
.a4-page::before {
    content: '';
    position: absolute;
    left: var(--ver-line-offset);
    top: 0;
    width: 1px;
    height: 100%;
    background-color: #f7c0c0;
    z-index: 0;
}

/* light blue horizontal lines */
.lines {
    position: absolute;
    top: var(--hor-line-offset);
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 1;
    background-image: repeating-linear-gradient(
        0deg,
        transparent 0px,
        transparent calc(var(--line-height) - 1px),
        #a4d3dc calc(var(--line-height) - 1px),
        #a4d3dc var(--line-height)
    );
    pointer-events: none;
}

.punchholes {
    position: absolute;
    left: var(--punchhole-offset);
    width: var(--punchhole-diameter);
    aspect-ratio: 1 / 1;
    border-radius: 50%;
    background-color: var(--primary-bg-color);
    box-shadow: inset 0 2px 4px rgba(0, 0, 0, 0.2);
    z-index: 2;
}
.hole1 {
    top: 8.695%;
}
.hole2 {
    top: 47.826%;
}
.hole3 {
    bottom: 10.144%;
}

.content {
    position: relative;
    z-index: 3;
    padding: var(--content-padding-top) var(--content-padding-gen) var(--content-padding-gen) calc(var(--ver-line-offset) + var(--content-padding-gen));
    margin-bottom: 0;
    height: 100%;
    font-size: var(--p-font-size);
    line-height: var(--line-height);
    color: var(--pencil-color);
    overflow-y: auto; /* breaks the illusion but oh well */
}

.intro {
    display: flex;
    justify-content: center;
}

.intro > .bio{
    width: calc(100% / 2);
}

.intro > .profile {
    width: calc(100% / 3);
    display: flex;
    justify-content: center;
    align-items: center;
}

h1 {
    font-size: var(--h1-font-size);
    line-height: calc(var(--line-height) * 2);
}

p {
    font-weight: 400;
}

.profile img {
    height: var(--profile-img-height);
}

.items {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-around;
}

.items > .item {
    width: calc(100% / 3);
    text-align: center;
}

.item > img {
    width: 100%;
    padding: 1vw;
}

.showcase > h2 {
    text-align: center;
    padding: var(--line-height);
}

a:hover, .showcase:hover {
	background-color: #FBF71982;
}

a:link, a:visited, a:link:active, a:visited:active {
	color: var(--pencil-color);
}

nav {
    position: absolute;
	display: flex;
	justify-content: space-between;
	width: 100%;
	font-size: var(--p-font-size);
	padding-left: 16vw;
	padding-right: 2vw;
    z-index: 4;
}

.top-nav {
	padding-top: 2vw;
}

.bottom-nav {
    bottom: var(--line-height);
}

.listings {
	display: flex;
	flex-direction: column;
}

.listings section {
	height: calc(100% / 3);
	display: flex;
	justify-content: space-evenly;
}

.listings img, .listings div {
	max-width: 45%;
	padding: 0 0.5vw var(--line-height) 0.5vw;
}

@media (max-width: 852px) {
    .items {
        flex-direction: column;
        align-items: center;
    }
    .items > .item {
        width: 100%;
    }
    .listings section {
        flex-direction: column;
        align-items: center;
    }
    .listings img, .listings div {
        width: 100%;
    }
}