/* -- Core (/start) -- */
:root {
	font-family: Helvetica, sans-serif;
	--clr-gray100: #F8F9FA;
	--clr-gray200: #e9ecef;
	--clr-gray600: #6c757d;
	--clr-gray800: #343a40;
	--clr-black: #000000;
	--clr-white: #ffffff;
	--link-01: #0033ff;
	overflow-x: none;
}
html,
body {
	overflow-x: hidden;
}
body {
	display: flex;
	flex-direction: column;
}
body,
h1,
h2,
h3,
p {
	margin: 0;
}
h1,
h2,
h3 {
	font-weight: 900;
	line-height: 1;
}
h1 {
	font-size: 3rem;
}
h2 {
	font-size: 2rem;
}
h3 {
	font-size: 1.625rem;
}
h4 {
	font-size: 1.375rem;
}
p {
	font-size: 1.125rem;
	line-height: 1.3;
	font-weight: 400;
	min-width: 0;
}
a {
	color: var(--clr-black);
	text-decoration: none;
	margin: none;
	padding: none;
}
a:hover {
	text-decoration: underline;
	transition-duration: 1s;
}
a.accent-link {
	color: var(--link-01);
	text-decoration: none;
	margin: none;
	padding: none;
}
img {
	margin: 0;
	padding: 0;
}
section {
	margin-bottom: 2rem;
}
button {
	border: none;
	border-radius: 4rem;
	background-color: black;
	font-size: 1rem;
	font-weight: bold;
	color: white;
	padding: 1rem 2rem;
	align-self: center;
	white-space: nowrap;
	cursor: pointer;
}
.gradient-text {
	background: -webkit-linear-gradient(45deg, #0C25FF, #C852FF);
	background: linear-gradient(45deg, #0C25FF, #C852FF);
	-webkit-background-clip: text;
	background-clip: text;
	color: transparent;
	display: inline;
}
/* Use for Title + See All */
.section-flex-header {
	display: flex;
	flex-direction: row;
	justify-content: space-between;
	align-items: center;
}
.round-icon-button {
	position: absolute;
	display: flex;
	aspect-ratio: 1/1;
	width: 3.5rem;
	height: 3.5rem;
	margin: 1rem;
	padding: 0.8rem;
	background-color: var(--clr-white);
	align-self: flex-end;
	justify-content: center;
	align-items: center;
	transition-duration: 250ms;
}
.round-icon-button:hover {
	cursor: pointer;
	scale: 105%;
	transition-duration: 250ms;
}
.tag-button {
	cursor: pointer;
	background-color: var(--clr-gray200);
	color: var(--clr-gray800);
	width: auto;
	padding: 0.5rem 1rem;
	font-size: 0.8rem;
	font-weight: 600;
	margin: 0.25rem;
}
.h-scroll-container {
	display: flex;
	flex-direction: row;
	width: 100%;
	overflow-x: auto;
	overflow-y: none;
	overscroll-behavior-inline: contain;
	margin-top: 1rem;
	margin-bottom: 1rem;
	scroll-snap-type: inline mandatory;
}
.h-scroll-container > * {
	flex: 0;
	scroll-snap-align: start;
}
.flex-wrap-container {
	display: flex;
	flex-wrap: wrap;
	flex-grow: 0;
	min-width: 0px;
}
.flex-row-container {
	display: flex;
	flex-direction: row;
	flex-wrap: wrap;
	width: 1fr;
	align-content: center;
	justify-content: center;
}
/* -- Core (/end) -- */

/* -- Breadcrumbs (/start) -- */
ol.breadcrumb {
	padding: 0;
	margin: 0;
	list-style: none;
	margin-top: 1rem;
	margin-bottom: 1rem;
}
/* Display list items side by side */
ol.breadcrumb li {
	display: inline;
}
/* Add a slash symbol (/) before/behind each list item */
ol.breadcrumb li+li:before {
	content: "/\00a0";
}
/* Add a color to all links inside the list */
ol.breadcrumb li a {
	text-decoration: none;
}
/* Add a color on mouse-over */
ol.breadcrumb li a:hover {
	text-decoration: underline;
}
/* -- Breadcrumbs (/end) -- */

/* -- Card (/start) -- */
.card {
	display: flex;
	flex-direction: column;
	flex-basis: 180px;
	flex-grow: 1;
	min-width: 280px;
	justify-content: center;
	overflow: hidden;
	}
.card-fill {
	border-radius: 1rem;
	border: solid 1px var(--clr-gray200);
	background-color: var(--clr-gray100);
}
.card-table {
	display: flex;
	flex-wrap: wrap;
	gap: 1rem;
}
.card-table > * {
	flex: 1;
}
.card-group {
	display: flex;
	flex-wrap: wrap;
	gap: 1rem;
	flex-basis: 360px;
	flex-grow: 1;
}
/* -- Card (/end) -- */

/* -- Utility (/start) -- */
.gap-smallest {
	gap: 0.5rem;
}
.gap-small {
	gap: 1rem;
}
.gap-medium {
	gap: 2rem;
}
.padding-small {
	padding: 1rem;
}
.padding-medium {
	padding: 2rem;
}
.center {
	text-align: center;
}
.margin-bottom-smallest {
	margin-bottom: 0.25rem;
}
.margin-bottom-small {
	margin-bottom: 1rem;
}
.margin-bottom-medium {
	margin-bottom: 3rem;
}
.margin-auto {
	margin: auto;
}
/* -- Utility (/end) -- */

/* -- Main Content (/end) -- */
.main-content {
	margin: 1rem;
}
@media (min-width: 75em) {
	.main-content {
    	padding: 0 10rem;
	}
}
/* -- Main Content (/end) -- */

/* -- Header Navigation Menu (/start) -- */
header .nav-container {
	display: flex;
	padding: 1rem;
	border-bottom: solid 1px var(--clr-gray200);
	justify-content: space-between;
}
header .nav-container a.logo {
	height: 2rem;
	margin-top: auto;
	margin-bottom: auto;
}
header .mobile-menu-toggle {
	width: 2rem;
	height: 2rem;
	cursor: pointer; 
	background: transparent;
	border: 0;
	padding: 0;
	margin: 0; 
}
header .mobile-menu-toggle.open img {
	width: 80%;
}
header .mobile-menu-toggle.close img {
	width: 60%;
}
header .mobile-menu-bar {
	display: flex;
	padding: 1rem;
	border-bottom: solid 1px var(--clr-gray200);
	justify-content: space-between;
}
header nav {
	display: none;
}
header nav[data-visible] {
	width: 100%;
	height: 100%;
	display: flex;
	flex-direction: column;
	position: fixed;
	z-index: 999;
	background-color: var(--clr-gray100);
	top: 0;
	left: 0;
	overflow: hidden;
}
header .nav-container .nav-list {
	margin: 0;
	margin-top: 2rem;
	padding: 0;
	display: flex;
	flex-direction: column;
	flex-grow: 1;
	gap: 2rem;
	list-style: none;
	text-align: center;
	font-size: 1rem;
	font-weight: 400;
	justify-content: flex-start;
	align-items: center;
}
@media (min-width:50em) {
	header .mobile-menu-bar {
    	display: none;
	}
	header .nav-container .mobile-menu-toggle {
		display: none;
	}
	header nav {
		display: flex;
		flex-direction: row;
	}

	header .nav-container .nav-list {
		flex-direction: row;
		margin-top: 0rem;
	}
}
/* -- Header Navigation Menu (/end) -- */
   
/* -- Footer (/start) -- */ 
footer {
	padding: 4rem;
	background-color: var(--clr-gray100);
	color: var(--clr-black);
	border-top: solid 1px var(--clr-gray200);
}
footer h2 {
	font-size: 1.3rem;
	margin-bottom: 1rem;
	line-height: 1.4;
}
footer p {
	font-size: 1.2rem;
}
footer ul {
	list-style: none;
	padding: 0;
	margin: 0;
	margin-bottom: 1rem;
	align-self: flex-start;
	flex-grow: 1;
}
footer li {
	margin-bottom: 0.5rem;
	font-size: 1rem;
}
footer .container {
	display: flex;
	flex-direction: row;
	flex-wrap: wrap;
	gap: 2rem;
	justify-content: center;
	margin-bottom: 2rem;
}
footer .app-info {
	display: flex;
	flex-direction: column;
	margin-bottom: 2rem;
	flex-basis: 20rem;
	flex-grow: 1;
	align-self: flex-start;
	text-align: center;
	gap: 1rem;
}
footer .app-info img {
	margin: auto;
}
footer .app-info h2 {
	margin-bottom: 0;
}
footer .app-info p {
	font-size: 1rem;
	margin-bottom: 2rem;
}
footer .app-info button {
	text-wrap: wrap;
	background-color: var(--clr-gray800);
}
footer .legal {
	text-align: center;
}
/* -- Footer (/end) -- */ 

/* -- Home (/start) -- */
.home-header {
	display: flex;
	flex-direction: column;
	text-align: center;
	gap: 1rem;
	margin-bottom: 2rem;
}
/* -- Home (/end) -- */

/* -- Search (/start) -- */
.search-container {
	display: flex;
	flex-wrap: nowrap;
}
.round-search-button {
	display: flex;
	justify-content: center;
	align-items: center;
	width: 3rem;
	height: 3rem;
	background-color: var(--clr-black);
	border: solid 1px var(--clr-gray200);
	aspect-ratio: 1/1;
	padding: 0;
	flex-shrink: 0;
}
.search-input {
	flex-grow: 1;
	width: 1fr;
	min-width: 0px;
	border: solid 1px var(--clr-gray200);
	border-radius: 16rem;
	padding: 0.5rem 1rem;
	font-size: 1.2rem;
	font-weight: 100;
	color: var(--clr-gray800)
}
.search-input::selection {
	background-color: aquamarine;
}
.search-input:focus-visible {
	border: solid 1px var(--clr-gray600);
	outline: none;
	transition-duration: 400ms;
}
/* -- Search (/end) -- */

/* -- Preset page (/start) -- */
.preset-header {
    display: grid;
    grid-template-columns: 1fr;
    gap: 2rem;
    margin-bottom: 2rem;
    padding-top: 1rem;
}
.preset-cover-big {
    display: flex;
    margin: 0;
    margin: auto;
    padding: 0;
    border-radius: 1rem;
    width: 16rem;
    height: 16rem;
    overflow: hidden;
    background-color: var(--clr-gray100);
    aspect-ratio: 1/1;
    flex-shrink: 0;
}
.preset-column {
    display: inline-block;
    text-align: center;
}
.preset-column h1, .preset-column p {
    margin-bottom: 0.5rem;
}
.preset-buttons-action-bar {
    display: grid;
    gap: 1rem;
    grid-template-columns: 4rem auto;
    justify-items: start;
    align-items: stretch;
    justify-content: center;
}
.preset-buttons-action-bar button {
	height: 4rem;
}
.preset-buttons-action-bar button:hover {
	scale: 95%;
    transition-duration: 250ms;
}
.preset-buttons-action-bar button.play {
    display: flex;
    justify-content: center;
    align-items: center;
    padding: none;
    margin: none;
    aspect-ratio: 1/1;
    width: 4rem;
    padding: 0;
}

@media (min-width: 50em) {
	.preset-header {
    	display: grid;
    	grid-template-columns: 16rem 1fr;
    	gap: 2rem;
    	margin-bottom: 2rem;
	}
	.preset-column {
    	display: inline-block;
		text-align: left;
	}
	.preset-buttons-action-bar {
        justify-content: start;
        align-items: start;
    }
}
.embed-youtube-player {
	display: flex;
    margin: 0;
    padding: 0;
    border-radius: 1rem;
    overflow: hidden;
    aspect-ratio: 16/9;
    margin-bottom: 2rem;
    background-color: var(--clr-gray100);
}
.cards-grid {
    display: grid;
    grid-template-columns: 100%;
    align-items: stretch;
}
@media (min-width:80em) {
    .cards-grid {
        display: grid;
        grid-template-columns: 50% 50%;
    }  
}
.preset-tech-data-table {
    display: grid;
    grid-template-columns: auto 1fr;
}
.preset-tech-data-table .title {
    display: inline-block;
    text-align: right;
    margin-right: 1rem;
    color: var(--clr-gray600);
}
.preset-tech-data-table .value {
    display: inline-block;
    text-align: left;
}
.preset-files-grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: 0.5rem;
}
.preset-files-grid p {
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
}
.preset-files-grid-cell {
    display: grid;
    grid-template-columns: 24px 1fr;
    gap:0.5rem;
}
@media (min-width: 80em) {
    .preset-files-grid {
        display: grid;
        grid-template-columns: 1fr 1fr 1fr 1fr;
    }
}
@media (min-width: 40em) and (max-width: 80em) {
	.preset-files-grid {
        display: grid;
        grid-template-columns: 1fr 1fr;
    }
}
/* -- Preset page (/end) -- */

/* -- Presets horizontal section  (/start) -- */
.presets-h-scroll-container {
	display: grid;
	grid-auto-flow: column;
	grid-auto-columns: minmax(16rem, auto);
	width: 100%;
	gap: 1rem;
	overflow-x: auto;
	overflow-y: none;
	overscroll-behavior-inline: contain;
	margin-top: 1rem;
	margin-bottom: 1rem;
	scroll-snap-type: inline mandatory; /* Snaps scroll items */
} 
ul.presets-h-scroll-container {
	padding: 0;
	margin: 0;
	list-style: none;
	margin-top: 1rem;
	margin-bottom: 1rem;
	padding-bottom: 1rem;
	scroll-snap-align: start; 
}   
.presets-h-scroll-container > * {
	scroll-snap-align: start;
}
.presets-h-scroll-container img.preset-cover {
	width: 100%;
    height: 100%;
    object-fit: cover;
}
.presets-h-scroll-container .preset-card-cover {
	width: 16rem;
	height: 16rem;
}
/* -- Presets horizontal section  (/end) -- */

/* -- Presets card in grid or horizontal section (/start) -- */
.preset-card {
	display: block;
}
.preset-card h3 {
	width: 100%;
	font-size: 1.25rem;
	margin-bottom: 0.5rem;
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
}
.preset-card p {
	width: 100%;
	margin-bottom: 0.25rem;
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
}
.preset-card-cover {
	display: flex;
	position: relative; 
	width: 100%;
	border-radius: 1rem;
	overflow: hidden;
	background-color: var(--clr-gray100);
	margin-bottom: 1rem;
}
.preset-card-cover:hover {
	scale: 98%;
	transition-duration: 300ms;
}  
/* -- Presets card in grid or horizontal section (/end) -- */

/* -- Social Share  (/start) -- */
 .social-share-grid {
    display: grid;
    grid-template-columns: repeat(7,auto);
    justify-content: end;
    align-items: center;
    margin-bottom: 1rem;
 }
 .social-share-grid p {
    margin: auto;
    display: inline-block;
    color: var(--clr-gray600);
    margin-right: 0.25rem;
}
.social-share-grid button {
    display: flex;
    width: 3rem;
    height: 3rem;
    padding: 0;
    margin: 0;
    aspect-ratio: 1/1;
    background-color: var(--clr-white);
    color: var(--clr-white);
    text-align: center;
    justify-content: center;
    align-items: center;
 }
.social-share-grid button:hover {
    background-color: var(--clr-gray100);
    transform: scale(1.15);
    transition-duration: 250ms;
 }
.social-share-grid button:active {
    background-color: var(--clr-gray200);
 }
/* -- Social Share  (/end) -- */

/* -- Presets set (/start) -- */
.presets-set-grid {
    display: grid;
    grid-template-columns: repeat(2, calc((100vw - 3rem) / 2));
    gap: 1rem;
    margin: 0;
    padding: 0;
    margin-bottom: 2rem;
}
@media (min-width: 50em) {
    .presets-set-grid {
    	grid-template-columns: repeat(4, calc((100vw - 5rem) / 4));
    	margin-bottom: 4rem;
    }
}
@media (min-width: 75em) {
    .presets-set-grid {
    	grid-template-columns: repeat(5, calc((100vw - 6rem - 20rem) / 5));
    	margin-bottom: 4rem;
    }
}
.presets-set-grid .preset-card-cover {
	width: 100%;
    aspect-ratio: 1;
}
.presets-set-grid img.preset-cover {
	width: 100%;
    height: 100%;
    object-fit: cover;
}
/* -- Presets set (/end) -- */

/* -- Reviews (/start) -- */
.review-card {
	display: flex;
	flex-direction: column;
	gap: 1rem;
	min-width: 250px;
	padding: 2rem;
}
.review-card h3 {
    font-size: 1rem;
}
/* -- Reviews (/end) -- */

/* -- Artists (/start) -- */
.artist-card {
	display: flex;
	flex-direction: column;
	align-items: center;
	text-align: center;
	margin-bottom: 1rem; 
}
.artist-card h3 {
	width: 196px;
	font-size: 1.2rem;
	white-space: nowrap; 
	overflow: hidden; 
	text-overflow: ellipsis;
}
.artist-card img {
	width: 196px;
	height: 196px;
	object-fit: cover;
	border-radius: 100rem;
	border: solid 1px var(--clr-gray200);
}
/* -- Artists (/end) -- */

/* -- Apps (/start) -- */
.app-icon {
	border-radius: 2rem;
}
.app-card {
    display: grid;
    gap: 1rem;
    padding:2rem;
    align-content: start;
    text-align: center;
}
.app-card img {
    margin: auto;
}
.app-card a {
	font-weight: bold;
}
.app-card p {
	color: var(--clr-gray600);
}
.app-cards-grid-layout {
    display: grid;
    grid-template-columns: 1fr;
    gap: 1rem;
}
.app-screenshot{
    background-color: var(--clr-gray100);
    border: solid 1px var(--clr-gray200);
    border-radius: 1rem;
}
@media (min-width:50em) {
    .app-cards-grid-layout {
        display: grid;
        grid-template-columns: 1fr 1fr;
        gap: 1rem;
    }
}
/* -- Apps (/end) -- */

/* -- About (/start) -- */
.regular-image {
    display: inline-block;
    width: 100%;
    height: 100%;
    border-radius: 1rem;
    object-fit: cover;
}
.caption-text {
    font-size: 0.75rem;
    font-style: italic;
    font-weight: 100;
    color: var(--clr-gray600);
}
.fixed-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
}
/* -- About (/end) -- */