/* ==========================================
   EPISODE PAGES
   Blue Oyster Transmission
========================================== */

.story{

    width:100%;
    margin-top:20px;

}

/* ==========================
   HEADER
========================== */

.storyHeader{

    text-align:center;
    margin-bottom:30px;

}

.episodeNumber{

    font-size:13px;
    color:#888;

    letter-spacing:3px;
    text-transform:uppercase;

}

.storyHeader h1{

    margin:10px 0;

    font-family:monospace;
    font-size:42px;
    font-weight:bold;

    letter-spacing:3px;
    text-transform:uppercase;

}

.storyHeader hr{

    margin-top:20px;

}

/* ==========================
   STORY BODY
========================== */

.storyText{

    max-width:760px;
    margin:0 auto;

    font-size:18px;
    line-height:1.9;

}

.storyText p{

    margin:30px 0;

}

.storyText pre{

    white-space:pre-wrap;
    line-height:1.7;

    font-family:monospace;
    font-size:17px;

}

/* ==========================
   GIF
========================== */

.bannerGif{

    width:100%;
    display:block;

    margin:35px 0;

    border:1px solid #666;

}

/* ==========================
   CHATROOM
========================== */

.chat{

    background:#232323;

    border:1px solid #666;

    padding:18px;

    margin:35px 0;

    font-size:15px;

    line-height:1.9;

    font-family:monospace;

}

.system{

    color:#d9c56d;

    margin:18px 0;

    font-weight:bold;

    text-transform:uppercase;

}

.msg{

    display:flex;

    align-items:flex-start;

    gap:10px;

    margin:8px 0;

    flex-wrap:wrap;

}

.time{

    width:55px;

    color:#777;

    flex-shrink:0;

}

.name{

    width:170px;

    font-weight:bold;

    flex-shrink:0;

}

/* usernames */

.user1 .name{

    color:#72c7ff;

}

.user2 .name{

    color:#82ef82;

}

.user3 .name{

    color:#ffd56e;

}

.user4 .name{

    color:#ff9090;

}

/* ==========================
   TERMINAL BLOCKS
========================== */

.storyText pre{

    border-left:3px solid #666;

    padding-left:18px;

    margin:30px 0;

}

/* ==========================
   NAVIGATION
========================== */

.chapterNav{

    display:flex;

    justify-content:space-between;

    align-items:center;

    margin-top:60px;

}

.navButton{

    display:inline-block;

    padding:12px 22px;

    border:1px solid #666;

    text-decoration:none;

    color:inherit;

    font-weight:bold;

    transition:0.2s;

}

.navButton:hover{

    background:#ece8df;

}

/* ==========================
   DARK MODE
========================== */

body.dark .storyHeader h1{

    color:white;

}

body.dark .episodeNumber{

    color:#999;

}

body.dark .storyText pre{

    border-left:3px solid #888;

}

body.dark .chat{

    background:#262626;

    border-color:#666;

}

body.dark .time{

    color:#999;

}

body.dark .navButton{

    border-color:#777;

}

body.dark .navButton:hover{

    background:#454545;

}

.imageTransfer{

    margin:25px 0;

    border:1px solid #666;

    background:#f5f3ec;

}

.transferHeader{

    background:#e6e2d8;

    border-bottom:1px solid #666;

    padding:8px 12px;

    font-weight:bold;

}

.chatImage{

    display:block;

    width:100%;

    height:auto;

}

.transferFooter{

    padding:10px 12px;

    font-size:13px;

    color:#666;

}

body.dark .imageTransfer{

    background:#2f2f2f;

}

body.dark .transferHeader{

    background:#3b3b3b;

}

body.dark .transferFooter{

    color:#aaa;

}

.chat{

    background:#f3f0e8;
    color:#222;
    border:1px solid #666;

}

body.dark .chat{

    background:#232323;
    color:#e5e5e5;

}

/* ==========================================
   TRANSCRIPT
========================================== */

.line{
    margin:22px 0;
}

.speaker{
    display:block;
    font-weight:bold;
    text-transform:uppercase;
    letter-spacing:1px;
    margin-bottom:6px;
}

.speech{
    padding-left:26px;
    line-height:1.8;
}

/* Character colours */

.speaker.user1{
    color:#72c7ff;
}

.speaker.user2{
    color:#82ef82;
}

.speaker.user3{
    color:#ffd56e;
}

.speaker.user4{
    color:#ff9090;
}

.speaker.user5{
    color:#c996ff;
}

.call{

    margin:35px 0;

    padding:20px;

    border:1px solid #666;

    background:#f3f0e8;

    font-family:monospace;

}

body.dark .call{

    background:#232323;

}

.leftMsg,
.rightMsg{

    display:flex;
    flex-direction:column;
    margin:20px 0;

}

.leftMsg{

    align-items:flex-start;

}

.rightMsg{

    align-items:flex-end;

}

.callBubble{

    max-width:70%;

    padding:10px 14px;

    border:1px solid #666;

    background:white;

}

body.dark .callBubble{

    background:#333;

}

.callName{

    font-weight:bold;

    margin-bottom:6px;

    letter-spacing:1px;

}

.callTime{

    margin-top:5px;

    font-size:12px;

    color:#888;

}

/* existing colours */

.callName.user1{color:#72c7ff;}
.callName.user2{color:#82ef82;}
.callName.user4{color:#ff9090;}
.callName.user5{color:#c996ff;}

/* professor */

.callName.professor{

    color:#ffd56e;

}