:root {
    --blue: #1e90ff;
    --white: #ffffff;
    --top-margin: 64px;
    --tile-spacing: 16px;
    --tile-width: 220px;
    --tile-height: 220px;
    --card-width: 200px;
    --card-height: 200px;
    --card-inset: 10px;
    --app-background: #7D8895;
    --dark-color: #223;
    --primary: #6D007D;
    --primary-dark: #4D005D;
    --primary-light: #9D21AD;
    --primary-white-tint: #F5EEFF;
    --yellow: #ffec7d;
    --rad: 4px;
    /*radius*/

    --heading-font: 'Barlow Semi Condensed', sans-serif;
    --body-font: 'Lato', sans-serif;

}

* {
    box-sizing: border-box;
}




.button.secondary-button {
    font-size: 16px;
    line-height: 1.3;
    padding: 10px;
    border: 3px solid var(--primary);
    background: rgba(255, 255, 255, .9);
}

.secondary-button:hover {
    background: var(--primary-white-tint);
}

body {
    display: flex;
    align-items: center;
    justify-content: center;
    height: 100vh;
    width: 100vw;
    overflow: hidden;
    background-color: #ccc;
    font-family: var(--body-font);
}



.controller {
    isolation: isolate;
}

#APP-CONTAINER {
    border: 1px solid #ccc;
    width: 960px;
    height: 540px;
    position: relative;
    overflow: hidden;
}

#APP {
    background-color: var(--app-background);
    background-image: url('images/background.png');
    width: 960px;
    height: 540px;
    color: var(--dark-color);
}

.centerer {
    width: 960px;
    height: 540px;
    position: absolute;
    left: 0px;
    top: 0px;
    display: grid;
    align-items: center;
    justify-items: center;
    pointer-events: none;
}

.help-button {
    background-color: #333;
    font-size: 15px;
    font-weight: bold;
    min-width: 3em;
    padding: 10px;
    position: absolute;
    right: 10px;
    top: 0px;
    color: white;
    margin-top: 0px;
    text-align: center;
    border-radius: 0px 0px 10px 10px;
    cursor: pointer;
}

.choice-display {
    position: relative;
    border: 3px solid var(--dark-color);
    border-radius: var(--rad);
    width: 640px;
    min-height: 300px;
    padding: 20px;
    padding-right: 260px;
    background-color: white;
    background-position: bottom right;
    background-repeat: no-repeat;
    color: #333;
    box-shadow: 0px 5px 10px rgba(0, 0, 0, 0.5);
    display: flex;
    gap: 20px;
    flex-direction: column;
    align-content: center;
    justify-content: center;
}

.choice-display p,
.dialog-display p {
    margin: 0px;
    padding: 0px;
    margin-block-start: 0px;
    margin-block-end: 0px;
}

.choice-display .problem {
    font-family: var(--heading-font);
    font-weight: bold;
    font-size: 20px;
}

.choice-listing {
    display: flex;
    align-content: stretch;
    justify-content: flex-start;
    gap: 10px;
    width: 100%;
}

.choice-listing .option {
    flex-grow: 1;

    pointer-events: auto;
    position:relative;
    padding:14px 10px 10px 16px;
}


.choice-listing .option:before {
    position:absolute;
    left:-2px;
    top:-2px;
    display:flex;
    font-family:var(--heading-font);
    justify-content: center;
    align-items: center;
    height:18px;
    width:18px;
    line-height:1;
    background:var(--primary);
    color:white;
    padding:0;
    border-radius: 0 0 var(--rad) 0;
}

.choice-listing .option.first:before {
    content: '1';
}

.choice-listing .option.second:before {
    content: '2';
}

.dialog-display .option:before {
/*    content:'';*/
    display:none;
}

.choice-listing .option {
	min-width: 40%;
    /*
	border: 3px solid var(--primary);
	border-radius: var(--rad);
	padding: 10px;
	pointer-events: auto;
	transform: translate( 0px, 0px );
	box-shadow: 0px 5px 0px rgba( 0,0,0,0.5 );
	background-color: white;
	flex-grow: 1;
	display: flex;
	align-items: center;
	justify-content: center;
    transition:all .3s ease-in-out;
    cursor:pointer;
*/
}

.choice-listing .option.failed {
    /*
	background-color: #fcc;
	color: #300;
	pointer-events: none;
	border: 3px solid #300;
	opacity: 0.5;
	box-shadow: 0px 0px 0px transparent;
	transform: translate( 0px, 5px );
*/
}

.choice-listing .option:hover,
.choice-listing .option.tab-selected {
    /*
	border: 3px solid var(--primary-dark);
	background-color: var(--primary-white-tint);
*/
}

.choice-listing .option:active {
    /*
	box-shadow: 0px 0px 0px transparent;
	transform: translate( 0px, 5px );
*/
}

.choice-display .instructions {
    font-size: 14px;
    font-style: italic;
}

.dialog-display {
    position: relative;
    border: 2px solid var(--dark-color);
    border-radius: var(--rad);
    padding: 20px;
    max-width: 500px;
    background-color: white;
    box-shadow: 0px 5px 10px rgba(0, 0, 0, 0.5);
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.dialog-display h2 {
    margin: 0px;
    font-family: var(--heading-font);
    font-size: 30px;
}

.correct-icon {
    border-radius:1.2em;
    display:flex;
    justify-content: center;
    align-items: center;
    width:1.2em;
    height:1.2em;
    color:white;
    background:var(--primary);
    padding:0;
}
.drop-in {
    animation-name: animate-drop-in;
    animation-duration: 0.5s;
    zanimation-timing-function: cubic-bezier(0, .68, .03, 1.18);
}

@keyframes animate-drop-in {
    0% {
        transform: translate(0px, -4em);
    }

    100% {
        transform: translate(0px, 0px);
    }
}


.bonk {
    animation-name: animate-bonk;
    animation-duration: 0.5s;
}

@keyframes animate-bonk {
    0% {
        transform: translate(0px, 0em);
    }

    10% {
        transform: translate(-4px, 0em);
    }

    20% {
        transform: translate(4px, 0em);
    }

    30% {
        transform: translate(-4px, 0em);
    }

    40% {
        transform: translate(4px, 0em);
    }

    50% {
        transform: translate(-4px, 0em);
    }

    60% {
        transform: translate(4px, 0em);
    }

    70% {
        transform: translate(-4px, 0em);
    }

    80% {
        transform: translate(4px, 0em);
    }

    90% {
        transform: translate(-4px, 0em);
    }

    100% {
        transform: translate(0px, 0em);
    }
}

.wait-in {
    animation-name: animate-wait-in;
    animation-duration: 0.25s;
    animation-delay: 0.15s;
    animation-fill-mode: both;
}

@keyframes animate-wait-in {
    0% {
        opacity: 0;
    }

    100% {
        opacity: 1;
    }
}

.fade-in {
    animation-name: animate-fade-in;
    animation-duration: 0.25s;
    animation-fill-mode: both;
}

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

    100% {
        opacity: 1;
    }
}

.issue {
    position: absolute;
    width: 2em;
    height: 2em;
    box-sizing: content-box;
    border-radius: 1em;
}

.issue .icon {
    position: absolute;
    left: 0px;
    top: 0px;
    width: 2em;
    height: 2em;
    display: flex;
    justify-content: center;
    align-items: center;
    /*	background-image: url('images/question-mark.svg');*/
    background-color: white;
    border-radius: 2em;
    border: 2px solid var(--primary);
    z-index: 2;
    cursor: pointer;
    color: var(--primary);
    transition:all .3s ease-in-out;
}

.issue .icon:before {
    font-family: 'Material Symbols Rounded';
    font-weight: normal;
    font-style: normal;
    font-size: 24px;
    line-height: 1;
    letter-spacing: normal;
    text-transform: none;
    display: inline-block;
    white-space: nowrap;
    word-wrap: normal;
    direction: ltr;
    -webkit-font-feature-settings: 'liga';
    -webkit-font-smoothing: antialiased;
    font-variation-settings: 'FILL'0, 'wght'500, 'GRAD'0, 'opsz'24;
    content: 'question_mark';
}

.issue .icon.tab-selected {
    /*	background-color: #9cf;*/
    background-color:var(--primary-light);
}

.issue[completed=true] .icon {
    background-color: var(--primary);
    color:white;
    border-color:white;
}


.issue[completed=true] .icon:before {
    content:'check';
}

.issue-image {
    pointer-events: none;
    box-sizing: content-box;
    position: absolute;
    display: inline-block;
    overflow: hidden;
    background-repeat: no-repeat;
    background-position: 0% 0%;
    border-radius: 5px;
    transition:filter .2s ease-in-out;
}

.issue[completed=true] .issue-image {
    background-position: 100% 0%;
}

.issue.tab-selected .icon {
    /*	outline: 3px dashed white;*/
/*    box-sizing: border-box;*/
    /*	background-color: #9cf;*/
    background-color:var(--primary-white-tint);
    color:var(--primary-dark);
    border-color:var(--primary-dark);
   
/*    z-index: 4;*/
}

.issue .icon:active {
    transform:scale(.95);
}

.issue[completed=true].tab-selected .icon {
    background-color: var(--primary-dark);
    color:white;
    border-color:white;
}

.zissue:hover .issue-image,
.issue.tab-selected .issue-image {
    z-outline: 3px dashed white;
    z-outline-offset: -3px;
    zborder: 3px dashed black;
/*    background-color: rgba(255, 255, 255, 0.5);*/
    filter: drop-shadow(-1px 1px 5px var(--primary-white-tint)) drop-shadow(-1px 1px 5px var(--primary-white-tint)) drop-shadow(-1px 1px 5px var(--primary-light))  contrast(105%)  saturate(110%);
/*    box-shadow:inset 0 0 2px var(--primary-light),*/
        0 0 1px var(--primary-light);
/*    z-index: 3;*/
}

.app-instructions {
    background-color: var(--dark-color);
	border: 1px solid white;
    border-radius: var(--rad);
    font-size: 15px;
    padding: 9px;
    width: 610px;
    position: absolute;
    left: 180px;
    top: 5px;
    color: white;
    margin-top: 0px;
    text-align: center;
}

#instructions {
    position:relative;
	background-color: var(--dark-color);
	border: 1px solid white;
    border-radius: var(--rad);
	color: white;
    font-size:15px;
    letter-spacing: .02rem;
	padding: 5px;
	font-weight: bold;
	text-align: center;
    box-shadow:0 0 10px  rgba(0,0,0,.4);
}