body{
    background: black;
    color: white;
    text-align: center;
    font-family: 'Determination Mono Web';
    font-size: calc(1em + 1vw);
}

a{
    color: hsl(213, 60%, 62%);
    text-decoration: none;
}

a[href="/index"]{
    color: cyan;
}

a:is(:hover, :focus){
    color: white;
}

a,
a:is(:hover, :focus){
	transition: color 0.2s ease-in-out;
}

img{
    display: block;
}

a img{
    display: inline-block;
}

:is(main, section) > :is(img, .box){
    margin: 1em auto;
}

main > img:first-child{
    animation-delay: 0.5s!important;
}

img.space{
    margin: 40vh auto 90vh auto;
}

img.space.top{
    margin-bottom: 0;
}

.buffer{
    height: 33vh;
    width: 1px;
    display: block;
}

.box, img, iframe{
    max-width: 95vw;
}

.box{
    height: 152px;
    width: 578px;
    box-sizing: border-box;
    border: 6px solid white;
    display: flex;
        align-items: center;
        justify-content: center;
        gap: 2em;
    
    button{
        display: block;
        background: none;
        border: none;
        font-size: inherit;
        font-family: inherit;
        color: white;
        text-transform: capitalize;
        margin-right: 1em;
        text-align: center;
    }

    button:is(:hover, :focus){
        cursor: pointer;
    }

    button::before{
        content: "";
        background-image: url("/404/heart.png");
            background-size: contain;
            background-repeat: no-repeat;
            background-position: 111px;
        display: inline-block;
        height: 1em;
        width: 1em;
        margin-right: 1ch;
        vertical-align: bottom;
        image-rendering: pixelated;
    }

    button:is(:hover, :focus)::before{
        background-position: 0;
    }

    img{
        height: 1em;
        width: 1em;
        image-rendering: pixelated;
    }

    button:is(:hover, :focus) ~ img{
        opacity: 0;
    }

    button:first-of-type{
        order: 1;
    }

    button:last-of-type{
        order: 3;
    }

    img{
        order: 2;
    }
}

footer{
    font-size: 16px;
    margin: 5em auto 1em auto;
}

#accept, #reject{
    display: none;
    padding-top: 33vh;

    > img:first-child{
        margin-top: 0;
    }

    > img:last-child{
        margin-bottom: 0;
    }
}

:is(#accept, #reject):target{
    display: block;
}

iframe{
    height: 66vh;
    width: calc(66vh * 1.6);
    max-width: 90vw;
}

/* style-my-tootltips plugin, tooltip styling */
#s-m-t-tooltip{
	/* basic */
	max-width:300px;
	z-index:10;
	margin:-50px 14px 7px 12px;
	/* style and design */
	padding:8px;
	background:#222; /* fallback if rgba not supported */
	background:rgba(0,0,0,0.8);
	-moz-border-radius:3px;
	-webkit-border-radius:3px;
	border-radius:3px;
	-moz-box-shadow:2px 2px 0 rgba(0,0,0,0.15),-1px -1px 0 rgba(255,255,255,0.3);
	-webkit-box-shadow:2px 2px 0 rgba(0,0,0,0.15),-1px -1px 0 rgba(255,255,255,0.3);
	box-shadow:2px 2px 0 rgba(0,0,0,0.15),-1px -1px 0 rgba(255,255,255,0.3);
	/* font */
	font-family: Verdana,Geneva,sans-serif;
	font-size:18px;
	line-height:inherit;
	color:#fff;
}