:root {
    --light: #fcd8e9;
    --footer: #f9f8f2;
}

body, html { overflow-x: hidden; }

body {
    background: #fff;
    margin: 0;
    padding: 0;
    font-size: 1.2rem;
    font-family: Georgia, Garamond, serif;
}

h1 {
    text-align: center;
    font-size: 4rem;
    margin-top: 6rem;
}

h2 {
    text-align: center;
}

.about {
    text-align: center;
    margin-top: calc(25vh + 18vw + 3rem);
}

a { color: #0079b5; }
a:visited { color: #b5007f; }

#octo, canvas {
    position: absolute;
    display: block;
    color: var(--light);
}

.light { fill: var(--light); }
.lighter { fill: var(--lighter); }

#canvas {
    width: 100%;
    z-index: -1;
}

.rest {
    background: var(--light);
    margin-top: 0px;
    padding: 50px;
    box-sizing: border-box;
    position: relative;
    margin-bottom: calc(4vw + 3rem);
}

.rest li {
    margin-bottom: 0.2em;
}

.octopus {
    position: relative;
    height: calc(50vh + 40vw);
    overflow: hidden;
}

#octo, #canvas {
    width: 100%;
    bottom: -2px;
    left: 0;
}

.rest::after {
    content: '';
    position: absolute;
    height: 4vw;
    transform: skewY(-2deg);
    left: 0; right: 0; bottom: -2vw;
    background: var(--light);
    z-index: -1;
}


.views { position: absolute; width: 0; height: 0; }

@media (max-aspect-ratio: 3/4) {
    .about {
        margin-top: calc(25vh - 8rem);
    }
}

.images { display: grid; justify-content: center; column-gap: 0.2em; }
.art { width: 43.5rem; margin: 0 auto; }
img { width: 100%; }
.webui img { box-shadow: 0 0 2px rgba(0,0,0,0.2); }

h2 {
    margin: 0 auto;
    margin-top: 1.4rem;
    font-weight: 600;
    font-size: 1.5rem;
    margin-bottom: 1rem;
}
.electronicslabel { transform: skewY(-2deg); color: #dd97c5; }
.electronicslabel::before { background-color: #eda5d4; }
.webuilabel { transform: skewY(-1deg); color: #69c580; }
.webuilabel::before { background-color: #74cf89; }
.animationlabel { transform: skewY(-0deg); color: #e6958a; }
.animationlabel::before { background-color: #eea89e; }

h2::before {
    content: "";
    display: block;
    width: 100%;
    height: 0.3rem;
    border-radius: 0.15rem;
    margin-bottom: 0.3rem;
}

.bg {
    position: absolute;
    left: 0;
    right: 0;
    background: #fff;
    transform: skewY(-3deg);
    z-index: -1;
}

footer {
    background-image: url("art/confetti.png");
    background-color: var(--footer);
    background-size: 1000px 250px;
    background-position: calc(50% - 6em) 10px;
    padding: 1rem;
    margin-top: 5rem;
    position: relative;
}

footer ul {
    display: flex;
    justify-content: space-between;
    list-style-type: none;
    padding: 0;
}
footer a:not(:hover) { text-decoration: none; }
.hl { background: rgba(255, 255, 255, 0.8); padding: 0.2em 0.1em; }


.projects {
    list-style-type: none;
    max-width: 46em;
    margin: 0 auto;
    padding: 0;
}

.projects > li {
    display: flex;
    align-items: center;
    margin: 1em 0;
}

.projects > li > a {
    width: 10em;
    flex-shrink: 0;
    margin-right: 0.5em;
}

abbr {
    font-style: italic;
}


/* Mathy magic rabbit spells */
.art { grid-template: 0.629em 0.629em 8.436em 1.96em 1.042em 9.064em 3.002em 3.705em / repeat(3, 11.867em) } .art0 { grid-area: 3/1 } .art1 { grid-area: 2/2 } .art2 { grid-area: 1/3 } .art3 { grid-area: 5/1 } .art4 { grid-area: 6/2 } .art5 { grid-area: 4/3 }
.electronics { grid-template: 0.419em 0.419em 6.899em 1.364em 1.305em 10.762em 1.305em 0.298em / repeat(3, 11.867em) } .elec0 { grid-area: 3/1 } .elec1 { grid-area: 2/2 } .elec2 { grid-area: 1/3 } .elec3 { grid-area: 4/1 } .elec4 { grid-area: 6/2 } .elec5 { grid-area: 5/3 }
.webui { grid-template: 0.209em 0.209em 6.345em 4.037em 0.916em 3.211em / repeat(3, 11.867em) } .webu0 { grid-area: 3/1 } .webu1 { grid-area: 2/2 } .webu2 { grid-area: 1/3 } .webu3 { grid-area: 4/1 }

@media (max-width: 48rem) {
    .rest { padding: 16px; }
    h2, .art { width: 28.8rem; }
    .art { grid-template: 0.629em 10.424em 1.047em 8.673em 8.187em 3.913em 8.187em / repeat(2, 11.9em) } .art0 { grid-area: 2/1 } .art1 { grid-area: 1/2 } .art2 { grid-area: 3/1 } .art3 { grid-area: 4/2 } .art4 { grid-area: 5/1 } .art5 { grid-area: 6/2 }
    .electronics { grid-template: 0.419em 6.918em 2.677em 6.449em 8.626em 3.474em 8.626em / repeat(2, 11.9em) } .elec0 { grid-area: 2/1 } .elec1 { grid-area: 1/2 } .elec2 { grid-area: 3/1 } .elec3 { grid-area: 4/2 } .elec4 { grid-area: 5/1 } .elec5 { grid-area: 6/2 }
    .webui { grid-template: 0.209em 6.363em 4.967em 5.864em 2.322em / repeat(2, 11.9em) } .webu0 { grid-area: 2/1 } .webu1 { grid-area: 1/2 } .webu2 { grid-area: 3/1 } .webu3 { grid-area: 4/2 }
}
@media (max-width: 511px) {
    .rest { padding: 12px; padding-left: 16px; }
    .projects > li > a { width: 6.5em; }
    h2, .art { width: 100%; }
    .images { display: block; width: 12em; line-height: 1.1; margin: 0 auto; }
}
@media (prefers-color-scheme: dark) {
    body {  background-color: #403339; color: #fff; }
    .rest { color: #000; }
    .bg { background: #fceff0; }
    .hl { background: rgba(0, 0, 0, 0.5); }
    footer { background-image: url("art/confetti-dark.png"); }
}