:root {
    --red: #d31c2e;
    --dark-red: #af0718;
    --gold: gold;
    --dark-gold: rgb(73, 64, 10);
    --light-grey: #ebebeb;
    --grey: rgb(110, 110, 110);
    --dark-grey: #333333;
    --darkest-grey: #222222;
}

* {
    box-sizing: border-box;
}

body {
    margin: 0;
    font-family: Roboto, sans-serif;
    background-image: url('media/bamboo-7363247_1920.jpg');
    background-size: cover;
    background-attachment: fixed;
    font-family: 'Gowun Batang';
    font-weight: 700;
    font-size: 110%;
}

h1 {
    margin-top: 0.2em;
    margin-bottom: 1.1em;
    text-align: center;
    font-size: 300%;
    font-family: 'Protest Revolution', sans-serif;
}

a {
    color: var(--red);
    transition: .5s;
}
a:hover {
    color: var(--dark-red);
}

.main-page-container, .how-does-it-work-container {
    width: 60%;
    margin: 0 auto;
    padding: 2em;
    background-color: white;
}

.menu {
    width: 60%;
    margin: 0 auto;
    background-color: var(--dark-grey);
    color: white;
}

.menu a, .menu a:visited {
    display: inline-block;
    margin: 0;
    padding: 1em 1.5em;
    color: white;
    text-decoration: none;
    transition: .5s;
}
.menu a:hover {
    color: var(--red);
    background-color: var(--darkest-grey);
}

.coins-section, .hexagram-section {
    background-color: var(--light-grey);
    padding: 2em;
    margin-bottom: 1em;
}

.coins-container {
    display: flex;
    gap: 2em;
    justify-content: center;
}

#hexagram-placeholder, #hexagram-placeholder-second {
    position: absolute;
    translate: 0 50%;
    color: var(--grey);
    text-align: center;
}

.coin-container {
    position: relative;
    width: 100px;
    height: 100px;
}

.coin {
    position: absolute;
    display: flex;
    justify-content: center;
    align-items: center;
    width: 100px;
    height: 100px;
    background-color: var(--dark-gold);
    border: 2px solid var(--dark-gold);
    border-radius: 100%;
}
.coin::after {
    content: "";
    width: 26px;
    height: 30px;
    background-color: var(--light-grey);
    border: 2px solid var(--dark-gold);
    border-right-width: 4px; 
}
.heads {
    background-image: url('media/heads.png');
    background-size: cover;
}
.tails {
    background-image: url('media/tails.png');
    background-size: cover;
}

.coin-shadow {
    position: absolute;
    width: 100px;
    height: 100px;
    background-color: var(--dark-gold);
    border: 2px solid var(--dark-gold);
    border-radius: 100%;
    transform: translateX(-3px);
}

.flip-animation {
    animation-name: flip;
    animation-duration: 2s;
    animation-timing-function: linear;
}

#coin-1, #coin-1-shadow {
    animation-duration: 2s;
}
#coin-2, #coin-2-shadow {
    animation-duration: 2.2s;
}
#coin-3, #coin-3-shadow {
    animation-duration: 1.9s;
}

.hexagram-container {
    position: relative;
    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: column;
}

.line {
    opacity: 0;
    width: 160px;
    height: 12px;
    margin-bottom: 12px;
    background-color: black;
}

.line-second {
    opacity: 0;
    width: 110px;
    height: 8px;
    margin-bottom: 8px;
    background-color: black;
}

.broken, .solid {
    opacity: 1;
    animation-name: fade-in-delay;
    animation-duration: 2.5s;
}
.broken::after {
    content: "";
    display: block;
    margin: 0 auto;
    width: 15%;
    height: 100%;
    background-color: var(--light-grey);
}

.button {
    display: block;
    width: fit-content;
    margin: 0 auto;
    padding: 1em 2em;
    background-color: var(--red);
    color: white;
    border: none;
    border-radius: 3em;
    font-family: 'Gowun Batang';
    font-size: 1rem;
    text-decoration: none;
    animation-name: fade-in;
    animation-duration: 1s;
    transition: .5s;
}
.button:hover {
    background-color: var(--dark-red);
    color: white;
    cursor: pointer;
}
.button:disabled {
    background-color: silver;
}
.button:disabled:hover {
    cursor: initial;
}

.response {
    visibility: hidden;
}
.response-visible {
    visibility: visible;
    text-align: center;
    animation-name: fade-in-delay;
    animation-duration: 3s;
}

.fade-out {
    opacity: 0%;
    animation-name: fade-out;
    animation-duration: 1s;
}

/* ======================== "how does it work" page ========================  */
.values-table {
    margin: 0 auto;
}
.values-table th {
    padding: 0.5em 1em;
    font-style: italic;
}
.values-table td {
    padding: 0.5em 1em;
}

/* ======================== individual hexagram pages ========================  */

.hexagram-page-container {
    width: 60%;
    margin: 0 auto;
    padding: 2em 3em;
    background-color: white;
}

.hexagram-page-container p {
    margin-left: 8em;
}

.aside {
    float: left;
    margin-left: -8em;
    color: var(--grey);
}

.footer {
    width: 60%;
    margin: 0 auto;
    padding: 3em;
    background-color: var(--dark-grey);
    color: white;
    text-align: center;
}
.footer a, .footer a:hover, .footer a:visited {
    color: white;
}
.credit {
    font-weight: 400;
    font-size: 90%;
}

/* ======================== animation keyframes ========================  */

@keyframes flip {
    0% {
        transform: rotateY(0deg) rotateZ(0deg);
    }
    15% {
        transform: rotateY(360deg) rotateZ(5deg);
    }
    35% {
        transform: rotateY(0deg) rotateZ(10deg);
    }
    60% {
        transform: rotateY(360deg) rotateZ(15deg);
    }
    100% {
        transform: rotateY(0deg) rotateY(20deg);
    }
}

@keyframes fade-in {
    0% { opacity: 0; }
    100% { opacity: 1; }
}

@keyframes fade-in-delay {
    0% { opacity: 0; }
    80% { opacity: 0; }
    100% { opacity: 1; }
}

@keyframes fade-out {
    0% { opacity: 1; }
    100% { opacity: 0; }
}

@keyframes my-pulse {
    0% { background-color: black; }
    20% { background-color: black; }
    45% { background-color: grey; }
    55% { background-color: grey; }
    80% { background-color: black; }
    100% { background-color: black; }
}

/* ======================== mobile version ========================  */

@media screen and (max-width: 600px) {
    h1 {
        margin-bottom: 0.8em;
        font-size: 200%;
    }

    .main-page-container, .how-does-it-work-container, .hexagram-page-container {
        width: auto;
        margin: 8px;
    }
    .main-page-container {
        padding: 10px;
    }
    .how-does-it-work-container, .hexagram-page-container {
        padding: 2em;
    }

    .coins-section, .hexagram-section {
        margin-bottom: 10px;
    }

    .menu {
        width: auto;
    }
    .menu a, .menu a:visited {
        padding: 1em 0 1em 2em;
    }

    .aside {
        display: block;
        float: none;
        margin-left: 0;
        margin-bottom: 0.5em;
    }

    .hexagram-page-container p {
        margin-left: 0;
    }

    .coin-container, .coin, .coin-shadow {
        width: 60px;
        height: 60px;
    }
    .coin::after {
        width: 17px;
        height: 19px;
    }

    .values-table td {
        padding: 0.5em;
    }

    .footer {
        width: auto;
    }
}