/* CSS is how you can add style to your website, such as colors, fonts, and positioning of your
   HTML content. To learn how to do something, just try searching Google for questions like
   "how to change link color." */



.container {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr 1fr;
  grid-template-rows: 80px 1fr 1fr 100px;
  grid-gap: 1rem;
  grid-template-areas:
    "left-sidebar main main right-sidebar"
    "left-sidebar main main right-sidebar"
    "left-bottom main main right-sidebar"
    "footer footer footer footer";
}

#site-box{
  max-width:1200px;
  margin: 2em auto 0 auto;
}
img
{
  max-width:100%;
}



nav{
  display:flex;
  justify-content:space-around;
  margin: 2rem 1rem;
  text-transform: uppercase;
  font-size: 1.5rem;
  font-weight: bold;
  
}
nav a {
    text-decoration: none;
}
nav a:hover {
    text-decoration: underline;
}

a
{
  color:#66cec1;
}

.header { 
  grid-area: header; 
}
.left{
  grid-area: left-sidebar;
}
.right{
  grid-area: right-sidebar;
}
.main { 
  grid-area: main; 
}
.footer { 
  grid-area: footer; 
}

.button8831
{
  height:31px;
  width:88;
}

body {
  background-color: #111;
  color: #EEE;
  font-family: Verdana;
 
}
footer{
  text-align:center;
 margin: 2em auto 0 auto;
}
#site-box{
  background-color:#1d1d1d;
  border-radius:2em;
  padding:1em;
}

legend{
    font-size: 2rem;
    /* font-weight: bold; */
}
fieldset{
    margin-bottom: 3rem;
}

label{
    display:block;
    margin-bottom: 0.5rem;
}
#output{
  width:100%;
}