style.css

    * {
        margin: 0;
        padding: 0;
        box-sizing: border-box;
    }
    
    ul {
        list-style: none;
    }
    
    body {
        background-image: url(assets/fundo.jpg);
        background-position: top center;
        background-size: 100% auto;
        background-repeat: no-repeat;
        background-color: #121214;
    }
    
    body * {
        font-family: 'Inter', sans-serif;
        line-height: 160%;
    }
    
    header {
        padding-top: 32px;
        height: calc(120px + 32px);
    }
    
    header div img {
        width: 100%;
        border-radius: 50%;
    }
    
    header div {
        width: 120px;
        margin: auto;
        background-image: linear-gradient(90deg, #9562FC 0%, #43E7AD 50.7%, #E2aD5C 100%);
        border-radius: 50%;
        display: flex;
        padding: 4px;
        transition: transform 0.3s;
    }
    
    header div img:hover {
        transform: scale(1.1)
    }
    
    main {
        max-width: 580px;
        width: 90%;
        margin: 32px auto;
        /* as sections que estivem dentro do main terão um gap de 24 */
        display: grid;
        gap: 24px;
    }
    
    section {
        color: white;
        background-image: linear-gradient(90deg, #9562FC 0%, #43E7AD 50.7%, #E2aD5C 100%);
        padding-top: 6px;
        border-radius: 10px;
    }
    
    section div {
        background-color: #242634;
        padding: 32px;
        padding-top: 24px;
        border-radius: 8px;
    }
    
    section h2 {
        /* font-weight: 900; - o navegador coloca os pesos
        font-size: 24px; */
        letter-spacing: -0.47px;
    }
    
    section p {
        letter-spacing: -0.18px;
        color: #A1A1AA;
    }
    
    section ul {
        /*  faz o conteúdo ficar lado a lado */
        display: flex;
        flex-wrap: wrap;
        gap: 16px;
        /* aplica nas tres seçoes onde tem ul */
        margin-top: 24px;
    }
    
    section ul li {
        transition: transform 0.3s;
    }
    
    section ul li:hover {
        transform: scale(1.2)
    }
    
    .game-list img {
        width: 120px;
        border-radius: 10px;
    }
    
    .channel-list img {
        border-radius: 50%;
        width: 70px;
        border: 3px solid #443e54;
    }
    /* animation */
    
    header div {
        animation: fromTop 0.7s 0.2s backwards;
    }
    
    main section {
        animation: fromBottom .7s backwards;
        /* nome da animação + tempo + backwards(delay) */
    }
    
    main section:nth-child(1) {
        animation-delay: 0;
    }
    
    main section:nth-child(2) {
        animation-delay: .4s;
    }
    
    main section:nth-child(3) {
        animation-delay: .8s;
    }
    
    @keyframes fromTop {
        from {
            opacity: 0;
            transform: translateY(-30px)
        }
        to {
            opacity: 1;
            transform: translateY(0)
        }
    }
    
    @keyframes fromBottom {
        from {
            opacity: 0;
            transform: translateY(30px)
        }
        to {
            opacity: 1;
            transform: translateY(0)
        }
    }