@font-face {
	font-family: Geist;
	src: url("Geist.woff2") format("woff2");
	font-display: swap;
}

:root {
	color-scheme: light dark;
    text-shadow: 1px 1px 1px rgb(0 0 0 / 12%);

	--wui-shade-01: hsl(0, 0%, 91%);
	--wui-shade-02: hsl(0, 0%, 85%);
	--wui-shade-03: hsl(0, 0%, 75%);
	--wui-shade-04: hsl(0, 0%, 65%);
	--wui-shade-05: hsl(0, 0%, 54%);

	--wui-text-01: hsl(0, 0%, 13%);
	--wui-text-02: hsl(0, 0%, 27%);
	--wui-text-03: hsl(240, 8%, 44%);
	--wui-text-04: hsl(240, 8%, 64%);
	--wui-text-05: hsl(240, 8%, 90%);

	--wui-radius: 0.5rem;
	--wui-border: hsl(240 5.9% 90%);

	--wui-primary: hsla(16, 100%, 50%, 1);
	--wui-secondary: hsla(16, 100%, 30%, 1);
	--wui-primary-fg: hsl(0, 0%, 100%);

	--wui-outline: var(--wui-primary);
	--wui-foreground: var(--wui-text-01);
	--wui-background: hsl(0, 0%, 100%);
	--wui-box-shadow: 0 1px 3px 0 rgb(0 0 0 / 0.1), 0 1px 2px -1px rgb(0 0 0 / 0.1);
}

body {
	max-width: 650px;
	margin: 40px auto;
	padding: 0 2rem;
	font-family:
		Geist,
		-apple-system,
		BlinkMacSystemFont,
		"Segoe UI",
		Roboto,
		"Helvetica Neue",
		Arial,
		sans-serif;
	color: var(--wui-foreground);
	background: var(--wui-background);
	scroll-behavior: smooth;
}

h1,h2,h3 {
	line-height: 1.2;
	margin-block: 1rem;

	&:is(h1) {
		border-bottom: 1px solid var(--wui-border);
	}
}

@media (prefers-color-scheme: dark) {
	:root {
		--wui-shade-01: hsla(0, 0%, 12%, 1);
		--wui-shade-02: hsla(0, 0%, 15%, 1);
		--wui-shade-03: hsla(0, 0%, 20%, 1);
		--wui-shade-04: hsla(0, 0%, 31%, 1);
		--wui-shade-05: hsla(0, 0%, 37%, 1);

		--wui-text-01: hsl(0, 0%, 90%);
		--wui-text-02: hsl(0, 0%, 80%);
		--wui-text-03: hsl(0, 0%, 65%);
		--wui-text-04: hsl(0, 0%, 45%);
		--wui-text-05: hsl(0, 0%, 25%);

		--wui-background: hsl(0, 0%, 10%);
		--wui-border: hsl(0, 0%, 21%);
	}
}

a {
	color: var(--wui-primary);
	/*text-decoration: none;*/
	transition: all 0.2s cubic-bezier(0.075, 0.82, 0.165, 1);
	cursor: pointer;

	&:hover {
		color: var(--wui-secondary);
	}

}

hr {
	border: none;
	border-top: 2px solid var(--wui-border);
    border-radius: 5px;
}

img {
	max-width: 100%;
	height: auto;
	vertical-align: middle;
	font-style: italic;
	background-repeat: no-repeat;
	background-size: cover;
	shape-margin: 1rem;
	border-radius: 5px;
}

details {
	margin-block: 1rem;
	padding: 1rem;
	border-radius: 5px;
	background-color: var(--wui-shade-02);

	& summary {
		cursor: pointer;
		user-select: none;
	}
}

a.join {
	border-radius: var(--wui-radius);
	background: linear-gradient(-45deg, #ee7752, #e73c7e, #23a6d5, #23d5ab);
	background-size: 400% 400%;
	padding-block: 10px;
	color: white !important;
	text-decoration: none;
	transition: all 0.2s cubic-bezier(0.075, 0.82, 0.165, 1);
	cursor: pointer;
	font-size: larger;
	width: 100%;
	text-align: center;

	&:hover {
		transform: scale(1.025);
	}

    /* Only if reduced motion is disabled */
    @media (prefers-reduced-motion: no-preference) {
	    animation: gradient 4s ease-in-out infinite;
    }
}

@keyframes gradient {
	0% {
		background-position: 0% 50%;
		filter: drop-shadow(0 0 8px #23a6d5);
	}
	33% {
		background-position: 100% 50%;
		filter: drop-shadow(0 0 8px #e73c7e);
	}
	66% {
		background-position: 100% 100%;
		filter: drop-shadow(0 0 8px #ee7752);
	}
	100% {
		background-position: 0% 50%;
		filter: drop-shadow(0 0 8px #23a6d5);
	}
}

form {
	margin-block: 4px;
	display: flex;

	& input {
		flex: .75;
		appearance: none;
		border: none;
		padding: 10px 20px;
		border-bottom-left-radius: 5px;
		border-top-left-radius: 5px;
		background-color: var(--wui-shade-01);
		border: 1px solid var(--wui-border);
	}
}

div.container {
	display: grid;
	justify-items: center;
	grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
	gap: 1rem;
}

div.card {
	min-width: 200px;
	max-width: 200px;
	display: flex;
	flex-direction: column;
	border: 1px solid var(--wui-border);
	border-radius: var(--wui-radius);

	& div.content {
		flex: 1;
		padding: 1rem;
		border-bottom-left-radius: var(--wui-radius);
		border-bottom-right-radius: var(--wui-radius);
		background-color: var(--wui-shade-01);
		color: var(--wui-text-01);
		text-align: center;
		border-top: 1px solid var(--wui-border);
	}

	& div.image {
		height: 200px;
		width: 100%;
		background-repeat: no-repeat;
		background-size: cover;
		background-color: black;
		border-top-left-radius: var(--wui-radius);
		border-top-right-radius: var(--wui-radius);
	}
}

table {
	display: block;
	margin-block: 1rem;
	border-collapse: collapse;
	border-radius: 10px;
	width: 100%; /* Add this line to make the table stretch out */

	& td {
		width: 100%;

		& details {
			margin-block: 0;
		}
	}

	th {
		width: 25%;
	}

    tr {
        &:nth-child(even) {
            background-color: var(--wui-shade-01);
        }
    }

    /*Top left top right border radius*/
    tr:first-child td:first-child {
        border-top-left-radius: 10px;
    }

    tr:first-child td:last-child {
        border-top-right-radius: 10px;
    }

    thead {
        background-color: var(--wui-shade-01);
    }
}

table th,
table td {
  padding: 10px;
  border: 1px solid var(--wui-border);
}