footer {
    position: fixed;
    bottom: 0;
    left: 0;
    right: 0;
    pointer-events:none;
}

.footview {
    float: right;

}
.footimg {
    margin: 10px;
    width: 117px;
    height: 146px;
}

body {
    font-size: 46pt;
    font-family: 'AliHeavy';
    display: flex;
    justify-content: center;
    align-items: center;
    min-height: 100vh;
    /*background: radial-gradient(ellipse at bottom, #0d1d31 0%, #0c0d13 100%);*/
    background-image: url('https://bgplanet.top/wp-content/uploads/welcome-to-moon/image/bg_moon.jpg');
    background-repeat: no-repeat;
    background-size: 100% 100%
}

.room {
    width: 100%;
    height: 100%;
}
table {
    font-size: inherit;
    font-family: 'AliHeavy';
    text-align: center;
    border-collapse:separate;
    border-spacing: 20px;
    width: 100%;
    text-indent: initial;
    white-space-collapse: collapse;
    text-wrap: wrap;
    line-height: normal;
    font-weight: normal;
    font-style: normal;
    color: -internal-quirk-inherit;
    font-variant: normal;
}

td {
    padding: 0.1em 0.1em;
}

#main-table {
    /*margin-top: 100px;*/
    /*max-width: 800px;*/
}
#flip-table {
    border-style: none;
}

.moon-center {
    font-size: 46pt;
    font-family: 'AliHeavy';
    display: flex;
    justify-content: center;
    /*align-items: center;*/

}

.moon-card {
    /*background: linear-gradient(-45deg, rgb(189, 184, 169), 5%, rgb(248, 247, 242));*/
    /*background-image: url("http://bgplanet.top/wp-content/uploads/welcome-to-moon/image/card_front.jpg");*/
	background: linear-gradient(-45deg, rgb(10, 10, 10), 5%, rgb(8, 8, 8));
    padding-top: 50px;
    padding-bottom: 50px;
    padding-right: 30px;
    padding-left: 30px;
    border-style: solid;
    border-color: grey;
    border-width: 2px;
    border-radius: 10px;
    position: relative;

}

.moon-card-back {
    /*background: linear-gradient(-45deg, rgb(189, 184, 169), 5%, rgb(248, 247, 242));*/
    /*background-image: url("http://bgplanet.top/wp-content/uploads/welcome-to-moon/image/card_back.jpg");*/
	background: linear-gradient(-45deg, rgb(10, 10, 10), 5%, rgb(8, 8, 8));
    padding-top: 50px;
    padding-bottom: 50px;
    padding-right: 30px;
    padding-left: 30px;
    border-style: solid;
    border-color: grey;
    border-width: 2px;
    border-radius: 10px;
    position: relative;

}

.empty {
    color:rgba(0,0,0,0); border:1px solid white;

    background-color: transparent;
    opacity: 15%;
    border-style: solid;
    border-color: grey;
    border-width: 2px;
    border-radius: 10px;

    padding-top: 50px;
    padding-bottom: 50px;
    padding-right: 30px;
    padding-left: 30px;

    -webkit-touch-callout: none; /* iOS Safari */
    -webkit-user-select: none; /* Safari */
    -khtml-user-select: none; /* Konqueror HTML */
    -moz-user-select: none; /* Old versions of Firefox */
    -ms-user-select: none; /* Internet Explorer/Edge */
    user-select: none; /* Non-prefixed version, currently
                                    supported by Chrome, Edge, Opera and Firefox */

}



.moon-action-hint {
    font-size: 14pt;
    float: right;
    position:relative;
    right:10px;
    top: -35px;
    width: 0px;
}


.moon-action-hint-img {
    font-size: 14pt;
    position:absolute;
    right:10px;
    top: 10px;
    width: 40px;
    height:40px;
}

.btn {
    width:200px;
    margin:0;
}

#shuffle-button {
    display: block;
    font-family: "AliHeavy";
}
#shuffle-button_mobile {
    display: none;
    font-family: "AliHeavy"
}
#back-button {
    display: block;
    font-family: "AliHeavy"
}
#back-button_mobile {
    display: none;
    font-family: "AliHeavy"
}
#flip-button {
    display: block;
    font-family: "AliHeavy"
}
#flip-button_mobile {
    display: none;
}
#select-task {
    display: block;
    font-family: "AliHeavy"
}
#select-task_mobile {
    display: none;
}
#mark_mobile {
    display: none;
}
.number {
    width: 100px;
    display: inline-block;
    text-align: center;
	color:#FFFFFF
}
.action {
    font-size: 40pt;
}
.actionImg {
    width:80px;
    height:50%;
}



#seed-input {
    width:120px;
}

#starfield {
    z-index: -1;
    position: fixed;
    resize: both;
    overflow: auto;
    width:100%;
    height:100%;
}

#title {
    color: rgb(240, 236, 219);
    transform: rotate(-10deg);
    margin-top: -100px;
}

#titleView {
    width: 600px;
}


#title-1 {
    font-family: 'Dancing Script';
    font-size: 72pt;
    text-shadow: 0.5px 0.5px #e60073;
}

#title-2 {
    font-family: "Open Sans", Helvetica, sans-serif;
    font-weight: lighter;
    text-transform: uppercase;
    font-size: 24pt;
    text-align: right;
    font-style: italic;
    -webkit-animation: glow 1s ease-in-out infinite alternate;
    -moz-animation: glow 1s ease-in-out infinite alternate;
    animation: glow 1s ease-in-out infinite alternate;
    margin-top: -20px;
    margin-right: 20px;
}

@media (max-width:768px){
    body {
        font-size: 46pt;
        font-family: 'AliHeavy';
        display: flex;
        justify-content: center;
        align-items: center;
        min-height: 100vh;
        /*background: radial-gradient(ellipse at bottom, #0d1d31 0%, #0c0d13 100%);*/
        background-image: url('https://bgplanet.top/wp-content/uploads/welcome-to-moon/image/bg_moon_mid.jpg');
        background-repeat: no-repeat;
        background-size: 100% 100%
    }
    #title-1 {
        font-family: 'Dancing Script';
        font-size: 48pt;
        text-shadow: 0.5px 0.5px #e60073;
    }

    #title-2 {
        font-family: "Open Sans", Helvetica, sans-serif;
        font-weight: lighter;
        text-transform: uppercase;
        font-size: 16pt;
        text-align: right;
        font-style: italic;
        -webkit-animation: glow 1s ease-in-out infinite alternate;
        -moz-animation: glow 1s ease-in-out infinite alternate;
        animation: glow 1s ease-in-out infinite alternate;
        margin-top: -20px;
        margin-right: 20px;
    }
    #main-table {

        /*max-width: 600px;*/
    }
    .moon-card {
        /*//background: linear-gradient(-45deg, rgb(189, 184, 169), 5%, rgb(248, 247, 242));*/
        /*background-image: url("http://bgplanet.top/wp-content/uploads/welcome-to-moon/image/card_front.jpg");*/
		background: linear-gradient(-45deg, rgb(10, 10, 10), 5%, rgb(8, 8, 8));
        padding-top: 20px;
        padding-bottom: 20px;
        padding-right: 10px;
        padding-left: 10px;
        border-style: solid;
        border-color: grey;
        border-width: 2px;
        border-radius: 10px;
        position: relative;

    }
    .moon-card-back {
        /*//background: linear-gradient(-45deg, rgb(189, 184, 169), 5%, rgb(248, 247, 242));*/
        /*background-image: url("http://bgplanet.top/wp-content/uploads/welcome-to-moon/image/card_back.jpg");*/
		background: linear-gradient(-45deg, rgb(10, 10, 10), 5%, rgb(8, 8, 8));
        padding-top: 20px;
        padding-bottom: 20px;
        padding-right: 10px;
        padding-left: 10px;
        border-style: solid;
        border-color: grey;
        border-width: 2px;
        border-radius: 10px;
        position: relative;

    }

    .empty {
        color:rgba(0,0,0,0); border:1px solid white;

        background-color: transparent;
        opacity: 15%;
        border-style: solid;
        border-color: grey;
        border-width: 2px;
        border-radius: 10px;

        padding-top: 20px;
        padding-bottom: 20px;
        padding-right: 10px;
        padding-left: 10px;

        -webkit-touch-callout: none; /* iOS Safari */
        -webkit-user-select: none; /* Safari */
        -khtml-user-select: none; /* Konqueror HTML */
        -moz-user-select: none; /* Old versions of Firefox */
        -ms-user-select: none; /* Internet Explorer/Edge */
        user-select: none; /* Non-prefixed version, currently
                                    supported by Chrome, Edge, Opera and Firefox */

    }

    .moon-action-hint {
        font-size: 14pt;
        float: right;
        position:relative;
        right:20px;
        top: -15px;
        width: 0px;
    }
    .moon-action-hint-img {
        font-size: 14pt;

        position:absolute;
        right:10px;
        top: 10px;
        width: 20px;
        height:20px;
    }
	.number {
		color:#FFFFFF
    }
}

@media (max-width:500px){
    .footimg {
        width: 58px;
        height: 73px;
    }
    body {
        font-size: 46pt;
        font-family: 'AliHeavy';
        display: flex;
        justify-content: center;
        align-items: center;
        min-height: 100vh;
        /*background: radial-gradient(ellipse at bottom, #0d1d31 0%, #0c0d13 100%);*/
        background-image: url('https://bgplanet.top/wp-content/uploads/welcome-to-moon/image/bg_moon_mini.jpg');
        background-repeat: no-repeat;
        background-size: 100% 100%
    }
    td {
        padding: 0.05em 0.05em;
    }
    #title-1 {
        font-family: 'Dancing Script';
        font-size: 48pt;
        text-shadow: 0.5px 0.5px #e60073;
    }

    #title-2 {
        font-family: "Open Sans", Helvetica, sans-serif;
        font-weight: lighter;
        text-transform: uppercase;
        font-size: 16pt;
        text-align: right;
        font-style: italic;
        -webkit-animation: glow 1s ease-in-out infinite alternate;
        -moz-animation: glow 1s ease-in-out infinite alternate;
        animation: glow 1s ease-in-out infinite alternate;
        margin-top: -20px;
        margin-right: 20px;
    }
    #main-table {

        max-width: 360px;
    }
    .moon-card {
        /*//background: linear-gradient(-45deg, rgb(189, 184, 169), 5%, rgb(248, 247, 242));*/
        /*background-image: url("http://bgplanet.top/wp-content/uploads/welcome-to-moon/image/card_front_mini.jpg");*/
		background: linear-gradient(-45deg, rgb(10, 10, 10), 5%, rgb(8, 8, 8));
        padding-top: 20px;
        padding-bottom: 20px;
        padding-right: 10px;
        padding-left: 10px;
        border-style: solid;
        border-color: grey;
        border-width: 2px;
        border-radius: 10px;
        position: relative;

    }
    .moon-card-back {
        /*//background: linear-gradient(-45deg, rgb(189, 184, 169), 5%, rgb(248, 247, 242));*/
        /*background-image: url("http://bgplanet.top/wp-content/uploads/welcome-to-moon/image/card_back_mini.jpg");*/
		background: linear-gradient(-45deg, rgb(10, 10, 10), 5%, rgb(8, 8, 8));
        padding-top: 20px;
        padding-bottom: 20px;
        padding-right: 10px;
        padding-left: 10px;
        border-style: solid;
        border-color: grey;
        border-width: 2px;
        border-radius: 10px;
        position: relative;

    }

    .empty {
        color:rgba(0,0,0,0); border:1px solid white;

        background-color: transparent;
        opacity: 15%;
        border-style: solid;
        border-color: grey;
        border-width: 2px;
        border-radius: 10px;

        padding-top: 20px;
        padding-bottom: 20px;
        padding-right: 10px;
        padding-left: 10px;

        -webkit-touch-callout: none; /* iOS Safari */
        -webkit-user-select: none; /* Safari */
        -khtml-user-select: none; /* Konqueror HTML */
        -moz-user-select: none; /* Old versions of Firefox */
        -ms-user-select: none; /* Internet Explorer/Edge */
        user-select: none; /* Non-prefixed version, currently
                                    supported by Chrome, Edge, Opera and Firefox */

    }

    .moon-action-hint {
        font-size: 12pt;
        float: right;
        position:relative;
        right:15px;
        top: -15px;
        width: 0px;
    }
    #shuffle-button {
        display: none;
        font-family: "AliHeavy";
    }
    #shuffle-button_mobile {
        display: block;
        font-family: "AliHeavy";
        margin: 0 auto;
    }
    #back-button {
        display: none;
        font-family: "AliHeavy";
    }
    #back-button_mobile {
        display: block;
        font-family: "AliHeavy";
        margin: 0 auto;
    }
    #flip-button {
        display: none;
        font-family: "AliHeavy";
    }
    #flip-button_mobile {
        display: block;
        font-family: "AliHeavy";
        margin: 0 auto;
    }
	#select-task {
        display: none;
        font-family: "AliHeavy";
    }
    #select-task_mobile {
        display: block;
        font-family: "AliHeavy";
        margin: 0 auto;
    }
    #mark_mobile {
        display: block;
        font-family: "AliHeavy";
        font-size: 12pt;
        color: #ffffff;
        margin: 0 auto;
    }
    .number {
        width: 75px;
        display: inline-block;
        text-align: center;
		color:#FFFFFF
    }
    .action {
        font-size: 18pt;
    }

    #titleView {
        width: 340px;
    }
}


@media (max-width:310px){
    .footimg {
        width: 58px;
        height: 73px;
    }
    body {
        font-size: 46pt;
        font-family: 'AliHeavy';
        display: flex;
        justify-content: center;
        align-items: center;
        min-height: 100vh;
        /*background: radial-gradient(ellipse at bottom, #0d1d31 0%, #0c0d13 100%);*/
        background-image: url('https://bgplanet.top/wp-content/uploads/welcome-to-moon/image/bg_moon_mini.jpg');
        background-repeat: no-repeat;
        background-size: 100% 100%
    }
    td {
        padding: 0.05em 0.05em;
    }
    #title-1 {
        font-family: 'Dancing Script';
        font-size: 48pt;
        text-shadow: 0.5px 0.5px #e60073;
    }

    #title-2 {
        font-family: "Open Sans", Helvetica, sans-serif;
        font-weight: lighter;
        text-transform: uppercase;
        font-size: 16pt;
        text-align: right;
        font-style: italic;
        -webkit-animation: glow 1s ease-in-out infinite alternate;
        -moz-animation: glow 1s ease-in-out infinite alternate;
        animation: glow 1s ease-in-out infinite alternate;
        margin-top: -20px;
        margin-right: 20px;
    }
    #main-table {

        max-width: 310px;
    }
    .moon-card {
        /*//background: linear-gradient(-45deg, rgb(189, 184, 169), 5%, rgb(248, 247, 242));*/
        /*background-image: url("http://bgplanet.top/wp-content/uploads/welcome-to-moon/image/card_front_mini.jpg");*/
		background: linear-gradient(-45deg, rgb(10, 10, 10), 5%, rgb(8, 8, 8));
        padding-top: 1px;
        padding-bottom: 1px;
        padding-right: 5px;
        padding-left: 5px;
        border-style: solid;
        border-color: grey;
        border-width: 2px;
        border-radius: 10px;
        position: relative;

    }
    .moon-card-back {
        /*//background: linear-gradient(-45deg, rgb(189, 184, 169), 5%, rgb(248, 247, 242));*/
        /*background-image: url("http://bgplanet.top/wp-content/uploads/welcome-to-moon/image/card_back_mini.jpg");*/
		background: linear-gradient(-45deg, rgb(10, 10, 10), 5%, rgb(8, 8, 8));
        padding-top: 1px;
        padding-bottom: 1px;
        padding-right: 5px;
        padding-left: 5px;
        border-style: solid;
        border-color: grey;
        border-width: 2px;
        border-radius: 10px;
        position: relative;

    }

    .empty {
        color:rgba(0,0,0,0); border:1px solid white;

        background-color: transparent;
        opacity: 15%;
        border-style: solid;
        border-color: grey;
        border-width: 2px;
        border-radius: 10px;

        padding-top: 11px;
        padding-bottom: 31px;
        padding-right: 5px;
        padding-left: 5px;

        -webkit-touch-callout: none; /* iOS Safari */
        -webkit-user-select: none; /* Safari */
        -khtml-user-select: none; /* Konqueror HTML */
        -moz-user-select: none; /* Old versions of Firefox */
        -ms-user-select: none; /* Internet Explorer/Edge */
        user-select: none; /* Non-prefixed version, currently
                                    supported by Chrome, Edge, Opera and Firefox */

    }

    .moon-action-hint {
        font-size: 12pt;
        float: right;
        position:relative;
        right:15px;
        top: -15px;
        width: 0px;
    }
    #shuffle-button {
        display: none;
        font-family: "AliHeavy";
    }
    #shuffle-button_mobile {
        display: block;
        font-family: "AliHeavy";
        margin: 0 auto;
    }
    #back-button {
        display: none;
        font-family: "AliHeavy";
    }
    #back-button_mobile {
        display: block;
        font-family: "AliHeavy";
        margin: 0 auto;
    }
    #flip-button {
        display: none;
        font-family: "AliHeavy";
    }
	#select-task {
        display: none;
        font-family: "AliHeavy";
    }
    #flip-button_mobile {
        display: block;
        font-family: "AliHeavy";
        margin: 0 auto;
    }
    #mark_mobile {
        display: block;
        font-family: "AliHeavy";
        font-size: 12pt;
        margin: 0 auto;
    }
	#select-task_mobile {
        display: block;
        font-family: "AliHeavy";
        font-size: 12pt;
        margin: 0 auto;
    }
    .number {
        width: 45px;
        display: inline-block;
        text-align: center;
		font-size: 34px;
		color:#FFFFFF
    }
    .action {
        font-size: 18pt;
    }

    #titleView {
        width: 260px;
    }
	.actionImg {
		width: 40px;
	}
}

@media (max-width:250px){
    .footimg {
        width: 58px;
        height: 73px;
    }
    body {
        font-size: 40pt;
        font-family: 'AliHeavy';
        display: flex;
        justify-content: center;
        align-items: center;
        min-height: 100vh;
        /*background: radial-gradient(ellipse at bottom, #0d1d31 0%, #0c0d13 100%);*/
        background-image: url('https://bgplanet.top/wp-content/uploads/welcome-to-moon/image/bg_moon_mini.jpg');
        background-repeat: no-repeat;
        background-size: 100% 100%
    }
    td {
        padding: 0.05em 0.05em;
    }
    #title-1 {
        font-family: 'Dancing Script';
        font-size: 44pt;
        text-shadow: 0.5px 0.5px #e60073;
    }

    #title-2 {
        font-family: "Open Sans", Helvetica, sans-serif;
        font-weight: lighter;
        text-transform: uppercase;
        font-size: 14pt;
        text-align: right;
        font-style: italic;
        -webkit-animation: glow 1s ease-in-out infinite alternate;
        -moz-animation: glow 1s ease-in-out infinite alternate;
        animation: glow 1s ease-in-out infinite alternate;
        margin-top: -20px;
        margin-right: 20px;
    }
    #main-table {

        max-width: 250px;
    }
    .moon-card {
        /*//background: linear-gradient(-45deg, rgb(189, 184, 169), 5%, rgb(248, 247, 242));*/
        /*background-image: url("http://bgplanet.top/wp-content/uploads/welcome-to-moon/image/card_front_mini.jpg");*/
		background: linear-gradient(-45deg, rgb(10, 10, 10), 5%, rgb(8, 8, 8));
        padding-top: 1px;
        padding-bottom: 1px;
        padding-right: 5px;
        padding-left: 5px;
        border-style: solid;
        border-color: grey;
        border-width: 2px;
        border-radius: 10px;
        position: relative;

    }
    .moon-card-back {
        /*//background: linear-gradient(-45deg, rgb(189, 184, 169), 5%, rgb(248, 247, 242));*/
        /*background-image: url("http://bgplanet.top/wp-content/uploads/welcome-to-moon/image/card_back_mini.jpg");*/
		background: linear-gradient(-45deg, rgb(10, 10, 10), 5%, rgb(8, 8, 8));
        padding-top: 1px;
        padding-bottom: 1px;
        padding-right: 5px;
        padding-left: 5px;
        border-style: solid;
        border-color: grey;
        border-width: 2px;
        border-radius: 10px;
        position: relative;

    }

    .empty {
        color:rgba(0,0,0,0); border:1px solid white;

        background-color: transparent;
        opacity: 15%;
        border-style: solid;
        border-color: grey;
        border-width: 2px;
        border-radius: 10px;

        padding-top: 11px;
        padding-bottom: 31px;
        padding-right: 5px;
        padding-left: 5px;

        -webkit-touch-callout: none; /* iOS Safari */
        -webkit-user-select: none; /* Safari */
        -khtml-user-select: none; /* Konqueror HTML */
        -moz-user-select: none; /* Old versions of Firefox */
        -ms-user-select: none; /* Internet Explorer/Edge */
        user-select: none; /* Non-prefixed version, currently
                                    supported by Chrome, Edge, Opera and Firefox */

    }

    .moon-action-hint {
        font-size: 12pt;
        float: right;
        position:relative;
        right:15px;
        top: -15px;
        width: 0px;
    }
    #shuffle-button {
        display: none;
        font-family: "AliHeavy";
    }
    #shuffle-button_mobile {
        display: block;
        font-family: "AliHeavy";
        margin: 0 auto;
    }
    #back-button {
        display: none;
        font-family: "AliHeavy";
    }
    #back-button_mobile {
        display: block;
        font-family: "AliHeavy";
        margin: 0 auto;
    }
    #flip-button {
        display: none;
        font-family: "AliHeavy";
    }
	#select-task {
        display: none;
        font-family: "AliHeavy";
    }
    #flip-button_mobile {
        display: block;
        font-family: "AliHeavy";
        margin: 0 auto;
    }
    #mark_mobile {
        display: block;
        font-family: "AliHeavy";
        font-size: 12pt;
        margin: 0 auto;
    }
	#select-task_mobile {
        display: block;
        font-family: "AliHeavy";
        font-size: 12pt;
        margin: 0 auto;
    }
    .number {
        width: 45px;
        display: inline-block;
        text-align: center;
		font-size: 34px;
		color:#FFFFFF
    }
    .action {
        font-size: 18pt;
    }

    #titleView {
        width: 220px;
    }
	.actionImg {
		width: 40px;
	}
}




@-webkit-keyframes glow {
    from {
        text-shadow: 0 0 5px #fff, 0 0 10px #fff, 0 0 15px #e60073, 0 0 40px #e60073, 0 0 25px #e60073, 0 0 30px #e60073, 0 0 35px #e60073;
    }
    to {
        text-shadow: 0 0 5px #fff, 0 0 15px #ff4da6, 0 0 20px #ff4da6, 0 0 25px #ff4da6, 0 0 30px #ff4da6, 0 0 35px #ff4da6, 0 0 40px #ff4da6;
    }
}

.fa-robot {
    color: grey;
}

.fa-calendar-days {
    color: rgb(255, 94, 121);
}

.fa-seedling {
    color:rgb(12, 141, 12);
}

.fa-bolt {
    color:purple;
}

.fa-user-astronaut {
    color:rgb(255, 123, 0);
}

.fa-droplet {
    color: rgb(62, 123, 255);
}