.name {
    max-width: 20vw;
}

header {
    border-image-slice: 216 225 233 225;
    border-image-width: 0vw 0vw 2vw 0vw;
    border-image-outset: 0px 0px 0px 0px;
    border-image-repeat: repeat repeat;
    border-image-source: url("assets/border.gif");
    border-style: solid;

    padding: 3vh;
}

.illo img {
    max-width: 11vw;
    margin-left: auto;
    margin-right: auto;
    display: block;
}
.extras img,
.about img {
    max-width: 15vw;
    margin-left: auto;
    margin-right: auto;
    display: block;
}
nav {
    float: right;
    width: 50vw;
    column-count: 3;
    column-gap: 2vw;
    margin-top: -10vh;
}

.right {
    float: left;
    width: 50vw;
    padding: 5vw;
}

.left {
    filter: drop-shadow(2px 2px 1px rgba(61, 65, 37, 0.41));
    position: absolute;
    z-index: 1;
    width: 40vw;
    right: 8vw;
    margin-top: 10vh;
    background-color: rgba(213, 236, 95, 0.34);
    backdrop-filter: blur(1px);
    border-radius: 20px;
}

.doodle {
    width: 50vw;
}
.doodle img {
    user-select: none;
    filter: drop-shadow(2px 2px 1px rgba(61, 65, 37, 0.41));
    max-width: 45vw;
}

.text {
    padding: 2.5vw;
    color: #3d4125;
}

@font-face {
    font-family: Handjet;
    src: url(assets/Handjet.ttf);
}

h2 {
    font-family: monospace;
    font-size: 2.5vw;
    color: #3d4125;
}

p {
    font-family: monospace;
    font-size: 1.2vw;
}