body {
background-color: black;
margin: 0px;
}

img {
float: left;
clear: both;
width: 80%;
margin-left: 10%;
}


div {
float: left;
clear: both;
}

a:link {
color: lightskyblue;
text-decoration: none;
}

a:visited {
color: lightskyblue;
text-decoration: none;
}

a:hover {
color: green;
text-decoration: none;
}

a:active {
color: yellow;
text-decoration: none;
}

p {
color: white;
font-size: 24pt;
text-align: center;
float: left;
}

#container {
width: 95%;
height: fit-content;
margin: 40px;
margin-left: 2.5%;
margin-right: 2.5%;
background-color: grey;
border-radius: 30px;
}

.container2 {
width: 95%;
height: fit-content;
margin: 40px;
margin-left: 2.5%;
margin-right: 2.5%;
background-color: grey;
border-radius: 30px;
}


/* these next items are side by side */

#sidebar1 {
background-color: red;
border: 4px solid grey;
width: 10%;
margin-left: 3%;
padding-top: 40px;
padding-bottom: 40px;
height: fit-content;
clear: none;
border-radius: 25px;
}

#mainarea {
clear: none;
width: 70%;
background-color: red;
border: 4px solid grey;
height: fit-content;
border-radius: 25px;
padding:20px;
}

#mainarea2 {
clear: none;
width: 70%;
background-color:red;
border: 4px solid grey;
height: fit-content;
border-radius: 25px;
text-align: center;
padding: 20px;
font-size: 40px;
color:white;
line-height: 1.4
}

.mainarea3 {
clear: none;
width: 70%;
background-color:red;
border: 4px solid grey;
height: fit-content;
border-radius: 25px;
text-align: center;
padding: 20px;
font-size: 30px;
color:white;
line-height: 1.4
}


.menuitem {
font-family: monospace;
text-align: center;
height: 100px;
width: 80%;
background-color: black;
color: white;
margin-bottom: 4px;
margin-left: 10%;
margin-right: 10%;
border-radius: 10px;
font-size: 20px;
padding-top: 10px;
}