/* #defaultCanvas0 {
    position: fixed;
    z-index: -1;
    top: 0;
    left: 0;
} */

@font-face {
	font-family: 'Mainfont';
	font-style: normal;
	src: url(./assets/menu/font.ttf);
}

:root{
    --title-shadow: 4px 4px #eee;
    --subtitle-shadow: 2px 2px #eee;
}


body {
    font-family:'Mainfont';
    overflow:hidden;
    background:#000;
}

body .content-wrap  {
    width:100%;
    position:fixed;
    top:0;
    left:0;
    /* overflow:hidden; */
}
.content-wrap .bg-image {
    position:fixed;
    /* object-fit: contain; */
    width:100%;
    z-index:0;
}

.content{
    z-index:1;
    position: fixed;
    width: 100%;
    height:100%;
    overflow:hidden;
}
.content.main{
    text-align: center;
}


/* main page */
.sound-controls{
    position:absolute;
    top:5;
    left:5;
}

.main .title{
    font-size:120px;
    font-weight:500;
    color:#333;
    margin-bottom: 10px;
    text-shadow: var(--title-shadow);
    display:inline-block;
}

.main .sub-title{
    font-size:60px;
    font-weight:500;
    color:#9e9e9e;
    text-shadow: var(--subtitle-shadow);
}

.title-wing{
    /* position: fixed;
    left: 20%; */
    display:inline-block;
    margin-right:3%;
    animation: wing-bobbing 1s ease-in-out alternate infinite;
}

.title-wing img {
    position: relative;
    top: 30px;
}

.title-wing.right{
    margin-left:3%;
    margin-right:0;
    -moz-transform: scale(-1, 1);
    -webkit-transform: scale(-1, 1);
    -o-transform: scale(-1, 1);
    -ms-transform: scale(-1, 1);
    transform: scale(-1, 1);
    animation: wing-bobbing-right 1s ease-in-out alternate infinite;
}

.onlineCount {
    z-index:1;
    position:absolute;
    bottom:0;
    right:10px;
    font-size:40px;
}

.onlineCount p {
    margin:0;
}

.flow-down > *{
    display:block;
}

.buttons-list {
    margin-top:20px;
}

.wide-button{
    font-size:50px;
    margin-top:20px;
    margin-bottom:20px;
}

.wide-button:hover{
    transform:translateY(-10px);
    cursor:pointer;
}



@keyframes wing-bobbing {
    from {
        transform: translateY(0%);
    }

    to {
        transform: translateY(30px);
    }
}

@keyframes wing-bobbing-right {
    from {
        transform: translateY(0%) scale(-1, 1);
    }

    to {
        transform: translateY(30px) scale(-1, 1);
    }
}