/*  ALL LAYOUT CSS GOES IN THIS FILE */

/* Order of properties to be consistent:
  - display
  - position type
  - position adjustment (top, right, bottom, left)
  - width
  - height where application
  - padding
  - margins
  
*/

/* WHOLE DOCUMENT */

* { box-sizing: border-box; }

input[type="search"]::-webkit-search-decoration,
input[type="search"]::-webkit-search-cancel-button,
input[type="search"]::-webkit-search-results-button,
input[type="search"]::-webkit-search-results-decoration {
  display: none;
}

html, body  { 
  width: 100%;   
  margin: 0;
  padding: 0;
}

/* HEADER */

#header-top{
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 3.5em;
  padding: 0;
  margin: 0;
}

#header-top img{
  display: block;
  height: 2.25em;
  margin: 0.625em auto 0.625em 1em;
}

#header-navmenu-button{
  position: absolute;
  right: 0;
  top: 0;
  width: 3.5em;
  height: 3.5em;
}

#header-navmenu-button img{
  width: 2em;
  height: 2em;
  margin: 0.75em auto;
}

#nav-menu{
  display: none;
  position: absolute;
  top: 4em;
  left: 0;
  width: 100vw;
  height: calc(100vh - 4em);
}

#nav-menu.active{
  display: block;
}

#searchbox{
  display: block;
  width: calc(100% - 2em);
  max-width: 32em;
  padding: 0;
  margin: 2em auto;
}

#submit{
  display: inline-block;
  width: 2em;
  height: 2em;
  padding: 0;
  margin: 0;
  border: 0;
  vertical-align: middle;
}

#submit img{
  width: 2em;
  height: 2em;
  margin: 0;
}

#searchterm{
  display: inline-block;
  width: calc(100% - 4em);
  max-width: 30em;
  height: 2em;
  padding: 0;
  margin: 0;
  border: 0;
  vertical-align: middle;
}

#searchterm:not(:valid) ~ #close-icon {
  display: none;
}

#close-icon{
  display: inline-block;
  width: 2em;
  height: 2em;
  padding: 0;
  margin: 0;
  border: 0;  
  vertical-align: middle; 
}

#close-icon img{
  width: 2em;
  height: 2em;
  margin: 0;
}

nav ul{
  padding: 0;
  margin: 1em;
}

nav a{
  display: block;
  width: calc(100% - 2em);
  max-width: 32em;
  padding: 1em 0;
  margin: 0 auto;
}

#nav-social{
  display: flex;
  width: 12.75em;
  margin: 0 auto;
}

#nav-social img{
  padding: 0;
  margin: 0;
}

#nav-social a{

  width: 2.25em;
  margin: 1em;
  padding: 0;
}

#hero{
  height: 20em;
  margin-top: 3.5em;
}

#hero h1{
  padding: 1.75rem 1.25rem;
}

#hero p{
  padding: 0.5rem 1.25rem;
}

#hero button{
  display: block;
  width: 9.5em;
  height: 2.875em;
  padding: 0;
  margin: 2em auto;
}

.serve{
  width: 8em;
  margin: 1em auto;
}

article{
  max-width: 38rem;
  margin: 1em auto;
}

#chatbox{
  position: fixed;
  bottom: 0;
  right: calc(50% - 6em);
  width: 12em;
  height: 2em;
}

footer{
  height: 10em;  
}

 /* Mobile and up */
@media screen and (min-width: 0em) {  /* 64em to 90em @ 16px = 1024px to 1440px */

}

 /* Large and up */
@media screen and (min-width: 40em) {  /* 64em to 90em @ 16px = 1024px to 1440px */
	
}

 /* Large and up */
@media screen and (min-width: 64em) {  /* 64em to 90em @ 16px = 1024px to 1440px */

}
 /* Large and up */
@media screen and (min-width: 75em) {  /* 64em to 90em @ 16px = 1024px to 1440px */
  
}