/* CSS GOES HERE */

body {
    
    margin: 0;
    padding: 0;
    border: 0;
    font-size: 100%;
    font-family: "Inter", sans-serif;
    vertical-align: baseline;
    background: aqua;
    
}

.body-dark-mode {
    background-color: #1E1E1E;
    color:white;  
}

.Dmode {
    background-color: rgb(11, 182, 62);
    border-radius: 10px;
    height: 30px;
    cursor: pointer;
}


html {
    scroll-behavior:smooth;
}


.mobile-menu {
    width: 36px;
    height: 36px;
    background-color: grey;
    position: absolute;
    top: 40px;
    left: 40px;
    position: fixed;
    background-image: url(images/menu_FILL0_wght400_GRAD0_opsz24.png);
    background-repeat: no-repeat;
    background-position: 50% 50%;
    border-radius: 50%;
    z-index: 999;
    display:none;
}

.mobile-menu-popout {
    position: fixed;
    top: 0;
    left: -230px;
    padding:80px 40px;
    background-color: green;
    z-index: 998;
    padding-top: 120px;
    height: 100%;
    width: 150px;
    padding-left: 40px;
    transition:all 300ms;
    display:none;
}

.mobile-menu-popout ul {
    list-style: none;
}

.mobile-menu-popout ul li a {
    margin-bottom: 10px;
    list-style: none;
    font-size: 18px;
    color:white;
    display: block;
}
.open {
    left: 0px;
}
.close {
    background-size: 20px;
    background-image: url(images/close.svg);
}


/* gradient circle */


#grad1 {
    height: 1000px;
    width: 100%;
    background-image: radial-gradient(yellow,rgb(217, 217, 78), aqua);
    filter: blur(100px);
    background-size: 100% 900px;
    background-position-x: 700px;
    background-position-y: 100%;
    background-repeat: no-repeat;
    overflow: visible;
    position: absolute;
    top: 300px;
    right:0;
    z-index: -1;
    clip-path: circle(100%);
    margin: 0%;
    

  }

  

/* gradient circle */

  #grad2 {
    height: 100%;
    width: 100%;
    background-image: radial-gradient(yellow,rgb(217, 217, 78), aqua);
    filter: blur(100px);
    background-size: 100% 1000px;
    background-position-x: -500px;
    background-position-y: 100%;
    background-repeat: no-repeat;
    overflow: visible;
    position: absolute;
    top: 1300px;
    left: 0;
    right:0;
    z-index: -1;
    clip-path: circle(100%);
    
  }

  
/* gradient circle */

  #grad3 {
    height: 100%;
    width: 100%;
    background-image: radial-gradient(yellow,rgb(217, 217, 78), aqua);
    filter: blur(100px);
    background-size: 100% 1000px;
    background-position-x: 500px;
    background-position-y: 100%;
    background-repeat: no-repeat;
    overflow: visible;
    position: absolute;
    top: 2400px;
   
    
    right:0;
    z-index: -1;
    clip-path: circle(100%);
  }

 



#grad1 #grad2 #grad3 {
    margin: 0;
    padding: 0;
}


.space {
    background-image: url('images/Design.png');
    background-repeat: no-repeat;
    background-attachment: fixed;
    background-position: top left;
    background-size: 500px;
    z-index: 3px;
       
}

#header2 {

    position:relative;
}

.main_nav {
width: 100%;
height: 150px;
display:flex;
flex-flow:row;
align-items:center;
background-color: #f2f2f2;
}

.main_nav_dark_mode {
    background-color: #000 !important;
    color: white;
}

.smoothscroll {
    color: black;
}

.dark_nav {
    color: white;
}

.space {
    height: 400px;
    width: 100%;
    margin: 0;
    background-color: transparent;
    color: none;
    z-index: -3;
    
}

.title {
    font-size: 50px;
}

h2 {
    font-size: 30px;
}


/* About Me Section */

.about {

width: 1512px;
height: 676px;
left: -1px;
top: 604px;
}

#about {
    background-color: #f2f2f2;
    background-size: 100px 80px;
    background-repeat: no-repeat;
    
  }

  .about_button {
    background-color: rgb(11, 182, 62);
    border-radius: 10px;
    height: 30px;
    cursor: pointer;
}

.about_dark_mode {
    background-color: black !important;
    color: white;

}

/* Skills Section */

#skills {
    background-color: #f2f2f2;
    background-size: 100px 80px;
    background-repeat: no-repeat;
}  

.skills_button {
    background-color: rgb(11, 182, 62);
    border-radius: 10px;
    height: 30px;
    cursor: pointer;
}

.skill2 {
    width:300px;
    margin-right:auto;
  }

.skills_dark_mode {
    background-color: black !important;
    color: white;
}



  .row {
    width:300px;
    margin-left:auto;
  }

/* FAQS Section */

.faq-toggle {
    height: 60px;
    overflow: hidden;
    cursor: pointer;
}

.faq-open {
    height: auto;
}

#FAQ {
    background-color: #f2f2f2;
    background-size: 100px 80px;
    background-repeat: no-repeat;
}

.FAQ_dark_mode {
    background-color: black !important;
    color: white;
}

/* Gallery Section */

#gallery {
    background-color: aqua;
    background-size: 100px 80px;
    background-repeat: no-repeat;
}

div.organizer {
    flex-wrap: wrap;    
    display:  flex;
    }

.gallery-dark {
    background-color: #1E1E1E !important;
}

/* Skills Section */
.skills {
    position: absolute;
    width: 1513.04px;
    height: 619.56px;
    left: -1px;
    top: 1728px;
    }

    .ski {
        display: center;
        list-style: none;
        text-align-last: left;
    }
    
   

   

   .image {
    width: 30%;
    
    
   }


section {
    padding: 60px 40px;
}

section:nth-child(even) {
    background-color: #f2f2f2;
}


.container {
    width: 100%;
    max-width: 960px;
    text-align: center;
    margin: 0% auto;
}
.container-darkMode {
    background-color: #1E1E1E;
    color:white;  
}
/* footer */

nav ul {
    list-style: none;
    display: flex;
    flex-flow: row;
    justify-content: center;
    gap: 100px;
    margin: 0;
    background-image: url('images/hp_logo1.png');
}

footer {
    background-color: #000;
    color: #fff;
    padding: 10px;
}

.button-primary {
    background-color: rgb(11, 182, 62);
    border-radius: 10px;
    height: 30px;
}

.u-full-width {
    background-color: rgb(11, 182, 62);
    border-radius: 10px;
    margin: .5%;
}

/* about dividers */





.custom-shape-divider-top-1710734698  {
    position: relative;
    top: 0;
    left: 0;
    width: 100%;
    overflow: hidden;
    line-height: 0;
    transform: rotate(360deg);
    transform: rotateX(180deg);
    
    z-index: 1;
}
.custom-shape-divider-top-1710734698 svg {
    position: relative;
    display: inline-block;
    width: calc(100% + 1.3px);
    height: 154px;
    z-index: 1;
}

.custom-shape-divider-top-1710734698 .shape-fill {
    fill: #f2f2f2;
   
    
}

.custom-shape-divider-top-1710734698-dark {
    fill: #1E1E1E !important;
}


    


.custom-shape-divider-bottom-1710735021 {
    position: relative;
    bottom: 0;
    left: 0;
    width: 100%;
    overflow: hidden;
    line-height: 0;
    transform: rotate(360deg);
    
}

.custom-shape-divider-bottom-1710735021 svg {
    position: relative;
    display: inline-block;
    width: calc(100% + 1.3px);
    height: 154px;
}

.custom-shape-divider-bottom-1710735021 .shape-fill {
    fill: #f2f2f2;
}

.custom-shape-divider-bottom-1710735021-dark {
    fill: #1E1E1E;
}

/* skill dividers */



.custom-shape-divider-top-1710819519 {
    position: relative;
    top: 0;
    left: 0;
    width: 100%;
    overflow: hidden;
    line-height: 0;
    transform: rotate(180deg);
    
}

.custom-shape-divider-top-1710819519 svg {
    position: relative;
    display: inline-block;
    width: calc(100% + 1.3px);
    height: 154px;
}

.custom-shape-divider-top-1710819519 .shape-fill {
    fill: #f2f2f2;
}
.shape-fill-dark {
    fill: black !important;
 }

.custom-shape-divider-bottom-1710819390 {
    position: relative;
    bottom: 0;
    left: 0;
    width: 100%;
    overflow: hidden;
    line-height: 0;
    transform: rotate(360deg);
    
    
}

.custom-shape-divider-bottom-1710819390 svg {
    position: relative;
    display: inline-block;
    width: calc(100% + 1.3px);
    height: 154px;
    transform: rotateY(180deg);
}

.custom-shape-divider-bottom-1710819390 .shape-fill {
    fill: #f2f2f2;
}

.custom-shape-divider-dark {
    background-color:black !important;
}



.custom-shape-divider-bottom-1710819390-dark3 {
    fill: black !important;
}