@import url('https://fonts.googleapis.com/css2?family=Pixelify+Sans&display=swap');

body {
    font-size: 20pt;
    font-family: 'Pixelify Sans';
    font-weight: lighter;
    text-align: center;
    background: white;
    overflow: hidden;
    column-count: 5;
}

body.switched {
    transition: color 0.6s, background-color 0.6s;
}

h1,
h2 {
    text-align: center;
    font-family: 'Pixelify Sans';
    margin: 0;
    padding: 0;
}

h1 {
    font-size: 30pt;
    margin-bottom: 10px;
}

h2 {
    font-size: 14pt;
    font-style: italic;
    font-family: sans-serif;
    font-weight: lighter;
    color: #BBB;
}

.header {
    padding-top: 3em;
    padding-bottom: 3em;
}

/*
  Built-in class:
    # author: Name
*/
.byline {
    font-style: italic;
}

.written-in-ink {
    z-index: 3;
    font-size: 9pt;
    font-family: sans-serif;
    text-align: center;
    font-weight: 700;
    position: fixed;
    display: block;
    width: 100%;
    background: white;
    transition: color 0.6s, background 0.6s;
    margin: 0;
    padding-top: 6px;
    padding-bottom: 6px;
    height: 14px;
    top: 0;
}

/* 
  Enables <iframe> support work on itch.io when using mobile iOS
*/
.outerContainer {
    position: absolute;
    display: block;
    margin: 0;
    padding: 0;
    -webkit-overflow-scrolling: touch;
    overflow: scroll;
    overflow-x: hidden;
    height: 100%;
    width: 100%;
    top: 0;
    left: 0;
    margin-top: 24px;
    background-size: cover;
    background-repeat: no-repeat;
}

@media screen and (max-width: 980px) {

    
.empty,
.emptyleft,
.emptyright,
.white1,
.white2,
.white3,
.white4,
.food0,
.food1,
.food2,
.food3,
.food4,
.food5,
.food6,
.food7,
.clean0,
.clean1,
.clean2,
.clean3,
.clean4,
.clean5,
.clean6,
.clean7,
.play0,
.play1,
.play2,
.play3,
.play4,
.play5,
.play6,
.play7,
.love0,
.love1,
.love2,
.love3,
.love4,
.love5,
.love6,
.love7,
.love8,
.love9,
.sleep0,
.sleep1,
.sleep2,
.sleep3,
.sleep4,
.sleep5,
.sleep6 {
    background-size: 100% !important;
    font-size: 10px !important;
}

    .outerContainer {
        margin-top: 44px;
        background-size: cover;
        background-repeat: no-repeat;
    }
}


.switched .container {
    transition: background-color 0.6s;
}

p {
    font-size: 20pt;
    color: #888;
    line-height: 1.7em;
    font-weight: lighter;
}

a {
    font-weight: 10;
    color: #b97c2c;
    font-family: 'Pixelify Sans';
    transition: color 0.6s;
    text-decoration: none;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 120px; /* Set the width of the link */
    height: 100%; /* Ensure the link takes the full height of the container */
}

a:hover {
    color: black;
    transition: color 0.1s;
}

strong {
    color: black;
    font-weight: bold;
}

.container {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-around;
    max-width: 650px;
    max-height: 200px;
    margin: 0 auto;
    height: auto;
    align-content: flex-start;
}

.image-wrapper {
    width: 650px; /* Set the width to match the image width */
    border-top-left-radius: 15px;
    border-top-right-radius: 15px;

    margin: 0 auto; /* Center the wrapper */
}

.button {
    display: inline-block;
    cursor: pointer;
    text-align: center;
    text-decoration: none;
    outline: none;
    color: #fff;
    background-color: #ffe6c5;
    border: none;
    border-radius: 15px;
    box-shadow: 0 9px #999;
  }
  
  .button:hover {background-color: #ffe122}
  
  .button:active {
    background-color: #ffe122;
    box-shadow: 0 5px #3f3d47;
    transform: translateY(4px);
  }

.empty,
.emptyleft,
.emptyright,
.white1,
.white2,
.white3,
.white4,
.food0,
.food1,
.food2,
.food3,
.food4,
.food5,
.food6,
.food7,
.clean0,
.clean1,
.clean2,
.clean3,
.clean4,
.clean5,
.clean6,
.clean7,
.play0,
.play1,
.play2,
.play3,
.play4,
.play5,
.play6,
.play7,
.love0,
.love1,
.love2,
.love3,
.love4,
.love5,
.love6,
.love7,
.love8,
.love9,
.sleep0,
.sleep1,
.sleep2,
.sleep3,
.sleep4,
.sleep5,
.sleep6 {
    font-size: 13pt;
    width: 20%;
    height: 100%;
    margin: 0;
    padding: 0;
    background: no-repeat;
    box-sizing: border-box;
    flex: 0 0 auto;
}

.empty2,
.emptyleft2,
.emptyright2{
    font-size: 13pt;
    color: #ffe6c5;
    width: 20%;
    height: 25%;
    margin: 0;
    padding: 0;
    background: no-repeat;
    box-sizing: border-box;
    flex: 0 0 auto;

}

.empty{
    background-image:url('empty.png');

}
.emptyright{
    background-image:url('empty.png');
    border-bottom-right-radius: 15px;
}
.emptyleft{
    background-image:url('empty.png');
    border-bottom-left-radius: 15px;
}

.empty2{
    background-image:url('empty.png');

}
.emptyright2{
    background-image:url('empty.png');
    border-bottom-right-radius: 15px;
}
.emptyleft2{
    background-image:url('empty.png');
    border-bottom-left-radius: 15px;
}

.white1{
    background-image:url('emptywhite.png');
}

.white2{
    background-image:url('emptywhite.png');
}

.white3{
    background-image:url('emptywhite.png');
}

.white4{
    background-image:url('emptywhite.png');
}

/*food class*/

.food0 {
    background-image:url('pizza0.png');
    border-bottom-left-radius: 15px;
}
.food1 {
    background-image:url('pizza1.png');
    border-bottom-left-radius: 15px;
}

.food2 {
    background-image:url('pizza2.png');
    border-bottom-left-radius: 15px;
}

.food3 {
    background-image:url('pizza3.png');
    border-bottom-left-radius: 15px;
}

.food4 {
    background-image:url('pizza4.png');
    border-bottom-left-radius: 15px;
}

.food5 {
    background-image:url('pizza5.png');
    border-bottom-left-radius: 15px;
}

.food6 {
    background-image:url('pizza6.png');
    border-bottom-left-radius: 15px;
}

.food7 {
    background-image:url('pizza7.png');
    border-bottom-left-radius: 15px;
}


/*clean class*/

.clean0 {
    background-image:url('clean0.png');
}
.clean1 {
    background-image:url('clean1.png');
}

.clean2 {
    background-image:url('clean2.png');
}

.clean3 {
    background-image:url('clean3.png');
}

.clean4 {
    background-image:url('clean4.png');
}

.clean5 {
    background-image:url('clean5.png');
}

.clean6 {
    background-image:url('clean6.png');
}

.clean7 {
    background-image:url('clean7.png');
}


/*play class*/

.play0 {
    background-image:url('play0.png');
}
.play1 {
    background-image:url('play1.png');
}

.play2 {
    background-image:url('play2.png');
}

.play3 {
    background-image:url('play3.png');
}

.play4 {
    background-image:url('play4.png');
}

.play5 {
    background-image:url('play5.png');
}

.play6 {
    background-image:url('play6.png');
}

.play7 {
    background-image:url('play7.png');
}


/*love class*/

.love0 {
    background-image:url('love0.png');
}
.love1 {
    background-image:url('love1.png');
}

.love2 {
    background-image:url('love2.png');
}

.love3 {
    background-image:url('love3.png');
}

.love4 {
    background-image:url('love4.png');
}

.love5 {
    background-image:url('love5.png');
}

.love6 {
    background-image:url('love6.png');
}

.love7 {
    background-image:url('love7.png');
}

.love8 {
    background-image:url('love8.png');
}

.love9 {
    background-image:url('love9.png');
}


/*sleep class*/

.sleep0 {
    background-image:url('sleep0.png');
    border-bottom-right-radius: 15px;
}
.sleep1 {
    background-image:url('sleep1.png');
    border-bottom-right-radius: 15px;
}

.sleep2 {
    background-image:url('sleep2.png');
    border-bottom-right-radius: 15px;
}

.sleep3 {
    background-image:url('sleep3.png');
    border-bottom-right-radius: 15px;
}

.sleep4 {
    background-image:url('sleep4.png');
    border-bottom-right-radius: 15px;
}

.sleep5 {
    background-image:url('sleep5.png');
    border-bottom-right-radius: 15px;
}

.sleep6 {
    background-image:url('sleep6.png');
    border-bottom-right-radius: 15px;
}

img {
    display: block;
    margin: 0 auto;
    width: 100%;
    height: auto; /* Add this line to ensure the image maintains its aspect ratio */
    border-top-left-radius: 15px;
    border-top-right-radius: 15px;
} 

.container .hide {
    opacity: 0.0;
}

.container .invisible {
    display: none;
}

.container>* {
    opacity: 1.0;
    transition: opacity 1.0s;
}

/*
  Class applied to all choices
  (Will always appear inside <p> element by default.)
*/
.choice {
    text-align: center;
    line-height: 1.7em;
}

/* 
  Class applied to first choice
*/
:not(.choice)+.choice {
    padding-top: 0em;
}

/*
  Class applied to choice links
*/
.choice a {
    font-size: 15pt;
}

/* 
  Built-in class:
    The End # CLASS: end
*/
.end {
    text-align: center;
    font-weight: bold;
    color: black;
    padding-top: 20px;
    padding-bottom: 20px;
}

#controls {
    z-index: 4;
    font-size: 9pt;
    text-align: center;
    padding-bottom: 6px;
    position: fixed;
    right: 14px;
    top: 4px;
    user-select: none;
    background: white;
    transition: color 0.6s, background 0.6s;
}

#controls [disabled] {
    color: #ccc;
}

/*#controls>*:not(:last-child):after {
    content: " | ";
}*/

@media screen and (max-width: 980px) {
    #controls {
        z-index: 2;
        padding-top: 24px;
        top: 0;
        left: 0;
        right: 0;
    }
}

/* 
  Dark Theme (Added in Inky 0.10.0)
    # theme: dark
*/

body.dark {
    background: black;
    color: white;
}

.dark h2 {
    color: #666;
}

.dark .container {
    background: black;
}

.dark .written-in-ink {
    background: black;
}

.dark a {
    color: #cc8f1a;
    transition: color 0.6s;
}

.dark a:hover {
    color: white;
}

.dark strong {
    color: white;
}

.dark #controls [disabled] {
    color: #444;
}

.dark .end {
    color: white;
}

.dark #controls {
    background: black;
}