/* START OF PRESETS */
*{
    padding: 0;
    margin: 0;
    box-sizing: border-box;
}
:root{
    --mainColor:#eaeaea;
    --secondaryColor:#fff;
    
    --borderColor:#c1c1c1;
    
    --mainText:black;
    --secondaryText:#4b5156;
    
    --themeDotBorder:#24292e;
    
    --previewBg:rgb(251,248,243,0.8);
    --previewShadow:#f0ead6;
    
    --buttonColor:black;
    
    --linkColor:#17a2b8;

}
html,body{
    scroll-behavior: smooth;
    font-size:16px;
}
body *{
    transition: 0.3s;
}
/* End of Presets */

/* font color,family,style,weight for headings */
h1,h2,h3,h4,h5,h6,strong{
    color: var(--mainText);
    font-family: "Russo One", sans-serif;
    font-weight: 500;
    font-style: normal;
}
/* font size for headings */
h1{font-size: 3.5rem;}
h2{font-size: 2.25rem;}
h3{font-size: 1.75rem;}
h4{font-size: 1.5rem;}
h5{font-size: 1.25rem;}
h6{font-size: 1.0rem;}

/* font color,family,weight and style for all other content on page */
p,li,span,label,input,textarea,td{
    color: var(--secondaryText);
    font-family: "Roboto Mono", monospace;
    font-optical-sizing: auto;
    font-weight: 500;
    font-style: normal;
}
/* general styling for links */
a{
    text-decoration: none;
    color: #17a2b8;
}
/* general styling for lists */
ul{
    list-style: none;
}
/* styling for main-container start */
.main-container{
    width: 90%;
    margin: 0 auto;
}
/* styling for main-container end */

/* Navigation Bar Start */
.nav-wrapper{
    width: 100%;
    height: auto;
    border-bottom: 1px solid var(--borderColor);
    background-color: var(--mainColor);
    padding: 1.5rem 1rem;
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    z-index: 1000;
}
.nav-wrapper .main-container{
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    align-items: center;
}
#navigation li{
    display: inline-block;
    margin-right: 1.25rem;
    font-size: 1.0rem;
}
.dots-wrapper{
    display: flex;
    flex-direction: row;
}
#dot1{
    background-color: #FC6058;
}
#dot2{
    background-color: #FEC02F;
}
#dot3{
    background-color: #2ACA3E;
}
.browser-dot{
    width: 1rem;
    height: 1rem;
    border-radius: 50%;
    background-color: black;
    margin-right: 0.625rem;

    -webkit-box-shadow: -1px 1px 3px -1px rgba(0,0,0,0.75);
    -moz-box-shadow: -1px 1px 3px -1px rgba(0,0,0,0.75);
    box-shadow: -1px 1px 3px -1px rgba(0,0,0,0.75);
}
.hamburger{
    display:none;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    cursor: pointer;
}
.hamburger span{
    width: 1.5rem;
    height: 0.2rem;
    background-color: var(--linkColor);
    margin: 0.25rem 0;
    transition: 0.3s ease-in-out;
}
.hamburger.active span:nth-child(1) {
    transform: rotate(45deg) translate(10px, 10px);
    }
.hamburger.active span:nth-child(2) {
    opacity: 0;
    }
.hamburger.active span:nth-child(3) {
    transform: rotate(-45deg) translate(5.5px, -5.5px);
    }
/* Navigation Bar End */

/* styling for section 1 */
.s1{
    background-color: var(--mainColor);
    border-bottom:var(--borderColor);
    overflow: auto;
} 
/* styling for section 2 */
.s2{
    background-color:var(--secondaryColor);
    border-bottom: 1px solid var(--borderColor);
    overflow: auto;
}
/*  */
.s1 h3:first-of-type, .s2 h3:first-of-type{
    text-align: center;
    margin: auto;
}

/* Greeting Start*/
.greeting-wrapper{
    display: flex;
    justify-content: center;
    align-items: center;
    min-height: 10em;
    margin: 5rem auto 1rem auto;
}
.greeting-wrapper h1{
    text-align: center;
    font-size: 2.5rem;
}
/* Greeting End */


/* Introduction section start */
.intro-wrapper{
    background-color: var(--secondaryColor);
    border: 1px solid var(--borderColor);
    border-radius: 0.3125rem 0.3125rem 0 0;
    
    -webkit-box-shadow: 1px 1px 3px -1px rgba(0,0,0,0.75);
    -moz-box-shadow: 1px 1px 3px -1px rgba(0,0,0,0.75);
    box-shadow: 1px 1px 3px -1px rgba(0,0,0,0.75);

    display: grid;
    grid-template-columns: 1fr 1fr;
    grid-template-areas:
        'left-column right-column'
    ;  
}
/* Introduction Wrapper end */

/* Left Column Start */
.left-column{
    grid-area:left-column;
    padding:3.25rem 0 3.25rem 0;
}
#profile-pic{
    display: block;
    margin: 0 auto;
    height: 18.75rem;
    width: 18.75rem;
    object-fit: cover;
    border: 2px solid var(-- --borderColor);
    border-radius: 1rem;
}
.left-column h5{
    text-align: center;
    margin: 1rem 0;
}
#theme-options-wrapper{
    display: flex;
    flex-direction: row;
    justify-content: center;
    margin: 1rem 0;
}
.theme-dot{
    height: 1.875rem;
    width: 1.875rem;
    margin-right: 0.625rem;

    border: 2px solid var(--themeDotBorder);
    border-radius: 50%;
    background-color: black;
    
    -webkit-box-shadow: -1px 1px 3px -1px rgba(0,0,0,0.75);
    -moz-box-shadow: -1px 1px 3px -1px rgba(0,0,0,0.75);
    box-shadow: -1px 1px 3px -1px rgba(0,0,0,0.75);

    cursor: pointer;
}
.theme-dot:hover{
    border-width: 0.3125rem;
}
#light-mode{
    background-color: #fff;
}
#blue-mode{
    background-color: #192734;
}
#green-mode{
    background-color: #78866b;
}
#purple-mode{
    background-color: #7E4C74;
}
#settings-note{
    font-family: 0.75rem;
    font-style: italic;
    text-align: center;
}

/* Start of Right Column */
.right-column{
    display: grid;
    align-content: center;
    grid-area:right-column;
    padding: 3.125rem 0 3.125rem 0;
}
#preview-shadow{
    background-color: var(--previewShadow);
    width: 18.75rem;
    height: 19.68rem;
    padding: 1.875rem 0 0 1.875rem;
}
#preview{
    width: 18.75rem;
    border: 1.5px solid #17a2b8;
    background-color: var(--previewBg);
    padding: 1.875rem;
    position: relative;
}
#preview h3{
    margin: 1rem auto;
}
.corner{
    height: 0.4375rem;
    width: 0.4375rem;
    border-radius: 50%;
    border: 1.5px solid #17a2b8;
    background-color: #fff;
    position: absolute;
}
#corner-TL{
    top: -0.3125rem;
    left: -0.3125rem;
}
#corner-TR{
    top: -0.3125rem;
    right: -0.3125rem;
}
#corner-BL{
    bottom: -0.3125rem;
    left: -0.3125rem;
}
#corner-BR{
    bottom: -0.3125rem;
    right: -0.3125rem;
}

/* Services section start*/
.services-wrapper{
    display: grid;
    grid-template-columns: minmax(20rem,1fr);
    /* repeat this action right here: auto as many columns as possible
    into this row with minmax saying that the column should never
    be smaller than 320px and if we expand keep stacking the rate
    0f 1fr*/
    justify-content: center;
    align-items: start;
    gap: 0.625rem;
    padding: 3.125rem 0;
}
.about-services h4, .services-table-heading{
    margin-bottom: 1rem;
}
table{
    width: 100%;
    border: 1px solid var(--mainText);
    border-collapse: collapse;
    margin-bottom: 1rem;
}
th{
    color: var(--mainText);
    padding: 1.25rem;
    text-align: center;
    border-bottom: 1px solid var(--mainText);
    border-right: 1px solid var(--mainText);
    font-size: 1.2rem;
    font-weight: 900;

}
td{
    padding: 1.25rem;
    text-align: center;
    border-bottom: 1px solid var(--mainText);
    border-right: 1px solid var(--mainText);
}
/* Services section end */

/* Projects  section start */
.projects{
    padding: 2.0rem 0;
}
.post-wrapper{
    display: grid;
    grid-template-columns: repeat(auto-fit,minmax(20rem,1fr));
    gap: 1.25rem;
    justify-content: center;
    align-content: stretch;
    padding: 1.8rem 0;
}
.post{
    border: 1px solid var(--borderColor);
    -webkit-box-shadow: 1px 1px 3px -1px rgba(0,0,0,0.75);
    -moz-box-shadow: 1px 1px 3px -1px rgba(0,0,0,0.75);
    box-shadow: 1px 1px 3px -1px rgba(0,0,0,0.75);

    display: flex;
    flex-direction: column;
    background-color: var(--secondaryColor);
}
.thumbnail{
    display: block;
    width:100%;
    height:11rem;
    object-fit: cover;
}
.post-preview{
    background-color: var(--secondaryColor);
    padding: 0 1.2rem;
}
.tech-icons{
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: flex-end;
    padding: 0.8rem 0;
}
.tech-icons i{
    font-size: 1.2rem;
    margin-right: 0.6rem;
    color:var(--secondaryText);
}
.post-title{
    color: var(--mainText);
    display: flex;
    flex-direction: column;
    justify-content: start;
    align-items: start;
    padding: 1rem 0;
    height: 6rem;

}
.post-title p, .post-intro{
    font-size: 1.0rem;
    margin: 0;
}
.post-intro{ 
    color: var(--secondaryText);
    padding: 1rem 0;
    height: 15rem;
}
.border-bottom{
    border-bottom: 1px solid var(--borderColor);
}
.post-preview a{
    padding: 1rem 0;
    color:var(--secondaryText);
}
/* PROJECTS SECTION END */

/* PRICING SECTION START */
.pricing .main-container{
    padding: 2rem 0;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: space-between;
    text-align: center;
}
.pricing-table{
    display: grid;
    grid-template-columns: repeat(auto-fit, 20rem);

    align-items: start;
    gap: 1rem;
    justify-content: space-between;
    margin: 2rem 0;
}
.pricing-card{
    padding: 1.5rem;
    border: 1px solid var(--borderColor);
    -webkit-box-shadow: 1px 1px 3px -1px rgba(0,0,0,0.75);
    -moz-box-shadow: 1px 1px 3px -1px rgba(0,0,0,0.75);
    box-shadow: 1px 1px 3px -1px rgba(0,0,0,0.75);

    display: flex;
    flex-direction: column;
    background-color: var(--secondaryColor);
    text-align: left;
    line-height: 1.5;
}
.pricing-card-title{
    font-weight: bold;
}
.pricing-card-price{
    font-weight:900;
    font-size: 1.5rem;
    margin: 1rem 0;
}
.pricing-card-category{
    font-weight: bold;
    margin: 1rem 0;
}
.pricing-card-list{
    list-style-type: disc;
    margin-left: 1.5rem;
}
.pricing-card-list li{
    margin: 1rem 0;
}
/* PRICING SECTION END */

/* Process Section Start */
.process{
    padding:1.0rem;    
}
.process .main-container{
    padding: 1rem 0;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
}
.howiwork-steps{
    display: flex;
    flex-direction: column;
    gap: 1rem;
    margin: 2rem 0;
}
.howiwork-steps-item{
    padding: 1.5rem;
    border: 1px solid var(--borderColor);
    -webkit-box-shadow: 1px 1px 3px -1px rgba(0,0,0,0.75);
    -moz-box-shadow: 1px 1px 3px -1px rgba(0,0,0,0.75);
    box-shadow: 1px 1px 3px -1px rgba(0,0,0,0.75);
}
/* Process Section End */

/* Contact Me Area */
.footer{
    padding: 2.0rem 0;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    align-items: center;
}
.process-followup-text{
    margin: 2rem 0;
    text-align: center;
}
.socials{
    display: grid;
    grid-template-columns: repeat(auto-fit, 9.5rem);
    width: 100%;
    gap: 2rem;
    justify-content: space-between;
}
.social-card i{
    display: block;
    color: var(--secondaryText);
}
.social-card{
    border: 1px solid var(--borderColor);
    border-radius: 0.3rem;
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    align-items: center;
    padding: 0.625rem;
    background-color: var(--previewShadow);
    font-size: 1rem;
}
@media(max-width:1200px){
    .main-container{
        width: 95%; 
    }
}
@media(max-width:800px){
    .main-container{
        width: 90%; 
    }
    .hamburger{
        display: flex;
    }
    
    .navigation{
        /* display: flex; */
        display: none;
        flex-direction: column;
        justify-content: center;
        align-items: center;
        gap: 1rem;
        padding: 1rem 0;
        position: absolute;
        width: 100%;
        
        top: 3.75rem;
        right: 0;
        background-color: var(--mainColor);
    }
    .navigation.active{
        display: flex;
    }
    .greeting-wrapper{
        margin: 7rem auto 1rem auto;
    }
    
    .intro-wrapper{
        padding-bottom: 50px;
        grid-template-columns: 1fr;
        grid-template-areas: 
            'left-column'
            'right-column'
        ;
        height: auto;
        grid-auto-rows: auto;
    }
    .left-column{
        padding: 2rem 0 0.6rem 0;
    }
    .right-column{
        justify-content: center;
        padding: 5px 0 5px 0;
    }
    #preview-shadow{
        width: 250px;
        height: 270px;
        padding: 10px 0 0 10px;
    }
    #preview{
        width: 250px;
        padding: 15px;
    }
    .pricing-table{
    grid-template-columns: 1fr;
    }
    .socials{
    grid-template-columns: 1fr;
    width: 85%;
    }
    .social-card{
        padding: 1rem;
    }
}

@media(max-width:500px){
    .social-img{
        height: auto;
    }
    .socials{
        flex-direction: column;
    }
}

@media(max-width:350px){
    html{
        font-size: 10px;
    }
}