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

:root {
    --primary-color: #c2948a;
    --secondary-color: #1E2131 ;
    --tertiary-color: #ddb2ab ;
    --bg-color: rgba(235, 235, 235, 0.612);

    --primary-font: 'Roboto', Helvetica, sans-serif; 
    --secondary-font: 'Sintony', Arial, sans-serif;
}

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

.icon{
    max-width: 150px;
}

h1{
    font-family: var(--primary-font);
    font-size: 68px;
    color: var(--secondary-color);
    font-weight: bold;
}

h2{
    font-family: var(--primary-font);
    font-size: 42px;
    color: var(--secondary-color);
    font-weight: bold;
}

h3{
    font-family: var(--secondary-font);
    font-size: 32px;
    color: var(--secondary-color);
}

h4{
    font-family: var(--secondary-font);
    font-size: 22px;
    font-weight: bold;
    color: var(--secondary-color);
}

h6{
    font-family: var(--primary-font);
    font-weight: bold;
}

p{
    font-family: var(--secondary-font);
    font-size: 16px;
    color: var(--secondary-color);
}

.nav-link{
    font-family: var(--secondary-font);
    font-size: 18px;
    font-weight: bold;
}

nav img{
    max-width: 100px;
}

.banner-image{
    background-image: url(../images/banner-1.png);
    background-size: cover;
}

a{
    text-decoration: none;
}

/* Importante is used to change the background color of the navbar when scrolling down */
.bg-info{
    transition: 0.5s ease;
    background-color: var(--tertiary-color) !important;
}

/* nav{
    background-color: rgba(198, 37, 204, 0.507);
}   */

.navbar-nav a{
    color: var(--secondary-color);;
}

.navbar-nav a:hover{
    color: var(--primary-color);
}

.btn{
    font-size: 20px;
    font-family: var(--secondary-font);
    width: 250px;
    background-color: transparent;
    border: 2px solid var(--secondary-color);
    border-radius: 5px;
}

.btn:hover{
    background-color: var(--secondary-color);
    border: none;
    color:white;
    border: 2px solid var(--secondary-color);
}
.card{
    border: none;
    background-color: inherit ;
}

.icon{
    color: var(--primary-color);
}

.progress-bar{
    background-color: var(--tertiary-color);
}

.progress{
    height: 30px;
    background-color: var(--bg-color);
}

.project{
    background-color: var(--tertiary-color);
}

#portfolio{
    background-color: var(--bg-color);
}

#portfolio h3{
    color: white;
    font-family: var(--secondary-font);
}

#portfolio h3:hover{
    color: var(--primary-color);
}

#about a{
    font-family: var(--secondary-font);
    color: var(--primary-color);
    font-size: 18px;
}

#about a:hover{
    color: var(--tertiary-color);
}

.zoom{
    transition: transform .2s; 
    margin: 0 auto;
}

.zoom:hover {
    transform: scale(1.1);
  }

.bi{
    color: var(--primary-color)
}

footer{
    background-color: white;
}

footer p{
    font-size: 14px;
}

main .container{
    margin-top: 100px;
}

/* Style appredesign.html page */

.container.app{
    margin-top: 150px;
}

/* .btn{
    width: 100%;
} */

@media screen and (min-width:740px){
    h1{
        font-size: 80px;
    }
    
    h2{
        font-size: 46px;
    }
    
    h3{
        font-size: 36px;
    }
    
    h4{
        font-size: 26px;
    }

    p{
        font-size: 18px;
    }
}