@import url('https://fonts.googleapis.com/css2?family=Fira+Sans&family=Poppins:wght@300;400;500;600;700&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Dancing+Script:wght@600&family=Fira+Sans&family=Poppins:wght@300;400;500;600;700&display=swap');
@font-face {
    font-family: "San Francisco";
    font-weight: 400;
    src: url("https://applesocial.s3.amazonaws.com/assets/styles/fonts/sanfrancisco/sanfranciscodisplay-regular-webfont.woff");
  }
html{
    scroll-behavior: smooth;
    
}
html::-webkit-scrollbar{
    display: none;
} 
*{
    font-family: 'San Francisco';
    font-weight: 400;
}
.smileyFace{
    font-size: 5rem;
}
.img-fluid{
    filter: grayscale(90%);
}
#about{
    height: 100vh;
}
.carousel-item{
    width: 100%;
    height: 80vh;
}
.carousel-item img{
    width: 100%;
    height: 100%;
    filter: grayscale(80%);
    filter: blur(1px);
    aspect-ratio: 16/9;
    object-fit: contain;
}
.carousel-caption{
    background: #666;
    border-radius: 10px;
    opacity: 0.85;
}

#portfolio{
    height: 100vh;
}
#contact{
    height: 90vh;
}


.icon{
    border: solid 1px #666;
    border-radius: 10px;
    padding: 4px;
}
.icon a{
    color: #333;
}

.web-icons{
    font-size: 3rem;
}


/* media query for mobile devices */
@media only screen and (max-width: 1766px){
    
    
    #home,#about,#portfolio{
        height: auto;
    }
    #about{
        height: auto;
    }
    .carousel-item{
    width: 100%;
    height: 40vh;
    }
    #contact h1{
        padding-top: 5.5rem;
    }
    #contact{
        height: 100vh;
    }
}