@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');

@import url('https://fonts.googleapis.com/css2?family=Play:wght@400;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;
font-family: "Play", 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); }

P {color:#666;
   font-size:16px;
   line-height:16px;}

H6 {font-size:20px;
    color:#333;}

H5 {font-size:24px;
color: #222;}

H4 {font-size:30px;}

H3 {
width:70%;
text-align: center;
font-size:34px;
font-weight:700;
font-family: "Quicksand", sans-serif;
color:silver; }

H2 {
color:#999
text-shadow: #222 1px 1px 1px;
font-size:42px;}

H1 {font-size:50px; 
    font-weight:700; 
    font-family: "Play", sans-serif;}


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

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

#container {
width:100%;
height:auto;
display: grid;
grid-template-columns: auto;
grid-template-rows: auto;
grid-template-areas: 
'header'
'grid'; }

header {
width:100vw;
height:10vh;
margin:0 auto;
display: grid;
grid-area: header;
position: fixed;
top:0;
z-index: 9;
align-items: center; justify-content: center;
background-color: #222;
padding-top:2px;
border-bottom:2px solid royalblue;
grid-template-columns: 100%;
grid-template-rows: auto;
grid-template-areas: 'nav_box' ; }

    .nav_box {
    width:60%;
    height:8vh;
    display: grid;
    margin:0 auto;
    grid-area: nav_box;
    align-items: center; text-align: center;
    grid-template-columns:25% 75%;
    grid-template-rows: 100%;
    grid-template-areas: 
    'logo navigation' ; }

        .logo {
        width:100%;
        height:100%;
        grid-area: logo;
        object-fit: fill;
        display: flex; 
        align-items: center; }

        .logo img {width:99%; height:auto;}

        .logo:hover {}

        .navigation {
        width:100%;
        height:100%;
        grid-area: navigation;
        display: flex;
        align-items: center;
        padding-left:2px; }


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


#grid {
width:100%;
height:auto;
margin-top:4px;
grid-area: grid;
display: grid;
position: absolute;
top:10vh;
grid-template-columns: auto;
grid-template-rows: auto;
grid-template-areas: 
'menu'
'full_width_1'
'full_width_2'
'full_width_3'
'full_width_3-2'
'full_width_4'
'full_width_5'
'full_width_6'
'designer_full_width'
'footer'; }

    .menu {
    width:100%;
    height:10vh;
    grid-area: menu;
    background-color:white;
    justify-content: center; align-items: center;
    display: grid;
    grid-template-columns:auto;
    grid-template-rows: auto;
    grid-template-areas: 
    'menu_box'; }

        .menu_box {
        width:60%;
        height:8vh;
        margin:0 auto;
        grid-area:menu_box;
        display: grid;
        align-items: center;
        border-top:1px solid #f1f1f1;
        grid-template-columns: 100%;
        grid-template-rows: auto;
        grid-template-areas: 'menu_nav_1';}
        /*'menu_picture menu_nav_1'
        'menu_picture menu_nav_2';*/
            
            .menu a {
            font-size:16px;
            font-weight:700;
            color:#444;
            font-family: "Quicksand", sans-serif;}

            .menu_picture {
            width:auto;
            height:8vh;
            grid-area: menu_picture;
            display: flex;
            justify-content: center;
            align-items: center;}

            .menu_picture img {
            width:auto;
            height:8vh;
            object-fit: contain;}

            .menu_nav_1 {
            width:100%;
            height:8vh;
            margin:0 auto;
            grid-area: menu_nav_1;
            display: flex;
            justify-content: center;
            align-items: center; }

            .menu_nav_1 a {
            margin-right:5px;
            border:1px solid silver;}

            .menu_nav_2 {
            width:100%;
            height:4vh;
            grid-area: menu_nav_2;
            display: flex;
            justify-content: left;
            align-items: center; }

            .menu_nav_2 a {
            margin-right:5px;
            border:1px solid silver;}

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

    .full_width_1 {
    width:100%;
    height:50vh;
    grid-area: full_width_1;
    background-color: #222;
    display: grid;
    grid-template-columns: auto;
    grid-template-rows: auto;
    grid-template-areas: 
    'partial_width_1'; }

        .partial_width_1 {
        width:60%;
        height:auto;
        margin:0 auto;
        grid-area: partial_width_1;
        justify-content: center; align-items: center;
        display: grid;
        grid-template-columns: 50% 50%;
        grid-template-rows: auto;
        grid-template-areas: 
        'box_1a box_1b'; }

        .box_1a {
        width:100%;
        height:50vh;
        grid-area: box_1a;
        align-items: center; text-align: center;
        border-radius: 20px;
        display: grid;
        grid-template-columns: auto;
        grid-template-rows: 40% 60%;
        grid-template-areas: 
        'box_1a_top'
        'box_1a_bottom'; }

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

            .box_1a_bottom {
            width:100%;
            height:100%;
            grid-area: box_1a_bottom;
            display: flex;
            opacity:100%;
            justify-content: center; align-items: center; text-align: center; }

            .box_1a_bottom a {text-decoration: none;}

        .box_1b {
        width:100%;
        height:50vh;
        border-radius: 25px;
        grid-area: box_1b;
        justify-content: center; align-items: center; text-align: center;
        display: flex; }

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

    .full_width_2 {
    width:100%;
    height:50vh;
    grid-area: full_width_2;
    background-color: white;
    display: grid;
    grid-template-columns: 100%;
    grid-template-rows: auto;
    grid-template-areas: 'partial_width_2'; }

        .partial_width_2 {
        width:60%;
        height:100%;
        margin:0 auto;
        grid-area: partial_width_2;
        justify-content: center;
        display: grid;
        grid-template-columns: 33% 33% 33%;
        grid-template-rows: 20% 40% 40%;
        grid-template-areas: 
        'box_2_header box_2_header box_2_header'
        'box_2_top_left box_2_top_mid box_2_top_right'
        'box_2_bottom_left box_2_bottom_mid box_2_bottom_right'; }

            .partial_width_2 p {
            font-size:15px;
            font-weight: 500;
            padding:8%;
            text-align: center;
            color: #666; }

            .partial_width_2 h6 {
            width:90%;
            font-size:20px;
            color:#444;
            font-family: "Play", sans-serif;
            text-align: center;  }

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

            .box_2_top_left {
            width:100%;
            height:100%;
            grid-area:box_2_top_left;
            display: grid;
            text-align: center; }
            
            .box_2_top_mid {
            width:100%;
            height:100%;
            grid-area:box_2_top_mid;
            display: grid; }
            
            .box_2_top_right {
            width:100%;
            height:100%;
            grid-area:box_2_top_right;
            display: grid; }

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

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

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

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

    .full_width_3 {
    width:100%;
    height:auto;
    min-height:25vh;
    grid-area: full_width_3;
    background-color: #f1f1f1;
    display: grid;
    grid-template-columns: 100%;
    grid-template-rows: auto;
    grid-template-areas: 'partial_width_3';}

        .partial_width_3 {
        width:50%;
        height:100%;
        margin:0 auto;
        grid-area: partial_width_3;
        display: grid;
        align-items: center;
        text-align: center; }

            .box_3a {
            width:100%;
            height:100%;
            color:white; font-weight:800;
            grid-area: box_3a;
            align-items: center; text-align: center;
            display: grid; }

            .box_3b {
            width:100%;
            height:100%;
            color:white; font-weight:800;
            grid-area: box_3b;
            align-items: center; text-align: center;
            display: grid; }

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

.full_width_3-2 {
    width:100%;
    height:40vh;
    min-height:15vh;
    grid-area: full_width_3-2;
    background-color: white;
    display: grid;
    grid-template-columns: 100%;
    grid-template-rows: auto;
    grid-template-areas: 'partial_width_3-2';}

        .partial_width_3-2 {
        width:60%;
        height:100%;
        margin:0 auto;
        grid-area: partial_width_3-2;
        display: grid;
        grid-template-columns: 33% 33% 33%;
        grid-template-rows: auto;
        grid-template-areas: 
        'box_3-2_text box_3-2_text box_3-2_text'
        'box_3-2_pictures box_3-2_pictures box_3-2_pictures';}

            .box_3-2_text {
            width:100%;
            height:100%;
            margin:10px;
            grid-area: box_3-2_text;
            display: flex;
            justify-content: center; align-items: center; }

                .box_3-2_text h5 { font-size:22px; color:#444; font-weight: 500; padding-right:1%; border-right:1px solid #333; }

                .box_3-2_text p { font-size: 16px; padding-left:1%; color:#888; }

            .box_3-2_pictures {
            width:100%;
            height:100%;
            border-radius: 25px;
            grid-area: box_3-2_pictures; 
            display: flex;
            justify-content: center; }
            

            .box_3-2_pictures img {
            width:95%;
            padding:2%;
            margin:2%;
            border-radius: 25px;
            justify-content: center;
            -webkit-transform: scale(1);
            transform: scale(1);
            -webkit-transition: .3s ease-in-out;
            transition: .3s ease-in-out; }

            .box_3-2_pictures img:hover { -webkit-transform: scale(1.1); transform: scale(1.1); }



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

    .full_width_4 {
    width:100%;
    height:50vh;
    grid-area: full_width_4;
    background-color: #777;
    border-bottom:1px solid #111;
    display: grid;
    grid-template-columns: auto;
    grid-template-rows: auto;
    grid-template-areas: 'partial_width_4';  }

        .partial_width_4 {
        width:60%;
        height:100%;
        margin:0 auto;
        grid-area: partial_width_4;
        display: grid;
        grid-template-columns: 50% 50%;
        grid-template-rows: auto;
        grid-template-areas: 
        'box_4a box_4b'; }

            .box_4a {
            width:100%;
            height:100%;
            grid-area: box_4a;
            align-items: center; text-align: center;
            display: grid;
            grid-template-columns:auto;
            grid-template-rows: auto;
            grid-template-areas: 
            'box_4a_top'
            'box_4a_bottom'; }

                .box_4a_top {
                width:100%;
                height:100%;
                border-bottom:1px solid black;
                grid-area: box_4a_top;
                display: flex;
                justify-content: center; align-items: center; text-align: center;  }

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


            .box_4b {
            width:100%;
            height:100%;
            grid-area: box_4b;
            align-items: center; text-align: center;
            display: grid;
            grid-template-columns:auto;
            grid-template-rows: auto;
            grid-template-areas: 
            'box_4b_top'
            'box_4b_bottom'; }

                .box_4b_top {
                width:100%;
                height:100%;
                border-bottom:1px solid black;
                grid-area: box_4b_top;
                display: flex;
                justify-content: center; align-items: center; text-align: center;  }

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


    .full_width_5 {
    width:100%;
    height:50vh;
    grid-area: full_width_5;
    background-color: #222;
    justify-content: center; align-items: center;
    display: grid; }

    .full_width_6 {
    width:100%;
    height:50vh;
    grid-area: full_width_6;
    background-color: white;
    justify-content: center; align-items: center;
    display: grid;}


    .designer_full_width {
    width:100%;
    height:100%;
    grid-area: full_width_1;
    background-color: #222;
    display: grid;
    grid-template-columns: auto;
    grid-template-rows: auto;
    grid-template-areas: 
    'partial_width_1'; }

        .designer {
        width:60%;
        height:70vh;
        margin:0 auto;
        border-bottom:1px dotted red;
        grid-area: designer;
        background-color: #555;
        display: flex;
        justify-content: right; }

        .embed-container { }

        #inksoftEmbed { }



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

    .footer {
    width:100%;
    min-height:15vh;
    background-color: #222;
    grid-area: footer;
    align-items: center;
    display: grid;
    grid-template-columns: auto;
    grid-template-rows: auto;
    grid-template-areas: 'footer_links'; }

        .footer_links {
        width:60%;
        min-height:15vh;
        margin:0 auto;
        grid-area: footer_links;
        margin-bottom:1%;
        background-image: linear-gradient(to right, #222 , #444, #222);
        align-items: center; text-align: center;
        display: grid;
        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_menu_1 {
            width:auto;
            height:auto;
            grid-area: footer_menu_1;
            display: grid; }

                .footer_menu_1 li {
                text-decoration: none; 
                list-style-type: none;
                margin-top:10px;
                margin-bottom:10px; }

                .footer_menu_1 a {
                font-size:16px;
                font-weight:700;
                padding:4px;
                color:silver;
                font-family: "Quicksand", sans-serif; }

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

                .footer_menu_2 li {
                text-decoration: none; 
                list-style-type: none; 
                margin-top:10px;
                margin-bottom:10px;}

                .footer_menu_2 a {
                font-size:16px;
                font-weight:700;
                padding:4px;
                color:silver;
                font-family: "Quicksand", sans-serif; }

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

                .footer_menu_3 li {
                text-decoration: none; 
                list-style-type: none; 
                margin-top:10px;
                margin-bottom:10px;}

                .footer_menu_3 a {
                font-size:16px;
                font-weight:700;
                padding:4px;
                color:silver;
                font-family: "Quicksand", sans-serif; }

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

                .footer_menu_4 li {
                text-decoration: none; 
                list-style-type: none;
                font-weight:100; 
                margin-top:10px;
                margin-bottom:10px;}

                .footer_menu_4 a {
                font-size:16px;
                font-weight:800;
                padding:4px;
                color:silver;
                font-family: "Quicksand", sans-serif; }



/* ----------------------------------------------------------- BUTTONS --------------- */

.navbutton {
min-width:100px;
background-color:#333;
color: white;
border:1px solid #555;
padding: 10px;
font-size: 16px;
cursor: pointer; }

.navbutton:hover {background-color:#444;}

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

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

.navbutton2 {
background-color:#222;
color:white;
border-radius: 4px;
border-right:1px solid black;
border-left:1px solid black;
margin-right:1%;
padding: 12px;
font-size: 16px;
border: none;
cursor: pointer;
white-space: nowrap; }

.navbutton2:hover {background-color: #444;}

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

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

.navbutton3 {
background-color:#222;
color: white;
border-radius: 4px;
border-right:1px solid black;
border-left:1px solid black;
margin-right:1%;
padding: 12px;
font-size: 16px;
border: none;
cursor: pointer;
display:block;
white-space: nowrap;}

.navbutton3:hover {background-color: #444;}

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

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

.navbutton4 {
font-size: 30px;
font-weight:700;
font-family: "Play", sans-serif;
text-decoration: none;
color: white;
text-shadow: #333 2px 2px 2px;
border-radius: 50px;
padding: 50px;
border: none;
cursor: pointer;
display:block;
white-space: nowrap;
background-color: lightblue;}

.navbutton4:hover {background-color: rgb(132, 207, 233);}

.navbutton4 a {text-decoration: none;}