/* MainArea */

#count { position:absolute; top:0; left:0; width:100vw; height:100vh; z-index:-1; background: radial-gradient(red, gold, limegreen, blue, deeppink, beige ); animation: dream_bg 1s ease infinite; opacity: 0; transition: all .3s ease-in-out; }

#main_area { position:relative; margin:0; padding:0; }
#main_logo { position:relative; top:0; left:0; width:100%; height:100vh; }
#main_logo_a,#main_logo_b,#main_logo_c,#main_logo_d,#main_logo_e,#main_logo_f { position:absolute; top:50%; left:50%; transform:translate(-50%,-50%); animation:MainLogoFade .8s cubic-bezier(0.87, 0, 0.13, 1) forwards; opacity:0; }
#main_logo_a { width:70%; }
#main_logo_b { width:70%; }
#main_logo_c { width:50%; }
#main_logo_d { width:75%; }
#main_logo_e { width:40%; }
#main_logo_f { width:40%; }

#logo_a, #logo_b, #logo_c, #logo_d, #logo_e, #logo_f { transition:all .3s ease; }

.fadeout { animation: fadeOut 0.6s forwards; }
.logo_rotate { animation:logoRotate 4s linear infinite; }


@media screen and (min-width:640px) {
  #main_logo_a { width:48%; }
  #main_logo_b { width:50%; }
  #main_logo_c { width:26%; }
  #main_logo_d { width:50%; }
  #main_logo_e { width:25%; }
  #main_logo_f { width:22%; }
}

@media screen and (min-width:960px) {
  #main_logo_a { width:42%; }
  #main_logo_b { width:40%; }
  #main_logo_c { width:22%; }
  #main_logo_d { width:43%; }
  #main_logo_e { width:22%; }
  #main_logo_f { width:18%; }

  .logo_rotate { animation:logoRotate 6.5s linear infinite; }

}

@media screen and (min-width:1500px) {
  #main_logo_a { width:35%; }
  #main_logo_b { width:33%; }
  #main_logo_c { width:18%; }
  #main_logo_d { width:35%; }
  #main_logo_e { width:18%; }
  #main_logo_f { width:14%; }
}