@import url('https://fonts.googleapis.com/css?family=Montserrat');
@import url('https://fonts.googleapis.com/css2?family=Montserrat:wght@500&display=swap');

/*reset desktop elements*/
@media (max-width:30rem) {

    #construction-main-container {
        position:absolute;
        top:50%;
        left:50%;
        transform:translate(-50%,-50%);
        background:rgba(250,219,255,.3);
        width:100%;
        height:100%;
    }

      @keyframes spinner {
        0% {
          transform: translate3d(-50%, -50%, 0) rotate(0deg)scale(1.3);
        }
        50%{
            transform: translate3d(-50%, -50%, 0) rotate(180deg)scale(1.0);

        }
        100% {
          transform: translate3d(-50%, -50%, 0) rotate(360deg)scale(1.3);
        }
      }

      @keyframes heart {
          0% {
          transform: translate3d(-50%, -50%, 0) scale(1.2);
          opacity:.5;
        }
        50%{
            transform: translate3d(-50%, -50%, 0) scale(.4);
            opacity:1;

        }
        100% {
          transform: translate3d(-50%, -50%, 0) scale(1.2);
          opacity:.5;
        }
      }
      .spin::before {
        position: absolute;
        top: 50%;
        left: 50%;
        transform: translate3d(-50%, -50%, 0);
        animation: .65s linear infinite spinner;
        animation-play-state: inherit;
        border: solid 3px #FFCCCC;
        background:#fff;
        border-bottom-color: #fff;
        border-top-color: #fff;
        border-radius: 50%;
        content: "";
        height: 100px;
        width: 100px;
        will-change: transform;
      }

      h1{
        position:absolute;
        top:70%;
        left:50%;
        transform:translate(-50%,-70%);
        font-family: 'Montserrat', sans-serif;
        text-align:center;
        font-size:4vw;
        user-select:none!important;
        color:#4c566a;
        text-shadow:1px 1px 1px rgba(0,0,0,.3);
        letter-spacing:2px;
		width:90vw;
      }

      .name {
        display:inline-block;

      }

     .line {
        background:pink;
        height:2.5px;
        width:100%;
     }


    img {
        position:absolute!important;
        top:50%;
        left:50%;
        transform:translate(-50%,-50%);
        width:155px;
        animation: heart 1.8s  infinite;
    }





} 


/*desktop elements*/
@media (min-width:30rem) {
    #construction-main-container {
        position:absolute;
        top:50%;
        left:50%;
        transform:translate(-50%,-50%);
        background:rgba(250,219,255,.3);
        width:100%;
        height:100%;
    }

      @keyframes spinner {
        0% {
          transform: translate3d(-50%, -50%, 0) rotate(0deg)scale(1.3);
        }
        50%{
            transform: translate3d(-50%, -50%, 0) rotate(180deg)scale(1.0);

        }
        100% {
          transform: translate3d(-50%, -50%, 0) rotate(360deg)scale(1.3);
        }
      }

      @keyframes heart {
          0% {
          transform: translate3d(-50%, -50%, 0) scale(1.2);
          opacity:.5;
        }
        50%{
            transform: translate3d(-50%, -50%, 0) scale(.4);
            opacity:1;

        }
        100% {
          transform: translate3d(-50%, -50%, 0) scale(1.2);
          opacity:.5;
        }
      }
      .spin::before {
        position: absolute;
        top: 50%;
        left: 50%;
        transform: translate3d(-50%, -50%, 0);
        animation: .65s linear infinite spinner;
        animation-play-state: inherit;
        border: solid 3px #FFCCCC;
        background:#fff;
        border-bottom-color: #fff;
        border-top-color: #fff;
        border-radius: 50%;
        content: "";
        height: 100px;
        width: 100px;
        will-change: transform;
      }

      h1{
        position:absolute;
        top:70%;
        left:50%;
        transform:translate(-50%,-70%);
        font-family: 'Montserrat', sans-serif;
        text-align:center;
        font-size:1.2vw;
        user-select:none!important;
        color:#4c566a;
        text-shadow:1px 1px 1px rgba(0,0,0,.3);
        letter-spacing:2px;
      }

      .name {
        display:inline-block;

      }

     .line {
        background:pink;
        height:2.5px;
        width:100%;
     }


    img {
        position:absolute!important;
        top:50%;
        left:50%;
        transform:translate(-50%,-50%);
        width:155px;
        animation: heart 1.8s  infinite;
    }

}