@import url('https://fonts.googleapis.com/css2?family=Aboreto&family=Merriweather:ital,opsz,wght@0,18..144,300..900;1,18..144,300..900&display=swap');
@import url('https://fonts.googleapis.com/css2?family=BBH+Hegarty&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Aguafina+Script&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Metamorphous&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Quicksand:wght@300..700&display=swap');

/*   ------------   NOTES     ------------

font-family: "Aguafina Script", cursive; 
font-family: "Metamorphous", serif;
font-family: "Quicksand", sans-serif;
font-family: "Merriweather", serif;
font-family: "BBH Hegarty", sans-serif;

background: linear-gradient(to right, #a75454, #c41919); 
width: min-content; *************   
calc(100% - 20px)
transition:2s;
scroll-margin-top: 13vh; ----corrects internal link location with a fixed element 

scroll-snap-align: start;
scroll-snap-stop: always;
scroll-snap-type: y proximity;
scroll-snap-align: start;
scroll-snap-type: proximity;
scroll-snap-type: y proximity;
scroll-snap-type: mandatory;
scroll-snap-type: y mandatory;
scroll-snap-points-y: repeat(100vh);

Gradient Site : https://cssgradient.io/
*/

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

html, body {
padding: 0;
margin: 0;
scroll-behavior: smooth;
scrollbar-width:none; 
scrollbar-color:rgb(0, 0, 0); }

#page {
width:100vw;
height:auto; }

#grid {
width:100%;
padding-top:3px;
margin:0 auto;
display: grid;
border:1px solid black;
grid-template-columns: auto;
grid-template-rows: auto;
grid-template-areas: 
'header_container_1'
'header_container_2'
'content_container_1'
'content_container_2'
'content_scroll'
'content_container_3'
'footer_container' 
'designer'; }

    #header_container_1 {
    width:100%;
    height:10vh;
    margin:0 auto;
    display: grid;
    grid-area: header_container_1;
    background-color: #222;
    padding-top:2px;
    border-bottom:1px solid silver;
    grid-template-columns: auto;
    grid-template-rows: auto;
    grid-template-areas: 'header_1' ; }

    #header_container_2 {
    width:100%;
    height:10vh;
    margin:0 auto;
    display: grid;
    grid-area: header_container_2;
    padding-bottom:2%;
    background-color:white;
    padding-top:2px;
    grid-template-columns: auto;
    grid-template-rows: auto;
    grid-template-areas: 'header_2' ; }

    #content_container_1 {
    width:100%;
    height:65vh;
    margin:0 auto;
    display: grid;
    grid-area: content_container_1;
    align-items: center;
    background-color:black;
    grid-template-columns: auto;
    grid-template-rows: auto;
    grid-template-areas: 'content_box_1' ; }

    #content_container_2 {
    width:100%;
    height:auto;
    margin:0 auto;
    display: grid;
    grid-area: content_container_2;
    align-items: center;
    border:1px solid black;
    background-color:white;
    grid-template-columns: auto;
    grid-template-rows: auto;
    grid-template-areas: 'content_box_2' ; }

    #content_container_3 {
    width:100%;
    height:50vh;
    padding-top:3px;
    margin:0 auto;
    display: grid;
    grid-area: content_container_3;
    align-items: center;
    border:1px solid black;
    background-color:#f1f1f1;
    grid-template-columns: auto;
    grid-template-rows: auto;
    grid-template-areas: 'content_box_3' ; }

    #footer_container {
    width:100%;
    height:30vh;
    padding-top:3px;
    margin:0 auto;
    display: grid;
    grid-area: footer_container;
    align-items: center;
    background-color: #f1f1f1;
    grid-template-columns: auto;
    grid-template-rows: auto;
    grid-template-areas: 'footer' ; }

    #designer {
    width:auto;
    height:75vh;
    border:2px solid black;
    grid-area:designer; }
  
  
  
/* ------------------ HEADER AREA ---------------------- */

.header_1 {
width:60%;
max-height:8vh;
display: grid;
margin:0 auto;
grid-area: header_1;
align-items: center;
background-color: #222;
grid-template-columns:auto;
grid-template-rows: auto;
grid-template-areas: 
'header_menu_1' ; }

    .header_menu_1 {
    width:100%;
    display: flex;
    align-items: center;
    padding-left:2px;
    background-color: #222;
    grid-area: header_menu_1; }   

    .header_menu_1 img {
    width:auto;
    height:5vh;
    padding-right:20px;
    display: flex;
    align-items: center; }

.header_2 {
width:60%;
height:10vh;
display: grid;
margin:0 auto;
grid-area: header_2;
align-items: center;
background-color: white;
grid-template-columns:auto;
grid-template-rows: auto;
grid-template-areas: 
'header_menu_3'
'header_menu_4'; }

    .header_menu_2 {
    width:100%;
    height:5vh;
    display: flex;
    align-items: center;
    grid-area: header_menu_2; }

    .header_menu_3 {
    width:100%;
    height:5vh;
    display: flex;
    align-items: center;
    justify-content: left;
    padding-right:10px;
    grid-area: header_menu_3;
    background-color: white; }
      
      .header_menu_3 button {
      margin-right:5px;
      padding:6px;
      border:1px solid #888;
      border-radius: 5px;
      background-color: transparent; }

      .header_menu_3 button:hover {
      background-color: #888;}

      .header_menu_3 a {
      font-size: 16px;
      font-weight:800;
      color:#333;
      justify-content: left;
      font-family: "Quicksand", sans-serif; }


    .header_menu_4 {
    width:100%;
    height:5vh;
    padding-top:3px;
    grid-area: header_menu_4;
    display: flex;
    align-items: center;
    background-color: white; }

        .header_menu_4 a {
        font-size: 16px;
        font-weight:700;
        color:#333;
        margin-right:5px;
        padding:6px;
        justify-content: left;
        align-items: center;
        font-family: "Quicksand", sans-serif; }

/* ------------------ CONTENT AREA ---------------------- */

.content_box_1 {
width:60%;
display: grid;
margin:0 auto;
grid-area: content_box_1;
justify-content: center; align-items: center;
background-color: black;
grid-template-columns: 50% 50%;
grid-template-rows: auto;
grid-template-areas: 'content_area_1 content_area_2' ; }

    .content_area_1 {
    width:100%;
    height:auto;
    display: grid;
    font-size: 18px;
    color:white;
    grid-area: content_area_1 ;
    justify-content:left; align-items: center; }

    .content_area_1 button {
    width:calc(50% - 20px);
    height:10vh;
    border-radius: 30px;
    font-size:18px;
    font-weight:800;
    position:relative;
    left:25%;
    top:30%;
    justify-content: center; text-align: center;}

    .content_area_2 {
    width:100%;
    height:auto;
    display: grid;
    font-size: 18px;
    color:white;
    grid-area: content_area_2 ;
    justify-content: center; align-items: center; }

/* ------------------------------------------------- */

.content_scroll {
width:60%;
height:100vh;
display: grid;
margin:0 auto;
grid-area: content_scroll;
justify-content: center; align-items: center;
background-color: black;
grid-template-columns: 50% 50%;
grid-template-rows: auto;
grid-template-areas: 
'content_scroll_1 content_scroll_2'
'content_scroll_3 content_scroll_3' ; }

.content_scroll_1 {
width:100%;
height:auto;
display: grid;
font-size: 18px;
color:white;
grid-area: content_scroll_1 ;
z-index:9;
justify-content:left; align-items: center; }

.content_scroll_2 {
width:100%;
height:auto;
display: grid;
font-size: 18px;
color:white;
grid-area: content_scroll_2 ;
z-index: 9;
justify-content:left; align-items: center; }

.content_scroll_3 {
width:100%;
height:auto;
display: grid;
font-size: 18px;
color:white;
grid-area: content_scroll_3 ;
z-index: 11;
position: absolute;
top:70vh;
justify-content:left; align-items: center; }


/* ------------------------------------------------- */

.content_box_2 {
width:60%;
height:50vh;
display: grid;
margin:0 auto;
grid-area: content_box_2;
justify-content: center; align-items: center;
background-color: white;
grid-template-columns: auto;
grid-template-rows: auto;
grid-template-areas: 
'content_area_3'
'content_area_4' ; }

    .content_area_3 {
    width:100%;
    height:auto;
    display: grid;
    justify-content: center; align-items: center; text-align: center;
    grid-area: content_area_3 ; }

    .content_area_4 {
    width:100%;
    height:auto;
    display: grid;
    justify-content: center; align-items: center;
    grid-area: content_area_4 ;
    grid-template-columns: 33% 33% 33%;
    grid-template-rows: auto;
    grid-template-areas: 
    'content_area_4_1 content_area_4_2 content_area_4_3'
    'content_area_4_4 content_area_4_5 content_area_4_6' ; }

      .content_area_4_1 {
      width:100%;
      height:auto;
      justify-content: center; align-items: center; text-align: center;
      grid-area:content_area_4_1;}

      .content_area_4_2 {
      width:100%;
      height:auto;
      justify-content: center; align-items: center; text-align: center;
      grid-area:content_area_4_2; }

      .content_area_4_3 {
      width:100%;
      height:auto;
      justify-content: center; align-items: center; text-align: center;
      grid-area:content_area_4_3; }

      .content_area_4_4 {
      width:100%;
      height:auto;
      justify-content: center; align-items: center; text-align: center;
      grid-area:content_area_4_4; }

      .content_area_4_5 {
      width:100%;
      height:auto;
      justify-content: center; align-items: center; text-align: center;
      grid-area:content_area_4_5; }

      .content_area_4_6 {
      width:100%;
      height:auto;
      justify-content: center; align-items: center; text-align: center;
      grid-area:content_area_4_6; }


/* ------------------------------------------------- */

.content_box_3 {
width:60%;
height:40vh;
display: grid;
margin:0 auto;
grid-area: content_box_3;
align-items: center; text-align: center;
background-color:#fff;
border:1px solid black;
grid-template-columns: auto;
grid-template-rows: auto;
grid-template-areas: 
'content_area_5'
'content_area_6' ; }

    .content_area_5 {
    width:100%;
    height:auto;
    display: grid;
    grid-area: content_area_5 ; }

    .content_area_6 {
    width:100%;
    height:auto;
    display: grid;
    grid-area: content_area_6 ; }


/* ------------------ FOOTER AREA ---------------------- */

.footer {
width:100vw;
height:auto;
display: grid;
margin:0 auto;
grid-area: footer;
align-items: center; text-align: center;
background-color:white;
grid-template-columns: auto;
grid-template-rows: auto;
grid-template-areas: 'footer_link_container' ; }

.footer_link_container {
width:60%;
height:Auto;
display: grid;
margin:0 auto;
grid-area: footer_link_container;
background-color:white
grid-template-columns: 25% 25% 25% 25%;
grid-template-rows: auto;
grid-template-areas: 
'footer_menu_1 footer_menu_2 footer_menu_3 footer_menu_4' ; }

  .footer_link_container a {
  font-family: "Quicksand", sans-serif;
  font-weight: 700;
  line-height:30px;
  color:#222;
  margin-bottom:3px;
  margin-top:3px;
  padding-top:3px;
  padding-bottom:3px; }

    .footer_menu_1 {
    width:100%;
    height:auto;
    display: grid;
    justify-content: center; text-align: center;
    grid-area: footer_menu_1; }

    .footer_menu_2 {
    width:100%;
    height:auto;
    display: grid;
    justify-content: center; text-align: center;
    grid-area: footer_menu_2; }

    .footer_menu_3 {
    width:100%;
    height:auto;
    display: grid;
    justify-content: center; text-align: center;
    grid-area: footer_menu_3; }

    .footer_menu_4 {
    width:100%;
    height:auto;
    display: grid;
    justify-content: center; text-align: center;
    grid-area: footer_menu_4; }


/* ---------------------------------------- */






/* ------------------ DROPDOWN BUTTOn ---------------------- */

.dropdown {
  position: relative;
}

/* Style the dropdown button */
.dropbtn {
  background-color:#444;
  color: white;
  border-right:1px solid black;
  border-left:1px solid black;
  margin-right:2px;
  padding: 16px;
  font-size: 16px;
  border: none;
  cursor: pointer; }

.dropbtn a {
font-size: 14px;
font-weight:700;
color:white;
font-family: "Quicksand", sans-serif; }

/* Dropdown content */
.dropdown-content {
  display: none;
  position: absolute;
  background-color: #f9f9f9;
  min-width: 200px;
  box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
}

/* Links inside dropdown content */
.dropdown-content a {
  color: black;
  padding: 12px 16px;
  text-decoration: none;
  display: block;
}

/* Change color of dropdown links on hover */
.dropdown-content a:hover {
  background-color: #f1f1f1
}

/* Show the dropdown content on hover */
.dropdown:hover .dropdown-content {
  display: block;
}

/* Change background color of dropdown button on hover */
.dropdown:hover .dropbtn {
  background-color: #3e8e41;
}