* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

body {
    font-family: Arial, Helvetica, sans-serif;
}

#hero .image-container #foto img {
    width: 20%;
}

/* Acá tengo estilos generales */

.image-container {
    display: flex;
}

.image-container img {
    width: 100%;
}

/* Acá tengo los estilos del header */

header {
    background: white;
    padding: 10px 20px;
}

#logo {
    width: 100px;
}

/* Acá están los estilos del hero */

#hero {
    position: relative;
}

#hero #fondo {
    display: inline-block;
    width: 100%;
}

#hero .informacion-contenedor {
    position: absolute;
    top: 80%;
    transform: translateY(-70%);
    left: 0;
    display: flex;
    width: 100%;
    color: white;
    padding: 0px 50px;
}

#hero .informacion-contenedor #foto {
    width: 20%;
    border-radius: 50%;
    height: 100px;
    width: 160px;
    transform: translate(-40px);
}

#hero .informacion-contenedor #foto img {
    border-radius: 50%;
}

#hero .informacion-contenedor .informacion {
    margin-left: 10px;
    font-weight: bold;
    width: calc(100% - 40px);
}

#hero .informacion-contenedor .informacion h1 {
    font-size: 13px;
    margin-top: 30px;
    margin-bottom: 0px;
}

#hero .informacion-contenedor .informacion span {
    display: inline-block;
    color: whitesmoke;
    margin-top: 0px;
    margin-bottom: 10px;
    font-size: 8px;
    padding: 0;
}

#hero .informacion-contenedor .informacion p {
    padding: 0;
    font-size: 8px;
}

/* Estilos del main */

main {
    padding: 20px;
}

main .redes-sociales h2 {
    font-size: 20px;
}

main p {
    margin-top: 40px;
    font-size: 14px;
}

main .social-icons {
    display: flex;
    justify-content: center;
    margin-top: 40px;
    list-style: none;
}

main .social-icons li {
    margin-left: 5px;
}

main .social-icons .social-icon {
    display: flex;
    justify-content: center;
    align-items: center;
    padding: 15px;
    border-radius: 5px;
    width: 100%;
    height: 100%;
}

main .social-icons #LinkedIn {
    background: #0077b0;
}

main .social-icons #GitHub {
    background: #23272D;
}

main .social-icons #Twitter {
    background: #1da1f2;
}

main .social-icons #YouTube {
    background: #f70000;
}

main .social-icons #Facebook {
    background: #0455f5;
}

main .social-icons #Instagram {
    background: #dd2a7b
}

main .cursos h2 {
    display: flex;
    justify-content: left;
    align-items: left;
    margin-top: 40px;
    margin-bottom: 40px;
    font-weight: bold;
    margin-left: 0px;
    font-size: 20px;
}

/* main .cursos {
    padding: 100px;
} */

.cursos li {
    margin-left: 0px;
    margin-top: 5px;
    font-size: 13px;
}

.cursos .curso-gratis {
    display: flex;
    justify-content: center;
    margin-top: 20px;
    list-style: none;
}

.cursos .curso-gratis #BuenaData1 {
    display: flex;
    justify-content: center;
    align-items: center;
    padding: 0px;
    width: 100%;
    height: 100%;
}

.cursos p {
    font-weight: bold;
    font-size: 14px;
}

.cursos .curso-gratis #BuenaData1 img { 
    width: 284px;
    height: 160px;
}

.prediccion {
    padding: 0px;
    margin-top: 80px;
}

.prediccion h2 {
    margin-left: 0px;
    font-size: 20px;
}

.prediccion p {
    font-weight: bold;
    font-size: 14px;
    padding: 0px;
    margin-top: 20px;
    margin-bottom: 10px;
}

.prediccion li {
    margin-top: 10px;
}

.prediccion .prediccion-qatar {
    display: flex;
    justify-content: center;
    margin-left: 0px;
    margin-top: 10px;
    list-style: none;
}

.prediccion .prediccion-qatar #Bracket {
    display: flex;
    justify-content: center;
    align-items: center;
    padding: 0px;
    width: 100%;
    height: 100%;
}

/* #prediccion h2 {
    font-weight: bold;
} */

.prediccion .prediccion-qatar #Bracket img { 
    width: 360px;
    height: 360px;
}

.contacto h2 {
    margin-top: 100px;
    font-size: 20px;
}

.contacto .contacto-in-qapital {
    display: flex;
    justify-content: center;
    margin-top: 40px;
    list-style: none;
}

.contacto .contacto-in-qapital .contacto-inqapital {
    display: flex;
    justify-content: center;
    align-items: center;
    padding: 15px;
    border-radius: 5px;
    width: 100%;
    height: 100%;
}

.contacto .contacto-in-qapital li {
    margin-left: 24px;
}

.contacto .contacto-in-qapital #WhatsApp {
    background: #04b304;
}

.contacto .contacto-in-qapital #Outlook {
    background: #0b43b3;
}