/* IMPORTS. */
/* IMPORTS - FONTS. */
/* Google Fonts:
- 'Krona One': 'https://fonts.google.com/specimen/Krona+One'.
- 'Montserrat': 'https://fonts.google.com/specimen/Montserrat'.
*/
@import url('https://fonts.googleapis.com/css2?family=Krona+One&family=Montserrat:ital,wght@0,100..900;1,100..900&display=swap');

/* Universal changes, for all tags / elements / classes. */
* {
    padding: 0;
    margin: 0;
}

/* Default HTML tags. */
body {
    background-color: #000000;
    color: #F6F6F6;
    height: 100vh;                          /* Change height display. */
    box-sizing: border-box;                 /* Set proper 'box-sizing'. */
}

/* Custom classes. */
.titulo-destaque {
    color: #22D4FD;
}

/* 'presentacion' as flex box: 'https://css-tricks.com/snippets/css/a-guide-to-flexbox/'. */
.presentacion {
    display: flex;                          /* or inline-flex: 'https://css-tricks.com/snippets/css/a-guide-to-flexbox/#aa-display'.*/
    align-items: center;                    /* 'https://css-tricks.com/snippets/css/a-guide-to-flexbox/#aa-align-items'. */
    margin: 10% 15%;
    justify-content: space-between;         /* 'https://css-tricks.com/snippets/css/a-guide-to-flexbox/#aa-justify-content' */
}

.presentacion-contenido {
    width: 615px;                           /* According to Figma asset: 'https://www.figma.com/design/D464FfN417KSWJHIUVpMnX/Portafolio---Curso'. */
    display: flex;
    flex-direction: column;                 /* Set flow direction as columns: 'https://css-tricks.com/snippets/css/a-guide-to-flexbox/#aa-flex-direction'. */
    gap: 40px;                              /* According to Figma asset: 'https://www.figma.com/design/D464FfN417KSWJHIUVpMnX/Portafolio---Curso', and as a flexbox property: 'https://css-tricks.com/snippets/css/a-guide-to-flexbox/#aa-gap-row-gap-column-gap'. */
}

.presentacion-contenido-titulo {
    font-size: 36px;                        /* According to Figma asset: 'https://www.figma.com/design/D464FfN417KSWJHIUVpMnX/Portafolio---Curso'. */
    font-family: "Krona One", sans-serif;
}

.presentacion-contenido-texto {
    font-size: 24px;                        /* According to Figma asset: 'https://www.figma.com/design/D464FfN417KSWJHIUVpMnX/Portafolio---Curso'. */
    font-family: "Montserrat", sans-serif;
}

.presentacion-enlaces {
    display: flex;
    justify-content: space-between;
}

.presentacion-enlaces-link {
    /* Following specifications according to Figma asset: 'https://www.figma.com/design/D464FfN417KSWJHIUVpMnX/Portafolio---Curso'. */
    width: 280px;
    background-color: #22D4FD;
    text-align: center;
    padding: 21.5px 0;                      /* Adds ONLY vertical padding, to make 'button' taller. */
    border-radius: 16px;
    font-size: 24px;
    font-family: "Montserrat", sans-serif;
    font-weight: 600;                       /* According to Google Font's instructions for this specific font, in their CSS class for variable style: 'https://fonts.google.com/specimen/Montserrat' */
    text-decoration: none;                  /* To eliminate underscore format for hyperlinks. */
    color: #000000;
}