:root {
    --bg-color: #3a3535;
    --post-color: white;
    --text-color: black;
    --text-color-invert: white;
    --accent: #c70000;
    --shadow: 5px 5px 5px #00000050;
    --std-margin: 30px 0;

    --corners: 10px;
    --left-corners: var(--corners) 0 0 var(--corners);
    --right-corners: 0 var(--corners) var(--corners) 0;
}

@font-face {
    font-family: "Home Video";
    src: url('/fonts/home-video/HomeVideo.ttf') format('truetype');
    font-weight: normal;
}
  
@font-face {
    font-family: "Home Video Dark";
    src: url('/fonts/home-video/HomeVideoBold.ttf') format('truetype');
    font-weight: normal;
}

@font-face {
    font-family: "Tox Typewriter";
    src: url('/fonts/tox_typewriter/Tox_Typewriter.ttf') format('truetype');
    font-weight: normal;
}

body {
    height: 100vh;
    display: flex;
    justify-content: center;
    align-items: center;
    
    background-color: #b9cfca;
    background-image: url("https://file.garden/aIfIEBfH0QVghEeJ/sketchbook/!bg_mountain.png");
    background-attachment: fixed;
    background-position: 0 60%;
    image-rendering: pixelated;
    
    font-family: "Home Video", 'Courier New', Courier, monospace;
}

/* ==== Sketchbook ==== */
main {
    border: 15px solid var(--bg-color);
    background-color: var(--bg-color);
    border-radius: calc(var(--corners) * 1.5);
    padding: 0 4px;
    filter: drop-shadow(var(--shadow)) drop-shadow(-5px 0px 5px #00000050);
    
    width: 50vw;;
    aspect-ratio: 4 / 3;
    
    image-rendering: auto;
}

/* Section styling - individual 2 page spreads */
section {
    background-color: white;
    border-radius: var(--corners);
    padding: 0 5px;
    width: 100%;
    height: 100%;
    display: none;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
}

section#start {
    display: flex;
    z-index: 1;
}
section:target {
    display: flex;
    z-index: 2;
}

/* Left and right page styling */
.pageL,	.pageR {
    height: 100%;
    width: 50%;
    position: relative;
    border-radius: var(--corners);

    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;


    /* Adjusting text styling since these are technically links */
    text-decoration: none;
    color: black;
}

.pageL {
    border-left: 1px grey solid;
}
.pageR { 
    border-right: 1px grey solid;
}

a.pageL:hover::after, a.pageL:focus::after, 
a.pageR:hover::after, a.pageR:focus::after {
    color: black;
    position: absolute;
    bottom: 0.5vw;
    filter: drop-shadow(2px 2px white) 
    drop-shadow(-2px -2px white) 
    drop-shadow(2px -2px white) 
    drop-shadow(-2px 2px white);
    font-size: 3em;
}

a.pageL:hover::after, a.pageL:focus::after {
    content: '←';
    left: 1vw;
}

a.pageR:hover::after, a.pageR:focus::after {
    content: '→';
    right: 1vw;
}

/* Middle seam */
.seam {
    width: 20px;
    background: linear-gradient(to right, 
    transparent, #130e0cc2, transparent);
    position: absolute;
    height: 100%;
    left: 48.5%;
    z-index: 3;
}

/* Images */ 
section img {
    width: 100%;
    max-height: 100%;
}

.pageL img {
    border-radius: var(--left-corners);
}
.pageR img {
    border-radius: var(--right-corners); 
}

/* In case I end up doing non-full page images */
section img.mini {
    border-radius: unset;
}

/* Full text page styling */
.text {
    overflow-y: scroll;
    width: 100%;
}

.centered.text {
    text-align: center;
}

.text h1 {
    font-family: "Home Video Dark", 'Courier New', Courier, monospace;
}

.text p {
    padding: 0 35px;
    text-indent: 25px;
    font-family: "Tox Typewriter", 'Courier New', Courier, monospace;
    font-size: 20px;
}

.text .poetry {
    text-indent: unset;
    padding: 0 70px;
}

.highlight {
    color: var(--accent);
}

/* ========= MOBILE FORMATTING ========= */
@media screen and (max-width: 900px) {
    main {
        min-width: 80vw;
        border: 8px solid var(--bg-color);
    }

    section {
        padding: 0 3px;
    }
}