* {
    /* box-sizing: border-box;/*  makes sizing easier to manage  */
} 

header {
    text-align: center;
    background-color: rgb(0, 187, 255);
    padding: 20px 0;
    border: 5px solid black;
}

body {
    background-color: aqua;
    font-family:fantasy;
}

#about {
    background-color: lightgreen;
}

#projects {
    background-color: lightyellow;
}

#skills {
    background-color: lightblue;
}

#contact {
    background-color: lightcoral;
    box-sizing: content-box; /* reset to default for this section */
}

.content {
    /* using the box model */
    margin: 90px auto; /* the margin between sections */
    padding: 20px; /* the padding around the content */
    border: 5px solid black; /* border around the section */
    max-width: 800px; /* limit the width of the content */
}

nav ul {
    list-style: none; /* remove the bullets */
    padding-left: 0; /* remove the default padding */
    display: flex;  /* use flexbox for layout */
    justify-content: center; /* center the items horizontally */
    gap: 20px; /* space between items */
}

#two-col {
    display: flex;
    gap: 20px; /* space between columns */
}

@media (max-width: 700px) { /* @media workes as an "if" max-width... */
  #two-col {
    flex-direction: column; /* stack columns vertically on small screens */
  }
}