body{
    background-color: #D0D0D0;
    width: auto;
    height: 55vw;
}

@font-face {
    font-family: 'Montserrat';
    src: url("../fonts/Montserrat-VariableFont_wght.ttf");
}

:root{
    font-family: 'Montserrat';
}

.ballcursor{
    position: fixed;
    width: 5vw;
    height: 5vw;
    border-radius: 50vw;
    background: radial-gradient(#D8FFB9, #FFADEB);
    filter: blur(10px);
}

#logo{
    width: 5vw;
    color: #E973CF;
    font-weight: 550;
    font-size: 1.4vw;
}

#logo:hover{
    color: #FFF282;
}

.pinkbuttons{
    width: 5vw;
    color: #E973CF;
    font-size: 1vw;
}

.yellowbuttons{
    color: #FFF282;
    font-size: 1vw;
}

/* шапка */

header{
    position: relative;
    top: 1.5vw;
    left: 1.5vw;
    width: 10vw;
}

#abouttheater:hover{
    color: #D8FFB9;
}

#abouttheater{
    position: relative;
    top: 0.5vw;
    left: 1.5vw;
}

#threedtour:hover{
    color: #D8FFB9;
}

#threedtour{
    position: relative;
    top: 1vw;
    left: 4vw;
}

#repertoire:hover{
    color: #D8FFB9;
}

#repertoire{
    position: relative;
    top: 1.5vw;
    left: 3vw;
}

#magazine:hover{
    color: #D8FFB9;
}

#magazine{
    position: relative;
    top: 2vw;
    left: 1vw;
}

#shop:hover{
    color: #D8FFB9;
}

#shop{
    position: relative;
    top: 2.5vw;
    left: 2.5vw;
}

#aboutunusual:hover{
    color: #D8FFB9;
}

#aboutunusual{
    position: relative;
    top: 3vw;
    left: 3.5vw;
}

a{
    text-decoration: none
}

/* блюр-шарики */

.circle{
    background-color: #FFADEB;
    opacity: 50%;
    overflow: hidden;
    width:14vw;
    height:14vw;
    border-radius: 7vw;
    filter: blur(3vw);
    margin: -1vw;
    position: relative;
    left: 40vw;
    animation: circleone 10s linear infinite;
}

@keyframes circleone {
    from { transform: rotate(180deg) translateX(150px) rotate(180deg); }
    to   { transform: rotate(540deg) translateX(150px) rotate(540deg); }
}

.circletwo{
    background-color: #79B62C;
    opacity: 60%;
    overflow: hidden;
    width:14vw;
    height:14vw;
    border-radius: 7vw;
    filter: blur(3vw);
    margin: -1vw;
    position: relative;
    left: 40vw;
    animation: circletwo 10s linear infinite;
}

@keyframes circletwo {
    from { transform: rotate(-180deg) translateX(-150px) rotate(-180deg); }
    to   { transform: rotate(-540deg) translateX(-150px) rotate(-540deg); }
}

.circlethree{
    background-color: #FFF282;
    opacity: 50%;
    overflow: hidden;
    width:14vw;
    height:14vw;
    border-radius: 7vw;
    filter: blur(3vw);
    margin: -1vw;
    position: relative;
    left: 40vw;
    bottom: 15vw;
    animation: circleforth 10s linear infinite;
}

@keyframes circleforth {
    from { transform: rotate(180deg) translateX(100px) rotate(180deg); }
    to   { transform: rotate(540deg) translateX(100px) rotate(540deg); }
}

.circleforth{
    background-color: #B4AAFF;
    opacity: 80%;
    overflow: hidden;
    width:14vw;
    height:14vw;
    border-radius: 7vw;
    filter: blur(3vw);
    margin: -1vw;
    position: relative;
    left: 40vw;
    bottom: 30vw;
    animation: circlethree 10s linear infinite;
}

@keyframes circlethree {
    from { transform: rotate(-180deg) translateX(-80px) rotate(-180deg); }
    to   { transform: rotate(-540deg) translateX(-80px) rotate(-540deg); }
}

/* движение фло надписи-картинки */

.flotheater{
    position: relative;
    margin: auto;
    overflow: hidden;
    width: 250vw;
    height: 60vh;
    bottom: 42vw;
    right: 150vw;
    animation: moveflo 15s linear infinite; 
}

.floimg{
    width:300vw;
    height: auto;
}

.flotheater img{
    width:300vw;
}

@keyframes moveflo{
    from{ text-indent: 60%;}
    to{ text-indent: -100%;}
}

.flotheater2{
    display: none;
}