html,
body {
    width:100%;
    height:100%;
    margin:0;
    overflow:hidden;
    background:#000;
    color:#f5e6c8;
    font-family:Georgia,serif;
}

body {
    position:relative;
}


#background {

    position:fixed;
    inset:0;

    background-image:url("../images/wowbak.png");
    background-size:cover;
    background-position:center;
    background-repeat:no-repeat;

    opacity:0;

    animation:fadeBackground 5s forwards;
}



#foreground {

    position:fixed;

    top:0;
    left:50%;

    transform:translateX(-54%) scale(.56);

    transform-origin:top center;

    opacity:0;

    animation:fadeForeground 5s forwards;
    animation-delay:1.5s;

    pointer-events:none;
    z-index:10;
}


#foreground img {
    display:block;
    max-width:none;
}



#panel {

    position:fixed;

    top:0;
    right:0;

    width:430px;
    height:100vh;

    background:rgba(62,47,28,.58);

    backdrop-filter:blur(5px);

    box-shadow:-8px 0 25px rgba(0,0,0,.6);

    display:flex;
    flex-direction:column;

    z-index:100;

}



#tabs {

    display:flex;

}


.tab {

    flex:1;

    padding:16px 0;

    border:none;

    background:rgba(90,70,45,.85);

    color:#e5d2a4;

    cursor:pointer;

    font-size:17px;

}


.tab:hover {

    background:rgba(130,100,60,.95);

}


.tab.active {

    background:rgba(170,130,70,.95);

    color:white;

}



#content {

    flex:1;

    overflow-y:auto;

    padding:24px;

}


.page {

    display:none;

}


.page.active {

    display:block;

}



h2 {

    margin-top:0;

    color:#ffd37a;

    border-bottom:1px solid rgba(255,211,122,.4);

    padding-bottom:10px;

}



p {

    line-height:1.6;

}



a {

    color:#8bc7ff;

}



pre {

    background:rgba(0,0,0,.45);

    padding:12px;

    border:1px solid rgba(255,255,255,.15);

}



label {

    display:block;

    margin-top:18px;

}



input[type=text],
input[type=email],
input[type=password] {

    width:100%;

    box-sizing:border-box;

    margin-top:6px;

    padding:10px;

    border:1px solid #8f7855;

    background:rgba(0,0,0,.35);

    color:white;

    font-size:15px;

}



.checkbox {

    display:flex;

    align-items:center;

    gap:10px;

}



button {

    margin-top:22px;

    width:100%;

    padding:14px;

    font-size:17px;

    cursor:pointer;

    color:white;

    border:1px solid #c8a15b;

    background:linear-gradient(#8a6535,#5d4322);

}



.ruleslink {

    margin-top:22px;

    color:#ffd37a;

    cursor:pointer;

    text-decoration:underline;

}



#registerMessage {

    margin-bottom:20px;

}



.alert {

    padding:12px;

    background:rgba(0,0,0,.45);

    border:1px solid #c8a15b;

    color:#ffd37a;

}



@keyframes fadeBackground {

from {
    opacity:0;
}

to {
    opacity:1;
}

}



@keyframes fadeForeground {

from {
    opacity:0;
}

to {
    opacity:1;
}

}