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

* {
    margin: 0;
    font-family: 'Nunito', sans-serif;
}

body {
    background:#f7f1e3;
}

.navbar ul {
    font-size: 80%;
}

.nav-align {
    margin-left: 22%;
}

.intro {
    padding-top: 8%;
    width: 100%;
    height: 70%;
}

.intro h2{
    font-size : 130%;
}

.intro h1 {
    font-size: 150%;
}

.intro img {
    width: 45%;
}

.cv-link {
    text-decoration: none;
    color: white;
}

.btn-intro {
    border-radius: 20px;
    background:  steelblue;
    color: white;
    border: none;
}

.btn-intro:hover{
    
    animation-name: slide;
    animation-duration: .8s;  
    animation-fill-mode: forwards;
    animation-timing-function: ease-in;
    text-decoration: none;
    color: white;
    
}

@keyframes slide {
    from {left: 0%; background:  steelblue;}
    to {left: 5%; background: dodgerblue;
        left: 100%; border-color: darkblue;}
}


.about a, .experience a {
    text-decoration: none;
}

.experience a {
    color: snow;
}


.experience {
    margin-bottom: 10%;
    margin-top: -5%;
}

.experience img, .about img {
    margin-top: 15%;
    width: 50%;
    height: 70%;
}

.info {
 text-align: justify;
 margin-top: 8%;
}

.img-ss {
    margin-bottom: 10%;
}

.img-ss img{
    width: 70%;
}

.skills {
    margin-bottom: 8%;
}

.skills img {
    width: 40%;
    height: 60%;
}

.contact {
    margin-bottom: 15%;
}

.fas {
    transform: scale(2);
}

.card {
    box-shadow: 0px 3px 2px dodgerblue;
    border-radius: 5px;
    height: 100%;
    width: 80%;
}

.card p {
    font-size: 20px;
}

.card a {
    text-decoration: none;
    font-size: 20px;
}

.social-media {
    margin-top: -10%;
    margin-bottom: 10%;
}

.social-media a {
    text-decoration: none;
}

.fab {
    transform: scale(1.2);
    background: black;
    width: 30px;
    height: 30px;
    padding-top: 25%;
    border-radius: 100%;
    color: white;
}

footer {
    padding-bottom: 2%;
}

@media (max-width: 991.8px){
    .fab {
        width: 0px;
        height: 0px;
        color: black;  
    }

    .nav-align {
        margin-left: 0%;
    }
}

@media (max-width:757.8px){
    .fab {
        width: 0px;
        height: 0px;
        color: black;    
    }

    .experience img, .about img {
        display: none;
    }
}

@media (max-width: 575.8px){

    .experience img, .about img {
        display: none;
    }

    .skills img {
        width: 20%;
        height: 50%;
    }

    .fab {
        width: 0px;
        height: 0px;
        color: black;
        transform: scale(2);
    }
}