@keyframes object-x{
   0.0% {left:0%;}
   5.9% {left:0%;}
  11.8% {left:12.5%;}
  17.6% {left:12.5%;}
  23.5% {left:25%}
  29.4% {left:25%}
  35.3% {left:37.5%}
  41.2% {left:37.5%}
  47.1% {left:50%}
  52.9% {left:50%}
  58.8% {left:62.5%}
  64.7% {left:62.5%}
  70.6% {left:75%}
  76.5% {left:75%}
  82.4% {left:87.5%}
  88.2% {left:87.5%}
  100%  {left:0%;}
}

@keyframes bg{
  0.0% {background-color:white;}
  30.6% {background-color:white;}
  36.5% {background-color:black;}
  42.4% {background-color:black;}
  48.2% {background-color:white;}
  77.6% {background-color:white;}
  83.5% {background-color: black;}
  89.4% {background-color: black;}
  100% {background-color: white;}
}
@keyframes black-colored-text{
  0%{opacity:100%;}
  36.5%{opacity:100%;}
  36.6%{opacity:0%;}
  42.3%{opacity:0%;}
  42.4%{opacity:100%;}
  83.5%{opacity:100%;}
  83.6%{opacity:0%;}
  89.3%{opacity:0%;}
  89.4%{opacity:100%;}
  100%{opacity:100%;}
}
@keyframes white-colored-text{
  0%{opacity:0%;}
  30.5%{opacity:0%;}
  30.6%{opacity:100%;}
  48.2%{opacity:100%;}
  48.3%{opacity:0%;}
  77.5%{opacity:0%;}
  77.6%{opacity:100%;}
  89.3%{opacity:100%;}
  100%{opacity:100%;}
}

html{
  animation: 24s cubic-bezier(0.65, 0, 0.35, 1) 0s infinite bg;
}
header{
  width:100%;
  position:fixed;
  z-index:2;
  animation: 24s cubic-bezier(0.65, 0, 0.35, 1) 0s infinite bg;

  .header__container{
      width:min(100vw,80vh);
      margin:0 auto;
      position:relative;
  }

  .checker{
    display:flex;
    >div{
      width:100%;
      height:min(12.5vw, 10vh);
      flex: 100% 100%;
      background-color:white;
      border:solid black 1px;
      border-right:none;
    }
    >div:nth-child(4n){
      background-color:black;
    }
  }
  .object{
    width:min(12.5vw, 10vh);
    padding:min(calc(12.5vw * 0.15), calc(10vh * 0.15));
    position: absolute;
    top:0;
    animation: 24s cubic-bezier(0.83, 0, 0.17, 1) 0s infinite object-x;
    >img{
      max-width:100%;
    }
  }
}

main{
  max-width:1000px;
  margin-left:auto;
  margin-right:auto;
  padding-top:min(12.5vw, 10vh);
  z-index:1;

  display:flex;
  >*{
    width:50%;
  }
  .section-black{
    color:black;
    animation:24s linear 0s infinite black-colored-text;
    overflow:hidden;
  }
  .section-white{
    color:white;
    animation: 24s linear 0s infinite white-colored-text;
    overflow:hidden;
  }
}