@import url('https://fonts.googleapis.com/css2?family=Montserrat:wght@500&family=Pacifico&family=Roboto&family=Tilt+Warp&display=swap');
@import url("https://cdn.jsdelivr.net/npm/bootstrap-icons@1.10.3/font/bootstrap-icons.css");
@import url("https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha1/dist/css/bootstrap.min.css");
@import url("vendor/humble/humbleScroll.min.css");
@import url("vendor/pin-zoom/style.css");
@import url("animation.css");
@import url("https://unpkg.com/aos@2.3.1/dist/aos.css");


*
{
    box-sizing: border-box !important;
    font-family: 'Montserrat', sans-serif !important;
   
}

.ft-thick
{
    font-family: 'Tilt Warp', cursive !important;
}

.ft-running
{
    font-family: 'Pacifico', cursive !important;
}

.nav-item
{
    padding: 5px 5px !important;
  
}

.nav-link
{
    font-family: 'Roboto', sans-serif !important;
}
.text-warning
{
    color: goldenrod !important;
}

.bg2
{
    background-color: transparent;
    min-height: 700px !important;
}

.bg3
{
    background-image: url("images/kim-1.jpg");
    background-position: top left;
    background-repeat: no-repeat; 
    background-size: auto 100% !important;
   
}

.bg4
{
    background-image: url("images/bg-4.jpg");
    background-size: cover !important;
}

img
{
    border: 2px solid transparent !important;
    transition: transform 2s;
    transition-delay: 1s;
    
}
img:hover
{
    border: 4px dotted grey !important;
    transform: scale(1.4);
    cursor: zoom-in !important;
}

.main-icon
{
  font-size:100px !important;
  color:white;
}


.zoom-out 
{
  position: relative;
  animation-name: zm-out;
  animation-duration: 5s;
  animation-iteration-count: infinite;
}

@keyframes zm-out 
{
  0%   {transform: scale(1);}
  50%  {transform: scale(0.75);}
  100% {transform: scale(1);}
}




@media only screen and (max-width: 900px) {
    .bg2
    {
    background-color: rgba(0,0,0,0.5);

    }   
  }
  
  @media only screen and (min-width: 600px) 
{
    img:hover
    {
        border: 4px dotted grey !important;
    }
  }