/** Main styles **/

html, body {
	width: 100%;
	height: 100%;
	margin: 0;
	background-color: #000;
	font-family: Rubik
}

/* Text selection */

::selection {background-color: rgba(255, 255, 255, 0.2)}
::-moz-selection {background-color: rgba(255, 255, 255, 0.2)}

/* Main content */

main {
	padding-bottom: 100px;
	position: relative;
	overflow-y: hidden;
	background: linear-gradient(to bottom, transparent, #000 100%, #000 70%)
}

/* Vertical scroll line */

.scroll-line {
	display: flex;
	justify-content: center;
	width: 1px;
	height: 100%;
	margin: auto;
	right: 0;
	left: 0;
	position: absolute;
	background: linear-gradient(to bottom, transparent, #333 20%)
}

/* Animated scroll icon */
.scroll-ball {
	width: 11px;
	height: 11px;
	position: absolute;
	border-radius: 50%;
	background-color: #333;
	transition: ease-out 0.2s
}

.card-container {margin-top: 100px}

.container {margin: auto}

/* Images */

.image {
	padding: 10px;
	position: relative;
	user-select: none;
	-webkit-animation: levitate 8s infinite;
	animation: levitate 8s infinite
}

/* Card content */

.card {
	padding: 0 20px;
	background-color: transparent
}

.card-inner {
	padding: 20px;
	position: relative;
	border: 1px solid rgba(255, 255, 255, 0.1);
	border-radius: 10px;
	box-shadow: inset 0 0 0 1000px rgba(0, 0, 0, 0.5);
	background-color: rgba(255, 255, 255, 0.05);
	-webkit-backdrop-filter: blur(50px);
	backdrop-filter: blur(50px);
	color: #000;
	z-index: 1
}

.card-inner h3 {
	margin-bottom: 20px;
	color: #fff;
	font-size: 30px;
	font-weight: 600
}

.card-inner p {
	position: relative;
	opacity: 0.65;
	font-size: 16px;
	font-weight: 400;
	color: #fff
}
.card-inner p::after {
	content: "";
	width: 1px;
	height: 100%;
	top: 0;
	position: absolute;
	opacity: 0.65;
	background-color: #fff
}

/* Differences for even/odd cards */

.card-container:nth-child(odd) .container {flex-direction: row-reverse}
.card-container:nth-child(even) .card-inner p {padding-right: 15px}
.card-container:nth-child(even) .card-inner p::after {right: 0}
.card-container:nth-child(odd) .card-inner p {padding-left: 15px}
.card-container:nth-child(odd) .card-inner p::after {left: 0}

/* Card link */

.card-inner .link a {
	display: inline-block;
	margin-top: 20px;
	padding: 10px 20px;
	border-radius: 7px;
	color: #fff;
	text-decoration: none;
	user-select: none;
	transition-duration: 0.2s
}
.card-inner .link a:hover {background-color: rgba(255, 255, 255, 0.1)}
.card-inner .link a:active {
	opacity: 0.65;
	-webkit-transform: scale(0.9);
	transform: scale(0.9);
	transition-duration: 0.1s
}

/* Keyframes */

@-webkit-keyframes levitate {
	0%, 100% {-webkit-transform: translateY(10px)}
	50% {-webkit-transform: translateY(-10px)}
}
@keyframes levitate {
	0%, 100% {transform: translateY(10px)}
	50% {transform: translateY(-10px)}
}

/* Media queries */

@media screen and (max-width: 768px) {
	.order-switcher {order: -1}
	.card-container {margin: 0}
	.image {
		padding: 0 30px;
		top: 250px
	}
}