/* Import fonts */
@import url('https://fonts.googleapis.com/css2?family=Montserrat:ital,wght@0,100..900;1,100..900&display=swap');

/*
 * Variables
 */

:root {
	/* Colors & branding */
	--clr-brand-gray: #1f1f1c;
	--clr-brand-blue: #171754;
	--clr-brand-lightblue: #3a9aca;
	--clr-brand-white: #eee;

	/* General stuff */
	--clr-accent: var(--clr-brand-lightblue);
	--clr-accent-light: #4eafcf;

	--clr-text: #eee;
	--size-text: 1.5rem;
	--clr-link: var(--clr-accent);
	--clr-link-active: var(--clr-accent-light);

	--clr-button: var(--clr-accent);
	--clr-button-hover: var(--clr-accent-light);
	--clr-button-text: var(--clr-brand-white);
	--clr-button-dark: #464643;
	--clr-button-dark-hover: #4d4d4a;
	--clr-button-coffee: #ffdd00;
	--clr-button-coffee-hover: #ffea00;

	--transition-curve-default: ease-in-out;
	--transition-duration-btn: 100ms;
	--transition-duration-link: 300ms;

	/* Background */
	--clr-bg1: var(--clr-brand-gray);
	--clr-bg2: var(--clr-brand-blue);

	/* Content */
	--clr-content-bg: #2221;
	--border-content: 0.0625rem solid #222;
	--spacing-content-vertical: 2rem;	
	--width-content:  1250px;

	--padding-card: 2em;
}

/*
 * Global styling
 */

* {
	margin: 0;
	padding: 0;
}

html, body {
	min-height: 100vh;
}

p + div,
p + p,
p + section,
section + section,
section + p {
	margin-top: 1em;
}

/* Body */
body {
	background: radial-gradient(ellipse at bottom, #1b2735 0%, #090a0f 100%);
	height: 100%;
	font-family: "Montserrat", sans-serif;
	font-size: var(--size-text);
	color: var(--clr-text);
}
.carousel {
	height: 100vh;
	overflow-y: scroll;
	scroll-snap-type: y mandatory;
	scroll-behavior: smooth;
}

@starting-style {
	.carousel::scroll-button(up),
	.carousel::scroll-button(down) {
		opacity: 0%;
	}
}
.carousel::scroll-button(up),
.carousel::scroll-button(down) {
	font-family: "Fira Code", sans-serif;
	font-stretch: ultra-expanded;
	background: none;
	color: #fff;
	font-size: 1.3em;
	font-weight: 450;
	mix-blend-mode: difference;
	border: none;
	cursor: pointer;
	position: absolute;
	left: 50%;
	z-index: 5;
	translate: -50%;
	padding: 0.25em 0.5em;
	transition: opacity 0.5s cubic-bezier(1, 0, 1, 1);
}
.carousel::scroll-button(up) {
	content: "\2191";
	top: 1rem;
}
.carousel::scroll-button(down) {
	content: "\2193";
	bottom: 1rem;
}
.carousel::scroll-button(up):disabled,
.carousel::scroll-button(down):disabled {
	opacity: 0%;
	cursor: auto;
	transition-timing-function: cubic-bezier(0, 0, 0, 1);
}

.card {
	min-height: 100vh;
	width: 100%;
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	text-align: center;
	scroll-snap-align: center;
	position: sticky;
	padding: var(--padding-card);

	h1 {
		font-size: clamp(2.3em, 10vw, 3.5em);
		line-height: 1.2;
	}
	p {
		font-size: clamp(1rem, 4.8vw, 1.5rem);
	}
}

/* Links */
a:focus {
	outline: none;
}

a:not(.button, .btn) {
	display: inline-block;
	position: relative;
	padding-bottom: 0.2em;
	margin-bottom: -0.2em;
	text-decoration: none;
	color: var(--clr-link);
	transition: color var(--transition-duration-link) var(--transition-curve-default);
}
a:not(.button, .btn):focus,
a:not(.button, .btn):hover {
	color: var(--clr-link-active);
}
a:not(.button, .btn)::before {
	content: '';
	position: absolute;
	bottom: 0.15em;
	left: 0;
	width: 100%;
	height: 0.1em;
	background: var(--clr-link-active);
	transform: scaleX(0);
	transform-origin: right;
	transition: transform var(--transition-duration-link) ease-in;
}
a:not(.button, .btn):hover::before,
a:not(.button, .btn):focus::before {
	transform: scaleX(1);
	transform-origin: left;
}

/* Buttons */
a.btn {
	box-shadow: 0 0 0.5rem var(--clr-shadow);
	transition-property: background, filter, top, left, box-shadow;
	transition-duration: var(--transition-duration-btn);
	transition-timing-function: var(--transition-curve-default);
	position: relative;
	top: 0;
	left: 0;
}
a.btn:hover,
a.btn:focus {
	top: -0.1rem;
	left: -0.1rem;
	box-shadow: 0.2rem 0.2rem 0.5rem var(--clr-shadow);
}
a.btn,
a.btn:hover,
a.btn:focus,
a.btn:active {
	text-decoration: none;
}

a.button {
	display: inline-flex;
	padding: 0.45em 0.7em;
	align-items: center;
	background: var(--clr-button);
	color: var(--clr-button-text);
	border-radius: 0.25rem;
	font-size: 1.15em;
	font-weight: 550;
	font-family: "Montserrat", sans-serif;
	text-transform: uppercase;
}
a.button.dark {
	background: var(--clr-button-dark);
}
a.button:hover {
	background: var(--clr-button-hover);
}
a.button.dark:hover {
	background: var(--clr-button-dark-hover);
}

a.button.coffee {
	padding: 0.75em;
	background: var(--clr-button-coffee);
}
a.button.coffee:hover {
	background: var(--clr-button-coffee-hover);
}
a.button.coffee img {
	height: 1.5em;
}


/* Effects */
#stars {
	position: fixed;
	inset: 0;
	z-index: -1;
}