@keyframes transformAnimation {
  0% {
    transform: translateY(-100%) scaleY(1);
  }
  80% {
    transform: translateY(0%) scaleY(1);
  }
  100% {
    transform: translateY(-2%) scaleY(1) ;
  }
}

@keyframes sizeAnimation {
    0% {
        transform: scale(0.8);
    }
    50% {
        transform: scale(1.2);
    }
    100% {
        transform: scale(0.8);
    }
}
@keyframes sizeAnimation2 {
    0% {
        transform: scale(1);
    }
    25% {
        transform: scale(1.2)
    }
    75% {
        transform: scale(0.8);
    }
    100% {
        transform: scale(1);
    }
}
@keyframes sizeAnimation3 {
    0% {
        transform: scale(1.2);
    }
    50% {
        transform: scale(0.8);
    }
    100% {
        transform: scale(1.2);
    }
}
@keyframes sizeAnimation4 {
    0% {
        transform: scale(1);
    }
    25% {
        transform: scale(0.8)
    }
    75% {
        transform: scale(1.2);
    }
    100% {
        transform: scale(1);
    }
}

html, body{
    background: black;
}

a{
    color: #827553;
}

.bubbles{
    overflow:hidden;
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 50vh;
    width: 100vw;
}
.bubbles svg{
    position: absolute;
    top: 0;
    left: 50%;
    transform: translateX(-50%);
    width: 100vw;
    height: 100%;
    min-width: 1000px;
}

/*.bubbles svg path{
    animation: sizeAnimation 4s infinite linear;
}*/
.bubbles svg path.cls-1, .bubbles svg path.cls-2, .bubbles svg path.cls-3, .bubbles svg path.cls-4, .bubbles svg path.cls-5{
    animation: sizeAnimation 4s infinite linear;
}
.bubbles svg path.cls-6, .bubbles svg path.cls-7, .bubbles svg path.cls-8, .bubbles svg path.cls-9, .bubbles svg path.cls-10{
    animation: sizeAnimation2 4s infinite linear;
}
.bubbles svg path.cls-11, .bubbles svg path.cls-12, .bubbles svg path.cls-13, .bubbles svg path.cls-14, .bubbles svg path.cls-15{
    animation: sizeAnimation3 4s infinite linear;
}
.bubbles svg path.cls-16, .bubbles svg path.cls-17, .bubbles svg path.cls-18, .bubbles svg path.cls-19, .bubbles svg path.cls-20{
    animation: sizeAnimation4 4s infinite linear;
}

.main{
    text-align:center;
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    padding: 0 20px;
}
.text-content{
    color: white;
    text-align: left;
    font-family: 'Helvetica Neue', 'Helvetica', 'Inter', sans-serif;
    padding-bottom: 50px;
    max-width: 1000px;
    margin: 0 auto;
}
.color-item{
    padding: 5px;
    display: inline-block;
}
.color-indicator{
    display: inline-block;
    height: 13px;
    width: 13px;
    margin-right: 10px;
}

ar-button{
    background: transparent !important;
}
ar-button:before{
    display:none !important;
}
ar-button img{
    height: 100px;
}
ar-button .click-here{
    display: block;
}
ar-button .not-supported{
    display: none;
}
ar-button[ar="unsupported"] .click-here{
    display: none;
}
ar-button[ar="unsupported"] .not-supported{
    display: block;
}



.winterwonderland{
    max-width: 500px;
    display: block;
    margin: 30px auto;
    margin-bottom: 0;
}
.powered-by{
    margin-bottom: 0px;
    color: #827553;
}
.powered-by img{
    width: 150px;
    max-width: 80vw;
}



.icon-link-wrapper{
    position: fixed;
    bottom: 0;
    left: 0;
    right: 0;
}
.icon-link-wrapper.top{
    bottom: auto;
    top: 0;
}
.icon-link-wrapper>div{
    max-width: 1000px;
    position: relative;
    margin: 0 auto;
}
.icon-link{
    position: absolute;
    bottom: 10px;
}
.top .icon-link{
    top: 0px;
    bottom: auto;
}
.icon-link.right{
    right: 10px;
}
.top .icon-link.right{
    right: 0;
}
.icon-link.left{
    left: 10px;
}
.icon-link.center{
    left: 50%;
    transform: translateX(-50%);
}
.icon-link img{
    height: 60px;
    width: 60px;
}