/* css variable */
:root { 
    --maincolor:#eaeaea;
    --secondarycolor:#fff;

    --mainText: black;
    --secondaryText:#4b5156; 

    --bordercolor:#c1c1c1;

    --mainShadow: 20px 20px 60px #c7c7c7, 
             -20px -20px 60px #ffffff;
             
    --animationColor:rgba(77, 77, 77, 0.719);

    --theme-border:#24292e;

    --previewBg:rgb(251, 249, 243, 0.8);

    --preview-shadow:#f0ead6;

    --buttonColor:black;

    --introColor:black;
    --box-color: rgba(0, 0, 0, 0.575);
    --text-typing: #17a2b8;
}

/* General styles  */
html body {
    padding: 0;
    margin: 0;
}

body * {
    transition: 0.3s;
}


h1, h2, h3, h4, h5, h6, strong {
    color: var(--mainText);
    font-family: 'Russo One', cursive, sans-serif;
    font-weight: 500;
}

p, li, span, label, input, textarea {
    color: var(--secondaryText);
    list-style: none;
    font-family: 'Roboto mono', monospace;

}
a {
    text-decoration: none;
    color: var(--text-typing);
}


h1 {font-size: 56px;}
h2 {font-size: 36px;}
h3 {font-size: 28px;}
h4 {font-size: 24px;}
h5 {font-size: 20px;}
h6 {font-size: 16px;}

.btn {
    display: inline-block;
    padding: .5rem 1rem;
    border-radius: 2px;
}

/* section styles  */

.style1 {
    background-color: var(--maincolor);
    border-bottom:1px solid var(--bordercolor);
    overflow: auto;

}

.style2 {
    background-color: var(--secondarycolor);
    border-bottom:1px solid var(--bordercolor);
    overflow: auto;
}

/* content of sectiones / container */

.container {
    width: 1200px;
    margin: 0 auto;
} 

/* Using css grid to style the content */
.text-typing {
    display: grid;
    text-align: center;
    align-content: center;
    min-height: 8em;
}

.style1 .text-typing h2 {
    /* width: fit-content; */
    font-size: 2rem;
    margin-top: 20px;
    margin-bottom: 5px;
}

.style1 .text-typing h1 {
    font-size: 2.5rem;
    margin-top: 10px;
    margin-bottom: 20px;
}
.style1 .text-typing .typing-text {
    color: var(--text-typing);
    font-family: cursive, 'Russo One', sans-serif;
}

.intro-wrapper {
    background-color: var(--secondarycolor);
    border:1px solid var(--bordercolor);
    border-radius: 5px 5px 0 0;
    box-shadow: var(--mainShadow);

    /* grid area */
    display: grid;
    grid-template-columns: 1fr 1fr;
    grid-template-rows: 3em 25em;
    grid-template-areas: 
        'nav-wrapper nav-wrapper'  
        'left-column right-column'   
    ;
}
/* start nav-bar */
.nav-wrapper {
    grid-area: nav-wrapper;
    border-bottom: 1px solid var(--bordercolor);
    display: flex;
    justify-content: space-between;
    align-items: center;
    background-color: var(--maincolor);
    border-radius: 5px 5px 0 0;
}
/* Nav-bar dots  */
.dots-wrapper {
    display: flex;
    padding: 10px;

}

#navigation {
    margin: 0;
    padding: 10px;
}
#navigation li {
    list-style: none;
    padding: 10px;
    margin-right: 5px;
    display: inline-block;
    cursor: pointer;
}
#navigation li a{
    font-weight: 700;
}



#dot-1 {
    background-color: #Fc6058;
}

#dot-2 {
    background-color: #Fec02f;
}

#dot-3 {
    background-color: #2aca3e;
}

.brawser-dots {
    background-color: black;
    height: 15px;
    width: 15px;
    border-radius: 50%;
    margin: 5px;
    box-shadow: var(--preview-shadow);
}
/* End nav-bar / left and right   */

/* End nav-bar / left and right   */
.left-colomn {
    grid-area: left-column;
    padding-top: 20px;
    padding-bottom: 20px;
   
 }


#profil-pic {
    display: block;
    margin: 0 auto;
    height: 200px;
    width: 200px;
    object-fit: cover;  
    /* border: 3px solid var(--bordercolor); */
}
/* Start theme color changer */
.theme-dot {
    height: 30px;
    width: 30px;
    border-radius: 50%;
    box-shadow: var(--preview-shadow);
    cursor: pointer;
    background-color: var(--secondaryText);
    margin: 5px;
    border: 2px solid var(--bordercolor );
}

.theme-dot:hover {
    border-width: 5px;
}

#light-mode {
    background-color: #fff;
}
#blue-mode {
    background-color: #192734;
}
#green-mode {
    background-color: #78866b;
}
#purple-mode {
    background-color: #7e4c74;
}

#stings-note {
    font-size: 12px;
    font-style: italic;
    text-align: center;
}

.theme-option-wrapper {
    display: flex;
    justify-content: center;
}

 /* End left part  */

 /* Star right column  */
 .right-column {
     grid-area: right-column;
     padding-top: 50px;
     padding-bottom: 50px;
     display: grid;
     align-content: center;

 }
 /* Preview shadow  */
 #preview-shadow {
     background-color: var(--preview-shadow);
     width: 300px;
     height: 180px;
     padding-left: 30px;
     padding-top: 30px;
 }


#preview {
    width: 300px;
    border: 1.5px solid #17a2b8;
    background-color: var(--previewBg);
    opacity: .8;
    padding: 15px; 
    position: relative;
}
.conner {
    width: 7px;
    height: 7px;
    border-radius: 50px;
    border: 1.5px solid #17a2b8;
    background-color: #fff;
    position: absolute;
}

#conner-tl {
    top: -5px;
    left: -5px;
}

#conner-tr {
    top: -5px;
    right: -5px
}

#conner-bl {
    bottom: -5px;
    right: -5px;
}

#conner-br {
    bottom: -5px;
    left: -5px;
}
 /* End right column */

/* End section number 1 style1 */


/* Start section number 2 style2 */
.about-wrapper {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
    padding-bottom: 50px;
    padding-top: 50px;
    gap: 100px;
   
}

#skills {
    display: flex;
    justify-content: space-evenly;
    background-color: var(--preview-shadow);
}
.social-links {
    display: grid;
    justify-content: center;
    text-align: center;
}

#social_img {
    width: 100%;
    height: 400px;
    margin-top: 50px;
}
/* End section number 2 style2 */

/* Start section number 1 style1 */
.post-wrapper {
    display: grid;
    grid-template-columns: repeat(auto-fit, 350px);
    gap: 20px;
    justify-content: center;
    padding-bottom: 20px;
   
}

.post-container{
    border:1px solid var(--bordercolor);
    box-shadow: -2px 7px 21px -9px rgba(0,0,0,0.75);
}

.thunbmail {
    display: block;
    width: 100%;
    height: 200px;
    object-fit: cover;
} 

.container .post-container img {
    transition: transform .5s ease;
}
.container .post-container img:hover {
    transform: scale(1.5);
}
.post-preview {
    background-color: #fff;
    padding: 15px;
    border-top: 1px solid var(--bordercolor);
}
.post-title {
    color: black;
    margin: 0;
}

.post-intro {
    color: #4b5156;
    font-size: 14px;
}
/* End section number 1 style1 */

/* Start Contact section  */
.contact {
    display: flex;
    align-items: center;
    justify-content: center;
    flex-direction: column;
    text-align: center;
    width: 100%;
    height: 40vh;
}
.contact .contact-links {
    display: flex;
    align-items: center;
    justify-content: center;
    flex-wrap: wrap;
    width: 100%;
    max-width: 980px;
}
.contact-links .contact-details:hover {
    transform: translateY(8px);
}
.contact .contact-details {
    font-size: 2rem;
    text-shadow: 2px 2px 1px #1f1f1f;
    transition: transform .3s ease-out;
}

footer {
    width: 100%;
    height: 50px;
    background-color: #000;
    display: flex;
    align-items: center;
    justify-content: center;
    bottom: 0;
}
footer > p {
    color: #fff;
    padding: .7em;
    font-size: 1em;
}
/* .style1 {
    overflow: hidden;
    border-bottom: none;
} */

/* End section number 2 style2 */



@media screen and (max-width: 1200px) {
    .container {
        width: 95%;
    }
}

@media screen and (max-width: 800px) {

    .intro-wrapper {

        grid-template-columns: 1fr;
        grid-template-areas: 
            'nav-wrapper' 
            'left-column'  
            'right-column'  
        ;
    }
    .right-column {
        justify-content: center;
    }
}

@media screen and (max-width: 500px){
    .right-column {
        margin-right: 20px;
    }
	#preview-shadow {
		max-width: 280px;
		height: 180px;
		padding-left: 15px;
		padding-top: 15px;
	}


	#preview {
		width: 280px;
        padding: .6rem;

	}
    #preview p {
		padding-right: 10px;

	}
    .container .post-wrapper{
        display: grid;
        grid-template-columns: repeat(auto-fit, 340px);
    }
    #social_img{
        margin-top: 0px;
    }
    .style2 .container .row {
        margin: 8px;
    }
    

}

@media screen and (max-width: 484px){
    .nav-wrapper {
        background-color: #333;
    }
	.nav-wrapper #navigation{
        display: none;
    }
    .nav-wrapper #navigation  a {
        color: white;
        padding: 14px 16px;
        text-decoration: none;
        font-size: 17px;
        display: block;
    }
    .contact .contact-links {
        flex-direction: column;
    }
    .contact .contact-details {
        font-size: 1.5rem;
    }
}