@import url('https://fonts.googleapis.com/css2?family=Elms+Sans:ital,wght@0,100..900;1,100..900&display=swap');
@import url("https://cdn.jsdelivr.net/npm/bootstrap-icons@1.13.1/font/bootstrap-icons.min.css");


* {
    padding: 0;
    margin: 0;
    box-sizing: border-box;

}

html {
    scroll-behavior: smooth;
}

:root {
    --color-text: #525AF2;
    --color-link: #0511F2;
    --color-btn: #0D6EFD;
    --color-btn-hover: #0a64eb;
    --color-skill: #CCCCCC;
    --color-cursos: #BFBFBF;
}

#inicio {
    background-image: url("../assets/background.png");
    background-position: center center;
    background-repeat: no-repeat;
    background-size: cover;

    font-family: "Elms Sans", sans-serif;
    min-height: 100vh;
}

#nosotros {
    background-color: #fff;
    min-height: 100vh;
}

#cursos {
    background-color: var(--color-cursos);
    min-height: 100vh;
}



.navbar-brand,
.navbar-brand:visited {
    color: var(--color-text);
}

.navbar-brand:hover {
    color: var(--color-link);
}

.btn {
    background-color: var(--color-btn);
}

.btn:hover {
    background-color: var(--color-btn-hover);
}

.text-featured {
    color: var(--color-btn);
}

.skill {
    background-color: var(--color-skill);
}

.tag {
    width: 120px;
    background-color: var(--color-btn);
    margin-top: -10px;
    overflow: hidden;
    position: relative;
    z-index: 1;
}

.card {
    border: none;
}

footer {
    background-color: var(--color-btn);
}

@media (max-width: 768px) {
    .hero-title{
        font-size: 2rem;
    }
}