body{font-family:Arial,sans-serif;font-size:1.6vw;padding:0 1.6vw}
.container,.circle,#msg,.circle ~ #msg,.circle ~ #msg div,.animate{-webkit-transition:1s;-moz-transition:1s;-o-transition:1s;transition:1s}
.container{display:flex;position:relative;background:none;top:10vw;width:84vw;height:10vw;margin:0 auto;text-align:center;align-items:center;justify-content:center}

.circle{position:absolute;background:linear-gradient(#3669f9,#35e4b4);left:var(--left);width:10vw;height:10vw;margin:1.6vw;border-radius:50%;box-shadow:0 0 1.6vw rgba(0,0,0,.1)}
#msg{position:absolute;top:2.5vw;opacity:1}

.circle ~ #msg,.circle ~ #msg div{background:red;position:absolute;left:var(--left);width:20vw;color:var(--mColor);opacity:0;z-index:-1}
.circle ~ #msg div{opacity:1}

.animate{--aniY:1.5vw;-webkit-transform:translateY(var(--aniY));-moz-transform:translateY(var(--aniY));-ms-transform:translateY(var(--aniY));-o-transform:translateY(var(--aniY));transform:translateY(var(--aniY))}
.footer{position:fixed;background:#000;left:0;right:0;bottom:0;padding:.83vw .83vw;color:#fff;font-size:90%;text-transform:uppercase}

.circle:nth-of-type(1):not(:hover),.circle:nth-of-type(2):not(:hover),.circle:nth-of-type(3):not(:hover),.circle:nth-of-type(4):not(:hover),.circle:nth-of-type(5):not(:hover){
--aniY:0vw}

.circle:nth-of-type(1):hover ~ #msg,.circle:nth-of-type(2):hover ~ #msg,.circle:nth-of-type(3):hover ~ #msg,.circle:nth-of-type(4):hover ~ #msg,.circle:nth-of-type(5):hover ~ #msg{
left:var(--left);top:12vw;opacity:1}

.circle:nth-of-type(1) ~ #msg:hover,.circle:nth-of-type(2) ~ #msg:hover,.circle:nth-of-type(3) ~ #msg:hover,.circle:nth-of-type(4) ~ #msg:hover,.circle:nth-of-type(5) ~ #msg:hover{
left:var(--left);top:12vw;opacity:1}