body.site{
    background:#222222;
}

body.site main{
    background:transparent;
}

main:before{
    background: url("/static/assets/vegas_background.jpg") no-repeat center;
    background-size:cover;
    content:'';
    height:100%;
    left:0;
    opacity:0;
    position:fixed;
    top:0;
    transition:5000ms opacity, 15000ms transform;
    width:100%;
}

body.in main:before{
    opacity:0.8;
    transform-origin:50% 50%;
    transform:scale(1.1);
}

header.header .mobile-header,
header.header .logo,
header.header .navbar{
    display:none;
}


main{
    align-items:center;
    display:flex;
    flex-direction:column;
}

body.site main .container{
    background:rgba(101, 8, 151, 0);
    color:rgb(243 226 252);
    margin-top:40px;
    transition:1200ms background 2000ms;
}

body.site.in main .container{
    background:rgba(101, 8, 151, 0.4);
}

body.in main .container:before{
    backdrop-filter: blur(4px) opacity(1);
    -webkit-backdrop-filter: blur(4px) opacity(1);
    transition:1200ms backdrop-filter 2000ms, 1200ms -webkit-backdrop-filter 2000ms, 1200ms background 2000ms;
    opacity:1;
}

body.in main .container:after{
    border-top: 1px solid white;
    border-left: 1px solid white;
    border-right: 1px solid rgba(0, 0, 0, 0.3);
    border-bottom: 1px solid rgba(0, 0, 0, 0.8);
    transition:1200ms opacity 2000ms, 1200ms border-top 2000ms, 1200ms border-left 2000ms, 1200ms border-right 2000ms, 1200ms border-bottom 2000ms;
    opacity:1;
}

main .container:before{ 
    backdrop-filter: blur(4px) opacity(0);
    -webkit-backdrop-filter: blur(4px) opacity(0);
    filter: grayscale(0.2);
    content:'';
    height:100%;
    left:0;
    opacity:0;
    position:absolute;
    top:0;
    width:100%;
    z-index:0;
}

main .container:after{ 
    background: linear-gradient(45deg,  rgba(115, 0, 175, 0.2) 0%,rgba(115, 0, 175, 0.75) 32%,rgba(115, 0, 175,0.2) 72%,rgba(115, 0, 175,0.5) 100%);
    border-top: 1px solid rgba(255,255,255,0);
    border-left: 1px solid rgba(255,255,255,0);
    border-right: 1px solid rgba(0, 0, 0, 0);
    border-bottom: 1px solid rgba(0, 0, 0, 0);
    content:'';
    height:100%;
    left:0;
    opacity:0;
    position:absolute;
    top:0;
    width:100%;
    z-index:0;
}

main .container .row{
    margin-left:auto;
    margin-right:auto;
    opacity:0;
    position:relative;
    text-align:center;
    transition:600ms opacity 2300ms;
    z-index:1;
}

body.in main .container .row{
    opacity:1;
}

main .logo{
    background:url(../assets/CQ-logo.webp) no-repeat center;
    background-size:cover;
    display: block;
    height: 300px;
    margin-top:30px;
    width: 300px;
    z-index: 10;
}

main .buttons{
    display:flex;
    gap:15px;
    justify-content:center;
    margin-top:30px;
}

main .container .intro figcaption{
    font-size: 34px;
    font-weight: 300;
}

.signup-btn,
.signup-btn:visited,
.signup-btn:active {
    background:rgb(243 226 252);
    border-radius:50px;
    color:black;
    display:flex;
    opacity: 1;
    overflow:hidden;
    padding:4px 12px;
    position:relative;
}

.signup-btn:hover{
    text-decoration:none;
}

.signup-btn:before{
    background:white;
    border-radius:50%;
    content:'';
    left:50%;
    padding-top:100%;
    position:absolute;
    top:50%;
    transform-origin: 50% 50%;
    transform:translate3d(-50%, -50%, 0) scale(0);
    transition:1200ms transform;
    width:100%;
}

.signup-btn span{
    position:relative;
}

@media screen and (min-width: 768px) {

    .signup-btn:hover:before{
        transform:translate3d(-50%, -50%, 0) scale(1);
        transition:250ms transform;
    }
}