body {
    /* background-image: linear-gradient(rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0.5)), url('assets/bg.png'); */
    background-image: url(assets/bg.png);
    /* background-size: cover; */
    /* background-position: center; */
    display: flex;
    flex-direction: column;
    align-items: center;
}

.container {
    display: grid;
    grid-template-rows: 160px 640px 640px 80px;
    grid-template-columns: 1fr 2fr 1fr 1fr;
    grid-template-areas:
    "header header header header"
    "nav section-1 section-1 side"
    "section-2 section-2 section-3 side"
    "footer footer footer footer";
    gap: 16px;
    margin: 30px auto;
}

.container > * {
    border: 1px solid #AE88CD;
}

.header-image {
    grid-area: header;
    background: url(assets/bg3.png);
    background-image: linear-gradient(rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0.5)), url('assets/bg3.png');
    border: 2px solid transparent;
    border-image: url(assets/lc.png) 50 round;
    display: grid;
    grid-template-columns: 1fr 80% 1fr;
    grid-template-areas:
    "lappy-1 namebin lappy-2"
    "lappy-1 kissygif lappy-2"
    "lappy-1 title lappy-2";
    font-size: 1rem;
    color: #AE88CD;
    font-family: "custom-sans";
}

.header-image > img:first-of-type {
    grid-area: lappy-1;
    /* display: inline-block; */
    /* margin: 10px 0; */
    align-self: center;
    justify-self: center;
}

.header-image > img:last-of-type {
    grid-area: lappy-2;
    align-self: center;
    justify-self: center;
}

.header-image > p:first-of-type {
    grid-area: namebin;
    font-size: 2rem;
    /* display: flex; */
    /* justify-content: center; */
    align-self: center;
    justify-self: center;
}

.header-image > p:last-of-type {
    grid-area: title;
    align-self: center;
    justify-self: center;
}

.header-image > div {
    grid-area: kissygif;
    align-self: center;
    justify-self: center;
}

.header-image > div > img {
    display: inline-block;
}

.header-image .title {
    font-size: 1rem;
    font-weight: bold;
}

.char-match {
    color: #fff;
}

.nav {
    grid-area: nav;
    background: url('assets/bg2.png');
    padding: 16px;
    display: grid;
    grid-template-rows: 20px 4fr 3fr 20px;
    grid-template-areas:
    "floral-1"
    "menu"
    "nav-misc"
    "floral-2";
    gap: 16px;
}

.nav > * {
    background-color: #fff;
}

.nav > div,
.side > div,
.section-1 {
    background: #AE88CD;
    box-shadow: inset -4px -4px 8px rgba(0, 0, 0, 0.15), 
              inset 4px 4px 8px rgba(255, 255, 255, 0.8);
}

.nav > .floral:first-child {
    grid-area: floral-1;
    background-color: white;
}

.side {
    grid-area: side;
    background: url('assets/bg2.png');
}

.section-1 {
    grid-area: section-1;
    /* background: #E2D3EF; */
    background: #AE88CD;
    display: grid;
    grid-template-rows: 1fr 1fr;
    grid-template-columns: 3fr 2fr;
    grid-template-areas:
    "intro intro"
    "sec1-misc1 sec1-misc2";
    gap: 8px;
    padding: 8px;
    box-shadow: inset -4px -4px 8px rgba(0, 0, 0, 0.15), 
              inset 4px 4px 8px rgba(255, 255, 255, 0.8);
}

.section-1 > div {
    background-color: black;
    border: 10px solid transparent;
    border-image: url(assets/border.png) 9 round;
}

.section-1 > .intro {
    grid-area: intro;
}

.section-1 > .sec1-misc1 {
    grid-area: sec1-misc1;
}

.section-1 > .sec1-misc2 {
    grid-area: sec1-misc2;
}

.section-2 {
    grid-area: section-2;
}

.section-3 {
    grid-area: section-3;
}

.footer {
    grid-area: footer;
}