@font-face {
    font-family: NonchalanceBold;
    src: url(NonchalanceBold.otf);
}
@font-face {
    font-family: NonchalanceMedium;
    src: url(NonchalanceMedium.otf);
}
@font-face {
    font-family: NonchalanceRegular;
    src: url(NonchalanceRegular.otf);
}
@font-face {
    font-family: Santello;
    src: url(SANTELLO.ttf);
}

.dark {
    --grad: linear-gradient(rgb(27, 27, 27), #202);
}
.light {
    --grad: linear-gradient(#FFF, rgb(230, 247, 248));
}

:root {
    color-scheme: light dark;
    --lightcard: aliceblue;
    --lighticard: #0d1217;
    --lightfontc: #140008;
    --lightheader: #EEE;

    --darkcard: #0d1217;
    --darkicard: aliceblue;
    --darkfontc: #FFF;
    --darkheader: #111;

}
body {
    display: flex;
    flex-direction: column;
    align-items: center;
    transition: all ease-in-out 0.3s;
    background-image: var(--grad);
    margin: 0px;
    height: 100vh;
}

.overlay {
    position: fixed;
    width: 100vw;
    height: 100vh;
    background-size: 50px 50px;
    opacity: 0.2;
    z-index: -10;
}

button {
    background: none;
	color: inherit;
	border: none;
	padding: 0;
	font: inherit;
	cursor: pointer;
	outline: inherit;
}

#card {
    display:flex;
    justify-content: center;
    border-radius: 10px;
    padding: 5em;
    flex-direction: column;
}
#demo1 {
    font-family: NonchalanceBold;
}
#demo2 {
    font-family: NonchalanceMedium;
    top: 2em;
    opacity: 0.5;
}
#demo3 {
    font-family: NonchalanceRegular;
    top: 4em;
    opacity: 0.25;
}

h1 {
    color: light-dark(var(--lightfontc), var(--darkfontc));
    position:relative;
    font-size: 5em;
}
.light > #card > h1 {
    color-scheme: light;
} 

.dark > #card > h1 {
    color-scheme: dark;
} 

.light > #abovecard > h3 {
    color-scheme: light;
}

.dark > #abovecard > h3 {
    color-scheme: dark;
}

.light > div > #thing > .gg-sun {
    color: #000;
}
.dark > div > #thing > .gg-sun {
    color: #FFF;
}

.light > .overlay {
    background-image: radial-gradient(circle, #000000 1px, rgba(0, 0, 0, 0) 1px);
}

.dark > .overlay {
    background-image: radial-gradient(circle, #FFF 1px, rgba(0, 0, 0, 0) 1px);
}

#thingwrap {
    position: absolute;
    top: 3em;
    right: 1em;
}


h3 {
    font-family: Santello;
    color: light-dark(var(--lightfontc), var(--darkfontc));
    position:relative;
    top: 15em;
}
@keyframes fadeInOpacity {
	0% {
		opacity: 0;
	}
	100% {
		opacity: 1;
	}
}

#secret {
    display: none;
    opacity: 0;
}
#secret.expired {
    display: block;
    opacity: 1;
	animation-name: fadeInOpacity;
	animation-iteration-count: 1;
	animation-timing-function: ease-in;
	animation-duration: 0.5s;
}
.qanswer {
    backdrop-filter: invert(1);
    color: #888;
}