/* MEMO PAGE STYLES ================================================= */

.page {
    width: 0; height: 606px;
    position: relative; 
    border-radius: 20px;
    overflow: hidden;
    transition: flex 1s;
}

.memo {
    color: white; background-color: var(--lightNavy);
    border-radius: 20px; padding: 20px;
    width: 100%; height: 100%; 
    min-width: 550px;
    position: absolute; top: 0; left: 0; z-index: 2;
    overflow-x: hidden; overflow-y: scroll;
    transition: transform 1s;
}

.citation {
    background-color: var(--red); 
    width: 100%; height: 100%;
    min-width: 550px;
    border-radius: 20px;
    position: absolute; top: 0; left: 0; z-index: 1;
    padding: 20px;
}

/* TAB STYLES ================================================= */

.tab {
    background-color: var(--navy);
    padding: 20px 0;
    flex: 0 0 56px;
    margin-right: 15px;
    border-radius: 10px;
    border: 3px solid black;
    transition: background-color 0.5s, border-color 0.5s, color 0.5s, box-shadow 0.5s;

    display: flex;
    flex-direction: row;
    align-items: start;
    justify-content: center;
}

.tab-container {
    flex-grow: 1; 
    align-items: stretch;
    padding: 10px 0 5px 5px;
    margin-left: 20px; 
    overflow-x: scroll;
}
#tab-container::-webkit-scrollbar { height: 5px; }

/* ERA SELECTOR STYLES ================================================= */

.era-button { position: relative; z-index: 0; transform: translateX(8px); transition: transform 0.3s; cursor: pointer; }
.era-button h3 { color: var(--navy); transition: color 0.3s; position: absolute; top: 30px; left: 50%; transform: translateX(calc(-50% - 2px)); }
.era-button svg { position: relative; top: 0; left: 0; }
.era-button:hover { transform: translateX(2px); }

#era-container {
    flex: 1; min-height: 637px; z-index: 1;
    display: flex; flex-direction: row; justify-content: center;
    background-color: var(--navy);
    border: 6px solid var(--red); 
    border-radius: 0 0 0 20px; 
    border-style: none none solid solid; 
    padding: 0 0 20px 20px;
    overflow-x: scroll;
    transition: border-color 0.3s;
}
.era-page-container { flex: 0 0 550px; display: flex; flex-direction: row; justify-content: end; }

/* MEMO/CITATION SWITCH BUTTON ================================================= */

#memo-button {
    width: 50px; height: 50px; 
    border-radius: 30px; 
    position: absolute; bottom: 5px; left: 10px; z-index: 3; 
    border: 3px solid white;
    background-color: rgba(41, 51, 78, 0.5);
    transition: transform 0.3s;
}
#memo-button:hover { transform: scale(0.9); }

/* BANNER STYLES ================================================= */

.banner { max-height: 250px; width: 100%; background-color: var(--red); background-repeat: repeat; background-position: center; background-size: 450px 220px; border-radius: 20px; margin-bottom: 20px; transition: background-color 0.5s, transform 0.5s; overflow: hidden; }
.banner-title { font-size: 40px; color: var(--navy); -webkit-text-stroke: 1px var(--navy); margin-bottom: 0;  }
.banner-subtitle { font-size: 26px; color: var(--navy); -webkit-text-stroke: 1px var(--navy); margin-bottom: 0; }

/* ALERT MESSAGE STYLES ================================================= */

.message-face-text {
    color: rgba(255, 255, 255, 0.4);
    font-family: Arial; font-size: 50px;
    margin-bottom: 30px;
}
.message-text { color: rgba(255, 255, 255, 0.4); font-family: Hina; font-size: 24px; }

/* LOADING SPINNER ================================================= */

.spinner { animation: 2s linear alternate infinite rotate; }
.spinner circle { animation: 2s linear alternate infinite loading-spinner; }
@keyframes loading-spinner { from { stroke-dasharray: 0 630; } to { stroke-dasharray: 630 630; } }
@keyframes rotate { from { transform: rotate(0); } to { transform: rotate(360deg); } }

/* MEDIA QUERY ================================================= */

@media only screen and (max-width: 800px) {
    #era-container { flex-direction: column; }
    .era-page-container { flex: 1; }
    .memo, .citation { min-width: calc(100vw - 150px); }
    .tab { height: 300px; }
    .tab-container { margin: 0; margin-top: 20px; }
}