@import url('https://fonts.googleapis.com/css2?family=Montserrat&display=swap');


body{
    font-family: 'Montserrat', sans-serif;
    margin: 0;
}

h1{
    font-size: 2.5em;
    margin: 0;
    padding-top: 3em;
}

.profile-name{
    background: gray url('../images/banner.jpg');
    background-repeat: no-repeat;
    background-position: center; 
    background-size: cover;

    color: white;
    text-align:  center;
    padding-bottom: 6em;
}
img{
    width: 100%;
}
.div-left{
    text-align: center;
}

.div-left h2{
    font-weight: bold;
    color: black;
    text-transform: uppercase;
    /* background-color: yellow; */

}
.hr-1{
    color: black;
    background-color: lightgray;
    height: 2px;
    width: 400px;
}

.div-system h4{
    margin: .5em;
}

.img-system{
    height: 100%;
    width: 95%;
}

.div-about{
    text-align: center;
}

.div-about h2{
    font-weight: bold;
    text-align: center;
    text-transform: uppercase;
}
.div-contact{
    text-align: center;
}

.footer-copyright{
    text-align: center;
}

/* responsive display */
@media(min-width: 776px){ 
    .profile-name{

        padding-bottom: 12em;
    }
    h1{
        font-size: 2.5em;
        margin: 0;
        padding-top: 6em;
    }
}

@media (min-width: 930px){
    .profile-name{

        padding-bottom: 18em;
    }
    h1{
        font-size: 3em;
        margin: 0;
        padding-top: 5.5em;
    }
}

.profile-name{
    animation: fadeIn 2s forwards;
}

@keyframes fadeIn{
    from{
        opacity: 0;
        transform: translateY(-2em);
    }
    to{
        opacity: 1;
        transform: translateY(0);
    }
}