:root
{
--background-light: beige;
--background-dark: burlywood;
--textbox: white;
--productbox: white;
}

html
{
  font-family: "Comic Sans MS";
}

body
{
  background-color: var(--background-light);
  background: linear-gradient(0deg, var(--background-dark) 0%, var(--background-light) 100%);
  margin:0px;
}

header
{
  background-color:var(--textbox);
  position:sticky;
  top:0px;
  margin:0px;
  outline: solid 2pt;
}

#title
{
  padding:0px 30px;
}

#navi
{
  display:flex;
  padding:0px;
  background: linear-gradient(0deg, #021 0%, #074 100%);
  width: 100%;
  outline: solid 2pt;
}
#navitems
{
  display:flex;
  width: 100%;
  outline: solid 2pt; 
}
#navi a, #skip
{
  text-align:center;
  flex-direction: row;
  justify-content: space-around;
  flex-grow: 1;
  flex-basis: 0;
	background: linear-gradient(0deg, #021 0%, #074 100%);
  background-color:green;
  padding: 10px;
  text-decoration: none;
  color:white;
	margin:0px;
}
#navi a:hover
{
	background: linear-gradient(0deg, #074 0%, #5f9 100%);
  background-color:lime;
    color:black;
}

#navi label, #hamburger
{
  display:none;
}

#skip
{
  margin: 30px;
  border:solid 2pt black;
  border-radius:12px;
  position:absolute;
  left:-640px;
  top: auto;
  width:1px;
  height:1px;
  overflow:hidden;
}
#skip:focus
{
	background: linear-gradient(0deg, #047 0%, #09f 100%);
  position:static;
  width:auto;
	height:auto;
}
#main, #about, #products, #faq, #warranty, #contact
{
  scroll-margin-top: 220px;
}
.container
{
	display: flex;
  flex-wrap: wrap;
  justify-content: space-around;
}
.card
{
  display: flex;
  border: solid;
  padding: 1rem;
  background-color:var(--productbox);
  flex-flow: column wrap;
  justify-content: center;
  width:100%;
  max-width: 200pt;
  margin:1%;
  text-align:center;
}

.textbox
{
  border: double 6px;
  padding: 30px;
  background-color:var(--textbox);
  padding:1px 30px;
  margin:20px;
  scroll-margin-top: 220px;
}

#fullname, #address, #message
{
	width:100%
}

#rating
{display:flex; justify-content:space-around;
}
.star
{
  display:flex;
  flex-direction:column;
}

.red{accent-color:#c02;}
.orange{accent-color:#f50;}
.yellow{accent-color:#fa0;}
.green{accent-color:#074;}
.blue{accent-color:#09f;}

.button
{
  padding: 10px;
}
#reset{background-color: #f33; color: white;}
#submit{background-color: #07b; color: white; font-weight:bold; text-decoration:underline}

@media (min-width:576px)
{
  .card
  {
    margin:5% 3%;
  }
}
@media (min-width:768px)
{
  .card
  {
    margin:5%;
    max-width:275px;
  }
}


@media (max-width:576px)
{
  #navitems a
  {
  	box-sizing: border-box;
    display:block;
    width:100%;
    border: 1px solid black;
  }
  #navi label
  {
    display:inline-block;
    background: linear-gradient(0deg, #021 0%, #074 100%);
    color:white;
    font-size:1.5em;
    padding: 5px 10px;
  }
	#navi label:hover
  {background: linear-gradient(0deg, #074 0%, #5f9 100%);}
  #navitems {display:none;}
  #navi input:checked ~ #navitems {display:block}
}