* {
    box-sizing: border-box;
}

:root {
    --primary-color: rgb(0, 0, 139);
    --align-center: center;
    --border: 1px solid;
}

a {
    color: rgb(3, 3, 109);

}

/* added */
header,
.grid,
footer {
    max-width: 840px;
    margin: 0 auto;
}

/* added */
nav {
    background-color: var(--primary-color);
    padding: 1rem;
    display: flex;
    justify-content: space-evenly;
    align-items: center;
}

nav a {
    /* color: white; original rul
    display: block;
    padding: 20px; */
    display: block;
    padding: 0.5rem;
    text-decoration: none;
    font-size: 1.2rem;
    font-weight: 700;
    color: #fff;
    /* shorthand for white and #ffffff; */
}

main {
    max-width: 640px;
    /* 840px previous */
    grid-column: 2/3;
    margin: 1rem 0;
    /* previous margin 1rem */
}

h1 {
    color: var(--primary-color);
    border-bottom: 1px solid #222;
    /*added*/
}

main img {
    width: 150px;
    /* previous width 150px */
    height: auto;
    border: var(--border) black;
    padding: 2px;
    box-shadow: 0 0 30px gray;
    float: right;
    margin: 1rem 0 1rem 1rem;
}

main ul {
    list-style: none;
}

aside {
    width: 20rem;
    /* margin 1rem */
    position: relative;
    grid-column: 1/2;
    grid-row: 1/2;
    border: var(--border) rgb(0 0 0 / 0.2);
    padding: 1rem;
    background-color: #eee;
    color: #333;
    text-align: var(--align-center);
}

aside img {
    width: 200px;
    height: auto;
}

aside h2 {
    position: absolute;
    top: 1rem;
    left: 50%;
    transform: translateX(-50%);
    color: #f00;
    /* check to change the img */
}

p {
    padding: 1rem;
    /* previous padding 0px */
}

footer {
    background-color: burlywood;
    margin-top: 15px;
    border-top: 1px solid #000;
    text-align: var(--align-center);
    margin: 2rem auto;
    /* margin and bc color added */
}

ul {
    list-style-type: none;
    padding: 1rem;
    /* added */
}

/* Class Selectors */
.box {
    border: var(--border) rgb(0 0 0 / 0.2);
    padding: 1rem;
    background-color: #eee;
    color: #333;
    /* margin 1rem */
}

.grid {
    display: grid;
    align-items: center;
    /* added */
    gap: 2rem;
    /* added */
    margin-top: 2rem;
    margin-bottom: 2rem;
    /* marging top and bottom added */
}