html{
    scroll-behavior: smooth;
}


*{
    font-family:'Poppins',sans-serif;
}

.vh-1000{
    min-height:100vh;
}

.rounded-image{
    border-radius:20px;
}

$mobile:768px;

.hero{
    background-image:url('../img/steamcito-hero.jpg');
    background-size:cover;
    background-repeat:no-repeat;
    height:100vh;
    background-position:right;
    position:relative;

    @media(max-width:$mobile){
        background-image:none;
        min-height:auto;
        height:auto;
    }

    .browser-list{
        .browser{
            a{
                color:#000;
                transition:all 0.25s ease;

                &:hover{
                    text-decoration:none;
                    transform:scale(1.15);
                }
            }
        }
    }

    .discover{
        position:absolute;
        bottom:1em;
        left:50%;
        transform:translatex(-50%);
        color:#212529;
        transition:all 0.25s ease;
        text-align:center;

        &:hover{
            text-decoration:none;
            transform:translatex(-50%) scale(1.10);
            font-weight:bold;
        }
    }

}

#opiniones{
    .fa-star{
        color:#ffd43b
    }

    .carousel-item{
        min-height:14em;
        
    }

    .carousel-indicators{
        bottom:-30px;
        li{
            background-color:#000;
            width:13px;
            height:13px;
            border-radius:100%;
        }
    }

}

.navbar{
    position:absolute;
    top:0;
    width:100%;
    z-index:100;
}

.howto{
    img{
        max-width:80%;
    }
}

.features{
    img,video{
        border-radius:20px;
    }
}

.faq{
    background-color:#f7f7f9;

    .card-header{
        h5{
            button{
                width:100%;
                text-align:left;
                color:#212529;
            }
        }
    }
}

.changelog{
    strong,small,p,span,a{
        font-family:'Roboto',sans-serif;
    }

    ul{
        padding-left:0;
        li{
            list-style-type:none;
            font-family:'Roboto',sans-serif;
        }
    }
}

h1{
    font-size:5em;

    @media(max-width:$mobile){
        font-size:3em;
    }
}

.modal{
    .ol{
        padding-left: 0;
        list-style-position: inside;
    }
}


#footer{
    background-color:#333;
    color:#fff;

    a{
        color:#fff;
    }
}

