:root {
	color-scheme: light dark;
}

*,
*:after,
*:before {
	box-sizing: border-box;
}

body {
	color: #444;
	font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", "Noto Sans", Helvetica, sans-serif, "Apple Color Emoji", "Segoe UI Emoji";
	font-size: 18px;
	line-height: 1.6;
	margin: 40px auto;
	max-width: 760px;
	padding: 0 20px;
}

h1, h2 {
	line-height: 1.2;
}

a {
	color: #07c;
}

a:hover {
	color: #059;
}

button {
	background: #ddd;
	border: 0;
	cursor: pointer;
	font-size: 14px;
	padding: 9px 20px;
}

button:hover,
code {
	background: #eee;
}

footer {
	display: flex;
	justify-content: center;
	margin-top: 3rem;
}

.coffee {
	margin-left: 0.325rem;
}

.primary {
	background: #19e;
	color: #fff;
}

.primary:hover {
	background: #17e;
}

textarea {
	border: 1px solid #ababab;
	border-radius: 2px;
	box-sizing: border-box;
	-moz-box-sizing: border-box;
	-webkit-box-sizing: border-box;
	padding: 5px;
	width: 100%;
}

@media (prefers-color-scheme: dark) {
	body {
		background: #1e1e1e;
		color: #ccc;
	}

	a {
		color: #4af;
	}

	a:hover {
		color: #7bf;
	}

	button {
		background: #3a3a3a;
		color: #ddd;
	}

	button:hover,
	code {
		background: #4a4a4a;
	}

	textarea {
		background: #2a2a2a;
		border-color: #555;
		color: #ddd;
	}
}

#toast-container {
    position: fixed;
    top: 20px;
    right: 20px;
    z-index: 9999;
}

.toast {
    display: none;
    background-color: #4CAF50;
    color: #fff;
    padding: 15px;
    border-radius: 5px;
    margin-bottom: 15px;
    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.2);
    animation: slideInRight 0.5s, fadeOut 0.5s 2.5s forwards;
}

@keyframes slideInRight {
    from {
        transform: translateX(100%);
    }
    to {
        transform: translateX(0);
    }
}

@keyframes fadeOut {
    from {
        opacity: 1;
    }
    to {
        opacity: 0;
    }
}