body{
    display: flex;
    flex-direction: column;
    align-items: center;
    
    margin:0;
    gap:20px;

    background-color:rgb(66, 138, 210);
}

.top-deco{
    
    margin:0;
    width:100%;

    min-height: 40px;
    max-height:175px;

    overflow: hidden;
    object-fit: cover;
    background-color: aqua;
}

.title-space{
    font-family:Verdana, Geneva, Tahoma, sans-serif;
    color:azure;
    text-shadow: -1px -1px 0 #000, 1px -1px 0 #000, -1px 1px 0 #000, 1px 1px 0 #000;
    text-transform: uppercase;
}

.journal-frame{
    height:40%;
    max-height: fit-content;
    width: 80%;
    max-width:1300px;

    display: flex;
    gap:50px;
    background-color:chocolate;
}



.left-space, .right-space{
    height: 520px;
    width:560px;
    margin:10px;
    background-color: aliceblue;

    font-size: large;
    display: flex;
    
    align-items: end;
    justify-content: center;
    font-size: x-large;
    font-weight:500;
    font-family:'Gill Sans', 'Gill Sans MT', Calibri, 'Trebuchet MS', sans-serif;
    color:dodgerblue;

    padding:10px;
}



.buttons-space{
    display: flex;
    gap:30px;
    margin-bottom: 50px;
}

.buttons-space button{
    height:80px;
    width:90px;
    border-radius: 20%;

    overflow: hidden;
}

.buttons-space button:hover{
    opacity: 80%;
}

#plans{ background:url("../assets/ui/hand.png"); background-color: rgb(65, 186, 220);}
#things{ background:url("../assets/ui/heart.png"); background-color:coral}
#home{ background:url("../assets/ui/home.png"); background-color:rgb(134, 226, 163)}

#plans, #things, #home{
    background-size: cover;
    background-position: 50%;
}

@media (max-width:1000px) {
    .journal-frame{
        flex-direction: column;
        align-items: center;
        gap:30px;
        width:92%;
        max-width: 630px;
    }

    .left-space, .right-space{
        
        width:90%;
        height:420px;
    }
}