/* ---------- Whole page ---------- */
@font-face {
    font-family: "GNU Unifont";
    src: url("/fonts/GNU Unifont.ttf") format("truetype");
}


body{

    margin: 0;
    background: #fff8e8;
    font-family: "GNU Unifont", Sans-serif;
    font-size: 22px;
    color: #333;

}

/* ---------- Header ---------- */

header{

    width:100%;

    text-align:center;

    border-bottom:4px solid orange;

    background:white;

}

.header{

    display:block;

    width:100%;

    max-width:auto;

    margin:auto;

}

/* ---------- Main Layout ---------- */

.container{

    display:flex;

    align-items:flex-start;

}

/* ---------- Left Navigation ---------- */

aside{

    width:250px;

    background:#fff4cf;

    border-right:4px solid orange;

    min-height:100vh;

    padding:20px;

}

aside a{

    display:flex;

    align-items:center;

    gap:15px;

    text-decoration:none;

    color:#222;

    font-weight:bold;

    margin-bottom:25px;

    transition:.2s;

}

aside a:hover{

    transform:translateX(8px);

}

aside img{

    width:250px;

    height:auto;

}

/* ---------- Content ---------- */

main{

    flex:1;

    padding:40px;

}

main h1{

    color:#298b7b;

}

/* ---------- Footer ---------- */

footer{

    text-align:center;

    padding:20px;

    border-top:4px solid orange;

}

/* ---------- Mobile ---------- */

@media (max-width:700px){

.container{

    flex-direction:column;

}

aside{

    width:100%;

    min-height:96px;

    border-right:none;

    border-bottom:4px solid orange;

    display:flex;

    justify-content:center;

    flex-wrap:wrap;

    gap:20px;

}

aside a{

    flex-direction:column;

    margin:0;

    font-size:14px;

}

aside img{

    width: 250pxpx;

    height:auto;



}

main{

    padding:20px;

}

}