@font-face {
    font-family: 'welcome_mandalaregular';
    src: url('fonts/welcome_mandala-webfont.woff2') format('woff2'),
         url('fonts/welcome_mandala-webfont.woff') format('woff');
    font-weight: normal;
    font-style: normal;

}

@font-face {
    font-family: 'cerayonregular';
    src: url('fonts/cerayon-webfont.woff2') format('woff2'),
         url('fonts/cerayon-webfont.woff') format('woff');
    font-weight: normal;
    font-style: normal;

}

html {
    font-size: 16px;
    scroll-behavior: smooth;
}

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

body {
    font-family: 'cerayonregular', sans-serif;
    line-height: 1.5;

    height: 100vh;
    background: repeating-conic-gradient(
        #FEDAEA 0deg 90deg,
        #FACEE2 90deg 180deg
      );
    background-size: 300px 300px; /* Size of background squares */
}

::-webkit-scrollbar {
    display: none;
}

section {
    max-width: 100vw;
    padding-top: 50px;
}

#home {
    padding-top: 0;
}

h1 {
    font-family: 'welcome_mandalaregular', sans-serif;
    font-size: 10vw;
}

.heading {
    text-align: center;
}

/******************** NAVBAR ********************/
@media (max-width: 767px) {
    .navbar {
        position: relative;
        margin: clamp(5px, 10vw, 50px) clamp(30px, 10vw, 80px) 0;
    }

    .menu-toggle {
        cursor: pointer;
        display: inline-block;
        padding: 10px 15px;
        background-color: #D7DDFD;
        transition: transform 0.2s;
    }

    .menu-toggle div {
        width: 25px;
        height: 3px;
        background-color: black;
        margin: 5px 0;
        transition: 0.4s;
    }

    .menu-toggle:after,
    .menu-toggle:before { 
        content: '';
        background: #8587AB;
        position: absolute;
    }

    .menu-toggle:after {
        width: 55px;
        height: 15px;
        left: -7px;
        bottom: 0;
        transform: translatey(55%) skewx(-45deg);
    }

    .menu-toggle:before {
        width: 15px;
        height: 49px;
        left: 0;
        transform: translatex(-100%) skewy(-45deg);
        top: 8px;
    }

    .navbar ul {
        list-style: none;
        box-shadow: -3px 3px 5px rgba(0, 0, 0, 0.3);
        z-index: 100;
    }

    .nav-links {
        display: none; 
        flex-direction: column;
        gap: 1rem;
        width: 10em;
        position: absolute;
        background: #D7DDFD;
        padding: 1rem;
    }

    .nav-links a {
        color: #393A50;
        text-decoration: none;
    }

    .show-menu {
        display: flex;
    }
}

@media (min-width: 768px) { /* Tablet Size and Up */
    .navbar {
        position: relative;
        margin: 50px 80px;
        width: clamp(400px, 40vw, 700px);
        padding: 20px;
        background-color: #D7DDFD;
    }

    .navbar:after,
    .navbar:before { /*Nav shadow*/
        content: '';
        background: #8587AB;
        position: absolute;
    }

    .navbar:after {
        width: 100%;
        height: 20px;
        left: -10px;
        bottom: 0;
        transform: translatey(100%) skewx(-45deg);
    }

    .navbar:before {
        width: 20px;
        height: 100%;
        left: 0;
        transform: translatex(-100%) skewy(-45deg);
        top: 10px;
    }

    .navbar ul {
        list-style: none;
        display: flex;
        justify-content: space-around;
    }

    .navbar ul li a {
        text-decoration: none;
        font-size: 1.2rem;
        color: #393A50;
        transition: all 0.2s ease-in-out;
    }

    .navbar ul li a:hover {
        font-size: 1.3rem;
        color: aliceblue;
    } 

    .menu-toggle {
        display: none;
    }
}

/******************** HOME PAGE ********************/

@media (max-width: 767px) { 
    #container-home {
        display: flex;
        flex-flow: column wrap;
        align-items: center;
    }

    .title-introduction {
        padding: 0 20px;
    }

    #home .name-container {
        display: flex;
        flex-flow: row wrap;
        justify-content: center;
        gap: 15px;

        position: relative;
    }

    @media (max-width: 519px) {
        .kangamba {
            position: absolute;
            top: 12.5vw;
        }
    }
    
    #container-home h1 {
        font-size: 6rem;
    }

    .job-titles {
        font-size: 5vw;
        text-align: center;
        padding-top: 15px;
    }

    .speech-bubble {
        display: none;
    }

    .star {
        display: none;
    }
}

@media (min-width: 768px) { /* Tablet Size and Up */
    #container-home {
        display: flex;
        flex-flow: row nowrap;
        justify-content: space-around;
    }

    #home .name-container {
        position: relative;
    }

    .kangamba {
        position: absolute;
        top: 8vw;
    }

    #container-home h1 {
        font-size: 15vw;
    }
     
    .job-titles {
        font-size: 3vw;
        padding-top: 15px;
    }

    .bubble-wrapper {
        position: relative;
    }

    .star{
        fill: gold;
        stroke: black;
        stroke-width: 0.4;
    }

    .star1 {
        position: absolute;
        width: 7vw;
        left: 19%;
        top: 17%;
        transform: translate(-50%, -50%);
        z-index: 1;
    }
    .star2 {
        position: absolute;
        width: 5vw;
        left: 95%;
        top: 85%;
        transform: translate(-50%, -50%);
        z-index: 1;
    }

    .speech-bubble {
        background: #fff2f2; /* Hexagon color */
        color: #333; /* Text color */
        width: 40vw; /* Bubble width */
        max-width: 500px;
        aspect-ratio: 1 / 1;
        text-align: center; 
        clip-path: polygon(
            55% 5%,   
            97% 28%, 
            90% 77%, 
            30% 90%, 
            20% 78%,
            0% 71%,
            13% 67%,
            5% 55%,   
            17% 19%    
        );
        display: flex;
        justify-content: center;
        align-items: center;
    }

    .speech-bubble-outline {
        position: absolute;
        top: 0;
        z-index: -1;

        background: black; /* Hexagon color */
        color: #333; /* Text color */
        width: 40vw; /* Bubble width */
        max-width: 500px;
        aspect-ratio: 1 / 1;
        text-align: center; 
        clip-path: polygon(
            57% 2%,   
            100% 25%, 
            91% 79%, 
            30% 90%, 
            22% 80%,
            0% 72%,
            13% 67%,
            5% 55%,   
            17% 19%    
        );
        display: flex;
        justify-content: center;
        align-items: center;
    }
    
    .speech { 
        display: inline-block;
        position: relative;
        font-size: min(1.7vw, 24px);
        font-family: 'cerayonregular', sans-serif;
    }
}

/******************** PROJECT PAGE ********************/
#projects .heading {
    font-size: clamp(84px, 16vw, 108px);
}

.slider {
    display: flex;
    justify-content: center;
}

.slide {
    display: flex;
    position: absolute;
}

.slide:not(.active){
    display: none;
}

.active {
    display: flex;
    position: relative;
}

.project-left {
    background-color: #393A50;
    width: 400px;
}

.project-right {
    background-color: #393A50;
    width: 400px;
    height: 600px;
    padding: 20px;
    color: #fff2f2;
}

.live-links {
    color: #FACEE2;
}

.project1 {
    height: 300px;
    background-color:rgb(173, 196, 188);
    overflow: hidden;
}

.project1 img {
    height: 300px;
}

.project2 {
    height: 300px;
    background-color: #8993a9;
    overflow: hidden;
}

.project2 img {
    height: 300px;
}

.more-projects {
    margin: 10px;
    padding: 10px 50px;
    font-size: 24px;
}

@media (max-width: 900px) { 
    .slide {
        display: flex;
        flex-flow: column;
    }
}

@media (max-width: 450px) { 
   .project-left, .project-right {
        width: 90vw;
   }
}

.center {
    display: flex;
    justify-content: center;
    align-items: center;
}

.arrow-divide{
    gap: 50%;
}

.arrow-left {
    background: #D7DDFD;
    width: 80px;
    height: 80px;
    margin-top: 10px;
    clip-path: polygon(
        50% 0%, 
        100% 50%, 
        50% 100%, 
        50% 70%, 
        0% 70%, 
        0% 30%, 
        50% 30%
    );
    cursor: pointer;
}

.shadow-left {
    filter: drop-shadow(1px 10px 0px #8587AB);
}

.arrow-right {
    background: #D7DDFD;
    width: 80px;
    height: 80px;
    margin-top: 10px;
    clip-path: polygon(
        50% 0%, 
        0% 50%, 
        50% 100%, 
        50% 70%, 
        100% 70%, 
        100% 30%, 
        50% 30%
    );
    cursor: pointer;
}

.shadow-right {
    filter: drop-shadow(-1px 10px 0px #8587AB);
}

/******************** ABOUT PAGE ********************/
#about-container {
    padding: 0 5vw;
    gap: 15px;
    width: 100%;
    display: flex;
    flex-flow: column;
    align-items: center;
}

#about .heading {
    font-size: clamp(84px, 16vw, 108px);
}

.character-image {
    text-align: center;
    height: auto;
    border-radius: 60%;
}

.character-image img {
    width: 30vw;
    height: auto;
    border-radius: 40%;
}

.about-content {
    font-size: 2vw;
    padding: 0 10vw;
}

@media (max-width: 900px) {
    #about .heading {
        text-align: center;
        font-size: clamp(12px, 16vw, 84px);
    }

    #about-container {
        display: flex;
        flex-direction: column;
        align-items: center;
        width: 100%;
        gap: 0;
    }

    .about-content {
        grid-row: 2;
        grid-column: 2;
        font-size: 1rem;
        padding: 0 7vw;
    }
}

/******************** CONTACT PAGE ********************/
#contact {
    display: flex;
    align-items: center;
    justify-content: center;
}

.contact {
    display: flex;
    align-items: center;
    flex-flow: column nowrap;
    padding: 0 100px 20px 100px;
    background-color: antiquewhite;
    border: black dashed 2px;
    margin: auto 0 30px 0;
    width: 90vw;
    height: 100%;
}

.form-content {
    padding-bottom: 20px;
}

.form {
    display: flex;
    flex-direction: column;
    width: 100%;
    gap: 10px;
}

textarea{
    resize: none;
}

@media (min-width: 930px) {
    .form {
        width: 650px;
    }
}

@media (max-width: 550px) {
    .contact {
        padding-right: 40px;
        padding-left: 40px;
    }
}