body { margin: 0;
}

header { background-image: url("stars.jpg");
        text-align: center;
        color: white;
        font-family: Arial;
        font-weight: bold;
        font-size: 1.5em;
        padding-top: 20px;
        padding-bottom: 2px;
        line-height: 50px;
}

nav { float: left;
     width: 100%;
     padding-top: 1.8em;
     background-color: #008b8b;
     margin: 0;
}

#nav { flex: 1;
      flex: 0 0 30%;
      background-color: #008b8b;
}

nav ul { list-style-type: none;
        margin: 0;
        padding-top: 1em;
        padding-left: 1em;
}

nav a { text-decoration: none;
       font-family: Helvetica;
       font-weight: bold;
}

a:link { color: white;
}

a:hover { background-color: #473d8b;
}

#container { background-color: #f1f1f1;
            padding: 1em;
            min-height: 20em;
            max-height: 80em;
            margin: 0;
            flex: 1;
}

#col-container { display: flex;
}

.col-container { display: table;
                width: 100%;
                background-color: #add8e6;
}

.col { display: table-cell;
      padding-right: 0.5em;
      padding-left: 0.5em;
}

h1 { font-family: Arial;
    font-weight: bold;
}

h3 { font-family: Arial;
    font-weight: bold;
}

p { font-family: Helvetica;
}

footer { background-color: darkblue;
        color: white;
        text-align: center;
        margin: 0;
        padding: 0.5em;
}