:root {
    --black: #141314;
    --white: #ffffff;
    --grey: #28292b;
    --purple: #574e65;
    --yellow: #F4D35E;
    --cyan: #2BF6E1;
    --blue: #0071E7;
    --magenta: #DF0063;

    --font-poppins: 'Poppins';
}

/* settings for the animated background */

html {
    min-height: 100%;
    background-color: var(--grey);

    margin: 0;
    height: 100%;

    -webkit-transition: flow 3s ease-out;
    -moz-transition: flow 3s ease-out;
    -o-transition: flow 3s ease-out;
    transition: flow 3s ease-out;
    background-image: url("images/ui/bg-shine3.png");
    animation: flow 250s linear infinite reverse;

    overflow: scroll;
}

body {
    background-image: url("images/ui/bg-nograd.png");
    background-repeat: repeat-xy;
    margin: 0;
    padding: 0;
    height: 100%;

    overflow: scroll;
}

@keyframes flow {
    0% {
        background-position: 0 0;
    }

    100% {
        background-position: 0 -10000%;
    }
}

/* settings for the header/title bar */

.header {
    margin: auto;
    position: relative;
    top: 20px;

    width: 85%;
    height: 20vh;

    background-color: black;
    background-image: url("images/ui/gradient_bg.png");
    background-repeat: no-repeat;
    background-size: auto 100%;
    background-position: 100% 0%;

    border-style: double;
    border-width: 8px;
    border-color: var(--yellow);
    border-radius: .5vw;

    overflow:hidden;
}

.yamato {
    position: absolute;
    top: 0px;
    right: 100px;
    height: 200%;
}

.bg {
    position: absolute;
    top: 0;
    left: 0;
    height: 160%;
    transform: rotatex(180deg);
}

.gear1 {
    position: relative;
    top: 0;
    left: 0;
    float: right;
    height: 240%;

    -webkit-animation:spin 18s linear infinite;
    -moz-animation:spin 18s linear infinite;
    animation:spin 18s linear infinite;
}

.gear2 {
    position: absolute;
    top: -115px;
    right: -110px;
    height: 100%;

    -webkit-animation:spin 9s linear infinite reverse;
    -moz-animation:spin 9s linear infinite reverse;
    animation:spin 9s linear infinite reverse;
}

.frame {
    position: absolute;
    top: 85px;
    right: 95px;
    height: 160%;

    -webkit-animation:spin 9s linear infinite reverse;
    -moz-animation:spin 9s linear infinite reverse;
    animation:spin 9s linear infinite reverse;
}

.frame2 {
    position: absolute;
    top: 115px;
    right: 125px;
    height: 130%;

    -webkit-animation:spin 6s linear infinite;
    -moz-animation:spin 6s linear infinite;
    animation:spin 6s linear infinite;
}

@-moz-keyframes spin { 
    100% { -moz-transform: rotate(360deg); } 
}
@-webkit-keyframes spin { 
    100% { -webkit-transform: rotate(360deg); } 
}
@keyframes spin { 
    100% { 
        -webkit-transform: rotate(360deg); 
        transform:rotate(360deg); 
    } 
}

/* settings for menu bar */

.menu {
    margin: auto;
    position: relative;
    top: 40px;

    width: 85%;
    height: 15vh;

    background-color: black;
    background-image: url("images/ui/bg-dots.png");
    background-repeat: repeat-y;
    background-size: auto 250%;

    /* -webkit-transition: flow 3s ease-out;
    -moz-transition: flow 3s ease-out;
    -o-transition: flow 3s ease-out;
    transition: flow 3s ease-out;
    z-index: 3;
    animation: flow 500s linear infinite; */

    border-style: solid;
    border-width: 8px;
    border-color: var(--black);
    border-radius: .5vw;

    overflow: hidden;
}

.icon-btn,
.icon-btn-bio,
.icon-btn-ship,
.icon-btn-transcripts,
.icon-btn-guestbook {
    margin: .2em;
    margin-top: 1em;
    background-color: var(--black);
    
    border: solid;
    border-color: var(--yellow);
    border-radius: 8px;
    border-width: 1.6px;

    width: 3rem;
    width: clamp(3rem, 2.74rem + 1.2999999999999998vw, 4.3rem);
    height: auto;
}

.icon-btn:hover,
.icon-btn:focus {
    background-color: var(--cyan);
    border-color: var(--cyan);
    box-shadow: 0 0 .3em 0.1em var(--cyan);
}

.help {
    position: absolute;
    bottom: 0;
    margin: 0;
    padding: 0;

    height: 30%;
    width: 100%;

    background-color: black;

    align-content: center;
    overflow: hidden;
}

.marquee1,
.marquee2,
.marquee3,
.marquee4 {
    width: 150%;
    height: 100%;
    text-align: left;
    align-content: flex-end;

    position: absolute;
    right: 0;
    bottom: 0;

    margin: 0;
    padding: 0;

    font-size: 1.2rem;
    font-size: clamp(1.2rem, 1.096551724137931rem + 0.45977011494252884vw, 2.2rem);

    visibility: hidden;
}

@-moz-keyframes scroll-left {
    0% { -moz-transform: translateX(100%); }
    100% { -moz-transform: translateX(-100%) ;}
}
@-webkit-keyframes scroll-left {
    0% { -webkit-transform: translateX(100%); }
    100% { -webkit-transform: translateX(-100%); }
}
@keyframes scroll-left {
    0% {
        -moz-transform: translateX(100%);
        -webkit-transform: translateX(100%);
        transform: translateX(100%);
    }
    100% {
        -moz-transform: translateX(-100%);
        -webkit-transform: translateX(-100%);
        transform: translateX(-100%);
    }
}

.menu:has(.icon-btn-bio:hover) .marquee1 {
    -moz-transform: translateX(100%);
    -webkit-transform: translateX(100%);
    transform: translateX(100%);
    -moz-animation: scroll-left 2s linear infinite;
    -webkit-animation: scroll-left 2s linear infinite;
    animation: scroll-left 20s linear infinite;
    
    visibility: visible;
}

.menu:has(.icon-btn-ship:hover) .marquee2 {
    -moz-transform: translateX(100%);
    -webkit-transform: translateX(100%);
    transform: translateX(100%);
    -moz-animation: scroll-left 2s linear infinite;
    -webkit-animation: scroll-left 2s linear infinite;
    animation: scroll-left 20s linear infinite;
    
    visibility: visible;
}

.menu:has(.icon-btn-transcripts:hover) .marquee3 {
    -moz-transform: translateX(100%);
    -webkit-transform: translateX(100%);
    transform: translateX(100%);
    -moz-animation: scroll-left 2s linear infinite;
    -webkit-animation: scroll-left 2s linear infinite;
    animation: scroll-left 20s linear infinite;
    
    visibility: visible;
}

.menu:has(.icon-btn-guestbook:hover) .marquee4 {
    -moz-transform: translateX(100%);
    -webkit-transform: translateX(100%);
    transform: translateX(100%);
    -moz-animation: scroll-left 2s linear infinite;
    -webkit-animation: scroll-left 2s linear infinite;
    animation: scroll-left 20s linear infinite;
    
    visibility: visible;
}

/* settings for main body */

.mainbox {
    position: relative;
    margin: auto;
    top: 60px;

    width: 85%;
    height: auto;
    align-content: center;

    background-color: black;
    background-repeat: no-repeat;
    background-size: auto 200%;
    background-position: 100% 100%;

    border-style: solid;
    border-width: 8px;
    border-color: var(--black);
    border-radius: .5vw;

    overflow: hidden;
}

.textbox {
    width: 90%;
    height: auto;
}

/* settings for footer */

footer {
    margin: auto;
    position: relative;

    width: 85%;

    background-color: black;
    background-image: url("images/ui/bg-dots.png");
    background-repeat: repeat-y;
    background-size: auto 550%;

    border-style: solid;
    border-width: 8px;
    border-color: var(--black);
    border-radius: .5vw;

    overflow: hidden;

    font-family: "poppins light";
    font-size: 0.7rem;
    font-size: clamp(0.7rem, 0.78rem + 0.09999999999999998vw, 0.9rem);
    text-align: center;
    margin-top: 5rem;
    color: var(--white);
}

/* settings for bio table */

.bio {
    width: 90%;
    height: auto;
    overflow-x: auto;
}

table {
    width: 100%;
    border-style: solid;
    border-width: 5px;
    border-color: var(--yellow);
    border-radius: .5vw;
    overflow-x: auto;
}

td {
    border-style: solid;
    border-width: 2px;
    border-color: var(--yellow);
    padding: 5px;
}

/* settings for transcripts page */

.arc-btn {
    margin: .5rem;
    width: 2rem;
    width: clamp(2rem, 1.6rem + 2vw, 4rem);
    height: auto;
}

/* settings for ships page */

.yamagotchi {
    height: auto;
    width: auto;
    animation: bounce 0.5s;
    animation-direction: alternate;
    animation-timing-function: cubic-bezier(.5, 0.05, 1, .5);
    animation-iteration-count: infinite;
}

@keyframes bounce {
    from {
        transform: translate3d(0, 0, 0);
    }

    to {
        transform: translate3d(0, 25px, 0);
    }
}

.takoyaki {
    height: auto;
    width: auto;
    padding: .8vw;
    overflow: hidden;
    transition-duration: 0.8s;
    transition-property: transform;
}
.takoyaki:hover {
    transform: scale(1.1);
    -webkit-transform: scale(1.1);

    filter: drop-shadow(0 0 5px var(--yellow));
}

/* settings for text and links */

@font-face {
    font-family: "conthrax";
    src: url("fonts/conthrax-sb.ttf");
}

@font-face {
    font-family: "poppins light";
    src: url("fonts/Poppins-Light.ttf");
}

@font-face {
    font-family: "tube station";
    src: url("fonts/TubeStn_.ttf");
}

@font-face {
    font-family: "unsteady oversteer";
    src: url("fonts/Unsteady\ Oversteer.otf");
}

p {
    font-family: "poppins light";
    font-size: 1rem;
    font-size: clamp(1rem, 0.9586206896551724rem + 0.18390804597701144vw, 1.4rem);
    color: var(--white);
    text-align: left;
}

h1 {
    font-family: "unsteady oversteer";
    font-size: 1.5rem;
    font-size: clamp(1.5rem, 1rem + 2vw, 3.5rem);
    font-weight: normal;
    color: var(--yellow);
    text-shadow: 0 0 1em hsla(0, 75%, 2%, 0.6), 0 0 0.3em var(--black);
    letter-spacing: 3px;
    padding: 1.5vw;
    position: absolute;
}

h2 {
    font-family: "tube station";
    font-size: 1rem;
    font-size: clamp(1rem, 0.8928571428571428rem + 0.5357142857142857vw, 1.75rem);
    font-weight: normal;
    color: var(--white);
    text-shadow: 0 0 1em hsla(0, 0%, 0%, 0.6), 0 0 0.3em var(--black);
    letter-spacing: 3px;
    margin-top: 7vw;
    padding-left: 5.5vw;
    position: relative;
}

h3 {
    font-family: "conthrax";
    font-size: 2.7vw;
    color: var(--purple);
    border-top: 2px solid var(--purple);
    margin: 0;
    padding: 0;
}

h4 {
    font-family: "tube station";
    font-size: 1rem;
    font-size: clamp(1rem, 0.8928571428571428rem + 0.5357142857142857vw, 1.75rem);
    color: var(--yellow);
    text-align: right;
    letter-spacing: 3px;
    border-bottom: 2px solid var(--yellow);
}

h5 {
    font-family: "conthrax";
    font-size: 2rem;
    font-size: clamp(2rem, 1.896551724137931rem + 0.45977011494252873vw, 3rem);
    color: var(--white);
    text-align: center;
    margin: 0;
}

h6 {
    font-family: "conthrax";
    font-size: 1.2rem;
    font-size: clamp(1.2rem, 1.096551724137931rem + 0.45977011494252884vw, 2.2rem);
    color: var(--white);
    text-align: left;
    margin: 2px;
}

.weekend {
    color: var(--blue);
}

.weekday {
    color: var(--magenta);
}

#ending {
    color: var(--yellow);
    font-family: "conthrax";
}

#dialogue {
    font-family: var(--font-poppins);
    padding: .5vw;
}

a {
    color: var(--yellow);
}

a:hover {
    color: var(--cyan);
}

/* settings for collapsible button */

.collapsible {
    background-color: transparent;
    color: var(--white);
    cursor: pointer;
    padding: .7vw;
    width: 90%;
    border: none;
    text-align: left;
    outline: none;
    font-size: 1rem;
    font-size: clamp(1rem, 0.9586206896551724rem + 0.18390804597701144vw, 1.4rem);
    font-family: "conthrax";
    display: block;
}

.active,
.collapsible:hover {
    background-color: var(--yellow);
    color: var(--black);
}

.active#dialogue,
.collapsible:hover#dialogue {
    background-color: var(--blue);
    color: var(--white);
}

.collapsible:after {
    content: '\2BC6';
    float: right;
    margin-left: 1vw;
    display: block;
}

.active:after {
    content: '\2BC5';
}

.content {
    padding: 0 1vw;
    max-height: 0;
    overflow: hidden;
    transition: max-height 0.2s ease-out;
    width: 90%;
}

/*
    Below you will be able to freely customize every aspect of the comment widget.
    Most aspects of the widget are 100% able to be customized in CSS, but for strong structural changes,
    you may have to edit the JavaScript file.

    These are all the classes and IDs at your disposal!
    Classes have a c- at the start and IDs have a c_
    You don't need every single one for a good theme, but I tried to give as many options as possible!
*/
/*
    Containers:
        #c_widget - The container <div> for the entire widget
        #c_inputArea - The wrapper <div> around the form
        #c_container - The wrapper <div> around all the comments

    The input form:
        #c_form - The whole input <form>
        #c_widgetTitle - The <h2> title at the top of the form

        .c-inputWrapper- All <div> wrappers for each label/input pair
        .c-label - All <label>s
        .c-input - All <input>s

        #c_nameWrapper - The wrapper <div> for the name field
        .c-nameLabel - The <label> for the name field
        .c-nameInput - The <input> for the name field

        #c_websiteWrapper - The wrapper <div> for the website field
        .c-websiteLabel - The <label> for the website field
        .c-websiteInput - The <input> for the website field

        #c_textWrapper - The wrapper <div> for the text field
        .c-textLabel - The <label> for the text field
        .c-textInput - The <input> for the text field

        #c_submitButton - The submit button (It's an <input> element with a type of "submit")
        #c_replyingText - The text <span> that displays when a user is replying to a comment

    The comment section:
        .c-comment - All comment <div>s
        .c-reply - All reply <div>s (contained within parent comment <div>s)
        .c-replyContainer - The wrapper <div> for all replies
        .c-name - The name of the person submitting the comment/reply (an <h3> element)
        .c-timestamp - The timestamp of when the comment/reply was made (a <span> element)
        .c-site - The website linked at the top of the comment/reply (an <a> element)
        .c-text - The actual text body of the comment/reply (a <p> element)
        .c-replyButton - All reply <button>s
        .c-expandButton - The <button>s to reveal/hide replies (These only show if s_collapsedReplies is set to true in the JS)
        
        #c_pagination - The <div> wrapper for the pagination at the bottom (Only shows if there's more than one page)
        .c-paginationButton - Both left and right directional <button>s
        #c_leftButton - The left <button>
        #c_rightButton - The right <button>
*/

/* Main */
#c_widget {
    box-sizing: border-box;
    height: 100%;
    overflow: auto;
    padding: 20px;
    font-family: "poppins light";
    font-size: 16px;
    color: white;
}

#c_widget button, #c_widget input[type=submit] {
    padding: 4px;
    font-family: "poppins light";
    text-decoration: none;
	text-align: center;
    color: var(--black);
    border: 1px solid white;
}
#c_widget button:hover, #c_widget input[type=submit]:hover {
    background-color: var(--yellow);
    color: var(--white);
    border: 1px solid var(--grey);
}
#c_widget button:disabled, #c_widget input[type=submit]:disabled {opacity: 60%;}
#c_widget button:disabled:hover, #c_widget input[type=submit]:disabled:hover {
    background-color: var(--yellow);
    color: var(--white);
    border: 1px solid var(--grey);
}

/* Input section */
#c_inputDiv {
    margin-bottom: 15px;
    padding: 10px;
    background-color: black;
    border: 3.5px solid var(--grey);
    border-radius: 10px;
}

#c_widgetTitle {
    margin: -10px;
    margin-bottom: 10px;
    padding: 5px;
    font-weight: bold;
    text-align: right;
    background-color: var(--yellow);
    font-family: "conthrax";
    font-size: 18px;
    color: var(--black);
    border-top-right-radius: 5px;
    border-top-left-radius: 5px;
}

.c-inputWrapper {
    display: block;
    text-align: right;
}
.c-input {
    padding: 4px;
    color: black;
    border: 2px solid var(--grey);
    border-radius: 10px;
	outline: none;
    margin: 2px;
}
.c-input:focus {border: 1px solid var(--yellow);}

/* .c-nameInput,
.c-websiteInput {
    width: 100px;
    background-color: hotpink;
} */

.c-textInput {
    width: calc(100% - 10px);
    resize: none;
    border: 2px solid var(--grey);
    border-radius: 10px;
    outline: none;
    margin: 2px;
}
#c_submitButton {
    display: block; 
    margin-left: auto; 
    margin-right: 0;
}
#c_replyingText {
    color: white;
    text-align: right;
}

/* Comment section */
.c-comment {
    margin-bottom: 15px;
    padding: 10px;
    border: 3.5px solid var(--grey);
    background-color: var(--yellow);
    border-radius: 10px;
}
.c-reply {
    display: block;
    width: 90%;
    margin-bottom: 10px;
    margin-left: auto;
    margin-right: 0;
    padding: 10px;
    border: 2px solid var(--grey);
    border-radius: 10px;
    color: white;
    background-color: var(--yellow);
}
.c-reply:last-child {margin-bottom: 0;}
.c-replyContainer {
    margin: -10px;
    margin-top: 10px;
    padding: 10px;
    background-color: black;
}

.c-name {
    display: inline-block;
    color: black;
}
.c-site {
    text-decoration: none;
    color: var(--blue);
}
.c-site:hover {color: var(--magenta);}
.c-timestamp {
    float: right;
    opacity: 75%;
    color: black;
}
.c-text {
    margin: 0;
    margin-left: -10px;
    margin-right: -10px;
    padding: 10px;
    font-family: "poppins light";
    font-size: 0.93rem;
    font-size: clamp(0.93rem, 0.8999999999999999rem + 0.25vw, 1.2rem);
    text-align: justify;
    color: white;
    background-color: black;
}

/* Pagination */
#c_pagination {text-align: center;}
.c-replyButton {
    margin-top: 10px;
    margin-right: 4px;
}
.c-expandButton {
    margin-top: 10px;
    margin-left: 4px;
}
.c-paginationButton {
    margin-right: 4px;
    margin-left: 4px;
}