body {
    margin: 0;
    background: #f8f4ec;
    color: #59656b;

    font-family: "Trebuchet MS", Arial, sans-serif;
}

.site {
    width: 900px;
    max-width: 90%;
    margin: 30px auto;
}


/* HEADER */

.header {
    text-align: center;

    background: #e9f8f6;
    border: 3px solid #b9dedd;
    border-radius: 25px;

    padding: 25px;
    margin-bottom: 15px;
}

.header h1 {
    margin: 0;

    color: #5faeba;
    font-size: 32px;
}

.header p {
    margin-bottom: 0;
    color: #a88fa5;
}


/* NAVIGATION */

.navigation {
    display: flex;
    justify-content: center;
    gap: 10px;

    margin-bottom: 15px;
}

.navigation a {
    background: #fff4f7;

    border: 2px solid #e7b9ca;
    border-radius: 15px;

    padding: 8px 16px;

    color: #9b7183;
    text-decoration: none;
}

.navigation a:hover {
    background: #e8f8f7;
    transform: translateY(-2px);
}


/* MAIN LAYOUT */

.layout {
    display: grid;

    grid-template-columns: 260px 1fr;

    gap: 15px;
}


/* BOXES */

.box {
    background: #fffdf8;

    border: 2px solid #d8c8c0;
    border-radius: 12px;

    padding: 15px;
    margin-bottom: 15px;

    box-shadow: 3px 3px 0 #e8ded8;
}

.box h2 {
    margin-top: 0;

    color: #74aeb5;
    font-size: 20px;

}
.shizuku-image {
    width: 300px;
    height: 300px;

    border-style: solid;
    border-width: 10px;
    border-image: url("https://dl.dropbox.com/scl/fi/6wo0voidugxmgg0a81v20/lace-border-png-37013.png?rlkey=3hn4k762e8y0v6d2v6mwrtcbr&st=5o8bpex4") 60 fill round;
}

/* SHIZUKU BUTTON */

.shizuku-button {
    text-align: center;
    margin-top: 20px;
}

.shizuku-button a {
    display: inline-block;

    background: #e9f7f5;

    border: 2px solid #9bcfd0;
    border-radius: 20px;

    padding: 12px 20px;

    color: #609ca3;
    text-decoration: none;
}

.shizuku-button a:hover {
    background: #fff1f6;
}


/* FOOTER */

footer {
    text-align: center;

    padding: 20px;

    color: #a88fa5;
}