* {
    margin: 0;
    box-sizing: border-box;
    font-family: "Aboreto", system-ui;
    font-weight: 400;
    font-style: normal;
    color: rgba(var(--french-roast));
    
}


:root {
    --skim: 239,236,231;
    --french-roast: 51,51,51;
    --espresso: 71,53,49;
    --crema: 207,174,128;
    --green-coffee: 190,176,151;
    --cocoa-powder: 146,126,122;
}

body {
    background-color: rgba(var(--skim));
}

header {
    max-width: 100%;
    padding: 40px 16px;
    img {
        height: 40px;
    }
}

p, a {
    font-family: "Work Sans", sans-serif;
    font-optical-sizing: auto;
    font-weight: 400;
    font-style: normal;
}

h1 {
    font-size: 48px;
}

h2 {
    font-size: 32px;
}

h3 {
    font-size: 24px;
     text-shadow: 
    0.01em 0 rgba(var(--espresso)),
    -0.01em 0 rgba(var(--espresso)),
    0 0.01em rgba(var(--espresso)),
    0 -0.01em rgba(var(--espresso));
}

h4 {
    font-size: 20px;
}

h5 {
    font-size: 20px;
    font-family: 'Work Sans', sans-serif;
}

p {
    font-size: 18px;
}

a {
    text-decoration: none;
}

hr { 
    background-color: rgba(var(--green-coffee));
    border: none;
    height: 1px;
    width: 95%;
    margin: auto;
}

.button-light {
    padding: 12px 32px;
    border: solid 1px rgba(var(--skim));
    background-color: rgba(var(--skim), 0.15);
    transition-timing-function: ease-in-out;
    transition-duration: .2s;
}

.button-light:hover {
    background-color: rgba(var(--skim));
    color: rgba(var(--espresso));
}

.button-dark {
    padding: 12px 32px;
    border: solid 1px rgba(var(--espresso));
    background-color: rgba(var(--espresso), 0.15);
    transition-timing-function: ease-in-out;
    transition-duration: .2s;
}

.button-dark:hover {
    background-color: rgba(var(--espresso));
    color:  rgba(var(--skim));
}

.button-extra-dark {
    padding: 12px 32px;
    border: none;
    color:  rgba(var(--skim));
    background-color: rgba(var(--espresso), 1);
    transition-timing-function: ease-in-out;
    transition-duration: .2s;
}

.button-extra-dark:hover {
    background-color: rgba(var(--french-roast));
    
}

::selection {
  background-color: rgba(var(--green-coffee));
  color: rgba(var(--skim));         /* Sets the text color */
  padding: 2px 5px;        /* Adds some padding around the text */
  border-radius: 3px;      /* Rounds the corners of the highlight */
}


 form {
background-color: rgba(255, 255, 255, .35);
        border: solid 1px rgba(var(--espresso));
  .flex-section {
    padding: 0;
    gap: 4px;
    
  }

  input, textarea {
    height: 40px;
    font-family: 'Work-Sans', sans-serif;
    padding-left: 8px;


  }

       .message {
  height: 120px;
  padding-top: 8px;
 }
 }



 .contact-info-items > div {
  width: 48%;
  padding: 0;
  white-space: nowrap;
 }

 

 .contact-info-items {
  .item {
    margin: 0;
    row-gap: 4px;
  }
 }

/* FOOTER */

footer {
    background-color: rgba(var(--espresso));

    a {
        text-decoration: underline;
    }
    
    * {
        color: rgba(var(--crema));
    }

    img {
        width: 48px;
    }
}

/* MEDIA QUERIES */

@media only screen and (max-width: 1000px) {
    header {
        padding: 16px !important;
        img {
            height: 32px;
        }
    }

    .hero {
        height: 90vh !important;
    }

    footer {
        flex-direction: column !important;
    }

          .contact-info-items > div {
         width: 100%;
 }

 .contact-us-form {
    flex-direction: column !important;
    align-items: center !important;
    justify-content: center !important;
 }
}