style.css

@keyframes go-back {
    0% {
        transform: translateY(-100px);
    }
    100% {
        transform: translateY(0);
    }
}

@media (max-width: 1023px) {
    * {
        margin: 0;
        padding : 0;
        box-sizing: border-box;
    }

    :root {
        /* 1rem = 10px */
        font-size: 62.5%;

        --background-color01 : hsl(342, 4%, 11%);
        --background-color02 :hsl(0, 0%, 90%);
        --background-color03: hsl(46, 100%, 92%);
        --background-color04: hsl(250, 71%, 21%);
        --text-color01 : hsl(215, 66%, 47%);
        --text-color02 : hsl(215, 66%, 55%);
    }

    html, body {
        width: 100%;
        height: 100%;
    }

    body {
        font-family : 'DM Sans';
        color: white;

        background-color : var(--background-color01); 

        scroll-behavior: smooth;
    }

    .margem {
        width: min(50rem, 100%);
        margin-inline: auto;
        padding-inline: 2rem;
    }

    #menu {
        display: flex;
        align-items: center;

        padding-block: 2.5rem;
        gap : 1rem;
    }

    #menu #titulo {
        display: flex;
        align-items: center;

        gap: 1rem;
    }

    #menu #titulo h1 {
        font-size: 2.2rem;
    }

    #menu #links, #menu #cadastro {
        display: none;
    }

    #menu img {
        width: min(5rem, 100%);
    }

    #home {
        display: flex;
        flex-direction: column;
        align-items: center;

        padding-top: 3rem;

        gap: 3rem;
    }

    #home img {
        width: 100%;
        border-radius : 1rem;
    }

    #home header {
        display: flex;
        flex-direction: column;
        text-align: center;
        
        gap: 1rem;

        padding-inline: auto;
    }

    #home header h1 {
        font-size: 3rem;
    }

    #home header h2 {
        font-size: 1.6rem;
    }

    #home header strong {
        color: var(--text-color01);
    }

    #ofertas {
        display: flex;
        flex-direction: column;
        gap: 5rem;

        padding-top: 3rem;
        padding-bottom : 6rem;
    }

    #ofertas .oferta {
        display: flex;
        flex-direction: column;
        gap: 2rem;
    }

    #ofertas .oferta h3 {
        font-size: 3rem;
    }

    #ofertas .oferta strong {
        color: var(--text-color01);
    }

    #ofertas .oferta p {
        font-size: 1.6rem;
    }

    #ofertas .button_oferta {
        width: fit-content;

        font-weight: lighter;
        font-size: 1.5rem;

        padding-block: .8rem;
        padding-inline : 1.5rem;

        background-color: var(--text-color01);

        transition: background 500ms;
    }

    #ofertas .button_oferta:hover {
        background-color: var(--text-color02);
        cursor: pointer;
    }

    #cursos {
        background-color: white;
        color: black;

        padding-top: 5rem;
        padding-bottom: 6rem;
    }

    #cursos .margem {
        display: flex;
        flex-direction: column;
        align-items: center;
    }

    #cursos #ebook {
        background-color: var(--background-color02);

        padding: 2rem;
        border-radius: 1rem;

        margin-bottom : 6rem;
    }

    #cursos h2 {
        margin-bottom: 6rem;

        color: var(--text-color01);

        font-size: 2.4rem;
    }

    #cursos #ebook form{
        display: flex;
        gap: 1.5rem;
    }

    #cursos #ebook p {
        font-size: 1.6rem;
    }

    #cursos #ebook strong {
        color: var(--text-color01);
    }

    #cursos #ebook form {
        display: flex;
        align-items: center;

        gap : 0.5rem; 
    }

    #cursos #ebook form .input_button {
        background-color: var(--text-color01);
        color: white;

        border: none;
        border-radius: .2rem;

        padding-block: .8rem;
        padding-inline: 1.6rem;

        width: fit-content;

        transition : background 500ms;
    }

    #cursos #ebook form .input_button:hover {
        background-color: var(--text-color02);
        cursor : pointer;
    }

    #cursos #ebook form .input_texto {
        width: min(20rem, 90%);
        height: 3rem;

        padding-inline: .6rem;
    }

    #cursos #cards {
        display: flex;
        flex-direction: column;

        gap: 2rem;
    }

    #cursos #cards h2 {
        font-size: 3rem;
        color: var(--text-color01);

        text-align: center;
        align-self: center;

        margin-bottom: 4rem;
    }

    #cursos .margem button {
        color: var(--text-color01);
        font-size: 2.4rem;
        font-weight: 700;
    
        background: none;
        border: none;
    
        margin-top: 6rem;
    
        cursor: pointer;
    }

    #cursos #cards .card img {
        width : max(2rem, 4rem);
    }

    #cursos #cards .card p {
        font-size: 1.3rem;
        text-align: justify;
    }

    #cursos #cards .card {
        background-color: var(--background-color02);
        padding: 2rem;
        border-radius: .5rem;

        display: flex;
        flex-direction: column;
        gap: 1rem;

        animation: go-back 1s;
    }

    #cursos #cards .card div {
        display: flex;
        align-items: center;

        gap: 2rem;
    }

    #cursos #cards .card h3 {
        font-size: 2.6rem;
    }

    #sobre {
        background-color: var(--background-color03);
        color: black;

        padding-top : 6rem;
        padding-bottom: 6rem;
    }

    #sobre div{
        display: flex;
        flex-direction: column;
        align-items: center;
        gap: 2rem;
    }

    #sobre h3 {
        text-align: center;
        color: var(--text-color01);

        font-size: 1.6rem;
    }

    #sobre h2 {
        font-size: 2.4rem;
        text-align : center;
    }

    #sobre img {
        width: 100%;
        border-radius: .2rem;
    }

    #sobre strong {
        color: var(--text-color01);
    }

    #sobre p {
        font-size: 1.4rem;
        text-align: justify;
    }

    footer {
        padding-top : 4rem;
        padding-bottom: 4rem;

        background-color: var(--background-color04);

        color: white;
    }

    footer img {
        width: min(5rem, 100%);
    }

    footer #titulo {
        display: flex;
        align-items: center;

        gap: 1rem;
    }

    footer p {
        margin-block: 2rem;
    }

    footer #titulo h2 {
        font-size: 2.4rem;
    }

    footer p {
        font-size: 1.6rem;
    }
}

/* MEDIA PARA DESKTOP */
@media (min-width: 1024px){
* {
    margin : 0;
    padding: 0;
    box-sizing : border-box;
}

:root {
    font-size : 62.5%;

    --background-color01 : hsl(342, 4%, 11%);
    --background-color02 :hsl(0, 0%, 90%);
    --background-color03: hsl(46, 100%, 92%);
    --background-color04: hsl(250, 71%, 21%);
    --text-color01 : hsl(215, 66%, 47%);
    --text-color02 : hsl(215, 66%, 55%);
}

html, body {
    width: 100%;
    height: 100%;
}

body {
    font-family : 'DM Sans';
    color: white;

    background-color : var(--background-color01); 
    scroll-behavior: smooth;
}

img {
    width : 10rem;
}

.margem {
    width: min(120rem, 100%);
    margin-inline: auto;
    padding-inline: 2rem;
}

#menu {
    display: flex;
    align-items: center;  
    justify-content: space-between;
    
    padding-block: 2rem;
    padding-bottom : 4rem;
}

#menu #titulo {
    display: flex;
    align-items: center;
    justify-content: start;

    width: min(30rem, 100%);

    gap: 1rem;
}

#menu div a {
    text-decoration : none;
    color: white;
}

#menu img {
    width: min(5rem, 100%);
}

#menu h1 {
    font-size : 2.2rem;
}

#home {
    display: grid;
    grid-template-areas : 
    'a b'
    'c b';
    grid-template-columns: 45rem 1fr;
    grid-template-rows: 1fr 2fr;

    padding-bottom: 6rem;
    padding-right: 1rem;
}

#home header{
    grid-area: a;

    display: flex;
    flex-direction: column;
    align-items: center;

    gap: 1.2rem;

    padding-top: 1.5rem;
}

#home div {
    grid-area : b;
    display: flex;
    align-items: center;
}

#home div img {
    width: max(50rem, 100%);
    padding-inline: 2rem;
    border-radius: 1rem;
}

#home #ofertas {
    grid-area : c;

    display: flex;
    align-items: center;

    padding-top: 1.8rem;
}

#home header h1{
    font-size: 3rem;
    text-align: center;
}

#home header h2 {
    font-size: 1.6rem;
}

#ofertas .button_oferta {
    width: fit-content;

    font-weight: lighter;
    font-size: 1.5rem;

    padding-block: .8rem;
    padding-inline : 1.5rem;

    background-color: var(--text-color01);

    transition: background 500ms;
}

#ofertas .button_oferta:hover {
    background-color: var(--text-color02);
    cursor: pointer;
}

#home #ofertas .oferta {
    display: flex;
    flex-direction: column;
    align-items: start;

    height: 100%;

    padding-top: 3rem;
    padding-inline: 1rem;

    text-align: start;

    gap: 2rem;
}

#home #ofertas .oferta h3 {
    font-size: 2.4rem;
}

#home #ofertas .oferta p {
    height: 10rem;
    font-size: 1.4rem;
}

#home header strong, #home #ofertas strong {
    color: var(--text-color01);
}

#cursos {
    background-color: white;
    color: black;

    padding-top : 6rem;
    padding-bottom : 6rem;
}

#cursos .margem {   
    display: flex;
    flex-direction: column;
    align-items: center;
}

#cursos .margem #ebook {
    background-color: var(--background-color02);

    width: fit-content;

    padding-block: 2rem;
    padding-inline: 4rem;

    border-radius: 1rem;

    display: flex;
    flex-direction: column;
    gap: .8rem;

    margin-bottom: 6rem;
}

#cursos #ebook p {
    font-size: 1.6rem;
}

#cursos #ebook form {
    display: flex;
    gap: 5rem;

    width: 100%;
}

#cursos #ebook form .input_texto {
    width: max(15rem, 100%);
    padding-inline: 1rem;
}

#cursos #ebook form .input_button {
    background-color: var(--text-color01);
    color: white;

    border: none;
    border-radius: .2rem;

    padding-block: .8rem;
    padding-inline: 2.4rem;

    width: fit-content;

    transition : background 500ms;
}

#cursos #ebook form .input_button:hover {
    background-color: var(--text-color02);
    cursor : pointer;
}

#cursos #cards {
    display: grid;

    grid-template-columns: 1fr 1fr 1fr;
}

#cursos h2 {
    color: var(--text-color01);
    font-size: 2.8rem;

    margin-bottom: 6rem;
}

#cursos .margem button {
    color: var(--text-color01);
    font-size: 2.4rem;
    font-weight: 700;

    background: none;
    border: none;

    margin-top: 6rem;

    cursor: pointer;
}

#cursos #cards .card {
    display: flex;
    flex-direction: column;

    background-color: var(--background-color02);

    gap: 1rem;

    margin: 1rem;
    padding: 2rem;
    border-radius: 1rem;

    width: 90%;
    height: 90%;

    animation: go-back 1s;
}

#cursos #cards .card div {
    display: flex;
    flex-direction: row;
    align-items: center;

    gap: 1rem
}

#cursos #cards .card h3 {
    font-size: 2.4rem;
}

#cursos #cards .card p {
    font-size: 1.3rem;
    text-align: justify;
}

#cursos #cards .card img {
    width: min(4rem, 100%);
}

#sobre {
    background-color: var(--background-color03);
    color: black;

    padding-block: 6rem;
}

#sobre .margem  {
    display: grid;
    grid-template-columns: 60% 40%;
    grid-template-rows: 100%;
    grid-template-areas: 'a b';
}

#sobre .col-a{
    grid-area: a;

    padding-right: 3rem;

    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
}

#sobre .col-a header {
    display: flex;
    flex-direction: column;
    align-items: center;

    padding-bottom: 3rem;
}

#sobre .col-a header h3 {
    color: var(--text-color01);
    font-size: 1.8rem;
}

#sobre .col-a header h2 {
    font-size: 3.5rem;
    text-align: center;
}

#sobre .col-a header strong {
    color: var(--text-color01);
}

#sobre .col-a p {
    font-size: 1.6rem;
    text-align: justify;
}

#sobre #col-b {
    grid-area: b;
    
    padding-inline: 1rem;
}

#sobre #col-b img {
    width: 100%;
    height: 100%;

    border-radius: 1rem;
}

footer {
    background-color: var(--background-color04);

    padding-block: 3rem;
}

footer img {
    width: min(5rem, 100%);
}

footer .margem #titulo {
    display: flex;
    align-items: center;

    gap: 1rem;

    padding-bottom: 2rem;
}

footer .margem #direitos {
    padding-bottom: 2rem;
}

footer .margem p {
    font-size: 1.5rem;
    font-weight: 400;
}

footer .margem h2 {
    font-size: 2.2rem;
}

}