@font-face {
    font-family: 'uniFont';
    src: url(../fonts/DINNextLTPro-Regular.otf) format('opentype');
}
/* (REMOVE BODY PROPERTY  ) */
body {
    margin: 0px;
    padding: 0px;
}

#mm-container{
    background-color: #0d4f8a;
}

/* Animation container */
#tanim{
    max-width: 3000px;
    position: relative;
}

/* Text box in bottom */
#mm-text-box {
    padding-bottom: 1.5vw;
    padding-top: 1vw;
    z-index: 99;
    height: 4vw;
    display: flex;
    justify-content: center;
    align-items: center;
}

/* Number in buttons */

.mm-h1 {
    font-family: 'uniFont', sans-serif;
    color: #ecf6fe;
    font-size: 3vw;
    display: flex;
    justify-content: center;
    align-items: center;
    line-height: 4vw;
    padding-top: 0.3vw;
}

/* All Buttonns in animation */

.mm-all-btn{
    height: 4vw;
    width: 4vw;
    /* line-height: 2.5vw; */
    display: flex;
    justify-content: center;
    align-items: center;
    text-align: center;
    cursor: pointer;
    border-radius: 50%;
    animation: pulse 1.5s infinite;
    background: #de0466;
    z-index: 99;
    
}

/* Single buttons in animation */

#mm-first-btn {
    position: absolute;
    top:44%;
    left: 20%;
    
}

#mm-second-btn {
    position: absolute;
    top:14%;
    left: 7%;
}

#mm-third-btn {
    position: absolute;
    top:14%;
    left:40.5%;
}

#mm-fourth-btn {
    position: absolute;
    top:14%;
    left:70%;
}

#mm-fith-btn {
    position: absolute;
    top: 60%;
    left: 85%;
}

#mm-sixth-btn {
    position: absolute;
    top:71%;
    left:50%;
}
/* Text and buttons under the animation */

.mm-all-text-btn {
    height: 4vw;
    width: 4vw;
    background: #de0466;
    z-index: 99;
    border-radius: 50%;
    display: flex;
    justify-content: center;
    align-items: center;
    
    text-align: center;
}

.mm-all-info {
    color: #ecf6fe;
    font-family: 'uniFont', sans-serif;
    font-size: 2vw;
    z-index: 99;
    display: none;
}

.mm-all-text-bottom {
    padding-left: 1vw;
}

/* Textbox visibility */
.mm-visibility {
    transition: opacity 3s ease;
    display: flex;
    align-items: center;
    justify-content: center;
 }

/* Button animation */

@keyframes pulse {
    0% {
      transform:(scale(.9));
    }
    70% {
      transform:(scale(1));
      box-shadow: 0 0 0 0.7vh rgba(222, 4, 102, 0.5);
      
    }
      100% {
      transform:(scale(.9));
      box-shadow: 0 0 0 0 rgba(222, 4, 102, 0);
      
    }
  }