* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}
:root {
    --primary-color: rgb(197, 71, 33);
    --secondary-color: rgb(37, 34, 34);
}
/* <weight>: Use a value from 300 to 700
   <uniquifier>: Use a unique and descriptive class name */
.quicksand-run {
  font-family: "Quicksand", sans-serif;
  font-optical-sizing: auto;
  font-weight: 300;
  font-style: normal;
}

body {
    font-family: "Quicksand";
}

/* ********* ********* ********* Section 1 ********* ********* ********* */
.section1 {
    height: 100vh;
    background: rgb(197, 71, 33);
}

/* Section 1 --------- --------- --------- Landing 0 */
.landing0 {
    height: 5%;
    background: linear-gradient(to bottom, rgba(25, 18, 12, 0.1), rgba(37, 34, 34, 1));
    display: flex;
    align-items: center;
    justify-content: center;
}
.landing0 p {
    font-size: 1rem;
    color: rgb(177, 126, 106);
}
.landing0 .desk {
    display: none;
}


/* Section 1 --------- --------- --------- Landing 1 */
.landing1 {
    /* height: 50%; */
    background: rgb(37, 34, 34);
}
.landing1 .logobar {
    display: grid;
    grid-template-columns: 1fr;
    text-align: center;
}
.landing1 .logobar .divone {
    height: 100%;
}
.landing1 .logobar .divone img {
    width: 80%;
}
.landing1 .logobar .menu-bar,
.landing1 .divtwo span.beside {
    display: none;
}
.landing1 .divtwo {
    background-color: rgba(254, 82, 0, 1);
    text-align: center;
}

.landing1 .divtwo h1 {
    font-size: 1.4rem;
    color: rgb(233, 206, 194);
    text-shadow: 0px 0px 7px rgb(97, 36, 7);
    text-transform: uppercase;
    line-height: 4rem;
    background: linear-gradient(to bottom,rgba(37, 34, 34, 0.95), rgba(25, 18, 12, 0.1));
}

.landing1 .central {
    height: 80%;
    background-image: linear-gradient(to bottom, rgba(25, 18, 12, 0.5), rgba(37, 34, 34, 0.2)), url(../img/GoogleGemini/centralimageMobile.png);
    background-repeat: no-repeat;
    background-size: cover;
    background-position: center;
    padding: 2rem;
    color: rgb(209, 188, 188);
    border-right: 1px solid rgb(197, 71, 33);
    text-align: center;
}
.landing1 .central .learnmore a {
    text-decoration: none;
    color: rgba(255, 255, 255, 0.7);
}
.landing1 .central .learnmore {
    font-family: "Quicksand";
    font-weight: 700;
    font-size: 1.0rem;
    text-transform: uppercase;
    background: transparent;
    padding: 7px 12px;
    border-radius: 15px;
    border: none;
    box-shadow: 0px 0px 10px rgba(255, 255, 255, 0.7);
    width: 11rem;
    height: 3rem;
    margin: 30% auto;
    transition: background 0.3s linear, box-shadow 0.3s linear;
}

/* Section 1 --------- --------- --------- Landing 2 */
.landing2 {
    height: 20%;
    /* background: linear-gradient(to bottom, rgba(25, 18, 12, 0.5), rgba(37, 34, 34, 0.5)); */
    background-image: url(../img/protruding-squares.svg);
}
.landing2 p {
    text-align: center;
    padding: 0;
    color: rgb(209, 188, 188);
    text-shadow: 0px 0px 7px rgb(97, 36, 7);
    font-size: 0.6rem;
}
.landing2 .navbar {
    display: none;
    height: 50%;
    background: linear-gradient(to bottom, rgba(37, 34, 34, 0.5), rgba(25, 18, 12, 0.5));
    border-top: 1px solid rgb(238, 83, 36);
    border-bottom: 1px solid rgb(238, 83, 36);
}

.landing2 .navbar ul {
    height: 100%;
    text-align: center;
    display: flex;
    justify-content: space-around;
    padding-top: 1.6rem;
}
.landing2 .navbar ul li {
    list-style: none;
}
.landing2 .navbar .navbutton a {
    /* width: 9rem; */
    font-family: "Quicksand";
    font-weight: 700;
    font-size: 1.0rem;
    text-transform: uppercase;
    text-decoration: none;
    background: transparent;
    margin: auto 0;
    padding:7px 15px;
    border-radius: 15px;
    box-shadow: 0px 0px 10px rgba(238, 83, 36, 0.7);
    color: rgb(238, 83, 36);
    transition: background 0.3s linear, box-shadow 0.3s linear;
}
.landing2 .navbar .navbutton a:hover {
    color: rgba(37, 34, 34, 0.5);
    background:rgb(235, 98, 57);
}
.landing2 .navbar .navbutton a span{
    color: rgba(255, 255, 255, 0.7);
}
.landing2 .subnavbar {
    height: 50%;
    display: grid;
    grid-template-columns: 1fr 1fr 1fr;
    background: linear-gradient(to bottom, rgba(134, 19, 19, 0.5), rgba(25, 18, 12, 0.5));
}
/* --------- Section 1 - Media query Desktop --------- */
@media screen and (min-width: 768px) {
    .section1 {
        height: 100vh;
    }
    .landing0 p {
        font-size: 1.5rem;
    }
    .landing0 .desk {
        display: block;
    }

    /* Row 1 */
    .landing1 {
        height: 78%;
        position: relative;
        z-index: 0;
    }
    .landing1 .logobar {
        display: grid;
        grid-template-columns: 1fr 1.5fr;
        align-items: center;
    }
    .landing1 .logobar .divone img {
        width: 60%;
    }
    /* Menu Bar */
    .landing1 .logobar .menu-bar {
        display: flex;
    }
    .landing1 .logobar .menu-bar li {
        list-style: none;
        padding: 1em 2em;
        /* background-color: aqua; */
    }
    .landing1 .logobar .menu-bar li a {
        border: none;
        padding: 0.6em 1.4em;
        border: none;
        color: rgba(255, 255, 255, 0.7);
        border-radius: 15px;
        position: relative;
        /* Using Flexbox to center the psudo-element ::after*/
        display: flex;
        align-items: center;
        justify-content: center;
        text-transform: uppercase;
        text-decoration: none;
        background-color: var(--secondary-color);
        /* background-image: linear-gradient(to bottom right,  rgb(97, 36, 7), rgba(254, 82, 0, 1)); */
     }
    .landing1 .logobar .menu-bar li a::after {
        content:'';
        position: absolute;
        border-radius: 15px;
        /* make the gradient cover the entire button */
        background-image: linear-gradient(to bottom right, rgba(254, 82, 0, 1), rgb(97, 36, 7));
        /* put the gradient behind the button text */
        z-index: -1;
        /* make the pseudo-element bigger than the button to see as a border */
        width: 105%;
        height: 109%;
     }
    .landing1 .logobar .menu-bar li a:hover {
        z-index: 0;
        box-shadow: 15px 0 20px rgba(254, 82, 0, 1), -15px 0 20px rgb(97, 36, 7);
     }
    .landing1 .logobar .menu-bar li a span {
        color: rgba(254, 82, 0, 1);
    }

    /*  ********* divtwo - Software Engineering text ********* */
    .landing1 .divtwo {
        
        background-image: linear-gradient(to bottom, rgba(25, 18, 12, 0.1), rgba(37, 34, 34, 1)), rgb(197, 71, 33);
    }
    .landing1 .divtwo h1 {
        color: rgba(255, 255, 255, 0.7);
        text-shadow: 2px 2px 4px rgb(197, 71, 33);
    }
    .landing1 .divtwo span.beside {
        display: inline-block;
    }

    .landing1 .central {
        background-image: linear-gradient(to bottom, rgba(25, 18, 12, 0.5), rgba(37, 34, 34, 0.2)), url(../img/GoogleGemini/centralimage.png);
        background-size: cover;
        background-position: center;
    }
    .landing1 .central .learnmore {
        margin: 10% auto;
    }
    .landing1 .central .learnmore:hover {
        background: rgba(255, 255, 255, 0.7);
        color:rgb(197, 71, 33);
    }

    .landing2 .navbar {
        display: block;
    }
}

/* ********* ********* ********* ********* ********* ********* ********* ********* ********* */
/* ********* ********* ********* ********* ********* ********* ********* ********* ********* */
/* ********* ********* ********* ********* ********* ********* ********* ********* ********* */

/* ********* ********* ********* Section 2 ********* ********* ********* */
.section2 {
    padding: 90px 40px;
    height: 100vh;
}
.section2 .title {
    font-size: 1rem;
}



/* --------- Section 2 - Media Query --------- */
@media screen and (min-width: 768px) {
    .section2 .title {
        font-size: 3rem;
        text-align: center;
        color: rgb(218, 46, 23);
        text-shadow: 0px 0px 7px rgb(97, 36, 7);
    }
}