/*Change the colors*/
:root{
    --green:#949D6A;
    --yellow:#F6CA83;
    --black:#2B1600;
    --light-color:#666;
    --white:#EBE9E2;
    --light-white:#FCF9F0;
    --orange:#2fa3e1;
    --box-shadow:0 .5rem 1.5rem rgba(0, 0, 0, 0.317);
}

*{
    text-decoration: none;
    box-sizing: border-box;
    outline: none; border: none;
    text-transform: capitalize;
    transition: all .2s linear;
    font-family: 'Source Sans Pro', sans-serif;
}

html{
    font-size:62.5%;
    overflow-x:hidden;
    scroll-padding-top:5.5rem ;
    scroll-behavior: smooth;
    background: #FCF9F0;
    font-family: 'Source Sans Pro', sans-serif;
}

section{
    padding: 2rem 9%;
}

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

section:nth-child(odd){
    background: #F6CA83;
    
}

header{
    position:fixed;
    top:0; left: 0; right:0;
    /*change the color of nav bar*/
    background: #949D6A;
    padding:1rem 7%;
    display: flex;
    align-items: center;
    justify-content: space-between;
    z-index:1000;
    box-shadow: var(--box-shadow);
}

.header-container {
    display: flex;
    align-items: center; /* Center items vertically */
    justify-content:space-between; /* Space items out */
    padding:1rem; /* Adjust as needed */
}

header .logo{
    /*the color of Sabine Portfolio + size change to color scheme later*/
    color:#F2E3BC;
    font-size:2.5rem;
    font-weight: bolder;
    margin-left: -2cm;
    margin-bottom: .5rem;
}

/*twee type vibe*/


.header-container .navbar{
    display: flex;
    gap: 1rem;
    /*make it be in the middle*/
    margin-left: -4.5cm;
}

.header-container .navbar a{
    /*this changes the size of the hot bar menu lolool and color*/
    font-size:1.9rem;
    border-radius: .5rem;
    padding: .5rem 1.5rem;
    font-weight: bolder;
    color:#F2E3BC;
    margin-bottom: .5rem;
}


/* Icons styling */
.header-container .icons {
    display: flex;
    gap: 1rem; /* Adjust spacing between icons */
    align-items: center;
}


.header-container .icons i {
    font-size: 1.8rem; /* Adjust size as needed */
    color: #ffffff; /* Adjust color if needed */
}

header .navbar a:hover{
    color:#ffffff;
    background:#96BBBB;
}

header .icons i,
header .icons a{
    /*change the curosor if prefered*/
    cursor:pointer;
}


/*Section Home*/
.home .content h3{
    margin-top: 4cm;
    text-align:center;
    font-size: 28px;
    margin-bottom: 1rem;
    color:#9CB380;
    margin-left: -4.5cm;
}

.home .content h1{
    text-align: center;
    margin-bottom: 3cm;
    font-size: 64px;
    color:#6B6054;
    margin-left: -4cm;
}

.home .content p{
    text-align: center;
    margin-top: -2.5cm;
    margin-bottom: 3cm;
    font-size: 16px;
    color:#9CAFB7;
    font-weight: bold;
    margin-left: -4cm;
}



.home {
    display: flex; /* Use flexbox for layout */
    align-items: center; /* Vertically center items within the section */
    justify-content: space-between; /* Space out content and image */
}

/* Style for the content section */
.home .content {
    flex: 1; /* Allows the content to take available space */
    text-align: center; /* Center-aligns text content */
    margin-bottom: -1cm;
}

.home .image {
    display: flex; /* Allows for proper alignment of the image */
    justify-content: flex-end; /* Aligns the image to the right */
    align-items: center; /* Centers the image vertically within the container */
}

.profile{
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    height: 570px;
}

/* Style for the circular image */
.home .image img {
    margin-top: 4cm;
    width: 335px; 
    height: 335px; 
    border-radius: 50%; /* Makes the image circular */
    object-fit: cover; /* Ensures image covers the circular area */
    display: block; /* Avoids extra space below the image */
    margin-left: -3.5cm;
    margin-right: 1cm;
    margin-bottom: 1cm;
}

.fab.fa-linkedin{
    font-size: 25px;
    margin-bottom: 11cm;
    color: #9CAFB7;
}

/*Section Home END*/

/*About section*/

.About h3{
    color:#ffffff;
    text-align: center;
    font-size: 3.5rem;
    font-weight: bold;
}


.About .content{
    margin-top: 1cm;
}


.About p{
    font-size:1.5rem;
    color: #6B6054;
}



.About2 {
    display: flex;
    flex-direction: column; /* Stack the groups vertically */
    align-items: flex-end; /* Align groups to the right */
    width: 100%;
  }

.About .header6{
    text-decoration:underline;
    color: #ffffff;
    font-weight: bold;
    font-size: 2.5rem;
    margin-bottom: 12px;
}

.About .header7{
    text-align: center;
    margin-left: 20cm;
    margin-top: -8.65cm;
    text-decoration:underline;
    color: #ffffff;
    font-weight: bold;
    font-size: 2.5rem;
    margin-bottom: 12px;
  }
  

.skills-group1 {
    margin-right: 1.5cm;
    margin-top: 1rem;
    display: flex; /* Use flex for each group */
    justify-content: flex-end; /* Align items to the right */
  }

.skills-group2 {
    margin-right: 1cm;
    margin-top: 1rem;
    margin-bottom: 4cm;
    display: flex; /* Use flex for each group */
    justify-content: flex-end; /* Align items to the right */
  }
  
  
.skills {
    width: 35%; /* Width for each skill */
    margin: 5px; /* Add spacing */
  }

.About .skills{
    padding: 1rem 2rem;
    margin-bottom: 2.5rem;
    margin-right: 1.5rem;
    font-size: 1.6rem;
    
    background: rgb(247, 212, 136);
    border-radius: 5px;
    font-weight: 600;
    color: #A44A3F;
}

/*About section END F0CF65*/

/*Project Section*/
.Projects .content h3{
    text-align: center;
    color: #F0CF65;
    font-size: 3.5rem;
    font-weight: bold;
    
}


.Projects hr{
    margin-bottom: 1cm;
}

/*Changes font color*/
.Projects .content .card{
    color: #2B1600;
}

/*Size of the subtitle basicly*/
.Projects .content .card-title{
    font-size:15px;
    font-weight: bold;
}

/*The actual projects*/


.Projects .content .card.card1{
    width: 100%;
    height: 115%;
    background-color: #EDB72C;
    color: #ffffff;
    font-size: 12px;

}


.Projects .content .card.card2{
    width: 101%;
    height: 115%;
    background-color: #9CB380;
    color: #ffffff;
    font-size: 12px;
}

.Projects .content .card.card3{
    width: 101%;
    height: 115%;
    background-color: #9CAFB7;
    color: #ffffff;
    font-size: 12px;
}

.Projects .content .card.card4{
    width: 101%;
    height: 115%;
    background-color: #C7AC92;
    color: #ffffff;
    font-size: 12px;
}

/*Actual projects end*/

/*The one to the right of main blue button in center*/
/*Add some qoutes but idk what */
.Projects .content .card.p-3.text-right{
    background-color: #ffff;
    color: #2B1600;
}

.Projects .card.p-3.mb-4{
    background-color: #fff;
    color: #2B1600;
}

.Projects .content .card.text-black.text-center.p-3{
    background-color: #ffff;

}

/*Project headers*/
.Projects .content .card-header.border-success{
    background-color:#9CB380;
    color: #ffffff;
    font-size: 16px;
}

.Projects .content .card-header.border-success.firstcard{
    background-color: #EDB72C;
    color: #ffff;
    font-size: 16px;
}

.Projects .content .card-header.border-success.secondcard{
    background-color:#9CAFB7 ;
    font-size: 16px;
}

.Projects .content .card-header.border-success.fourthcard{
    background-color:#C7AC92 ;
    font-size: 16px;
}
/*Project END*/

/*makes sure it is not displayed */
header .icons #menu-bars{
    display:none;
}

/*Footer*/
.footer .box-container{
    display:grid;
    grid-template-columns: repeat(auto-fit,minmax(25rem,1fr));
    gap:1.5rem;

}
.footer .box-container .box h3{
    padding:.5rem 0;
    font-size: 2.5rem;
    color:#A44A3F;
}

/*how to change the font*/
.footer .box-container .box a{
    font-family: "Pixelify Sans", sans-serif;
    padding:.5rem 0;
    font-size: 2.5rem;
    color:#EBE9E2;
}

.footer .box-container .box a{
    font-family: "Pixelify Sans", sans-serif;
    display: block;
    padding: .5rem 0;
    font-size: 1.5rem;
    color:#fff;
}

.footer .box-container .box a:hover{
    color:#A44A3F;
    text-decoration:underline;
}   







@media(max-width:991px){
    html{
        font-size:55%;
    }

    header{
        padding:1rem 2rem;
    }

    section{
        padding:2rem;
    }

    /*Nav bar*/
    header .logo{
        /*the color of Sabine Portfolio + size change to color scheme later*/
        font-size:2rem;
        font-weight: bolder;
        margin-left: .1rem;
    }
    
    
    .header-container .navbar{
        display: flex;
        gap: 1rem;
        /*make it be in the middle*/
        margin-right: -30rem;
    }
    
    .header-container .navbar a{
        /*this changes the size of the hot bar menu lolool and color*/
        font-size:1.5rem;
        font-weight: bolder;
        margin-bottom: .5rem;
    }
    

    /*Home main*/
    .home .content h3{
        margin-top: 4cm;
        text-align:left;
        font-size: 18px;
        margin-bottom: 1rem;
        margin-left: .1rem;
    }
    
    .home .content h1{
        text-align: left;
        margin-bottom: 3cm;
        font-size: 30px;
        margin-left: .1rem;
    }
    
    .home .content p{
        text-align: left;
        margin-top: -2.5cm;
        margin-bottom: 3cm;
        font-size: 12.5px;
        font-weight: bold;
        margin-left: .1rem;
    }
    
    
    .home {
        display: flex; /* Use flexbox for layout */
        align-items: center; /* Vertically center items within the section */
        justify-content: space-between; /* Space out content and image */
    }
    
    /* Style for the content section */
    .home .content {
        flex: 1; /* Allows the content to take available space */
        text-align: center; /* Center-aligns text content */
        margin-bottom: -1cm;
    }
    
    .home .image {
        display: flex; /* Allows for proper alignment of the image */
        justify-content: flex-end; /* Aligns the image to the right */
        align-items: center; /* Centers the image vertically within the container */
    }
    
    .profile{
        height: 450px;
    }

    /* Style for the circular image */
    .home .image img {
        margin-top: 3.5cm;
        width: 220px; /* Adjust size as needed */
        height: 220px; /* Ensure width and height are equal for a perfect circle */
        border-radius: 50%; 
        object-fit: cover; 
        display: block; /* Avoids extra space below the image */
        margin-left: 1cm;
        margin-right: .1rem;
        margin-bottom: .5cm;
    }

    .fab.fa-linkedin{
        font-size: 20px;
        margin-left: 3cm;
        color: #9CAFB7;
        
    }

    .card{
        width: 65%;
        margin-left: 2.2cm;
    }

    /*About section*/
    .About .header6{
        font-size: 1.5rem;
        margin-bottom: 12px;
    }
    
    .About .header7{
        text-align: center;
        margin-left: .2cm;
        margin-right: 16cm;
        margin-top: .65cm;
        font-size: 1.5rem;
        margin-bottom: 12px;
      }

      .About p{
        font-size:12px;
    }
     
    .skills-group1 {
        margin-right: 4.5cm;
        margin-top: 1rem;
        display: flex; /* Use flex for each group */
        justify-content: flex-end; /* Align items to the right */
      }
    
    .skills-group2 {
        margin-right: 4cm;
        margin-top: 1rem;
        margin-bottom: 2cm;
        display: flex; /* Use flex for each group */
        justify-content: flex-end; /* Align items to the right */
      }
      
      
    .skills {
        width: 35%; /* Width for each skill */
        margin: 5px; /* Add spacing */
      }
    
    .About .skills{
        padding: 1rem 2rem;
        margin-bottom: 2.5rem;
        margin-right: 1rem;
        font-size: 1.5rem;
        border-radius: 5px;
        font-weight: 400;
        
    }


    /*Projects*/
    .Projects .content h1{
        text-align: center;
        text-decoration: underline;
        margin-bottom: 3rem;
        font-size: 16px;
    }

    .Projects .content .card.card1{
        width: 65%;
       
        
    
    }
    
    .Projects .content .card.card2{
        width: 65%;
       
      
    }
    
    .Projects .content .card.card3{
        width: 65%;
        
        
      
    }
    
    .Projects .content .card.card4{
        width: 65%;
        
       
    }
    
}