body {
    background-color:hsl(60, 15%, 94%);
    color:#d6d6d6;
    font-family:"Source Sans 3", "Segoe UI", sans-serif;
    font-size:18px;
    margin:0;
    min-height:100vh;
}

.container,.page{
    min-height:100vh;
    display:flex;
    flex-direction:column;
    justify-content:center;
    align-items:center;
}

.home-page {
    --home-band-height: 100px;
    position: relative;
    isolation: isolate;
    background-color: transparent;
}

.home-page::before {
    content: "";
    position: fixed;
    inset: 0 0 auto;
    height: var(--home-band-height);
    background-color: hwb(128 28% 39%);
    z-index: -1;
}

.logo{
    color:hwb(129 1% 75%);
    font-size: clamp(40px, 5vw, 80px);
    letter-spacing: clamp(4px, 0.75vw, 12px);
    position: fixed;
    top: 50px;
    left: 20px;
    display: flex;
    align-items: center;
    gap: 8px;
    transform: translateY(-50%);
}

.logo img {
    width: clamp(36px, 4vw, 64px);
    aspect-ratio: 1;
    object-fit: cover;
    border-radius: 50%;
}

.instagram-logo {
    position: fixed;
    top: calc(var(--home-band-height) / 2);
    right: 20px;
    width: clamp(36px, 4vw, 64px);
    aspect-ratio: 1;
    object-fit: cover;
    border-radius: 50%;
    transform: translateY(-50%);
    transition: transform 160ms ease, filter 160ms ease;
}

.instagram-link:hover .instagram-logo,
.instagram-link:focus-visible .instagram-logo {
    filter: brightness(1.12);
    transform: translateY(-50%) scale(1.1);
}

.account-actions {
    position: fixed;
    top: calc(var(--home-band-height) / 2);
    right: calc(20px + clamp(36px, 4vw, 64px) + 12px);
    display: flex;
    gap: 8px;
    transform: translateY(-50%);
}

.account-actions button {
    border: 0;
    border-radius: 999px;
    background: hsl(128, 91%, 27%);
    color: white;
    font: inherit;
    font-size: 14px;
    padding: 10px 16px;
    cursor: pointer;
    display: inline-block;
}

.account-actions button:last-child {
    background: hsl(60, 15%, 94%);
    color: hsl(127, 57%, 12%);
}

.account-actions button:hover,
.account-actions button:focus-visible {
    background: #115a0a;
    color: white;
}

.subtitle{
    color:hsl(127, 57%, 12%);
    margin:10px 0 40px;
    position: fixed;
    top: clamp(66px, calc(5.75vw + 20px), 112px);
    left: 25px;
    margin: 0;
    font-size: clamp(16px, 2vw, 24px);
}

/* MENU */
.menu a,.back a{
    color:hwb(0 100% 0%);
    text-decoration:none;
    padding:12px 24px;
    margin:6px;
    display:inline-block;
}

/* muda o fundo quando o cursor passa sobre um link do menu */
.menu a:hover,.back a:hover{
    background:#115a0a;
}

/* POSIÇÃO DOS BOTÕES */
.container > .menu {
    position: fixed;
    top: auto;
    bottom: calc(100vh - var(--home-band-height));
    left: 50%;
    transform: translateX(-50%);
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 8px;
    width: calc(100% - 32px);
    max-width: 900px;
}

.container > .menu a {
    margin: 0;
    padding: 10px 16px;
}

@media (max-width: 700px) {
    .home-page {
        --home-band-height: 190px;
    }

    .home-page::before {
        height: var(--home-band-height);
    }
}

@media (max-width: 480px) {
    .account-actions {
        right: calc(20px + clamp(36px, 4vw, 64px) + 8px);
        gap: 4px;
    }

    .account-actions button,
    .container > .menu a {
        font-size: 14px;
        padding: 6px 8px;
    }
}

/* LINKS GERAIS */
a{
    color:white;
    text-decoration:none;
}

a:hover{
    color:hwb(0 100% 0%);
}

/* PANEL IMAGES */
.panel img{
    max-width:55%;
    height:auto;
    display:block;
    margin:10px auto;
}

.panel > div img{
    margin:0;
}

/* JOURNAL */
.journal-layout{
    display:flex;
    width:1000px;
    margin:50px auto;
}

.sidebar{
    width:200px;
    text-align:left;
    border-right:1px solid #5a0a0a;
    padding-right:20px;
}

.sidebar a{
    display:block;
    margin:15px 0;
}

.content{
    flex:1;
    padding-left:30px;
    text-align:left;
}