@import url('https://fonts.googleapis.com/css2?family=Inter:wght@100;200;300;400;500;600;700;900&display=swap');


/* Root Value Stylings */
*,
*::before,
*::after {
  box-sizing: border-box;
}

html {
  scroll-behavior: smooth;
}

/* Variables */
:root {
  --margin: 3rem;
  --color-one: hsl(291, 47%, 60%);
  --color-two: hsl(340, 82%, 59%);
  --color-three: hsl(207, 90%, 77%);
  --color-four: hsl(187, 71%, 82%);
  --box-shadow: 0px 0px 3px 2px var(--color-one);
  --primary-color: black;
  --secondary-color: white;
  --font-size: 1.16rem;
  --sub-heading: 1.25rem;
  --h1: 3rem;
  --letter-spacing: -0.5px;
}

/* Text Select animation */
::selection {
  background: var(--secondary-color);
  color: var(--primary-color);
}

/* Body Stylings */
body {
  font-family: Inter, Helvetica, ui-sans-serif, sans-serif, arial;
  font-weight: 300;
  font-size: var(--font-size);
  margin: 0rem;
  padding: 0rem;
  background-color: var(--primary-color);
  color: white;
  line-height: 1.4;
  letter-spacing: var(--letter-spacing);
  width: 100%;
  min-height: 100%;
  min-width: 320px;
}

img {
  max-width: 100%;
}

a {
  color: var(--color-one);
  text-decoration: none;
  transition: all 0.5s ease-in-out;
}

/* Animations */
@keyframes fadeIn {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}

/* Hover Effects */
@media(hover: hover) and (pointer: fine) {

  a:hover {
    color: var(--secondary-color);
  }

  .a:hover {
    color: var(--color-one);
  }

  .a:hover img{
    opacity: 95%;
    box-shadow: var(--box-shadow);
  }

  .gallery-img:hover {
    opacity: 95%;
    box-shadow: var(--box-shadow);
  }

  .project-img:hover {
    opacity: 95%;
    box-shadow: var(--box-shadow);
  }

  .card:hover .card-body {
    color: white;
    opacity: 1;
  }

  .card:hover .card-title {
    color: rgba(255, 255, 255, 1);
  }

  .card:hover .img {
    background-color: black;
    filter: blur(0.75px);
    box-shadow: var(--box-shadow);
  }

  .card:hover .card-img {
    opacity: 0.7;
  }

  .pagination a:hover {
    color: var(--color-one);
  }

}