@import url(./font.css);
@import url(./cards.css);
@import url(./button.css);
@import url(./nav.css);
@import url(./article.css);

.hero {
    background-color: #171717;
    
    header {
        color: #e9e9e9;
    
        h1 {font-size: 4.3rem;}
        
        div {
            span {
                width: 100%;
                font-size: 1.62rem;
                letter-spacing: 0.5px;
                color: #171717;
                background-color: #FEF100;
                padding: 0.5rem;
            }
        }
    }
}

.marquee {
    text-align: center;
    width: 100%;
}

.about{
    width: 100%;
    height: 100%;

    img {height: 400px;}
}

.bento-cards {gap: 1rem;}

.skills {
    width: 100%;

    .card {
        gap: 1rem;
        padding: 1rem;
        border: none;
        background-color: #fff;

        li {
            list-style-type: none;
        }
    }
}

.btn {
    width: 200px;
    height: 56px;
    background-color: #171717;
    text-align: center;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 0.5rem;
    box-shadow: 5px 5px 20px rgba(23, 23, 23, 0.3);
    color: #ececec;
    text-decoration: none;
  }

  footer {
    background: #f5f5f5;
    padding: 2rem;
    text-align: center;
    font-size: 0.9rem;
    color: #888;

    .nav-foot {
        width: 100%;
        padding: 0.5rem;
        list-style: none;
        font-family: 'Instrument Sans', sans-serif;
        font-weight: 300;
        font-size: 1rem;
        box-sizing: border-box;
    
        li {
            min-width: 10%;
            margin: 0 1rem;
            list-style-type: none;
            text-align: center;
        }
          
        li a {
            color: #888;
            text-decoration: none;
            transition: color 0.3s ease;
        }
    }
  }


/* Responsive */
@media (min-width: 360px) {
    h2 {font-size: 1.65rem;}

    header {
        width: 100%;
        height: 100vh;
        
        .menu, .hero {width: 100%;}

        .hero {
            height: 100%;
            padding: 1rem;
            justify-content: space-around;

            header {
                width: 100%;
                height: 100%;

                div {
                    width: 100%;
                    height: 100%;
    
                    h1 {line-height: 3.5rem;}
                }
            }

            
            figure {
                order: -1;
                
                img {
                    width: 350px;
                    /* height: auto; */
                }
            }
        }
    }

    main {
        padding: 4rem 1rem;
        width: 100%;
        height: auto;
        margin-top: 6.25rem;
        gap: 3rem;       

        .marquee {
            padding: 1rem;

            br {display: none;}
            
        }

        .about {
            gap: 1.5rem;

            header {
                width: 100%;
                height: auto;
            }

            div {padding: 1rem;}

            figure {
                width: 100%;
                height: 300px;

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

        .skills {
            .card {width: 100%;}
        }
    }

}

@media (min-width: 768px) {
    .menu {height: auto;}

    .hero {
        width: 100%;
        flex-direction: column;
        
        header {
            height: auto;

            div {
                width: auto;
                h1 {font-size: 3.9rem;}
            }

            br {display: none;}
        }

        figure {
            img{
                width: 100% !important;
                
            }
            order: -1;}

    }

    main {
        margin-top: 0;

        .about {
            flex-direction: column;

            div {padding: 1rem;}

            figure {
                width: 100%;
                height: 550px;
            }
        }
    }
}

@media (min-width: 912px) {
    .hero {
        flex-direction: row;
        
        header {
            order: -1;
            width: 40%;

            div {
                position: relative;
                left: 6rem; 

                span {
                    width: 90%;
                    font-size: 1.45rem;
                }
            }            
        }

        figure {
            display: flex;
            justify-content: center;
            width: 145%;
            img {
                width: 100% !important;
                object-fit: cover;
            }
        }
    }

    main {
        .marquee {
            padding: 1rem 2rem;

            h2 {font-size: 2rem;}
        }

        .about {
            flex-direction: row;

            figure, section {
                width: 50%;
            }
        }

        .bento-cards {
            flex-direction: column;

            .teste {
                width: 100%;
                
                .teste2 {gap: 0.5rem;}
            }

            #apepe {background-image: url(../images/apepe.png);}
            #blix {background-image: url(../images/Blix.png);}        
            #apepe-ds {background-image: url(../images/apepe-ds.png);}
            #apepe-taxonomia {background-image: url(../images/apepe.png);}
        
            #apepe, #blix, #apepe-ds, #apepe-taxonomia {
                background-size: cover;
                background-position: bottom;
                position: relative;
            }
        }

        .skills {
            .card {width: 32%;}
        }
    } 
}