/* CSS GOES HERE */

html {
    scroll-behavior: smooth;
}

body {
    margin: 0;
    padding: 0;
    border: 0;
    background-color:#FCE7FF;
    color: #400647;
    font-size: 100%;
    vertical-align: baseline;
    
}

.body-dark-mode {
color:#FCE7FF;
background-color: #400647;
}

.darkmode_button{
    background-image: url(images/moon.svg);
    background-repeat: no-repeat;
    height: 100px;
    width: 100px;
    position: fixed;
    z-index: 9999;
    margin-top: 570px !important;
    right: 20px;
}

.light-mode {
    background-image: url(images/sun.svg);

    
}

section {
    margin-top: 100px;
    margin-bottom: auto;
    gap: none;
   

}
h2 {
    font-size: 90px;
    color: #400647;
}

.h2-dark {
    color: #FCE7FF !important; 

}

h3 {
    color: inherit;
    font-family: "Literata", serif;
    font-optical-sizing: auto;
    font-weight: 700;
    font-style: normal;
    font-size: 26px;
    margin-top: 20px;
    margin-bottom: 10px;
}

p {
    font-family: "Literata", serif;
    font-optical-sizing: auto;
    font-weight: 500;
    font-style: normal;
     font-size: 24px;
    text-align: left;
    margin-top: 0;

}

.intro{
    width: 500px;
}

.work_sub {
text-align: center;
font-family: "Literata", serif;
    font-optical-sizing: auto;
    font-weight: 300;
    font-style: normal;
     font-size: 20px !important;
     margin-bottom: 30px;
     margin-top: 15px;
   
}

.skill_text{
    font-size: 28px;
}

h2,footer, a.navlink {
    font-family: "sirenia", sans-serif;
    font-weight: 500;
    font-style: normal;
}


.container {
    width: 100%;
    max-width: 1300px;
    text-align: center;
    align-items: center;
    align-content: center;
    margin: auto;

}



.navlink {
    font-family: "sirenia", sans-serif;
    font-weight: 500;
    font-style: normal;
    font-size: 24px;
    text-decoration: none;
    padding: 0px;
    width: auto;
    height: 32px;
    left: 800px;
    color: #FCE7FF;
    margin-top: 10px;
}

.navlink-dark{
    color: #400647;
}

.flex_container {
    display: flex;
    flex-direction:row;
    justify-content:space-between ;
    align-content: center;
    align-items: center;
    margin-left:20px ;
    margin-right: 20px;

}

#main_nav {
    width:100%;
height: 70px;
background-color: #400647;
align-items: center;
padding-top: 10px;
position: fixed;
top: 0;
z-index: 9998;
}

.main_nav_dark {
    background-color: #E0B1E6 !important;
}

.logo {
    background-image: url(images/logo_light.svg);
    background-repeat: no-repeat;
    height: 50px;
    width: 100%;
}
.logo-dark {
    background-image: url(images/dark-logo.svg);
    background-repeat: no-repeat;
    width: 100%;
}
.mobile_menu {
    width: 36px;
    height: 36px;
    position: fixed;
    top: 10px;
    right: 30px;
    background-image: url(images/mobile_nav.svg);
    background-repeat: no-repeat;
    background-position: center;
    display: none;
    z-index: 9999;
}

.mobile-menu-popout{
    position: fixed;
    top: 0;
    right:-180px;
    background-color: #400647;
    z-index: 999;
    padding: 100px 40px 40px;
    width: 100px;
    height: 100%;
    transition: all 300ms;
    display: none;
}

.mobile-menu-popout-dark {
    background-color: #E0B1E6;
}
.open{
    right: 0px;
}

.close {
    background-image: url(images/close.svg);
    color: #FCE7FF;
}
.mobile-column{
    display: flex;
    flex-direction: column;
    align-items: end;
}



.flex_nav {
    display:flex;
    flex-direction: row;
    align-items: center;
    gap: 60px;
}


.row{
    display: flex;
    flex-direction: row;
    justify-content: center;
   margin-left: auto;
   margin-right: auto;
    gap: 200px;
    width: 100%;

}

.header {
    margin-top: 100px;
    width: auto;
    size: cover;
    margin-left: 10px;
    margin-right: 10px;
}

.grid {
    display: flex;
    flex-direction: column;
    width: auto;
    height: 660px;
    align-content: center;
    margin-left: 10px;
    margin-right: 10px;
    align-content: center;
}

.sq_row1 {
    display: flex;
    flex: 1;
    flex-direction: row;
    gap: 10px;
   
    
}

.sq_row2 {
    padding-top: 10px;
    padding-bottom: 10px;
    display: flex;
    flex-direction: row;
    flex: 1;
    gap: 10px;
    
}
.sq_row3 {
    display: flex;
    flex-direction: row;
    flex: 1;
    gap: 10px;
    
}

.square {
    position: relative;
    width: 50%;
background-color: #C58DCC;
font-family: "sirenia", sans-serif;
    font-weight: 500;
    font-style: normal;
    font-size: 42px;
    text-decoration: none;
display: flex;
justify-content: center;
align-items: center;

}

.square::after {
    display: block;
    padding-bottom: 100%;
}

.c1 {
    background-color:#904B99;
    
}

.c2 {
    background-color: #C58DCC;
}

.c3 {
    background-color: #E0B1E6;
}

.c4 {
    background-color: #703778;
    color: #FCE7FF;
}

.header_row2 {
    display: flex;
    flex-direction: row;
    gap: 14px;
    width: 100%;  
}

.square11 {
    width: 100%;
    max-width: 200px;
    height: 200px;
    background: #C58DCC;
    
    }



    @keyframes enlarge {
    
        0% {transform: scale(1); z-index: 1;}
        50% {transform: scale(1.2); z-index: 999;}
        100% {transform: scale(1); z-index: 1;}
    }

    .Hi {
        animation-name: enlarge;
        animation-duration: 1s;
    }

    .My {
        animation-name: enlarge;
        animation-duration: 1s;
        animation-delay: 0.7s; 
    }

    .Name {
        animation-name: enlarge;
        animation-duration: 1s;
        animation-delay: 1.5s;  
    }

    .Is {
        animation-name: enlarge;
        animation-duration: 1s;
        animation-delay: 2s; 
    }

    .Ainura {
        animation-name: enlarge;
        animation-duration: 1s;
        animation-delay: 2.5s; 
    }

    .Welcome {
        animation-name: enlarge;
        animation-duration: 1s;
        animation-delay: 3s; 
    }

    .To {
        animation-name: enlarge;
        animation-duration: 1s;
        animation-delay: 3.5s; 
    }

    .My2 {
        animation-name: enlarge;
        animation-duration: 1s;
        animation-delay: 4s; 
    }

    .Page {
        animation-name: enlarge;
        animation-duration: 1s;
        animation-delay: 4.5s; 
    }

.about_row{
 display: flex;
flex-direction: row;
justify-content: center;
justify-items: center;
gap: 150px;
width: 100%;
max-width: 1100px;
margin: auto;

}

.headshot{
position: relative;
z-index: 1;
width: 400px;
height: 400px;
}


.photo{
    position: relative;
}

.photo_frame{
box-sizing: border-box;
border-style: solid;
position:absolute;

width:400px;
height: 400px;
left: -40px;
top: 40px;
border: 6px solid #904B99;
z-index: -1;

}

#skills {
    align-content: center;
}
.skill_block {
    margin-top: 50px;
    align-items: center;


}

.skill_row {
    display: flex;
    flex-direction: column;
    gap: 10px;
    width: 100%;
    max-width: 150px;
    align-items: center;
    align-content: center;


} 

.skillsub {
    padding-bottom: 50px;
}


.skill_image {
    size: 100%;
    width: 138px;
    height: 138px;
}


#gallery {
    align-content: center;
    align-items: center;
   
    
}

.gallery_block {
background-color: #C58DCC;
width: 100%;
max-width: 630px;
height: 500px;
margin-left: auto;
margin-right: auto;

}

.gallery_dark {
    background-color: #904B99;
}

.column {
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    align-content: center;
    margin-left: auto;
    margin-right: auto;
    gap: 20px;
}

.dark_shadow {
    margin-top: 20px;
    filter: drop-shadow(5px 5px 4px rgba(87, 34, 94, 0.5));

}

.img_gallery{
    width: 500px;
    height: 350px;
    margin-top: 20px;
    filter: drop-shadow(5px 5px 4px rgba(87, 34, 94, 0.5));
}


.faq_title{
    color: #E0B1E6;
}

.faqtitle_dark {
    color: #400647 !important;
}

.answer{
    font-family: "Literata", serif;
    font-optical-sizing: auto;
    font-weight: 500;
    font-style: normal;
     font-size: 18px;
     padding-left: 80px;
     padding-right: 80px;
     text-align: start;
     
  
      
}


#faqs{
    background-color: #904B99;
    padding-bottom: 50px;
    

}

.faqs_dark {
    background-color: #C58DCC !important;
}
.faq_flex{
    display: flex;
    flex-direction: column;
    align-content: center;
    column-gap: 50px;
    text-align: left;
    margin-left: 50px;
    margin-right: 50px ;
}

.q_box{
 background-color: #E0B1E6;
 height: 60px;
 overflow: hidden;
 padding-bottom: 20px;
 margin-bottom: 50px;
 width: 100%;
 max-width: 800px;
 margin-left: auto;
 margin-right: auto;
 transition: all 400ms;
}

.q_box:hover{
    background-color:#FCE7FF;
}

.q_box:active {
    background-color: #E0B1E6;
}

.faq-open {
    height: auto;
}

.qbox_dark{
    background-color: #400647 !important;
}

.qbox_dark:hover{
    background-color: #904B99 !important;

}

.qbox_dark:active{
    background-color: #400647;
}
.question {
   display: flex; 
   justify-content: space-between;
   font-size: 23px !important;
   margin-top: 20px;
   text-align: center;
    margin-bottom: 30px;
    padding-left: 80px;
    
  
    
}

#contact {
    background-color: #E0B1E6;
    margin: 0;
    align-items: center;
   align-content: center;
   padding-bottom: 100px;
   padding-top: 70px;
}

.contact_dark {
    background-color: #703778 !important;
}

.connect_title {
    margin: 0px !important;
}

.main_form {
    display: flex;
    flex-direction: column;
    align-items: center;
    padding-top: 50px;
}

form {
    background-color: #FCE7FF;
    height: 100%;
    width: 100%;
    padding-bottom: 50px;
    max-width: 800px;
    margin-left: auto;
    margin-right: auto;
    margin-top: 20px;
   
}

.form_dark {
    background-color: #400647 !important;
}

.form_width {
    width: 550px;
    height: 70px;
    gap: 50px;
}

.form_1 {
    display: flex;
    flex-direction: column;
    align-items: baseline;
    

}

label {
    font-family: "Literata", serif;
    font-optical-sizing: auto;
    font-weight: 500;
    font-style: normal;
     font-size: 16px; 
     color: #400647;
     margin-bottom: 10px;
    
}

.label_dark {
    color: #FCE7FF;
}
input[type=text] {
    background-color: #C58DCC;
    border-color: #400647;
    border-width: 2px;
    border-style: solid;
    margin-bottom: 50px;
    padding-left: 10px;

}



::placeholder {
    color: #FCE7FF;
    font-family: "Literata", serif;
    font-optical-sizing: auto;
    font-weight: 300;
    font-style: normal;
     font-size: 14px; 
}

input[type=email] {
    background-color: #C58DCC;
    border-color: #400647;
    border-width: 2px;
    border-style: solid;
    margin-bottom: 50px;
    padding-left: 10px;
}

 .input_dark {
    border-color: #FCE7FF !important;
}


.width_message {
    width: 550px;
    height: 150px;
    background-color: #C58DCC;
    border-color: #400647;
    border-style: solid;
    border-width: 2px;
    align-items: center;
    padding-left: 10px;
    padding-top: 10px;

}

.message_dark {
    border-color: #FCE7FF !important;
}

.button-primary {
    background-color: #703778;
    color: #FCE7FF;
    width: 170px;
    height: 50px;
    margin-top: 40px;
    border: #400647;
    font-family: "Literata", serif;
    font-optical-sizing: auto;
    font-weight: 500;
    font-style: normal;
     font-size: 18px !important;
    box-shadow: 5px 5px 5px rgba(64, 6, 71, 0.54);


}

.button-primary:hover {
    background-color: #FCE7FF;
    color: #400647;
    transition: all 300ms;
}

.send_dark {
    background-color: #FCE7FF;
    color: #400647 !important;
    box-shadow: 5px 5px 4px rgba(252, 231, 255, 0.55);
    font-weight: 700;
}

.send_dark:hover {
    background-color: #C58DCC;
}

footer {
    background-color:#400647;
    color: #fff;
    align-content: center ;
    height: 40px;
    align-items: center;
    padding: 10 0 10 0;
}

.footer_dark {
    background-color: #E0B1E6 ;
    color: #400647;
}

.footer1 {
text-align: center;
font-size: 16px;
margin: 0px;
}