/*SZOVEGHATTER ANIMACIO*/

#hoverlight::before {  
    transform: scaleX(0);
    transform-origin: bottom right;
  }
  
  #hoverlight:hover::before {
    transform: scaleX(1);
    transform-origin: bottom left;
  }
  
  #hoverlight::before {
    content: " ";
    display: block;
    position: absolute;
    top: 0; right: 0; bottom: 0; left: 0;
    inset: 0 0 0 0;
    background: rgb(23, 178, 255);
    z-index: -1;
    transition: transform .3s ease;
  }
  

  /*
  html {
    block-size: 100%;
    inline-size: 100%;
  }*/
  
  #hoverlight{
    position: relative;
    font-size: 16px;
    display: inline;
   /* min-block-size: 50px;
    min-inline-size: 500px;*/
    width: 100px;
    margin: 0;
    box-sizing: border-box;
  /*  display: grid;*/
  /* place-content: center;*/
    font-family: system-ui, sans-serif;

  }
  
  @media (orientation: landscape) {
    #hoverlight {
      grid-auto-flow: column;
    }
  }

  a:hover{
    color:black;
  }

  a{
    color:white;
text-decoration:none;
font-style:italic;
text-decoration: underline;
  }

  /* SVG*/
#svg-wrapper{
  position: fixed;
  bottom:10px;
  right:10px;
  width: 53px;
  height: auto;
  svg{
    position:relative;
    padding:0px !important;
    stroke:none;
  }
  &:hover{
      width: 56px;
      transition: width .1s;
      -webkit-transition: width .1s; /* Safari */
  }
}

// Toggle
.toggle-animation{
  width: 100px;
  height: 50px;
  line-height: 50px;
  text-align:center;
  border:solid 1px;
  font-family:helvetica;
}

/* VALTAKOZO szinu betu */

.title-word {
    animation: color-animation 4s linear infinite;
  }
  
  .title-word-1 {
    --color-1: #DF8453;
    --color-2: #3D8DAE;
    --color-3: #E4A9A8;

  }
  
  .title-word-2 {
    --color-1: #DBAD4A;
    --color-2: #ACCFCB;
    --color-3: #17494D;
  }
  
  .title-word-3 {
    --color-1: #ACCFCB;
    --color-2: #E4A9A8;
    --color-3: #ACCFCB;
  }
  
  .title-word-4 {
    --color-1: #3D8DAE;
    --color-2: #DF8453;
    --color-3: #E4A9A8;
  }
  
  @keyframes color-animation {
    0%    {color: var(--color-1)}
    32%   {color: var(--color-1)}
    33%   {color: var(--color-2)}
    65%   {color: var(--color-2)}
    66%   {color: var(--color-3)}
    99%   {color: var(--color-3)}
    100%  {color: var(--color-1)}
  }
  
  /* Here are just some visual styles. 🖌 */
  
  .changetext {
   /* display: grid;
    place-items: center;  
    text-align: center;
    height: 100vh*/
  }
  
  .title {
    font-family: "Montserrat", sans-serif;
  /*  font-weight: 800;
    font-size: 8.5vw;*/
    text-transform: uppercase;
    font-size: 12px;
  }

  /* FOLDRENGESSZERU */

  .quake {
    position: relative;
    -webkit-box-reflect: below -20px linear-gradient(transparent, rgba(0,0,0,.2));
    /*font-size: 60px;*/
  }
  .quake span {
    font-family: 'Alfa Slab One', cursive;
    position: relative;
    display: inline-block;
    color: #000;
    font-size: 12px;
    text-transform: uppercase;
    animation: quake 1s infinite;
    animation-delay: calc(.1s * var(--i));
    
  }
  @keyframes quake {
    0%,40%,100% {
      transform: translateY(0)
    }
    20% {
      transform: translateY(-20px)
    }
  }

  /* FLIPP */

  .flipp {
    position: relative;
  }
  .flipp span {
    position: relative;
    display: inline-block;
    font-size: 12px;
    color: #000;
    text-transform: uppercase;
    animation: flip 2s infinite;
    animation-delay: calc(.2s * var(--i))
  }
  @keyframes flip {
    0%,80% {
      transform: rotateY(360deg) 
    }
  }

  /* MINDENFELE */

  .line {
    width: 100%;
    height: 4rem;
    overflow: hidden;
    border: 1px solid black;
    padding: 0;
    margin-bottom: 16px;
  }
  
  /* flipping class and key frames*/
  .flipX {
    animation: 1s anim-flipX ease infinite;
  }
  @keyframes anim-flipX {
    0% {
      opacity: 0;
      transform: rotateX(90def);
    }
    50% {
      opacity: 1;
      transform: rotateX(720deg);
    }
    100% {
      /* animate nothing to pause animation at the end */
      opacity: 1;
      transform: rotateX(720deg);
    }
  }
  
  /* lineup class and keyframes */
  .lineUp {
    animation: 2s anim-lineUp ease-out infinite;
  }
  @keyframes anim-lineUp {
    0% {
      opacity: 0;
      transform: translateY(80%);
    }
    20% {
      opacity: 0;
    }
    50% {
      opacity: 1;
      transform: translateY(0%);
    }
    100% {
      opacity: 1;
      transform: translateY(0%);
    }
  }
  /* flipY class and keyframes*/
  .flipY {
    animation-name: spin, depth;
    animation-timing-function: linear;
    animation-iteration-count: infinite;
    animation-duration: 6s;
  }
  @keyframes spin {
    0% {
      transform: rotateY(0deg);
    }
    100% {
      transform: rotateY(-360deg);
    }
  }
  @keyframes depth {
    0% {
      text-shadow: 0 0 black;
    }
    25% {
      text-shadow: 1px 0 black, 2px 0 black, 3px 0 black, 4px 0 black, 5px 0 black;
    }
    50% {
      text-shadow: 0 0 black;
    }
    75% {
      text-shadow: -1px 0 black, -2px 0 black, -3px 0 black, -4px 0 black,
        -5px 0 black;
    }
    100% {
      text-shadow: 0 0 black;
    }
  }
  
  /* subtle zoom to attention and then back */
  .pop-outin {
    animation: 2s anim-popoutin ease infinite;
  }
  
  @keyframes anim-popoutin {
    0% {
      color: black;
      transform: scale(0);
      opacity: 0;
      text-shadow: 0 0 0 rgba(0, 0, 0, 0);
    }
    25% {
      color: red;
      transform: scale(2);
      opacity: 1;
      text-shadow: 3px 10px 5px rgba(0, 0, 0, 0.5);
    }
    50% {
      color: black;
      transform: scale(1);
      opacity: 1;
      text-shadow: 1px 0 0 rgba(0, 0, 0, 0);
    }
    100% {
      /* animate nothing to add pause at the end of animation */
      transform: scale(1);
      opacity: 1;
      text-shadow: 1px 0 0 rgba(0, 0, 0, 0);
    }
  }
  
  .fromtop {
    animation: 2s anim-fromtop linear infinite;
  }
  @keyframes anim-fromtop {
    0% { opacity: 0; transform: translateY(-100%);}
    25% { opacity: 1; transform: translateY(0%);}
    50% {
    }
    100% {
    }
  }

  /* VALTAKOZO */

  #cardos {
    color: #333;
    font-family: tahoma;
    font-size: 12px;
    font-weight: 100;
    line-height: 1.5;
    text-transform: uppercase;
    white-space: nowrap;
    overflow: hidden;
    position: relative;
    width: 550px;
  }
  
  #cardos #cardes{
    font-size: 12px;
    margin-left: 0px;
  }

  .message {
    background-color: yellow;
    color: #333;
    display: block;
    font-weight: 12px;
    overflow: hidden;
    position: absolute;
    /*padding-left: 0.5rem;*/
    top: 0px;
    left: 70px;
    animation: openclose 5s ease-in-out infinite;
  }
  
  .word1, .word2, .word3 {
    font-family: tahoma;
  }
  
  @keyframes openclose {
    0% {
      top: 0.2rem;
      width: 0;
    }
    5% {
      width: 0;
    }
    15% {
      width: 230px;
    }
    30% {
      top: 0.2rem;
      width: 230px;
    }
    33% {
      top: 0.2rem;
      width: 0;
    }
    35% {
      top: 0.2rem;
      width: 0;
    }
    38% {
      top: -4.5rem;
      
    }
    48% {
      top: -4.5rem;
      width: 190px;
    }
    62% {
      top: -4.5rem;
      width: 190px;
    }
    66% {
      top: -4.5rem;
      width: 0;
      text-indent: 0;
    }
    71% {
      top: -9rem;
      width: 0;
      text-indent: 5px;
    }
    86% {
      top: -9rem;
      width: 285px;
    }
    95% {
      top: -9rem;
      width: 285px;
    }
    98% {
      top: -9rem;
      width: 0;
      text-indent: 5px;
    }
    100% {
      top: 0;
      width: 0;
      text-indent: 0;
    }
  }

  .writer {
    margin: auto;
    color: #000;
    font: 12 normal 2.5em 'tahoma';
    font-size: 12px;
   /* text-shadow: 5px 2px #222324, 2px 4px #222324, 3px 5px #222324;*/
  }

  /* FOKUSZ */

  

  #szoveg {
    display:inline-block;
    overflow:hidden;
    white-space:nowrap;
  }
  
  #szoveg:first-of-type {    /* For increasing performance 
                         ID/Class should've been used. 
                         For a small demo 
                         it's okaish for now */
    animation: showup 7s infinite;
  }
  
  #szoveg:last-of-type {
    width:0px;
    animation: reveal 7s infinite;
  }
  
  #szoveg:last-of-type span {
    margin-left:-355px;
    animation: slidein 7s infinite;
  }
  
  @keyframes showup {
      0% {opacity:0;}
      20% {opacity:1;}
      80% {opacity:1;}
      100% {opacity:0;}
  }
  
  @keyframes slidein {
      0% { margin-left:-800px; }
      20% { margin-left:-800px; }
      35% { margin-left:0px; }
      100% { margin-left:0px; }
  }
  
  @keyframes reveal {
      0% {opacity:0;width:0px;}
      20% {opacity:1;width:0px;}
      30% {width:355px;}
      80% {opacity:1;}
      100% {opacity:0;width:355px;}
  }

  /* FADE-IN ANIMACIO */

  #fadein{
    animation: fadeInAnimation ease 3s;
              animation-iteration-count: 1;
              animation-fill-mode: forwards;
       
  }
  
        
  @keyframes fadeInAnimation {
    0% {
     opacity: 0;
        }
  100% {
     opacity: 1;
        }
  }

/* AUTOMATIKUS IRAS */

#typewriter { 

}