/* Fit to the screen. */
html, body {
    height: 100%;
}

/* Fit the layout */
.mother-flexbox {
    display:flex;
    flex-flow: column;
    height: 100%;
}
header{flex:0 1 auto;}
main{flex:1 1 auto;} /* 나머지 차지 */
footer{flex:0 1 auto;}

header {
    display:flex;
    justify-content: space-between;
    align-items: center;
    height: 4em;
    padding: 2em 2.5%;
}

header .title {
    font-weight: bold;
    font-size: 1.75em;
}

main {
    line-height: 2em;
}
main h1 {
    font-size: 5em;
}
main h1.row3{
    font-weight: lighter;
}
main h2 {
    font-size: 2em;
    font-weight: lighter;
}
main .title {
    position: absolute;
    top: 50%;
    left: 10%;
    transform: translateY(-50%);
}

/* 왼쪽패널 - 로그인버튼 등 */
main .leftpanel {
    position: absolute;
    left: 0;
    top: 50%;
    transform: translateY(-50%);
    /* width: 6em; */
    padding: 2em 0;
    background-color: #021035; 

    display:flex;
    flex-flow: column;
    align-items: center;
}

main .leftpanel button {
    background: none;
    border: none;
    flex:0 1 6em;
    width:6em;
    cursor:pointer;
}
main .leftpanel button:hover {
    background-color: rgba(255,255,255,0.2);
}


/* 사용자가 로그인하는 곳 */
#loginCard {
    position: absolute;
    left: 8em;
    top: 50%;
    transform: translateY(-50%);
    padding: 2.5em 3em;
    width: 30em;

    background-color: rgba(28, 28, 28, 0.9);
    border: 1px solid #222540;

    visibility: hidden;
}
#loginCard.on {
    visibility: visible;
}

#loginCard h1 {
    font-size: 1.5em;
    margin-bottom: 0;
    margin-top:0;
}

#loginCard h2 {
    font-size: 1em;
    color: gray;
    margin-top: 0;
    margin-bottom: 2em;
}

#loginCard form p {
    margin: 0.5em 0;
}

#loginCard form p :is(input[type=text],input[type=password]) {
    width:100%;
    padding: 1.5em 1em;
    background: rgba(38, 40, 43, 0.9);
    border: 1px solid #383e5d;
}

#loginCard .close {
    position: absolute;
    top: 1em;
    right: 1em;
}

#loginCard .error {
    /* e.g. 로그인 실패 */
    color: red;
    animation: blink-red 0.5s linear 0s 2;
}
@keyframes blink-red {
    0%   {color:red;}
    50%  {color:inherit;}
    100% {color:red;}
}

#loginCard .login-btn {
    width:100%;
    font-size: 1.25em;
}



footer {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 0.5em 10%;
    height: 4em;
    background-color: rgba(255,255,255,0.8);
}

footer img {
    height: 100%;
}

/* Background image & anim */
.mother-flexbox {
    background: url("/img/intro-bg.png") no-repeat center center/100%;
    animation: bg-intro 5s ease 1;
}
@keyframes bg-intro {
    0% {
        background-size: 120% auto;
    }
    100% {
        background-size: 100% auto;
    }
}


/* 메인화면으로 전환하는 용도 */

#iframeMain {
    position: absolute;
    width: 100%;
    height: 100%;
    left:0;
    top:100%;
    border:0;
    visibility: hidden;
    transition: top 1s;
}

body {
    overflow-y: hidden;
}