:root {
    --primary-color: #163B72;
    --primary-color-light: #1E5288;
    --secondary-color: #CAFFD5;
    --primary-text-color: white;
    --secondary-text-color: #163B72;
    --header-font-famly: 'Rockwell', serif;
    --background-color: #FFFFFF;

    --primary-title-color: #163B72;
    --primary-btn-color: #163B72;
    --primary-btn-background-color: var(--background-color);

    --primary-color-card: var(--primary-color);
    --primary-color-card-container: white;
    --secondary-color-card: white;
    --border-bottom-card: none;

    --border-picture: var(--primary-color);
    --background-picture: white;

    --fill-color-svg: #d4d426;

    --complemantary-secondary-color-1: #995D8A;
    --complemantary-secondary-color-2: #5D9969;
    --complemantary-secondary-color-3: #5161A6;
    --complemantary-secondary-color-4: #3696D9;

    --container-shadow: var(--primary-color) 0px 4px 6px -1px, #0b0b0b 0px 2px 4px -1px;
}

.darkmode {
    --primary-color: #0A192F;
    --primary-color-light: #10294D;
    --secondary-color: #58E3C4;
    --primary-text-color: #E0E0E0;
    --secondary-text-color: #E0E0E0;
    --background-color: #0C1E38;

    --primary-title-color: #E0E0E0;
    --primary-btn-color: #58E3C4;
    --primary-btn-background-color: var(--background-color);

    --border-picture: var(--secondary-color);
    --background-picture: var(--secondary-color);
     
    --primary-color-card: var(--primary-color-light);
    --secondary-color-card: var(--secondary-text-color);
    --border-bottom-card: var(--secondary-color) 0.3em solid;
    --primary-color-card-container: var(--primary-color-light);
    --container-shadow: #000000 0px 4px 6px -1px, #0b0b0b 0px 2px 4px -1px;
}

body {
    margin: 0;
    padding: 0;
    font-family: Arial, sans-serif;
    display: flex;
    flex-direction: column;
    background-color: var(--background-color);
}
.rockwell-font {
    font-family: 'Rockwell', serif;
}
header {
    background-color: var(--primary-color);
    padding: 1em;
    border-bottom: var(--secondary-color) 1em solid;
    box-shadow: var(--primary-color) 0px 4px 6px -1px, #0b0b0b 0px 2px 4px -1px;
    font-family: var(--header-font-famly);
    color: var(--primary-text-color);
    position: fixed;
    left: 0;
    right: 0;
    z-index: 2;
}
#theme-switch {
   height: 50px;
   width: 50px;
   padding: 0;
   border-radius: 50%;
   background-color: var(--primary-color-light);
   display: flex;
   justify-content: center;
   align-items: center;
}
#theme-switch svg {
    fill: var(--primary-text-color);
    
}
#theme-switch svg:last-child {
    display: none;
}
.darkmode #theme-switch svg:first-child {
    display: none;
}
.darkmode #theme-switch svg:last-child {
    display: block;
    fill: var(--fill-color-svg)
}
.main-nav {
    list-style-type: none;
    padding-left: 0;

}
.main-nav li a {
    color: var(--primary-text-color);
    text-decoration: none;
    list-style: none;
    
}
.main-section {
    padding: 18em 1em 3em 1em;
}


.getInTouch-section {
    display: flex;
    flex-direction: column;
   
}
.h2-title {
    color: var(--primary-title-color);
   /* offset-x | offset-y | blur-radius | color */
    text-shadow: 0px 0.5px 2px var(--primary-title-color); 
}

.getInTouch-paragraph {
    border-left: var(--secondary-color) 1em solid;
    padding-left: 0.5em;
    color: var(--secondary-text-color);
}
.get-intouch-link {
    display: inline-block;
    padding: 0.5em 1em;
    background-color: var(--primary-btn-background-color);
    color: var(--primary-btn-color);
    border: 2px solid var(--primary-btn-color);
    text-decoration: none;
    border-radius: 4px;
    align-self: center;
}
.container-paragraph {
    background-color: var(--primary-color-light);
    padding: 1em;
    border-radius: 8px;
    opacity: 0.8;
    box-shadow: var(--container-shadow)
}
.about-section {
    position: relative;
    z-index: -1;
}

.about-paragraph {
    color: white;
    margin: 0;

}
.picture-container {
    border-radius: 50%;
    width: 88px;
    height: 88px;
    background-color: var(--background-picture);
    overflow: hidden;
    border: 3px solid var(--border-picture);
    position: absolute;
    top: -44px;
    right: 2%;
    box-shadow: var(--container-shadow)
}
.picture {
    width: 88px;
    height: 88px;
}
.container-experience {
   overflow: hidden;
   padding: 10px;
   position: relative;

}
.container-experience::before{
    content:'';
    width: 0.5em;
    height: 100%;
    background: var(--secondary-text-color);
    position: absolute;
    top: 180px;
    left: 30px;

}
.content-item {
   background: var(--primary-color-card-container);
   color: var(--secondary-text-color);
   padding:1.2em;
   margin: 2.2em 4.4em;
   min-width: 200px;
   max-width: 70%;
   border-radius: 0.5em;
    box-shadow: var(--container-shadow);
    position: relative;
}
.content-item:before {
    content: '';
    width: 20px;
    height: 20px;
    background: var(--primary-color-card-container);
    position: absolute;
    left: -10px;
    top: 50%;
    box-shadow: var(--container-shadow);
    transform: translateY(-50%) rotate(33deg);
    z-index: -1;
}
.content-item::after {
    content: '';
    width: 1.4em;
    height: 1.4em;
    border: 4px solid var(--secondary-text-color);
    background:var(--secondary-color);
    border-radius: 50%;
    position: absolute;
    left: -60px;
    top: 50%;
    transform: translateY(-50%);
    box-shadow: var(--container-shadow);
}

.container-experience .content-item:last-child {
    margin-bottom: 0;
}
.cards-container {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
   

    
}
.card {
    display: flex;
    flex-direction: column;
    background-color: var(--secondary-color-card);
    border-radius: 0.5em;
    padding: 0;
    margin-bottom: 1em;
    box-shadow: var(--container-shadow);
    min-width: 300px;
    max-width: 33%;
}
.card-header {
    background-color: var(--primary-color-card);
    border-top-left-radius: 0.5em;
    border-top-right-radius: 0.5em;
    border-bottom: var(--border-bottom-card);
}
.card-title {
    color: var(--secondary-color-card);
    text-align: center;
    padding: 0.5em;
    margin: 0;
}
.card-content-container {
    padding: 0.6em;
    background-color: var(--primary-color-card-container);
    color: var(--secondary-text-color);
    
}
.card-tag {
    display: inline-block;
    background-color: var(--secondary-color);
    color: var(--primary-color);
    padding: 0.2em 0.5em;
    border-radius: 0.3em;
    margin: 0.2em 0.2em 0 0;
    font-size: 0.9em;
}
.card-tag:nth-child(1) {
    background-color: var(--complemantary-secondary-color-1);
    color: white
}
.card-tag:nth-child(2) {
   background-color: var(--complemantary-secondary-color-2);
    color: white;
}
.card-tag:nth-child(3) {
    background-color: var(--complemantary-secondary-color-3);
    color: white;
}
.card-tag:nth-child(4) {
    background-color: var(--complemantary-secondary-color-4);
    color: white;
}
.footer {
    background-color: var(--primary-color);
    color: white;
    text-align: center;
    padding: 1em;
    margin-top: auto;
    text-decoration: none;
    border-top: var(--secondary-color) 0.6em solid;
}
.footer section a {
    color: white;
    text-decoration: none;
    

}
@media (min-width: 1024px) {
   header .container {
       display: flex;
       justify-content: space-between;
       align-items: center;
    
   }
   .main-nav {
       display: flex;
       gap: 6em;   
   }
   .main-section {
       
       padding: 10em 12.5% 3em 12.5%;
   }
   .content-item {
       max-width: 85%;
   }
   .card {
       margin-right:2em;
   }
}