/* Importing CSS components */
@import "components/nav.css";
@import "components/hero.css";
@import "components/Icons.css";
@import "components/footer.css";

/* Root Variables */
:root{
  --primary-white: #FFFFFF;
  --text-primary: #121826;
  --text-secondary: #9DA3AE;
  --text-grey: #E5E7EB;
  --btn-blue: #4138C2;
  --btn-light-blue: #4E80EE;
  --emoji-1: #C9D2FA;
  --emoji-2: #E2FBE8;
  --emoji-3: #FBE5E6;
  --emoji-4: #FDF9C9;
  --emoji-5: #FCEED8;
  --emoji-6: #DEE9FC;
  --emoji-7: #F1E8FD;
  --emoji-8: #D5FAF1;
  --emoji-1-text: #4138C2;
  --emoji-2-text: #5EC269;
  --emoji-3-text: #E14F62;
  --emoji-4-text: #E2B53E;   
  --emoji-5-text: #E87B35;
  --emoji-6-text: #4E80EE;
  --emoji-7-text: #9D59EF;
  --emoji-8-text: #52B3D0;
}

/* Global Reset */
* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
  }

/* Standard Styling */
body {
    height: 100vh;
    font-family: 'Be Vietnam Pro', sans-serif; 
    background-color: var(--primary-white);
  }

  .container {
    display: grid;
    grid-template-columns: 8fr 4fr; 
    grid-template-rows: 5fr 5fr 5fr 5fr 5fr ; 
    gap: 1em; 
    grid-template-areas: 
        "box-1 box-2"
        "box-1 box-2"
        "box-3 box-3"
        "box-4 box-4"
        "box-4 box-4"
        "box-5 box-5";
}


/* Media Queries */


/* Tablet */

/* Mobile */
@media (max-width: 600px) {
  body {
    max-width: 100%;
    display: flex;
    flex-direction: column;
    padding: 0; 
  }
  .icon-container{
    max-width: 50px;
  }

}

/* Tablet and Below */
@media (max-width: 1024px) {
  body {
    max-width: 100%;
  }
}