body
{
    background-color: #182625;
    font-family: 'Trebuchet MS', 'Lucida Sans Unicode', 'Lucida Grande', 'Lucida Sans', Arial, sans-serif;

}

.body-container
{
    display: flex;
    flex-direction: row;
    justify-content: center;
    align-items: center;
    
}
.container
{
    width: max(50%,700px);
    display: flex;
    flex-direction: column;
    gap: 20px;
    background-color: #65787c;
    padding: 20px;
    border-radius: 18px;
    box-shadow: 0 0 5px 1px rgba(0,0,0,0.2);

}

.name-section
{
    padding: 10px;
    background-color:#2F3D40;
    border-radius: 18px;

}
.name-section h1
{
    margin: 0;
    font-size: 5rem;
    color: #bccee2;
    animation: name 1s ease-in-out;

}
@keyframes name {
    0%{
        opacity: 0;
        transform: translateX(20%);
    }
    100%
    {
        opacity: 1;
        transform: translateX(0);
    }
    
}
.name-section h2
{
    
    margin: 0;
    font-size: 2rem;
    color:#707983 ;
}

.button-section
{
    display: flex;
    flex-direction: row;
    max-width: 100%;
    justify-content: space-between;
    align-items: center;
    background-color: #2F3D40;
    padding: 10px;
    border-radius: 18px;
}
.button-section button
{
    width: 33%;
    height: 50px;
    background-color: #182625;
    border: none;
    border-radius: 18px;
    transition: scale 0.5s ease-in-out;
}
.button-section button:hover
{
    scale: 1.05;
    transition: scale 0.2s ease-in-out;
    cursor: pointer;

}
.button-section img
{
    zoom: 1.4;
}
.education-section
{
    display: flex;
    flex-direction: column;
    gap: 10px;
    background-color: #2F3D40;
    padding: 10px;
    border-radius: 18px;
    box-shadow: 0 0 5px 1px rgba(0,0,0,0.2);

}
.title-banner
{
    padding: 10px;
    text-align: center;
    background-color: #182625;
    border-radius: 18px;
    box-shadow: 0 0 5px 1px rgba(0,0,0,0.2);

}
.title-banner h1
{
    margin: 0;
    font-size: 3rem;
    color: #bccee2;
}
.education-forms
{
    background-color: #182625;
    border-radius: 18px;
    padding: 10px;
    box-shadow: 0 0 5px 1px rgba(0,0,0,0.2);
}
.education-forms h1
{
    margin: 0;
    color: #bccee2;
    font-size: 2.5rem;
    font-weight: 600;
    letter-spacing: 0.1rem;
}
.education-forms h2
{
    margin: 0;
    margin-top: 20px;
    color: #bccee2;
    font-size: 2rem;
    font-weight: 600;
    letter-spacing: 0.1rem;
}   
.education-forms h3
{
    margin:0;
    color: #65787c;
    font-size: 1.5rem;
    font-weight: 600;
    letter-spacing: 0.1rem;
}   
.education-forms h5
{
    margin: 0;
    color: #65787c;
    font-size: 1rem;
    font-weight: 500;
    letter-spacing: 0.1rem;
}   

.projects-section
{
    
    display: flex;
    flex-direction: column;
    gap: 15px;
    background-color: #2F3D40;
    padding: 10px;
    border-radius: 18px;
    box-shadow: 0 0 5px 1px rgba(0,0,0,0.2);

}

.projects-forms
{
    display: flex;
    flex-direction: column;
    gap: 10px;
    background-color: #182625;
    border-radius: 18px;
    padding: 10px;
    box-shadow: 0 0 5px 1px rgba(0,0,0,0.2);
}
.projects-forms h1
{
    margin: 0;
    color: #bccee2;
    font-size: 2.5rem;
    font-weight: 600;
    letter-spacing: 0.1rem;
}
.projects-forms p
{
    
    margin: 0;
    color: #65787c;
    font-size: 1rem;
    font-weight: 500;
}
.projects-forms span
{
    
    margin: 0;
    color: #bccee2;
    font-size: 1.5rem;
    font-weight: 700;
}
.wip-button
{
    width: fit-content;
    font-size: 1.3rem;
    padding: 10px;
    border-radius: 18px;
    background-color: #2F3D40;
    border: none;
    color: #bccee2;
    font-weight: 600;
}
.tech-button
{
    font-size: 1rem;
    padding: 10px;
    border-radius: 18px;
    border: none;
    background-color: #707983;
    color: #bccee2;
    font-weight: 600;
}

.hobbies-section
{
    
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    background-color: #2F3D40;
    padding: 10px;
    border-radius: 18px;
}
.hobbies-forms
{
    background-color: #182625;
    padding: 10px;
    border-radius: 18px;
    box-shadow: 0 0 5px 1px rgba(0,0,0,0.2);
}
.hobbies-forms h1
{
    color: #bccee2;
    font-size: 2rem;
    
}
.hobbies-visual
{
    
    display: flex;
    flex-direction: column;
    gap: 15px;
    background-color: #2F3D40;
    padding: 10px;
    border-radius: 18px;
    box-shadow: 0 0 5px 1px rgba(0,0,0,0.2);

}
.hidden
{

    opacity: 0;
    filter: blur(2px);
    transform: scale(1.05) translateX(30%);
    transition: all 1s ease-in-out;
}
.show   
{

    filter: none;
    transform: scale(1.0) translateX(0);

    opacity: 1;
}
.hidden:nth-child(2)
{
    transition-delay: 100ms;
}

.hidden:nth-child(3)
{
    transition-delay: 200ms;
}
.hidden:nth-child(4)
{
    transition-delay: 300ms;
}
.contacts-section
{
    
    display: flex;
    flex-direction: row;
    max-width: 100%;
    justify-content: space-between;
    align-items: center;
    background-color: #2F3D40;
    padding: 10px;
    gap: 10px;
    border-radius: 18px;
}
.contacts-section button
{
    display: flex;
    align-items: center;
    justify-content: center;
    flex: 1;
    height: 50px;
    border-radius: 18px;
    background-color: #182625;
    border: 0;

}

.contacts-section button:hover
{
    scale: 1.05;
    transition: scale 0.2s ease-in-out;
    cursor: pointer;

}

.button-img
{
    zoom: 1.5;
}
.leetcode-img
{
   max-height: 50px;
   zoom:0.9;
   filter: saturate(0) contrast(0) brightness(100);
}