:root {
    --sun-moon-size: 80px;
    --bg-border-col1: #FFE1A8;
    --bg-border-col2: #FFF0D6;
    --article-width: 500px;
    --article-height: 450px;
}

div {
    color: white;
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    align-items: center;
    background-repeat: no-repeat;
}

img {
    user-select: none;
}

.sp-only {
    display: none;
}

.bg {
    /* overflow: hidden;
    overflow-y: scroll; */

    background-color: var(--bg-border-col1);
    background-image: -webkit-gradient(linear, 0 0, 100% 100%,color-stop(.25, var(--bg-border-col2)),
    color-stop(.25, transparent),color-stop(.5, transparent),
    color-stop(.5, var(--bg-border-col2)),color-stop(.75, var(--bg-border-col2)), 
    color-stop(.75, transparent),to(transparent));
    -webkit-background-size: 40px 40px;
}

.top-page {
    width: 100%;
    height: 100vh;
    position: absolute;
    top: 0;
}

.top-page2 {
    top: 100vh;
}

.logo {
    font-family: 'Stick', sans-serif;
    font-weight: 600;
    font-size: 6vh;
    color: #E26D5C;
    position: sticky;
    transform: skew(15deg 15deg);
    justify-content: flex-start;
    top: 2vh;
    margin-left: 30px;
    z-index: 1;
}

.article-area {
    position: absolute;
    top: 50vh;
    transform: translateY(-50%);
    width: 100%;
    z-index: 100;
}

.article-arrow {
    width: 100px;
    height: 100px;
    user-drag: none;
    -webkit-user-drag: none;
}

.article-window {
    width: calc(var(--article-width) + 60px);
    height: calc(var(--article-height) + 50px);
    overflow: hidden;
    justify-content: center;
    position: relative;
}

#article-container {
    flex-wrap: nowrap;
    position: relative;
    left: 0;
}

.article {
    position: relative;
    width: var(--article-width);
    height: var(--article-height);
    margin: 0 30px;
}

.article-surface {
    top: 0;
    position: absolute;
    background: white;
    width: var(--article-width);
    height: var(--article-height);
    border-radius: 10px;
    border: solid 7px #E26D5C;
}

.article-header {
    display: block;
    width: 100%;
    padding: 20px 0;
    font-weight: bold;
    font-size: 2rem;
    color: black;
    text-align: center;
}

.article-body {
    color: black;
    width: 100%;
    height: calc(var(--article-height) - 150px);
    padding: 0 5% 5%;
    display: block;
    overflow: hidden;
}

.article-body p {
    margin-bottom: 1em;
}


.article-link {
    position: absolute;
    top: 0;
    left: 0;
    width: var(--article-width);
    height: var(--article-height);
    opacity: 0;
}

.article-single {
    width: 100%;
    align-items: center;
}

.article-single .article-surface {
    background-color: white;
    width: 800px;
    max-width: 90%; 
    margin-top: 100px;
    height: auto;
    border-radius: 10px;
    border: solid 7px #E26D5C;
}

.article-single .article-header {
    padding: 20px 0;
}

.article-single .article-body {
    padding: 0 0 5% 0;
    width: 80%;
    height: auto;
}

.article-single .article-body p {
    margin-bottom: 1em;
}

#sun-and-moon {
    right: 50px;
    top: 50px;
    position: absolute;
    height: var(--sun-moon-size);
    width: var(--sun-moon-size);
}

#sun {
    position: absolute;
    height: var(--sun-moon-size);
    width: var(--sun-moon-size);
}

#sun-center {
    width: 100%;
    height: 100%;
}

.corona {
    position: absolute;
    top: 0;
    height: var(--sun-moon-size);
    width: var(--sun-moon-size);
}

.corona-1 { transform: rotateZ(0); }
.corona-2 { transform: rotateZ(45deg); }
.corona-3 { transform: rotateZ(90deg); }
.corona-4 { transform: rotateZ(135deg); }
.corona-5 { transform: rotateZ(180deg); }
.corona-6 { transform: rotateZ(225deg); }
.corona-7 { transform: rotateZ(270deg); }
.corona-8 { transform: rotateZ(315deg); }

#moon {
    display: none;
    position: absolute;
    height: var(--sun-moon-size);
    width: var(--sun-moon-size);
}

#grow-moon {
    position: absolute;
    width: 100%;
}

#half-moon {
    position: absolute;
    width: 100%;
}

#moon-shadow {
    position: absolute;
    width: 101%;
}

#mountain-range {
    width: 100%;
    height: 100%;
    position: absolute;
    bottom: 50%;
    align-items: end;
}

.mountain {
    position: relative;
}

.mountain-1 {
    height: 100px;
    transform: scaleX(5);
}

.mountain-2 {
    height: 200px;
    transform: scaleX(3);
}

.hill {
    height: 400px;
    transform: scaleX(5);
    position: absolute;
    bottom: 0;
    right: -1000px;
}

#lake {
    background-image: url("./assets/lake.svg");
    background-size: contain;
    transform: scale(0.6, 0.2) translateY(50%);
    width: 100%;
    height: 100%;
}

.forest {
    width: 100%;
    position: absolute;
    left: 0;
    bottom: 0;
    overflow-x: hidden;
    height: 500px;
}

.tree-box {
    width: 100%;
    left: 100%;
    position: absolute;
}

.tree-box.l1 {
    bottom: 0;
}

.tree-box.l2 {
    bottom: 100px;
}

.tree-box.l3 {
    bottom: 200px;
}

.tree {
    position: relative;
}

.l1 .tree {
    height: 400px;
    width: 240px;
    background-image: url("./assets/tree-l1.svg");
    z-index: 300;
}

.l2 .tree {
    height: 200px;
    width: 120px;
    background-image: url("./assets/tree-l2.svg");
    z-index: 200;
}

.l3 .tree {
    height: 100px;
    width: 60px;
    background-image: url("./assets/tree-l3.svg");
    z-index: 100;
}

#tree-l1-src,
#tree-l2-src,
#tree-l3-src {
    display: none;
}

#guard-rail-container {
    overflow-x: hidden;
    position: absolute;
    width: 100%;
    height:90px;
    left: 0;
    bottom: 0;
}

.guard-rail {
    position: absolute;
    background-image: url("./assets/guard-rail.svg");
    background-size: 100%;
    width: 1700px;
    height: 90px;
}

.guard-rail-1 {
    left: 0;
}

.guard-rail-2 {
    left: 1750px;
}

.game-window {
    max-width: 90%;
    width: 900px;
    height: 500px;
    position: relative;
}

.game-ui {
    display: block;
    position: absolute;
    width: 100%;
    height: 100%;
    pointer-events: none;
    user-select: none;
}

.game-ui * {
    font-family: "Zen Maru Gothic";
    pointer-events: auto;
}

.game-ui .hanoi-move-count {
    color: #67a859;
    font-size: 30px;
    display: flex;
    align-items: flex-end;
    line-height: 100%;
    margin-top: 20px;
}

.game-ui #move-count {
    color: #67a859;
    font-size: 50px;
    line-height: 100%;
    width: 100px;
}

.game-ui .reset-button {
    position: absolute;
    top: 20px;
    right: 20px;
    width: 100px;
    height: 50px;
    background-color: white;
    color: black;
    border-radius: 20px;
    border: solid #E26D5C 5px;
}

.game-ui .reset-button a {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
}

.game-ui .hi-score {
    color: gray;
    margin-top: 20px;
    font-size: 20px;
}

.game-ui .hi-score div {
    color: gray;
    margin-left: 20px;
}

#reset-conf * {
    font-family: "Zen Maru Gothic";
}

.reset-conf {
    width: 400px;
    height: 250px;
    flex-direction: column;
    justify-content: space-around;
    background-color: white;
    color: black;
    border-radius: 20px;
    border: solid #E26D5C 5px;
}

.reset-conf .text {
    font-size: 1.5em;
    color: black;
}

.reset-conf .reset,
.reset-conf .cancel
{
    text-align: center;
    width: 200px;
    height: 50px;
    color: #67a859;
    font-size: 2em;
    font-weight: bold;
    border: solid 3px #67a859;
    border-radius: 15px;
}

.reset-conf .reset {
}

.reset-conf .cancel {
    background-color: #aa3333;
    color: white;
    border: none;
    font-size: 1.1em;
    width: 160px;
    height: 30px;
    border-radius: 10px;
}

.game1-result {
    width: 400px;
    height: 250px;
    flex-direction: column;
    justify-content: space-around;
    background-color: white;
    color: black;
    border-radius: 20px;
    border: solid #E26D5C 5px;
}

.game1-result * {
    font-family: "Zen Maru Gothic";
}

.game1-result .praise {
    color: black;
    font-size: 30px;
}

.game1-result .score {
    color: black;
}

.game1-result .reset {
    text-align: center;
    width: 200px;
    height: 50px;
    color: #67a859;
    font-size: 20px;
    font-weight: bold;
    border: solid 3px #67a859;
    border-radius: 15px;
}

.e404-note {
    color: #444444;
    font-size: 50px;
    font-weight: bold;
    line-height: 2em;
}