/* Color scheme */
:root {
  --prim: #463f3a;
  --sec: #8a817c;
  --ter:#F2AF58;
  --quat: #bcb8b1;
  --quin: #f4f3ee;
 }
 
 /* red ish Color scheme */
 
 /* 
  --prim: #E6EED6;
  --sec: #DDE2C6;
  --ter:#BBC5AA;
  --quat: #A72608;
  --quin: #090C02;
 
 */
 
 
 
 @media (max-width: 420px) {
   html {
     font-size: 50%;
   }
 }
 
 body {
 background-color: var(--quin);
 font-family: 'Roboto';
 }
 
 h1 {
  color: var(--prim);
  font-size: 26px;
 }
 
 h2 {
  color: var(--prim);
  font-size: 18px;
 }
 
 p {
  color: var(--quin);
  font-size: 16px;
 }
 
 #navbar {
  display:flex;
  justify-content: flex-end;
  position: fixed;
  top: 0px;
  left:0px;
  width:100%;
  background-color: var(--quat);
  box-shadow: 0 2px 0 rgba(0,0,0,0.2);
 
  }
 
 .nav-list a {
   color:var(--prim);
   padding: 1rem;
 }
 
 .nav-list a:hover {
  background:var(--quin);
 }
 
 
 .nav-list{
   display:flex;
   list-style: none;
 }
 
 
 
 
 
 
 
 .flex-container {
  display:flex;
  flex-wrap:wrap;
  background-color:var(--sec);
  
 }
 
 .flex-container > div {
  text-align:center;
  height:250px;
  width: 350px;
 }
 
 .flex-container > div:hover {
  background-color:var(--quat);
 }
 
 .welcome-section {
  display:flex;
  flex-direction:column;
  justify-content:center;
  align-items:center;
  width: 100%;
  height:100vh;
  background-color: #000;
   background-image: linear-gradient(81deg, var(--quin) 80%, var(--quat) 100%);
 
 }
 
 .contact-section {
  display:flex;
  flex-direction:column;
  justify-content:center;
  align-items:center;
  width:100%;
  height:100vh;
  background-color:var(--quim);
 
 }
 
 
 .subheader {
  color:var(--quat);
 
 }