#privacyModal,.portal-box{
    background-image:url('/images/ui-background-texture.png');
    background-size:cover;
    box-shadow:0 0 20px #000
}
#loadingBar,#loadingBarContainer,#pepeScenes,.box,.left,.right{
    box-sizing:border-box
}
#pepeScenes,.portal-box{
    position:relative;
    text-align:center
}
#loadingBarContainer,canvas{
    top:0;
    bottom:0;
    left:0;
    right:0
}
#loadingBarContainer,#pepeScenes{
    background:rgba(255,255,255,.5);
    overflow:hidden
}
body{
    background:rgba(122,122,122,.95);
    background-image: url('/images/home-background.png');
    background-position: center center;
    background-attachment: fixed;
    background-size: cover;
    background-repeat: no-repeat;
    font-family:Montserrat,sans-serif;
    font-size:1em
}
.cta-button,button,h1,h2,h3,h4,h5,h6,label{
    font-family:Cinzel,serif;
    color:#3b2b1b
}
button:hover{
    color:#c2c2c2
}
.portal-box{
    border-radius:12px;
    padding:2em;
    width:640px;
    margin:1em auto;
    background-color: rgba(122,122,122,0.6);
    color:rgba(255,255,255,.9)
}
.box,.cta-button,h2{
    margin-bottom:1em
}
.left,.right{
    float:left;
    width:50%;
    padding:1em 1em 0
}
label{
    display:block;
    font-weight:bolder
}
input[type=email],input[type=password]{
    width:100%;
    padding:.5em;
    border:1px solid #3b2b1b;
    border-radius:4px;
    background:#fdf6e3;
    color:#3b2b1b;
    box-sizing:border-box;
    margin-top:.5em;
    margin-bottom:.5em
}
button{
    width:100%;
    padding:.5em;
    background:#3b2b1b;
    color:#fff;
    border:none;
    border-radius:6px;
    cursor:pointer
}
.toggle-link{
    display:block;
    margin-top:1em;
    cursor:pointer
}
.hidden{
    display:none
}
.error-message{
    color:red;
    margin-top:1em
}
.confirmation-message{
    color:green;
    position:fixed;
    top:50%;
    left:50%;
    transform:translate(-50%,-50%);
    background:rgba(255,255,255,.95);
    border:2px solid #3b2b1b;
    border-radius:8px;
    padding:1em 1.5em;
    box-shadow:0 0 10px #000;
    z-index:999
}
#loadingBar,.loading,canvas{
    position:absolute
}
.loading{
    top:10px;
    right:10px;
    font-size:.9em;
    color:#3b2b1b
}
#privacyModal{
    position:fixed;
    top:10%;
    left:50%;
    transform:translateX(-50%);
    width:80%;
    max-width:400px;
    background-color:rgba(122,122,122,.5);
    border:4px solid #3b2b1b;
    border-radius:12px;
    padding:1em;
    z-index:1000;
    font-size:.9em
}
.cta-button{
    display:inline-block;
    padding:.5em 1em;
    background:#3b2b1b;
    color:#fff;
    border:none;
    border-radius:6px;
    text-decoration:none
}
#pepeScenes,.box,form{
    border-radius:20px
}
.box,form{
    background:rgba(122,122,122,.7)
}
.toggle-link,a{
    color:#fcfcfc;
    text-decoration:underline
}
.toggle-link:hover,a:hover{
    color:#c2c2c2;
    text-decoration:underline
}
form{
    padding:1em
}
#pepeScenes{
    width:100%;
    height:calc(100% - 1em);
    display:flex;
    vertical-align:middle
}
#loadingBarContainer{
    position:absolute;
    z-index:10
}
#loadingBar{
    height:15px;
    width:0%;
    top:50%;
    left:20px;
    right:20px;
    background:#32cd32;
    transition:width .3s;
    border-radius:5px;
    box-shadow:0 0 2px #000
}
.box{
    padding:2em
}