:root
{
  --red: #A63B50;
  --blue: #266EB2;
  --purple: #AFACC7;
  --yellow: #E7D592;
}

body
{
  background: var(--red);
  margin: 0px;
  
}

header
{
  background: var(--purple);
  padding: 20px;
  margin:0px;
  border-bottom:solid;
}

main, footer
{
  background: var(--blue);
  border: 10px double #002242;
  padding:0px;
  margin: 40px;
}

nav label, #mobile
{
  display:none;
}

#navitems
{
  display: flex;
  flex-direction: row;
  flex-wrap:wrap;
  justify-content:center;
}

#navitems a, #skip:focus, #top
{
  background: #3F367C;
  color: white;
  border: 6px double white;
  outline: solid black;
  font-family: "Play";
  font-weight:700;
  font-size:1.2rem;
  text-decoration:none;
  padding: .5rem 1rem;
  margin: 1rem;

  text-align:center;
}

#navitems a
{
  width: 15%;
}

#skip
{
  position:absolute;
  left:-10000px;
}  

#skip:focus
{
  position:absolute;
  left:auto;
}

#navitems a:hover, #skip:hover, #top:hover
{
  background-color: #6F9800;
}

#top
	{
    width:120px;
    left: 75%;
    top: 85%;
    position:fixed;
	}

section, #copyright
{
  background: white;
  padding: 3px 30px;
  border: 10px double #002242;
  margin:8px;
}

h1, h2, h3, h4, h5, h6
{
  color:var(--blue);
  font-family: "Roboto Serif";
  font-weight:900;
}

li
{
  padding: .5rem 0rem;
}

.img-responsive
{
  padding: 20px 0px;
}

.textbox
{
  width:100%;
  background-color: white;
  border: groove 2px;
}

.required{color: #b60000}

.hidden
{
  position: absolute;
  left: -10000;
  height: 1px;
  width: 1px;
  overflow: hidden;
}

#rating
{
  display:flex;
  justify-content:space-around;
  accent-color:var(--blue);
}

.star
{
  display:flex;
  flex-direction:column;
}

.button{padding: 7px;}

#reset
{
  background-color:var(--red);
  color:white;
}
#submit
{
  background-color:var(--blue);
  color:white;
  text-decoration:underline;
  font-weight:bold;
}
@media(max-width:902px)
{
  #navitems a
  {
    width:30%;
  }
}

@media(max-width:768px)
{
  #navitems a
  {
    width:35%;
  }
}

@media(max-width:576px)
{
  nav label
  {
    display:block;
    background: #3F367C;
    color: white;
    border: 6px double white;
    outline: solid black;
    font-family: "Play";
    font-weight:700;
    font-size:1.2rem;
    text-decoration:none;
    padding: .5rem 1rem;
    margin: 1rem;
    text-align:center;
  }
nav label:hover
{
  background-color: #6F9800;
  cursor:pointer;
}
  #navitems
  {
  	display:none;
  }
  nav input:checked ~ #navitems
  {
    display:flex;
    flex-direction: column;
    justify-content: center;
  }
  #navitems a
  {
    width:85%;
    margin:1rem .75rem;
  }
}