@import url('https://fonts.googleapis.com/css2?family=Open+Sans:wght@300;600&display=swap');


:root {
    --universeLatte: #FFF8E7;
    --highlight: #838181;
    --highlight: #000000;

    --highlight: #396dff;
    --background: #f7f7f7;
    --white: #fff;
    --blu: #97e1bf;
    --deepblu: #309da9;

    --xs: 4px;
    --s: 8px;
    --m: 16px;
    --l: 24px;
}

body {
    margin: 0;
    background-color: var(--background);
	font-family: 'Open Sans', sans-serif;
	color: rgb(0, 0, 0);
    padding-bottom: 50px;
}
hr {

	border: none;
	height: 0.04em;

}

#nav_menu{
    background: linear-gradient(to right, transparent, var(--highlight), var(--highlight), var(--highlight), var(--highlight), var(--background));
    margin-left: auto;
    margin-right: auto;
    max-width: 100em;
}

#nav_menu ul {
	display: flex;
	flex-direction: row;
    list-style-type: none;
    margin: 0;
	padding: 0;
	justify-content: space-evenly;
}
#nav_menu li {
    color: var(--white);
	display: inline;
	padding: 0.1em;
}

#nav_menu ul li a:link, a:visited { 
    color: var(--white); 
    text-decoration:none;
    font-weight: 550;
}
#nav_menu ul li a:hover { 
    color: var(--blu); 
    text-decoration:none; 
    font-weight: 550;
}


#content {
    margin-left: auto;
    margin-right: auto;
    margin-bottom:1em;
    padding-left: 1em;
    padding-right: 1em;
    padding-top: 1em;
    max-width: 80em;
    line-height: 1.5;
}

.maintext a:visited{
    color: var(--deepblu);
}
.maintext a:link{
    color: var(--highlight); 
}
.maintext a:hover{
    color: var(--highlight); 
    font-weight: bold;
}



.column {
    float: left;
    width: 50%;
  }
  
  .class-box {
    background-color: #fff;
    border: 2px solid #555;
    color: #555;
    display: block;
    font-size: 16px;
    height: 80px;
    line-height: 80px;
    margin: 10px;
    text-align: center;
    width: 80px;
  }