@import url('https://fonts.googleapis.com/css2?family=Krona+One&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Krona+One&family=Montserrat&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Krona+One&family=Montserrat:wght@600&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Jockey+One&display=swap');

* {
    margin: 0;
    padding: 0;
}

:root {
    --cor-primaria: #191A19;
    --cor-secundaria: whitesmoke;
    --cor-terciara: #35f50e;
    --cor-hover: #b6f1aa;
    --padding: 10% 5%;
    --padding-header: 3% 0 0;
    --padding-min-width: 10% 26%;
    --padding-header-min-width: 3% 0% 0% 26%;
    --padding-header-max-width: 10% 0% 5% 5%;
    --font-primaria: 'Krona One', sans-serif;
    --font-secundaria: 'Montserrat', sans-serif;
    --tamanho-font-grande: 2.25rem;
    --tamanho-font-pequeno: 1.5rem;
    --tamanho-imagem: 45%;
    --tamanho-texto: 50%;
    --tamanho-font-grande-mobile: 2rem;
    --tamanho-imagem-mobile: 70%;
    --tamanho-texto-mobile: 30%
}

body {
    box-sizing: border-box;
    background: linear-gradient(45deg, #a03f22 15%, #0a4f7c, #af8027);
}

.cabecalho {
    padding: var(--padding-header);
}

.cabecalho_menu {
    display: flex;
    justify-content: center;
    gap: 80px;
}

.cabecalho_menu_link {
    color: var(--cor-secundaria);
    font-family: var(--font-secundaria);
    font-size: var(--tamanho-font-pequeno);
    line-height: 29.26px;
    font-weight: 600;
    text-decoration: none;
    transition: 0.2s;
}

.cabecalho_menu_link:hover,
.rodape_link:hover {
    color: var(--cor-secundaria);
    text-shadow: 0 0 5px var(--cor-secundaria);
}

.principal {
    display: flex;
    flex-direction: column;
    padding: var(--padding);
    align-items: center;
    gap: 82px;
}

.principal_texto {
    width: 40%;
    display: flex;
    flex-direction: column;
    gap: 40px;
    text-align: center;
}

.principal_texto_titulo {
    color: var(--cor-secundaria);
    font-family: var(--font-primaria);
    font-size: var(--tamanho-font-grande);
    font-weight: 400;
    line-height: 56px;
    text-align: center;
}

.destaque {
    color: var(--cor-terciara);
    text-transform: uppercase;
    transition: 0.2s;
}

.destaque:hover,
.freeway_destaque:hover {
    text-shadow: 0 0 3px var(--cor-secundaria);
    color: var(--cor-hover);
}

a {
    text-decoration: none;
}

.html {
    background: linear-gradient(#a03f22, #f1662b);
}

.css {
    background: linear-gradient(#0a4f7c, #2fa9dc);
}

.javascript {
    background: linear-gradient(#af8027, #f0bf25);
}

.html,
.css,
.javascript {
    border: 1px solid white;
    border-radius: 8px;
    padding: 0 2%;
    font-family: 'Jockey One', sans-serif;
    font-weight: 200;
    font-size: 2.6rem;
    color: white;
}

.principal_texto_subtitulo {
    color: var(--cor-secundaria);
    font-family: var(--font-secundaria);
    font-size: var(--tamanho-font-pequeno);
    font-weight: 400;
    line-height: 36px;
}

.principal_texto_redes {
    color: var(--cor-secundaria);
    font-family: var(--font-primaria);
    font-size: var(--tamanho-font-pequeno);
    font-weight: 400;
    line-height: 40px;
}

.principal_link {
    display: flex;
    flex-direction: column;
    gap: 32px;
    align-items: center;
}

.principal_link_link {
    display: flex;
    justify-content: center;
    gap: 16px;
    width: 378px;
    padding: 16px 0;
    text-decoration: none;
    border: 2px solid var(--cor-secundaria);
    color: var(--cor-secundaria);
    font-family: var(--font-secundaria);
    font-weight: 600;
    font-size: var(--tamanho-font-pequeno);
    line-height: 36px;
    border-radius: 8px;
    transition: 0.3s;
}

.icone,
.icone_freeway {
    width: 32px;
    height: 32px;
}

.icone_freeway {
    width: 32px;
    height: 28px;
    filter: drop-shadow(1px 1px 0 var(--cor-primaria)) drop-shadow(-1px -1px 0 var(--cor-primaria));
}

.principal_link_link:hover {
    box-shadow: 0 0 20px var(--cor-secundaria);
    transform: scale(110%);
}

.rodape {
    text-align: center;
    color: var(--cor-secundaria);
    padding: 15px 0;
    font-family: var(--font-secundaria);
    font-size: var(--tamanho-font-pequeno);
    line-height: 36px;
    font-weight: 400;
}

.rodape_link {
    text-decoration: none;
    color: var(--cor-secundaria);
    font-weight: bold;
    transition: 0.2s;
}

@media (min-width: 2560px) {
    .principal {
        padding: var(--padding-min-width);
    }
}

@media (max-width: 1000px) {
    .cabecalho {
        padding: 10% 0% 5% 0%;
    }

    .cabecalho_menu {
        justify-content: center;
    }

    .principal {
        gap: 80.66px;
    }

    .principal_texto {
        width: 100%;
    }

    .principal_texto_titulo {
        font-size: var(--tamanho-font-grande-mobile);
    }

    .principal_link_link {
        width: 80%;
    }

    .principal_imagem {
        width: 80%;
        align-self: center;
    }

    .rodape {
        font-size: 1.2rem;
    }
}