@import url("common.css");

@import url("assets/fonts/giphurs.css");

:root {
	--surface: #000;
	--on-surface-dark: #666561;
	--on-surface-faint: #8f8f8f;
	--on-surface: #E6E3DA;
	--on-surface-bright: #FFFCF2;
	--primary: #FF672B;
	--secondary: #5C7AFF;
}

html {
	background: no-repeat url("assets/images/background.png") var(--surface);
	background-size: 800px;
	background-position: bottom right;
	background-origin: padding-box;
	background-attachment: fixed;
}

body {
	font-family: "Giphurs", sans-serif;
	font-size: 1.25rem;
	color: var(--on-surface);
}

h1, h2, h3,
h4, h5, h6 {
    margin-top: 16px;
    margin-bottom: 16px;
}

hr {
    border: none;
    border-top: 1px solid var(--on-surface-faint);
}

a {
	color: var(--secondary);
}

a:visited {
	color: var(--secondary);
}

.name {
	font-weight: bold;
	color: var(--primary);
}

code {
	font-size: 80%;

	border: 1px solid var(--on-surface-dark);
	border-radius: 8px;
	padding: 2px 4px;
	background-color: var(--surface);
}

ul li {
	padding: 4px 0px;
}

#dragons {
    display: flex;
    flex-direction: row;
    gap: 12px;
    justify-content: center;
    align-items: flex-end;
    flex-wrap: wrap;
}

#buttons {
    display: flex;
    flex-direction: row;
    gap: 6px;
    justify-content: center;
    align-items: center;
    flex-wrap: wrap;

    & > a {
        width: 88px;
        height: 31px;

        position: relative;

        &.mine::before {
            content: '';

            pointer-events: none;

            width: 100px;
            height: 100px;
            display: block;
            position: absolute;
            transform: translate(calc(-100px - 30px), calc(-100px + 31px));
            background-image: url("assets/images/grab_mine.png");
        }
    }
}

#footer {
	font-size: 1rem;
}

@media (max-width: calc(1050px)) {
	#buttons > a.mine::before {
        content: unset;
	}
}