@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@300;400;700&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Rubik+Dirt&display=swap');

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

.logo{
    background:transparent url('../img/logo.svg') no-repeat bottom right;
    height:110px;
    width:280px;
    background-size: 100%;
     
}

/* 
.www{
    background:transparent url('../img/www.png') no-repeat bottom left;
    height:100%;
    min-height:calc(80vh - 72px);
    background-size:80%;
}

.sm{
    background:transparent url('../img/sm.png') no-repeat bottom right;
    height:100%;
    min-height:calc(80vh - 72px);
    background-size:80%;
}

*/

.webdev{
    background:transparent url('../img/web.png') no-repeat bottom right;
    min-height:100vh;
    background-size: 75%;
    background-position:90% 90%;
}

.socialm{
    background:transparent url('../img/social.png') no-repeat bottom right;
    min-height:100vh;
    background-size: 65%;
    background-position:10% 90%;
}



.contact,.call {
    overflow: hidden;
    display: inline-block;
    padding: 32px;
    background-position: center center;
    background-repeat: no-repeat;
    content: " ";
    border-radius:100%;
    background-size: 100%;
}

.fb{
    fill: #ffffff;
    overflow: hidden;
    display: inline-block;
    padding: 12px;
    background-position: center center;
    background-repeat: no-repeat;
    content: " ";    
    background-image: url('../img/fb.svg');
    width:96px;
    height:96px;
    background-size:100%;
    transition:filter 1s ease;
}

.fb:hover{
    filter: invert(0%) sepia(0%) saturate(9001%) hue-rotate(55deg) brightness(55%) contrast(270%);
    -webkit-animation: rotation-b 1s ease-out;
    animation-iteration-count: 1;
animation-iteration-count: 2;
}

@-webkit-keyframes rotation-b {
    0% {background-size: 100%;}
    50% {background-size: 90%;}    
    100% {background-size: 100%;}
}


.contact {
    background-image: url('../img/mail.svg');
}


.call {
    background-image: url('../img/call.svg');
}

.call:hover,.contact:hover {
    -webkit-animation: rotation-a 1s ease-out;
        animation-iteration-count: 1;
    animation-iteration-count: 2;
}



@keyframes rotation-a {
    10%, 90% {
      transform: translate3d(-1px, 0, 0);
    }
    
    20%, 80% {
      transform: translate3d(2px, 0, 0);
    }
  
    30%, 50%, 70% {
      transform: translate3d(-4px, 0, 0);
    }
  
    40%, 60% {
      transform: translate3d(4px, 0, 0);
    }
  }

.line-header{
    background:#494f97;
}

h2{
    font-weight: 700;
color: #494f97;
font-size: 36px;

}

h1{
    color:#002daa;
    font-size:64px;
    font-weight:bold;
     font-family: "Rubik Dirt", system-ui;
}

p{
    color:#93B8E9;
}

@media only screen and (max-width: 600px) {
    h1{
        font-size:44px;
    }
    .fb{
        width:44px;
        height:44px;

    }   
    .socialm{
        min-height: 50vh;
        max-height: 55vh;
    }     
    .logo{
        background:transparent url('../img/logo.svg') no-repeat bottom right;
        height:78px;
        width:200px;
        background-size: 100%;
         
    }    
}



@media only screen and (max-width: 990px) {
.webdev{
    min-height: 60vh;
    max-height: 80vh;
}
.socialm{
    min-height: 60vh;
    max-height: 60vh;
}
}


@media only screen and (max-width: 600px) {
    .webdev{
        min-height: 70vh;
        max-height: 40vh;
    }
    .socialm{
        min-height: 50vh;
        max-height: 40vh;
    }
    }
    

@media only screen and (min-width: 1900px) {
    h1{
        font-size:96px;
    }
    p{
        font-size: 1.5em;
    }
    body{
        background-size: 65%;
    }
 
}