:root {
    --bg1-color: #f5f5f5; /* lightest background */
    --bg2-color: #e0e0e0;
    --bg3-color: #d4d4d4;
    --bg4-color: #c0c0c0;
    --bg5-color: #b0b0b0; /* darkest light background */
    --bg6-color: #f0f0f0;
    --bg7-color: #e9e9e9;
    --bg8-color: #fff;
    --search-btn-hover-bg-color: #00e382;
    --b503-text-color:#b87114;
    --text1-color: #222222; /* primary text */
    --text2-color: #111111; /* secondary text */

    --SearchIcon: url('../sprites/search-icon-ligth.png');
}

[data-theme="dark"] {
    --bg1-color: #333;
    --bg2-color: #444;
    --bg3-color: #222;
    --bg4-color: #2a2a2a;
    --bg5-color: #1e1e1e;
    --bg6-color: #303030;
    --bg7-color: #666;
    --bg8-color: #888;
    --search-btn-hover-bg-color: #002a15;
    --b503-text-color:#f3d05e;
    --text1-color: #f5f5f5;
    --text2-color: #fff;
    
    --SearchIcon: url('../sprites/search-icon-ligth.png');
}

p {
    margin-bottom: 10px;
}

#Introduction {
    background-color: var(--bg5-color);
    padding: 20px;
}
#Introduction h1{
    text-align: center;
}
#Introduction .def {
    background-color: var(--bg1-color);
    margin-top: 10px;
    padding: 10px;
    border-radius: 20px;
    text-align: justify;
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.5);
}

#AboutMe {
    background-color: var(--bg6-color);
    padding:20px;
}
#AboutMe h2{
    text-align: center;
}
#AboutMe .def{
    background-color: var(--bg3-color);
    margin-top: 10px;
    padding: 10px;
    border-radius: 20px;
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.5);
}
#AboutMe .def h3{
    text-align: center;
}

#Skills {
    background-color: var(--bg5-color);
    padding: 20px;
}
#Skills h2{
    text-align: center;
}
#SkillsContent {
    display:flex;
    flex-direction: row;
    gap: 10px;
}
#Skills .def{
    flex:1;
    background-color: var(--bg1-color);
    margin-top: 10px;
    padding: 10px;
    border-radius: 20px;
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.5);
}
#Skills .def li{
    margin-left: 25px;
}

#Projects {
    background-color: var(--bg6-color);
    padding:20px;
}
#Projects h2{
    text-align: center;
}
#Projects .def{
    display:grid;
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    gap: 10px;
}
#Projects .project{
    height: 300px;
    background-color: var(--bg3-color);
    margin-top: 10px;
    padding: 10px;
    border-radius: 20px;
    transition: transform 0.3s ease;
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.5);
}
#Projects .project:hover{
    transform: scale(1.05);
    cursor: pointer;
}

#Experience {
    background-color: var(--bg5-color);
    padding: 20px;
}
#Experience h2{
    text-align: center;
}
#Experience .def{
    display:grid;
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    gap: 10px;
}
#Experience .exp{
    height: 300px;
    background-color: var(--bg1-color);
    margin-top: 10px;
    padding: 10px;
    border-radius: 20px;
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.5);
}

#WhatImLookingFor {
    background-color: var(--bg6-color);
    padding:20px;
}
#WhatImLookingFor h2{
    text-align: center;
}
#WhatImLookingFor .def{
    background-color: var(--bg3-color);
    margin-top: 10px;
    padding: 10px;
    border-radius: 20px;
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.5);
}
#WhatImLookingFor .def h3{
    text-align: center;
}

#ContactMe {
    background-color: var(--bg5-color);
    padding: 20px;
}
#ContactMe h2{
    text-align: center;
}
#ContactMe .def{
    background-color: var(--bg1-color);
    margin-top: 10px;
    padding: 10px;
    border-radius: 20px;
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.5);
}
#ContactMe .download{
    background-color: var(--bg2-color);
    margin-top: 5px;
    padding: 10px;
    border-radius: 20px;
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.5);
}
#ContactMe .download a{
    color: var(--text1-color);
}
#ContactMe .download:hover{
    background-color: var(--bg7-color);
    cursor: pointer;
}

#WhyYouShouldHireMe {
    background-color: var(--bg6-color);
    padding:20px;
}
#WhyYouShouldHireMe h2{
    text-align: center;
}
#WhyYouShouldHireMe .def{
    background-color: var(--bg3-color);
    margin-top: 10px;
    padding: 10px;
    border-radius: 20px;
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.5);
}
#WhyYouShouldHireMe .def h3{
    text-align: center;
}