@import url('https://fonts.googleapis.com/css2?family=Baloo+2:wght@400..800&family=Fredoka:wght@300..700&display=swap');

:root {
    --ink: #292929;
    --coconut: #fff9f8;
    --guava: #d95772;
    --sakura: #feaedb;
    --banana: #fff1a8;
    --clementine: #ffb429;
    --blood-orange: #e85d04;
    --lavender: #9a83b8;
}

body {
    min-height: 100vh;
    background: linear-gradient(var(--banana), var(--sakura));
    color: var(--ink);
    font-family: 'Baloo 2', sans-serif;
}

h1,
h2 {
    font-family: 'Fredoka', sans-serif;
    text-align: center;
}

.sign {
    text-align: center;
    background-color: var(--guava);
    color: var(--coconut);
    width: fit-content;
    margin: 0 auto;
    padding: 12px;
    border-radius: 8px;
    border: var(--ink) 4px solid;
    transition-property: transform;
    transition-duration: 0.25s;
    transform: rotate(1deg);
    box-shadow: 0 4px 0 0 var(--ink);
}

.sign:hover {
    transform: rotate(0deg) translateY(-6px);
}

.about {
    background-color: var(--coconut);
    min-width: min-content;
    width: 35%;
    margin: 12px auto;
    padding: 12px;
    border: var(--ink) 4px solid;
    border-radius: 8px;
}

.about-content {
    display: flex;
    align-items: center;
}

.about-content li {
    list-style-type: none;
}

.profile-picture {
    border-radius: 12px;
    width: 10vw;
}

.navigation {
    background-color: indigo;
    margin: 12px auto;
    text-align: center;
    width: fit-content;
    gap: 8px;
    padding: 8px;
    border-radius: 8px;
    border: var(--lavender) 4px solid;
    box-shadow: 0 4px 0 0 var(--ink);
}

.navigation > a {
    color: var(--coconut);
    text-decoration: none;
    padding: 0 4px;
    display: inline-block;
    border-radius: 4px;
    transition-property: transform;
    transition-duration: 0.25s;
}

.navigation > a:hover {
    background-color: var(--blood-orange);
    transform: scale(1.05);
}

.back-sign {
    background-color: var(--guava);
    color: var(--coconut);
    text-decoration: none;
    position: absolute;
    top: 12px;
    left: 12px;
    padding: 8px;
    border-radius: 8px;
    border: var(--ink) 4px solid;
    transition-property: transform;
    transition-duration: 0.25s;
    transform: rotate(-3deg);
}

.back-sign:hover {
    transform: rotate(-1deg) translateY(-6px);
}

@media (max-width: 700px) {
    .back-sign {
        position: static;
        display: block;
        width: fit-content;
        margin: 0 auto;
        transform: rotate(-3deg);
    }
}

.construction-banner {
    width: 25%;
    display: block;
    margin: 4px auto;
    image-rendering: pixelated;
    cursor: pointer;
    transition-property: transform;
    transition-duration: 0.25s;
}

.construction-banner:hover {
    transform: scale(1.05);
}
.construction-banner:active {
    transform: scale(1);
}