/* GENERAL */


@import url('https://fonts.googleapis.com/css2?family=Poppins:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;0,800;0,900;1,100;1,200;1,300;1,400;1,500;1,600;1,700;1,800;1,900&display=swap');

*{
    margin:0;
    padding:0;
}
body{
    font-family : "Poppins", sans-serif;
}

html{
    scroll-behavior: smooth;
}

/*
p{
    color: rgb(85, 85, 85);
}
*/

p{
    color: brown;
}

h1, h2, h3{
    color: black;
}

/* TRANSITION */
/* This is generally used when changing through links or pages */
a, .btn{
    transition: all 300ms ease;
}

/* NAVIGATION */
nav, .nav-links{
    display: flex; /* Note that when we flex a tag, then all the elements in it will be flexed horizontally */
}

nav{
    justify-content: space-around;
    align-items: center;
    height: 17vh;
}

.nav-links{
    gap: 2rem;  /* rem is related to pixels in Front End Development */
    list-style: none;
    font-size: 1.5rem;
}

a{
    color : brown;
    text-decoration: none;
    text-decoration-color: white;
}

/* Then we hover the links */
a:hover{
    color :grey;
    text-decoration: underline;
    /* Then to space the underline. That is to add some space to it*/
    text-underline-offset: 1rem;
    text-decoration-color: rgb(181, 181, 181);
}

.logo{
    font-size: 2rem;
    color:brown;
}

.logo:hover{
    /* This prevents our cursor from changing we hover the name */
    /* Note that this type of operation is already available by default for the links that we have */
    cursor: default;

}

/* HAMBURGER MENU */
#hamburger-nav{
    display: none; /* This means when we are in a desktop view, the hamburger doesn't show up */
}

.hamburger-menu{
    position:relative;
    display: inline-block;
}

.hamburger-icon{
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    height:24px;
    width:30px;
    cursor : pointer;
}

.hamburger-icon span{
    width: 100%;
    height: 2px;
    background-color: black;
    transition : all 0.3 ease-in-out; /* This is what makes the hamburger menu turn to an "X" when we click it, Then when we click the "X", it closes */
}

.menu-links{
    position: absolute;
    top:100%;
    right:0;
    background-color: white;
    width: fit-content;
    max-height: 0; /*This is what hides the links that we have */
    overflow: hidden; /* this is used to prevent a confusion with other tags */
    transition: all 0.3 ease-in-out;
}

.menu-links a{
    display: block;
    padding: 10px;
    text-align: center;
    font-size: 1.5rem;
    color:black;
    text-decoration: none;
    transition: all 0.3 ease-in-out;
}

.menu-links li{
    list-style: none;
}

/* Note that this is because of the JavaScript that we had built
    Note that the open class will apply only when the open class has been added using the Java Script
 */
.menu-links.open{
    max-height: 300px;
}

.hamburger-icon.open span:first-child { /* This is used for the first span (child) */
    /* Then to rotate and move slightly in both X and Y direction */
    transform : rotate(45deg) translate(10px, 5px)
}

/* Then for the second child */
.hamburger-icon.open span:nth-child(2) {
    opacity: 0; /* This is used to remove the second child completely */
}

/* This is used to make some changes to the last child */
.hamburger-icon.open span:last-child {
    transform : rotate(-45deg) translate(10px, -5px)
}

.hamburger-icon span:first-child{
    transform: none;
}

.hamburger-icon span:first-child{
    opacity: 1;
}

.hamburger-icon span:first-child{
    transform: none;
}


/* SECTIONS */
section {
    padding-top : 4vh;
    height:96vh;
    margin : 0 10rem;
    box-sizing: border-box;
    min-height: fit-content;

}
.section-container{
    display:flex;
}

/* PROFILE SECTION */
#profile{
    display:flex;
    justify-content: center;
    gap: 5rem;
    height: 80vh;
}
.section__pic-container{
    display:flex;
    height: 400px;
    width: 400px;
    margin : auto 0;
   
   
}
#section__pic-container_special{
    background-color: lightgray;
    justify-content: center;
    border-radius: 50%;
    overflow: hidden; /* Ensure the image doesn't overflow the container */
}

.section__text{
    align-self: center;
    text-align: center;
}

.section__text p{
    font-weight: 600;
}

.section__text__p1{
    text-align: center;
}

.section__text__p2{
    font-size:1.75rem;
    margin-bottom :1rem;
}

.title{
    font-size: 3rem;
    text-align: center;
    margin-bottom: 3rem;
}

#socials-container{
    display: flex;
    justify-content: center;
    margin-top: 1rem;
    gap : 1rem;
}

/** ICONS **/
.icon{
    cursor: pointer;
    height: 2rem;
}

/** BUTTONS **/
.btn-container{
    display: flex;
    justify-content: center;
    gap: 1rem;
}

.btn{
    font-weight: 600;
    transition: all 300ms ease;
    padding: 1rem;
    width: 8rem;
    border-radius : 2rem;
}

.btn-color-1,
.btn-color-2{
    border: rgb(53,53,53) 0.1rem solid;
}

.btn-color-1:hover,
.btn-color-2:hover{
    cursor: pointer;
}

.btn-color-1,
.btn-color-2:hover{
    background: rgb(53,53,53);
    color:white;
}

.btn-color-1:hover{
    background: rgb(0,0,0);
}

.btn-color-2{
    background: none;
}

.btn-color-2:hover{
    border: rgb(255, 255, 255), 0.1rem solid;
}

.btn-container{
    gap: 1rem;
}

/** ABOUT SECTION **/
#about{
    position: relative;
}
.about-containers{
    gap:2rem;
    margin-bottom: 2rem;
    margin-top: 2rem;
    
}

.about-details-container{
    justify-content: center;
    flex-direction: column;
}


.about-containers, .about-details-container{
    display: flex;
   
}

.about-pic{
    border-radius : 2rem;


}
.arrow{
    position : absolute; /* This is to show that the positioning is absolute to the section instead */
    right: -5rem;
    bottom : 2.5rem;
}
.details-container{
    padding: 1.5rem;
    flex : 1;
    background : white;
    border-radius : 2rem;
    border: rgb(53, 53, 53) 0.1rem solid;
    border-color: rgb(163,163, 163);
   /* text-align : center; // Note */
}

.section-container{
    gap: 4rem;
    height : 80%;
}
#section__pic-container_special1{
    margin-top: -5%;
    width: 400px;
    height: 400px;
   
}


/**
EXPERIENCE SECTION **/

#experience {
    position: relative;
  
}
.experience-sub-title{
    color:rgb(85, 85, 85);
    font-weight: 600;
    font-size: 1.75rem;
    margin-bottom: 2rem;
    text-align: center;
}
.experience-details-container{
    display: flex;
    justify-content: center;
    flex-direction: column;
}

/*
.article-container{
    display: grid;
    grid-template-columns: auto auto;
}
*/
.article-container{
    display: flex;
    text-align: initial;
    flex-wrap: wrap;
    flex-direction: row;
    gap:2.5rem;
    justify-content: space-around;
}

article{
    display: flex;
    width: 10rem;
    justify-content: space-around;
    gap:0.5rem;
}

article .icon{
    cursor: default;
}

/** PROJECT SECTION */



#projects {
    position: relative;
  }
/*
#special-about-containers{
    flex-direction: column;
}
*/

.color-container{
    border-color : rgb(163,163,163);
    background: rgb(250, 250, 250);
}

.project-img{
    border-radius: 2rem;
    width: 90%;
    height: 50vh;
}

.project-title{
    margin : 1rem;
    color:black;
}

.project-btn {
    color: black;
    border-color: rgb(163,163, 163);
}

/** CONTACT **/

#contact{
    display: flex;
    justify-content: center;
    flex-direction: column;
    height: 70vh;
}

.contact-info-upper-container{
    display:flex;
    justify-content: center;
    border-radius: 2rem;
    border: rgb(53, 53, 53) 0.1rem solid;
    border-color: rgb(163, 163, 163);
    background: rgb(250, 250, 250);
    margin: 2rem auto;
    padding: 0.5rem;
}

.contact-info-container{
    display:flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    margin : 1rem;
}

.contact-info-container p{
    font-size : larger;
}

.contact-icon{
    cursor: default; /* This is used to assume that the icons themselves are not clickable */
}

.email-icon{
    height:2.5rem;
}

/** FOOTER SECTION **/
footer{
    height: 26vh;
    margin : 0 1rem;

}

footer p{
    text-align: center;
}