@font-face {
    font-family: 'MinecraftTen';
    src: url('../assets/fonts/MinecraftTen.woff2') format('woff2'),
        url('../assets/fonts/MinecraftTen.woff') format('woff');
    font-weight: normal;
    font-style: normal;
    font-display: swap;
}
@font-face {
    font-family: 'Gastroe Demo';
    src: url('../assets/fonts/Gastroe-Demo.woff2') format('woff2'),
        url('../assets/fonts/Gastroe-Demo.woff') format('woff');
    font-weight: normal;
    font-style: normal;
    font-display: swap;
}
p,h3,span{
    font-family: "Albert Sans", sans-serif;
  font-optical-sizing: auto;
  font-weight: <weight>;
  font-style: normal;
}
.active-tab {
    transform: scale(1.05);
    position: relative;
    z-index:11;
    .bg-white{
        background-color: black !important;
    }
    &::after{
        content:'↓';
        font-size: 60px;
        position: absolute;
        color: rgb(179, 118, 4);
        left: 0;
        right:0;
        bottom:-70px;
        width: 30px;
        z-index: 9;
        margin-inline: auto;
    }
}
body{
    background:url(../assets/images/newbanner.png) center center / cover fixed ;
}

.minecraft-ten {
    font-family: 'MinecraftTen', sans-serif;
}
.minecraft-font {
    font-family: 'Minecraft', monospace;
}
.heading-font {
    font-family: 'Gastroe Demo';
    font-weight: normal;
    font-style: normal;
}
.para{
    font-family: 'Gill Sans', 'Gill Sans MT', Calibri, 'Trebuchet MS', sans-serif;
}
a.link:hover{
    color: orange;
}

.card {
  position: relative;
  height: auto;
  border-radius: 14px;
  z-index: 1111;
  display: flex;
  overflow: hidden;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  box-shadow: 20px 20px 60px #0000001f, -20px -20px 60px #00000017;
  padding: 5px;
  transition: all 0.5s;

    &.divine{
        transform: translate(50px,0) ;
        z-index: 199;
        background: #2A7B9B;
        background: linear-gradient(90deg,rgba(42, 123, 155, 1) 0%, rgba(87, 199, 177, 1) 50%, rgba(83, 227, 237, 1) 100%);
        .bg{
            background: #dcf2ff;
        }
        &:hover{
          animation: move-top-divine 0.5s  ease;
          animation-fill-mode: forwards;
        }
    }
    &.omni{
        z-index: 200;
        background: #ff8800;
        background: linear-gradient(90deg,rgb(255, 167, 79) 0%, rgb(255, 219, 136) 50%, rgb(255, 170, 85) 100%);
        .blob{
            background:red;
        }
        .bg{
            background: #ffe9d4;
        }
    }
    &.celestial{
        transform: translate(-20px,0) ;
        z-index: 199;
        background: #8ab3a4;
        background: linear-gradient(90deg,rgb(73, 147, 110) 0%, rgb(72, 255, 200) 50%, rgb(21, 130, 112) 100%);
        .bg{
            background: #e1ffeb;
        }
        .blob{
            background:green;
        }
        &:hover{
          animation: move-top-celestial 0.5s  ease;
          animation-fill-mode: forwards;
        }
    }
}
.divine-text{
    color: #0099FF; 
    background-image: linear-gradient(45deg, #0099FF 18%, #00BBFF 26%, #0073FF 33%, #40ACFF 59%); 
    background-clip: text; 
    -webkit-background-clip: text; 
    -webkit-text-fill-color: transparent; 
}
.celestial-text{
    color: #0099FF; 
    background-image: linear-gradient(45deg, #186359 18%, #19927a 26%, #12ab69 33%, #1eaa92 59%); 
    background-clip: text; 
    -webkit-background-clip: text; 
    -webkit-text-fill-color: transparent; 
}
.omni-text{
    color: #ba760f; 
    background-image: linear-gradient(45deg, #c38426 , #b58747 , #914d00 ); 
    background-clip: text; 
    -webkit-background-clip: text; 
    -webkit-text-fill-color: transparent;
}
.bg {
  position: relative;
  width: 100%;
  height: 100%;
  border-radius: 14px;
  z-index: 2;
  background: rgba(255, 255, 255, .95);
  backdrop-filter: blur(24px);
  border-radius: 10px;
  overflow: hidden;
  outline: 2px solid white;
}


.blob {
  position: absolute;
  z-index: 1;
  top: 50%;
  left: 50%;
  width: 50%;
  height: 50%;
  border-radius: 50%;
  background-color: #def5ff;
  opacity: 1;
  filter: blur(12px);
  animation: blob-bounce 5s infinite ease;
}
@keyframes move-top-celestial {
  0% {
    transform: translate(-20px,0) ;
  }
50% {
    transform: translate(50px,0) ;
}
  100% {
    z-index:201 ;
    transform: translate(-100px,0) ;

  }
}
@keyframes move-top-divine {
  0% {
    transform: translate(50px,0) ;
  }
50% {
    transform: translate(-50px,0) ;
}
  100% {
    z-index:201 ;
    transform: translate(100px,0) ;

  }
}
@keyframes blob-bounce {
  0% {
    transform: translate(-110%, -110%) translate3d(0, 0, 0);
  }

  25% {
    transform: translate(-120%, -120%) translate3d(150%, 0, 0);
  }

  50% {
    transform: translate(-110%, -110%) translate3d(150%, 150%, 0);
  }

  75% {
    transform: translate(-110%, -110%) translate3d(0, 110%, 0);
  }

  100% {
    transform: translate(-110%, -110%) translate3d(0, 0, 0);
  }
}


@import url(https://fonts.googleapis.com/css?family=Oswald);
@keyframes clouds-loop-1 {
  to {
    background-position: -1000px 0;
  }
}
.clouds-1 {
  background-image: url("https://media.discordapp.net/attachments/1384874251596595200/1390391225160433724/clouds_2.png?ex=6868163c&is=6866c4bc&hm=73823a85947908132124dbd820e4eb4a15124f15effe939401ebd918cb310754&=&format=webp&quality=lossless");
  animation: clouds-loop-1 20s infinite linear;
}

@keyframes clouds-loop-2 {
  to {
    background-position: -1000px 0;
  }
}
.clouds-2 {
  background-image: url("https://media.discordapp.net/attachments/1384874251596595200/1390391225537789952/clouds_1.png?ex=6868163c&is=6866c4bc&hm=90822b698bcc9362eb4503390cc9a970dd4c9aadeafe154ce7db4df9543c2e7d&=&format=webp&quality=lossless");
  animation: clouds-loop-2 15s infinite linear;
}

@keyframes clouds-loop-3 {
  to {
    background-position: -1579px 0;
  }
}
.clouds-3 {
  background-image: url("https://media.discordapp.net/attachments/1384874251596595200/1390391224766042303/clouds_3.png?ex=6868163c&is=6866c4bc&hm=f44ceb64bfe8b2a3ab7134c306f305bd06f878f814f8d30968bc42666fee00c1&=&format=webp&quality=lossless&width=1377&height=297");
  animation: clouds-loop-3 17s infinite linear;
}

.clouds {
  filter: progid:DXImageTransform.Microsoft.Alpha(Opacity=40);
  opacity: 0.4;
  pointer-events: none;
  position: absolute;
  overflow: hidden;
  top: 0;
  left: 0;
  right: 0;
  height: 100%;
}

.clouds-1,
.clouds-2,
.clouds-3 {
  background-repeat: repeat-x;
  position: absolute;
  top: 0;
  right: 0;
  left: 0;
  height: 500px;
}




.box {
  position: relative;
  width: 300px;
  height: 200px;
}
.box-contents {
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  border-radius: 40px;
  background: url(https://source.unsplash.com/300x300/?cat) 50% 50% / cover no-repeat;
  transition: .5s ease;
}
.hover-point {
  position: absolute;
  z-index: 2;
  width: calc(100% / 3);
  height: calc(100% / 3);
  filter: drop-shadow(0 0 50px rgba(0, 0, 0, .5));

}
.hover-point:nth-child(1) {
  top: 0;
  left: 0;
}
.hover-point:nth-child(2) {
  top: 0;
  left: calc(100% / 3);
}
.hover-point:nth-child(3) {
  top: 0;
  right: 0;
}
.hover-point:nth-child(4) {
  top: calc(100% / 3);
  left: 0;
}
.hover-point:nth-child(5) {
  top: calc(100% / 3);
  right: 0;
}
.hover-point:nth-child(6) {
  bottom: 0;
  left: 0;
}
.hover-point:nth-child(7) {
  bottom: 0;
  left: calc(100% / 3);
}
.hover-point:nth-child(8) {
  bottom: 0;
  right: 0;
}
.hover-point:nth-child(1):hover ~ .box-contents {
  box-shadow: 15px 15px 50px rgba(0, 0, 0, .3);
  transform-origin: right top;
  transform: perspective(1000px) rotateX(10deg) rotateY(-10deg) rotateZ(2deg);
}
.hover-point:nth-child(2):hover ~ .box-contents {
  box-shadow: 0 15px 50px rgba(0, 0, 0, .3);
  transform-origin: center top;
  transform: perspective(1000px) rotateX(10deg);
}
.hover-point:nth-child(3):hover ~ .box-contents {
  box-shadow: -15px 15px 50px rgba(0, 0, 0, .3);
  transform-origin: left top;
  transform: perspective(1000px) rotateX(10deg) rotateY(10deg) rotateZ(-2deg);
}
.hover-point:nth-child(4):hover ~ .box-contents {
  box-shadow: 15px 5px 50px rgba(0, 0, 0, .3);
  transform-origin: left center;
  transform: perspective(1000px) rotateY(-10deg);
}
.hover-point:nth-child(5):hover ~ .box-contents {
  box-shadow: -15px 5px 50px rgba(0, 0, 0, .3);
  transform-origin: right center;
  transform: perspective(1000px) rotateY(10deg);
}
.hover-point:nth-child(6):hover ~ .box-contents {
  box-shadow: 15px -15px 50px rgba(0, 0, 0, .3);
  transform-origin: right bottom;
  transform: perspective(1000px) rotateX(-10deg) rotateY(-10deg) rotateZ(-2deg);
}
.hover-point:nth-child(7):hover ~ .box-contents {
  box-shadow: 0 -15px 50px rgba(0, 0, 0, .3);
  transform-origin: center bottom;
  transform: perspective(1000px) rotateX(-10deg);
}
.hover-point:nth-child(8):hover ~ .box-contents {
  box-shadow: -15px -15px 50px rgba(0, 0, 0, .3);
  transform-origin: left bottom;
  transform: perspective(1000px) rotateX(-10deg) rotateY(10deg) rotateZ(2deg);
}