html, body {
    background-color: black;
    color:white;
    font-family: 'Nova Round';
    height: 100%;
    margin: 0;
    scrollbar-width: thin;
    scrollbar-color: #424242 transparent;
}
::-webkit-scrollbar-button {
    display: none;
}
@font-face {
    font-family: "Nova Round";
    src: url("./fonts/NovaRound/NovaRound-Regular.ttf")
}
@font-face {
    font-family: "Reenie Beanie";
    src: url("./fonts/ReenieBeanie/ReenieBeanie-Regular.ttf")
}
@font-face {
    font-family: "Arcon";
    src: url("./fonts/Arcon/Arcon-Regular.otf")
}
@font-face {
    font-family: "Share Tech Mono";
    src: url("./fonts/ShareTechMono/ShareTechMono-Regular.ttf")
}
.site {
    display: flex;
    height: 100svh;
    width: 100%;
    flex-direction: column;
    flex-wrap: nowrap;
    align-items: center;
    gap: 10px;
}
.header {
    order: 1;
    display: flex;
    align-items: center;
    flex: 0 1 auto;
    box-sizing: border-box;
    border-bottom:1px solid wheat;
    margin-top:5vh;
}
.subheader {
    order: 2;
    display: flex;
    align-items: center;
    flex: 0 1 auto;
    box-sizing: border-box;
}
.content {
    order: 3;
    flex: 1 0 auto;
    display: flex;
    flex-direction: column;
    align-items: center;
    margin-top:60px;
    text-align: center;
    padding-bottom:120px;
}

.header-image {
    filter:invert(100%);
    margin:30px;
}

.icon-image {
    width:32px;
    filter:invert(100%);
}

.link-block {
    display: block;
}
.link-block-content {
    display: inline-block;
    font-size: 48px;
    margin:10px;
    font-family: "Reenie Beanie";
    cursor: pointer;
    text-decoration: underline 3px rgb(0, 243, 150, 0);
    text-decoration-skip-ink:none;
    transition: text-decoration-color 300ms;
}
.link-block-content:hover {
    text-decoration-color: rgb(0, 243, 150, 1);
    font-weight:bold;
}
.link-block-content:active {
    border-radius: 8px;
    margin:5px;
    padding:5px;
    background-color: white;
    color:black;
    text-decoration: unset;
    text-decoration-color: unset;
}

.content a {
    color: white;
}
.content a:hover {
    font-weight: bold;
    text-decoration: underline 2px rgb(0, 243, 150, 1);
}
.content a:active {
    text-decoration: underline 3px rgb(0, 243, 150, 1);
}

.content-block{
    text-indent: 24px;
    text-align: left;
    font-size:24px;
    margin:10px;
}

.no-indent {
    text-indent: unset;
}

.center-justified {
    text-align: center;
}

.no-bottom-padding {
    padding-bottom: 0px;
}

.link-text {
    color:rgb(231, 245, 159, 1);
    text-indent: 0px;
}
.content-block a {
    display: inline-flex;
    flex-wrap: nowrap;
    gap:5px;
    align-items: center;
    color: rgb(231, 245, 159);
}

.content-block a:hover {
    color: rgb(0, 243, 150, 1);
}

.release-date {
    font-family: Reenie Beanie;
    font-size: 48px;
    text-align: center;
    border-style:solid;
    border-width: 0px 1px 1px 1px;
    border-color: white;
    border-radius: 0px 0px 25px 25px;
}

.story-thumbnail {
    width:30vw;
    border-radius:20px 20px 20px 20px;
}

.story-cover {
    width:50vw;
    border-radius:20px 20px 20px 20px;
    margin-bottom:20px;
}

.latest-block {
    margin-bottom:40px;
}

.story-card-list {
    margin-bottom:20px
}
.story-card-list a {
 text-decoration: none;
}
.story-card-list a:hover {
 text-decoration: none;
}
.story-card {
    border-radius: 25px;
    padding:30px;
}
.story-card:hover {
    background-color: rgba(0, 195, 255, 0.25);
}
.story-card-thumbnail {
    display: inline-block;
    vertical-align: middle;
}
.story-card-details {
    display: inline-block;
    vertical-align: middle;
    padding:30px;
}
.story-card-title {
    font-family: Reenie Beanie;
    font-size:90px;
}
.story-card-release-date {
    font-size:32px;
}

.book-button-block {
    display: inline-block;
    vertical-align: top;
    border:1px solid gray;
    border-radius:20px;
    padding:15px;
    margin:5px;
    text-decoration: none;
}
.sha256-block{
    display: block;
    font-family: "Share Tech Mono", monospace;
    width: 16ch;
    word-break: break-all;
    font-size:26px;
    padding:5px;
    color:rgb(209, 209, 209);
}
.isbn-number {
    display: block;
    font-family: "Share Tech Mono", monospace;
    color:rgb(209, 209, 209);
    font-size:26px;
    padding:2px;
}

a.story-card-link {
    text-decoration: none;
}
a.story-card-link:hover {
    text-decoration: none;
    background-color: rgba(14, 83, 104, 0.25);
    border-radius:20px;
}

.story-card-sub-text {
    font-size:24px;
    font-family: 'Arcon';
}

.direct-sale-button {
    background: #29a5d0;
    font-family: 'Arcon';
    color: black;
    border-radius: 20px;
    font-weight: bold;
    padding: 10px;
    border:2px solid white;
}

.direct-sale-button .subtext {
    font-size:24px;
}

@media (orientation: landscape) {
    .header-image {
        width:25vw;
    }
    .story-thumbnail {
        width: 10vw;
    }
    .story-cover {
        width: 20vw;
        display: inline-block;
    }
    .content {
        max-width:800px;
        margin-left:auto;
        margin-right:auto;
    }
    .about-image {
        height: 20vw;
    }
    .sha256-block{
        font-size:20px;
    }
    .isbn-number{
        font-size:20px;
        padding:5px
    }
    .story-card-sub-text {
        font-size:16px;
        padding-bottom:8px;
    }
    .direct-sale-button .subtext {
        font-size:16px;
    }
}
@media (orientation: portrait) {
    .header-image {
        width:80vw;
    }
    .link-block-content {
        font-size:120px;
        margin:20px;
    }
    .link-block-content:active {
        margin:10px;
        padding:10px;
    }
    .content-block {
        font-size:36px;
        line-height:50px;
        margin: 20px 60px;
        gap: 40px;
    }
    .about-image {
        height:50vw;
    }
    .book-button-block {
        height:490px;
    }
}