/* ===========================
   GLOBAL
=========================== */

body{

    background:#f8f7f3;

    font-family: monospace;

    margin:50px;

}

/* ===========================
   TYPOGRAPHY
=========================== */

h1 {

    font-size:72px;

    margin-bottom:5px;

}
header p{

    font-size:28px;

    font-style:italic;

    margin-top:0px;

}

p {

    line-height: 1.6;

}


/* ===========================
   LAYOUT
=========================== */

.layout{

    display:flex;

    gap:40px;

}
aside{

    width:220px;

}

/* ===========================
   COMPONENTS
=========================== */

.window {

    /* Size */
    width: 650px;

    /* Appearance */
    background: white;

    border: 3px solid black;
    border-radius: 15px;

    /* Spacing */
    padding: 35px 45px;

    /* Effects */
    box-shadow: 8px 8px black;

}

/* ===========================
   ANIMATIONS
=========================== */

aside a {

    display: block;

    margin-bottom: 15px;

    padding: 15px;

    border: 3px solid black;

    border-radius: 15px;

    color: black;

    text-decoration: none;

    transition: .15s;

}

aside a:hover {

    transform: translate(4px, 4px);

}


/* ===========================
   RESPONSIVE (later!)
=========================== */