/* --- ROOT STYLES --- */
:root {
	--goozleOrange: #ff7b00;
	--goozleGreen: #78f336;
	--goozleBlue: #4fbbff;
	--goozleYellow: #f7ef0d;
    --goozleSky: #b9dddd;
    --goozleLavender: rgb(198, 152, 224);
}

/* --- UTILITY --- */

.hidden {
    display: none !important;
}

.error { 
    color: red;
    font-size: 0.9em; 
}

/* --------------------- */
/* --- GLOBAL LAYOUT --- */
/* --------------------- */

body {
	font-family: 'Indie Flower', 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
	margin: 0 auto;
    background-color: #2E3241;
    min-width: 275px;
    color:var(--goozleSky);
}

header, footer {
    padding: 2em;
    background-color: var(--goozleBlue);
}

header {
    height: min-content;
    margin: 0 auto;
    text-align: center;
}

header a {
    height: 100%;
    margin: 0 auto;
    display:contents;
}

#logo {
    max-height: 5em;
    align-self: center;
}

main {
    max-width: 1500px;
}

main > div {
    margin-top: 2em;
}

footer {
    margin-top: 2em;
    font-size: 1.2em;
    color: black;
}

#btnAbout {
	align-self: right;
    cursor: pointer;
}

/* --------------------- */
/* --- GLOBAL STYLES --- */
/* --------------------- */

h1 {
    color: var(--goozleGreen);
    font-weight:bold;
    margin: 0 auto;
    line-height: 100%;
}

h2 {
    margin: 0 auto;
    line-height:100%;
}

p {
    font-size: 1.1em;
    font-weight:normal;
    font-family:'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
}

.p-small {
    font-size:.7em;
}

.p-medium {
    font-size: .9em;
}

.p-large {
    font-size: 1.2em;
}

.p-sans {
    font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
}

.p-hand {
    font-family: 'Indie Flower', 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
}

.p-space-1 {
    margin: .5em 0 0 0;
}

.p-space-2 {
    margin: 1em 0 0 0;
}

a {
    text-decoration: none;
}

a.dark-bg, a.dark-bg:visited {
    color: var(--goozleBlue)
}

a:hover {
    text-decoration:none;
}

.cta {
	background-color: var(--goozleYellow);
	padding: .5em 1em .5em 1em;
	text-decoration: none;
	font-weight: 700;
	color: #000 !important;
	justify-self: center;
	border: 2px solid black;
	font-size: 1.2em;
	font-weight: 700;
    border-radius: 25px;
    display: inline-block;
    cursor: pointer;
}

.space-bottom {
    margin-bottom: 2em;
}

.space-top {
    margin-top: 2em;
}

.noPadding {
    padding: 0 0 0 0 !important;
}

/* seasonal banners */

#hiddenSeasonalBanner {
    display: none;
}

.seasonalBannerContent {
    background-color:#000000c4;
    padding: .5em;
    display: flex;
    flex-direction: column;
}

#easterSeasonalBanner {
    background-color:#86b600;
    color:#fff;
    font-weight:bolder;
    font-size:1.7em;
}

#christmasSeasonalBanner {
    border-color: #a20000;
    background-image:url(../img/seasonal/christmas_banner_bg.png);
    background-repeat:repeat;
    background-size: 75px;
    color:#fff;
    font-size:1.7em;
    padding: 1em 0;
}


#halloweenSeasonalBanner {
    border-color: var(--goozleOrange);
    background-image:url(../img/seasonal/halloween_banner_bg.png);
    background-repeat:repeat;
    background-size: 75px;
    color:#fff;
    font-size:1.7em;
    padding: 1em 0;
}

#halloweenContestHeader {
    border-color: var(--goozleOrange);
    background-color:rgba(0, 0, 0, 0.6);
    color: #fff;
    font-size: 1.7em;
    padding: 0;
}


/* ------------- */
/* --- INDEX --- */
/* ------------- */

.section {
    margin: 2em 0em 2em 0em;
}

.contentBox {
    background-color: white;
    padding: 2em 1em 2em 1em;
    border: 2px solid #000;
    -webkit-border-radius: 25px;
    -moz-border-radius: 25px;
    border-radius: 25px;
    box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
    text-align: center;
    width: 90%;
    color:#000;
}

.comingSoon {
    border: 2px dashed #000;
    background-color: rgb(255,255,255); 
    background: rgba(255,255,255,.75)
}

/* --- INDEX: open the coloring book! --- */
#openTheColoringBook {
    height: auto;
    width: auto;
    margin: 0 auto;
    padding: 1em;
    font-size: 2em;
    text-decoration: none;
    font-weight: bolder;

    background: var(--goozleYellow);
}

/* --- INDEX: slide box --- */

#slideBox {
    text-align: center;
    height: 350px;
}

#slides {
    display: grid;
    grid-template-columns: 1fr;
    grid-template-rows: 1fr;
    list-style-type: none;
    justify-items: center;
    align-items: center;
}

.slide {
    grid-column-start: 1;
    grid-row-start: 1;
    opacity: 0;
    z-index: 1;
    width: auto;
    height: auto;

    -webkit-transition: opacity 1s;
    -moz-transition: opacity 1s;
    -o-transition: opacity 1s;
    transition: opacity 1s;
}

.showing {
    opacity: 1;
    z-index: 2;
}

#controls {
    position: relative;
    z-index: 99;
    padding: 0px;
    transform: scale(1);
    height: auto;
}

.control {
    position: fixed;
    font-size: 2em;
    color: var(--goozleBlue) !important;
    text-shadow: -2px 0 black, 0 2px black, 2px 0 black, 0 -2px black;
    cursor: pointer;
    top: 125px;
}

#previous {
    left: 3%;
}

#next {
    right: 3%;
}


/* --- INDEX: support box --- */

#supportBox {
    text-align: center;
    background-image: url(../img/store/merch-bg-mobile.png);
    background-position:center;
    background-repeat: no-repeat; 
    background-size:cover;
}

#supportBox > div {
    background-color:rgba(255, 255, 255, 0.85);
  }
  
#storeimages {
    display: inline-block;
    max-width: 18em;
}

.storeimage {
    display: inline-block;
    max-width: 6em;
}

.storeimage img {
    width: 100%;
}

#storelinks {
    display: inline-block;
    width: 100%;
}

.storelink {
    display: inline-block;
    align-content: center;
    vertical-align: middle;
    font-size: 1.2em;
    border: 2px solid black;
    border-radius: 25px;
    padding: .5em 1em .5em 1em;
    font-weight: 700;
    max-width: min-content;
}

/* --- INDEX: puzzle box --- */
#puzzleBox {
    display: flex;
    flex-direction: column;
    justify-content: center;
    padding: 1em;
}

.puzzle-previews {
    display: flex;
    flex-direction: row;
    justify-content: center;
    flex-wrap: wrap;
    width: 90%;
}

.puzzle-previews div {
    background-position:center;
    background-repeat:no-repeat;
    background-size:cover;
    border: 2px solid black;
    height: 150px;
    width: 150px;
    margin: 15px;
}

/* --- COLORED PAGE SUBMISSION FORM --- */

#submissionForm input:not([type="checkbox"]):not([type="submit"]) {
    border: 2px solid var(--goozleBlue);
    font-size: 1em;
    line-height: 1em;
    width: 90%;
    padding: .7em;
}

#submissionForm input[type="checkbox"] {
    scale: 1.5;
    border: 2px solid var(--goozleBlue);
}

#submissionFileUploadArea {
    font-family:'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
    padding: 20px;
    text-align: center;
    cursor: pointer;
    color: #444444;
    height: 100%;
    margin: 0 auto;
    width: 300px;
    height: 300px;
}

#submissionFile, #submissionFileLabel {
    display: none;
}

#submissionFileUploadWrapper {
    display: flex;
    flex-direction: column;
}

#submissionFileUploadArea.dragover {
    border-color: #000;
    color: #000;
    background-color:#96c4e1b5;
}

#submissionFileUploadArea.empty {
    border: 2px dashed var(--goozleBlue);
    flex-grow: 1;
}

#submissionFileUploadArea.full {
    background-repeat: no-repeat;
    background-position: center;
    background-size: contain;
    background-clip: border-box;
}

.textFieldLabel {
    display: inline-block;
    font-size: 1.2em;
    padding: 15px 0px 5px 0px;
}

#submitBtn {
    border-radius: 15px;
    font-size: 1.2em;
    padding: 10px 15px;
    margin-top: .5em;
    background-color: var(--goozleBlue);
    color: black;
    font-family: 'Indie Flower', 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
    width: 100%;
    cursor: pointer;
}

#submitBtn:disabled {
    opacity: 70%;
    cursor:not-allowed;
}

#submissionFormError {
    color: #390000;
    background-color: rgb(238, 144, 144);
    font-size: 1.3em;
    padding: .5em;
    margin: 1em .5em 0 .5em;
    font-weight: bold;
    border-radius: 15px;
    border: 2px solid rgb(128, 0, 0);
}

#submissionFormSuccess {
    color: #003900;
    background-color: lightgreen;
    font-size: 1.3em;
    padding: .5em;
    margin: 0 .5em 0 .5em;
    font-weight: bold;
    border-radius: 15px;
    border: 2px solid green;
}

#submissionFormSuccessReset {
    padding: .5em;
    text-decoration: underline;
    cursor: pointer;
}

/* Define the moving gradient */
@keyframes gradientMove {
    0% {
      background-position: 0% 50%;
    }
    50% {
      background-position: 100% 50%;
    }
    100% {
      background-position: 0% 50%;
    }
  }

#waitMessage {
    color:#000;
    font-size: 1.3em;
    padding: 1em;
    font-family: 'Indie Flower', 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
    background: linear-gradient(270deg, #ffdb49, #9afb45, #86e3ce, #b46eda);
    background-size: 400% 400%;
    animation: gradientMove 10s ease infinite;
}

/* --------------- */
/* --- GALLERY --- */
/* --------------- */

#galleryCategories {
    margin-left: 2em;
    margin-right: 2em;
    display:flex; 
    flex-direction: row;
    justify-content: center;
    max-width: 1024px;
    justify-self: center;
}

.galleryCategory {
    color: black;
    background-color: white;
    padding: .5em;
	text-decoration: none;
	font-weight: 700;
	border: 5px solid black;
	font-size: 1.2em;
	font-weight: 700;
    border-radius: 25px;
    display: inline-block;
    width: 8em;
    height: 8em;
    background-size: contain;
    background-repeat: no-repeat;
    background-position-x: 40%;
    background-position-y: 40%;
    background-size: 90%;
    margin: .5em;
}

.galleryCategoryBanner {
    width: 100%;
    display: flex;
    position: relative;
    flex-direction: row;
    flex-wrap: nowrap;
    align-items: center;
    justify-content: center;
}

.galleryCategoryBanner * {
    width: 100%;
    flex: 1 1 auto;
}

.galleryCategory div {
    height: 100%;
    width: auto;
    text-align: right;
}

#goozle-category {
    background-image: url(../img/goozle-category.png);
}

#messian-category {
    background-image: url(../img/messian-category.png);
}

#distractoid-category {
    background-image: url(../img/distractoid-category.png);
}

#monster-category {
    background-image: url(../img/monster-category.png);
}

#robot-category {
    background-image: url(../img/robot-category.png);
}

#undersea-category {
    background-image: url(../img/undersea-category.png);
}

#voidling-category {
    background-image: url(../img/voidling-category.png);
}

#procrastitron-category {
    background-image: url(../img/procrastitron-category.png);
}

#coda-category {
    background-image: url(../img/coda-category.png);
}

#submissions-category {
    border-color: #000000;
    background-image: url(../img/submissions-category.png);
}

#halloween-category {
    border-color: var(--goozleOrange);
    background-image: url(../img/halloween-category.png);
}

#christmas-category {
    border-color: #e40303;
    background-image: url(../img/christmas-category.png);
}

#galleryFilters {
    display: flex;
    flex-direction: row;
    align-content: center;
    justify-content: space-around;
}

#galleryFilters div {
    padding: .5em 1em;
    border-radius: 15px;
    border: 2px solid #000;
    color:#000;
    font-weight: bold;
    text-transform: uppercase;
    user-select: none;
    background-color: #fff;
}

.filterDeselected {
    opacity: 50%;
    cursor: pointer;
}

#galleryItems {
    border-top: 2px dashed white;
}

.galleryItem {
    background-color: white;
    border: 2px solid black;
    width: 10em;
    height: 10em;
    display: inline-block;
    margin-top: 2em;
    padding: 1em;
    color: black;
    font-weight: bolder;
    text-transform: capitalize;
    overflow: hidden;
}

.galleryItemImage {
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center;
    height: 100%;
    width: 100%;
}

.galleryContestItemMarker {
    background-color: gold;
    width: -webkit-fill-available;
    margin-top: -100%;
    float: left;
    padding: 5px 10px 0 10px;
}

.galleryModalContestMessage {
    background-color: gold;
    float: right;
    padding: 5px 10px 0 10px;
    text-align: center;
    font-weight: bold;
}

/* --- GALLERY: IMAGE MODAL --- */

#galleryModalWrapper {
    display: none; 
    position: fixed; 
    margin: 0 auto;
    padding: 0;
    z-index: 4; 
    left: 0;
    top: 0;
    width: 100%; 
	height: 100%;
    overflow: auto;
    color: black;
    background-color: rgb(0,0,0); 
    background-color: rgba(0,0,0,0.6); 
}

#galleryModal {
    padding: 2em;
    width:auto;
    height:auto;
    max-width:100%;
    max-height:90vh;
    min-height: 400px;
    position: absolute;
    left: 50%;
    top: 20%;
    transform: translate(-50%, -10%);
    text-align: center;
    border: 2px solid black;
    background-color: white;
}

#galleryModal img {
    display: inline;
    width:auto;
    height:auto;
    max-width:90%;
    max-height:80vh;
    margin: 0 auto;
    margin-bottom: 1em;
}

#galleryModal p {
    text-align: left;
    font-size: .7em;
}

.modal-arrows {
    display: flex;
    justify-content: space-between;
    width: 100%;
    /* align-self: center; */
    position: absolute;
    top: 40%;
    transform: translateY(-50%);
    transform: translateX(-2em);
}

.left-arrow, .right-arrow {
    background-color: var(--goozleGreen);
    color: #FFFFFF;
    z-index: 999;
    box-sizing: border-box;
    border: 2px solid black;
    width: 60px;
    height: 60px;
    border-radius: 50%;
    letter-spacing: 2px;
    font-size: 2em;
    font-weight: bolder;
    text-transform: uppercase;
    text-decoration: none;
    text-align: center;
    text-shadow: -3px 0 black, 0 3px black, 3px 0 black, 0 -3px black;
    padding-top: .25em;
    padding-left: .02em;
    margin: .5em;
    cursor: pointer;
}

#printControl {
    background-color: var(--goozleGreen);
    padding: .5em 1em .5em 1em;
	text-decoration: none;
	font-weight: 700;
	border: 2px solid black;
	font-size: 1.2em;
	font-weight: 1200;
    border-radius: 25px;
    display: inline-block;
    cursor: pointer;
}

#close {
    font-size: 4em;
    font-weight: bold;
    position: absolute;
    right: 3%;
    top: 0;
    cursor: pointer;
}

/* --- GALLERY: BACK TO TOP --- */

.back-to-top {
    background-color: var(--goozleGreen);
    color: #FFFFFF;
    opacity: 0;
    transition: opacity .6s ease-in-out;
    z-index: 999;
    position: fixed;
    right: 20px;
    bottom: 20px;
    width: 60px;
    height: 60px;
    box-sizing: border-box;
    border: 2px solid black;
    border-radius: 50%;
}

a.back-to-top {
    font-weight: 1000;
    letter-spacing: 2px;
    font-size: 2em;
    font-weight: bolder;
    text-transform: uppercase;
    text-decoration: none;
    text-align: center;
    text-shadow: -3px 0 black, 0 3px black, 3px 0 black, 0 -3px black;
    padding-top: .25em;
    padding-left: .02em;
}

.back-to-top:hover, .back-to-top:focus, .back-to-top:visited {
color: #FFFFFF;
}

.back-to-top.show {
opacity: 1;
}

/* ------------------- */
/* --- ABOUT MODAL --- */
/* ------------------- */

.modal {
	display: none; 
    position: fixed; 
    z-index: 4; 
    left: 0;
    top: 0;
    width: 100%; 
	height: 100%;
    overflow: auto; 
    color: black;
    background-color: rgb(0,0,0); 
    background-color: rgba(0,0,0,0.4); 
}

.modal-content {
	background-color: #fefefe;
    margin: 15% auto;
    padding: 1em;
    border: 1px solid #888;
    max-width: 90%;
}

.modal-header {
    padding: .5em;
	margin: 0px;
    background-color: #4fbbff;
    color: black;
	display: grid;
	grid-template-columns: auto 25%;
	grid-template-rows: auto;
	line-height: 1em;
	font-size: 1.3em;
}

.modal-header * {
	margin: 0px;
}

.modal-body {
	padding: 2px 16px;
}

.closeAbout {
    color: black;
	font-size: 2em;
    font-weight: bold;
	justify-self: end;
	align-self: start;
    cursor: pointer;
}

/* >>>>>>>>>>>>> SM <<<<<<<<<<<<< */

@media only screen and (max-width: 48em) {

    #logo {
        max-height: 3em;
    }

    .modal-content {
		max-width: 80%
	}

    .galleryCategory {
        width: 8em;
        height: 8em;
    }

    #galleryCategories div:not(:first-child) {
        margin-top: 1em;
    }

    #galleryModal {
        padding: .5em;
        max-width: 100%;
        left: 10%;
        top: 10%;
        transform: translate(-5%, 0);
    }
}

/* >>>>>>>>>>>>> MD <<<<<<<<<<<<< */

@media only screen and (min-width: 49em) {
        
    .hoverPop:hover {
        transform: scale(1.05);
        cursor: pointer;
    }

    .hoverPopLarge:hover {
        transform: scale(1.3);
        cursor: pointer;
    }
    
    #supportBox {
        background-image: url(../img/store/merch-bg.png);
    }
}

/* >>>>>>>>>>>>> LG <<<<<<<<<<<<< */

@media only screen and (min-width: 75em) {

}