@import url('https://fonts.googleapis.com/css2?family=Anton&display=swap');

@import url('https://fonts.googleapis.com/css2?family=Rubik Glitch&display=swap');

/* @import url('https://fonts.googleapis.com/css2?family=Cinzel&display=swap'); */

@font-face {

  font-family: 'Cinzel';

  src: url('./Fonts/Cinzel-Regular.otf') format('truetype'),

       url('./Fonts/Cinzel-Black.otf') format('woff'),

       url('./Fonts/Cinzel-Bold.otf') format('embedded-opentype');

  font-weight: bold;

  font-style: normal;

}

@font-face {

  font-family: nexaLight;

  src: url('nexa/Nexa-ExtraLight.ttf');

}



@font-face {

  font-family: nexaHeavy;

  src: url('nexa/Nexa-Heavy.ttf');

}

  .BeeCookie-text{color: black !important;}

html, body, div{

  background-color: black;

  animation: fadeInAnimation ease-in-out 3s;

  animation-iteration-count: 1;

  animation-fill-mode: forwards;

}

@keyframes fadeInAnimation {

  0% {

      opacity: 0;

  }

  100% {

      opacity: 1;

   }

}

*{

    box-sizing: border-box;

  }

  body {

    user-select: text;

    margin: 0;

    padding: 0;

  }

  span{

    font-family: nexaLight, serif;

    color: white;

  }

  .text-wrapper{

    width: 100%;

    height: 100%;

    z-index: 1;

  }

  .mainPage {

    position: relative;

    width: 100vw;

    height: 100vh;

    overflow: hidden;

    display: flex;

    flex-direction: row;

    overflow: hidden;

  }

  

  .columnLeft {

    background-image: url('../kovarstvi/assets/images/IMG_2714.webp');

    background-size: cover;

    background-position-x: center;

    background-position-y: bottom;

    position: relative;

    width: 50vw;

    height: 100vh;

    object-fit: cover;

    filter: grayscale(100%);

    position: relative;

    transition: filter 0.6s;

    /* border: 1px solid black; */

  }

  

  .columnRight {

    background-image: url('../../Images/tattooBG.jpg');

    background-size: cover;

    background-position-x: center;

    position: relative;

    width: 50vw;

    height: 100vh;

    object-fit: cover;

    filter: grayscale(100%);

    position: relative;

    transition: filter 0.6s;

    /* border: 1px solid red; */

  }

  .columnLeft:hover,

  .columnRight:hover {

    filter: grayscale(0%);

  }

  .columnLeft:hover ~  .centered-text .left-text {

    color: rgba(182, 0, 0, 0.507);

  }

  .centered-text {

    /* font-family: 'Cinzel', serif*/

    font-family: 'nexaHeavy', serif;

    font-size: 7rem;

    font-weight: bold;

    position: absolute;

    top: 50%;

    left: 52%;

    transform: translate(-50%, -50%) rotate(-5deg);

    text-align: center;

    z-index: 1;

    color: whitesmoke;

  }

  .titleText{

        /* width: 100%; */

    /* height: 100%; */

    line-height: 1;

    display: flex;

    text-align: center;

    align-content: center;

    justify-content: center;

    align-items: center;

    flex-wrap: wrap;

    flex-direction: row;

    font-family: 'nexaHeavy', serif;

    font-size: 5vw;

    font-weight: bold;

    top: 35%;

    left: 13%;

    z-index: 1;

    position: absolute;

  }

  .animate-charcter

{

   text-transform: uppercase;

  background-image: linear-gradient(

    -225deg,

    #00000000 0%,

    rgb(255, 255, 255) 29%,

    #ffffff41 67%,

    #ffffff00 100%

  );

  background-size: auto auto;

  background-clip: border-box;

  background-size: 200% auto;

  color: #fff;

  background-clip: text;

  text-fill-color: transparent;

  -webkit-background-clip: text;

  -webkit-text-fill-color: transparent;

  animation: textclip 4s linear;

  display: inline-block;

      /* font-size: 190px; */

}



@keyframes textclip {

  to {

    background-position: 200% center;

  }

}



.fading-text {

  opacity: 0; /* Initially set the text to be invisible */

  position: relative;

  display: inline-block;

  animation: fade-in 2s linear forwards; /* Adjust the duration as needed */

  white-space: nowrap; /* Prevent the text from wrapping */

}



@keyframes fade-in{

  0%{

    opacity: 0; /* Start and 25% mark, fully invisible */

  }

  100% {

    opacity: 1; /* 100% mark, fully visible */

    color: white; /* Set the text color to white */

  }

}