#main-container
{
    aspect-ratio: 1 / 1;
}



#type
{

    width: 85%;

    margin: 0%;

    font-size: var(--size-text-1);
    color: var(--webpage-text-color-green);

    text-align: left;

    margin-top: -4%;

}



#title
{

    font-weight: var(--weight-black);
    font-size: var(--size-subtitle-2);

}



#text
{

    font-weight: var(--weight-regular);
    font-size: var(--size-subtitle-2);
    margin: 0%;
    margin-left: 2%;

}



#text-2
{

    font-weight: var(--weight-regular);
    font-size: var(--size-subtitle-2);
    margin: 0%;
    margin-left: 6%;

}



#spacing
{

    margin: 0%;
    margin-top: -5%;
    margin-left: 2%;

}



#left
{

    width: 60%;

}



#right
{

    width: 40%;

}



#main-task
{

    background-color: var(--webpage-background-color-dark);
    height: 40%;

    padding: 2%;

    margin-top: 3%;

}



#skills
{

    background-color: var(--webpage-background-color-extra-dark);
    height: 40%;

    padding: 2%;

    margin-top: 3%;

    color: var(--webpage-text-color-regular-dark);

}



.image-person
{

    margin-top: 10%;
    width: 100%;
    margin-left: -12%;
    aspect-ratio: 1 / 1;

}



.person-type
{

    font-weight: var(--weight-black);
    font-size: var(--size-subtitle-2);
    color: var(--webpage-text-color-green);
    margin: 0%;

}



.contact-title
{

    width: 100%;
    text-align: left;

    font-weight: var(--weight-black);
    font-size: var(--size-subtitle-2);

    margin: 0%;

}



#contact
{

    width: 100%;

    font-weight: var(--weight-black);
    font-size: var(--size-text-1);

}



#contact-background
{
    
    margin: 0;
    margin-top: 15%;
    margin-left: -6%;

    padding: 3%;
    width: 100%;

    background-color: var(--webpage-background-card-container-light-2);

}



@media (max-width: 1020px) 
{

    #left
    {
        width: 100%;
    }



    #right
    {
        width: 100%;
    }



    .image-person
    {
        margin-left: 0%;
    }



    #contact-background
    {
        margin-left: 0%;
    }



    #main-task
    {
        width: 85%;
    }



    #skills
    {
        width: 85%;
    }



    #type
    {
        margin-top: -2.5%;
    }



    .image-person
    {
        width: 90%;
    }

}



@media (max-width: 800px) 
{

    #main-task
    {
        width: 90%;
    }



    #skills
    {
        width: 90%;
    }



    .image-person
    {
        width: 85%;
    }

}