/* Generic */
 body {
    font-family: 'Arial', sans-serif;
    margin: 0;
    padding: 0;
    background-color: #1e1e1e;
    color: #f0a500;
    font-size: 20px;
    flex-grow: 1
}              
/* Header */
header {
    background-color: #282828;
    padding: 30px;
    text-align: center;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
    font-size: 30px;
    color: #f0a500;
}

header h1 {
    margin: 0;
    color: #f0a500;
}

.firstPage{
    text-align: left;
    padding-left: 3px;
    font-size: 40px;
}

.firstPage a{
    color:orange;
    
}

.presentation {
    display: flex;
    align-items: left;
    padding: 10px;
    max-width: auto;
    margin: 20px;
    color: white;
}

.presentation a{
    color: orange;
    font-size: 35px;
}

.presentationImage {
    flex: 1;
    max-width: 350px;
    max-height: auto;
    margin-right: 20px;
    padding-left: 150px;
}

.presentationText {
    flex: 2;
    font-size: 40px;
    padding-top: 20px;
}

.presentationText a{
    font-size: 35px;
}

.presentationImage img {
    width: 100%;
    height: auto;
}

#focus{
    color: orange;
}

.lenguages{
    padding-left: 300px;
    padding-top: 50px;
    
}

.lenguages h2{
    font-size: 65px;
    color: #f0a500
}

.languagesList{
    list-style-type: none; /* Elimina los puntos de la lista */
    padding-right: 400px;
    text-align: center; /* Centra el texto de la lista */
    font-size: 40px;
    color: white;  
    
}

.technologies{
    padding-left: 300px;
    padding-top: 1px;
}

.technologies h2{
    font-size: 65px;
    color: #f0a500;
}
.technologiesList{
    list-style-type: none; /* Elimina los puntos de la lista */
    padding-right: 400px;
    text-align: center; /* Centra el texto de la lista */
    font-size: 40px;
    color: white;
}

/* Contact */
.contact {
    padding: 50px;
    text-align: center;
    background-color: #282828;
}

.contact h2 {
    font-size: 40px;
    color: #f0a500;
}

.logos{
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 40px;
    cursor: pointer;
}

.logos img{
    max-width: 80px;
    min-width: 50px;
    border-radius: 10px;
}

.logos img:hover{
    transform: scale(1.4);
}

/* footer */
footer {
    background-color: #1e1e1e;
    padding: 10px;
    text-align: center;
    color: #777777;
}


        /* In mobile*/
@media (max-width: 600px) {
    body {
        font-size: 16px;
    }

    header {
        padding:5px;
        font-size: 24px;
    }

    header h1 {
        font-size: 28px;
    }

    .firstPage {
        text-align: left;
        padding-left: 5px;
        font-size: 40px;
    }

    .firstPage a {
        font-size: 20px;
    }

    .presentation {
        flex-direction: column;
        padding: 5px;
        margin: 20px;
        align-items: center;
    }

    .presentationImage {
        padding-left: 0;
        margin-right: 0;
        max-width: 40%;
        
    }

    .presentationText {
        font-size: 20px;
        padding-top: 20px;
    }

    #muskLink{
        font-size: 20px;
    }

    .lenguages, .technologies {
        padding: 20px;
    }

    .lenguages h2, .technologies h2 {
        font-size: 30px;
    }

    .languagesList, .technologiesList {
        padding-right: 20px;
        font-size: 20px;
    }

    .contact {
        padding: 15px;
    }

    .contact h2 {
        font-size: 24px;
    }

    .logos{
        display: flex;
        justify-content: center;
        align-items: center;
        gap: 25px;
    }

    .logos img {
        max-width: 30px;
        min-width: 20px;
        border-radius: 10px;
    }

}