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

@font-face {
    font-family: Kingrad;
    src: url(./kingred.otf);
}

@font-face {
    font-family: PlanerMedium;
    src: url(./fonts/Planer-Medium.woff2);
}

@font-face {
    font-family: RoganSamiBold;
    src: url(./fonts/Rogan-SemiBold.woff2);
}

@font-face {
    font-family: Anton;
    src: url(./fonts/Anton-Regular.woff2);
}

@font-face {
    font-family: conthrax;
    src: url(./fonts/conthrax-sb.woff2);
}

:root {
    --Dark: #000000;
    --DarkGrey: #0b0a06;
    --Darklight: #818080;
    --white: #ffffff;
}

*::selection {
    background-color: var(--white);
}

* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

::-webkit-scrollbar {
    width: 8px;
    height: 10px;
    background: transparent;
}

::-webkit-scrollbar-thumb {
    border-radius: 8px;
    background: #575e62;
}



html {
    scroll-behavior: smooth;
}

body[theme="black"] {
    background-color: var(--Dark);
}

img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}


.masonry>* {
    break-inside: avoid;
}


.menu-enter {
    opacity: 0;
    transform: translateY(-10px);
}

.menu-enter-active {
    opacity: 1;
    transform: translateY(0);
    transition: all 300ms ease-in-out;
}

.menu-exit {
    opacity: 1;
    transform: translateY(0);
}

.menu-exit-active {
    opacity: 0;
    transform: translateY(-10px);
    transition: all 300ms ease-in-out;
}

.links a {
    text-decoration: none;
    position: relative;
    transition: color 0.5s ease;
  }
  
  .links a::after {
    content: '';
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    height: 2px;
    background: linear-gradient(90deg, transparent, #A6A6A6, transparent);
    background-size: 300% 100%;
    opacity: 0;
    transition: opacity 0.5s;
  }
  
  .links a:hover {
    color: #A6A6A6;
  }
  
  .links a:hover::after {
    opacity: 1;
    animation: shimmer111 2s linear infinite !important;
  }
  
  @keyframes shimmer111 {
    0% {
      background-position: 200% 0;
    }
    100% {
      background-position: -200% 0;
    }
  }