/* 
░█████╗░░██████╗░██████╗  ░█████╗░░█████╗░██████╗░███████╗
██╔══██╗██╔════╝██╔════╝  ██╔══██╗██╔══██╗██╔══██╗██╔════╝
██║░░╚═╝╚█████╗░╚█████╗░  ██║░░╚═╝██║░░██║██║░░██║█████╗░░
██║░░██╗░╚═══██╗░╚═══██╗  ██║░░██╗██║░░██║██║░░██║██╔══╝░░
╚█████╔╝██████╔╝██████╔╝  ╚█████╔╝╚█████╔╝██████╔╝███████╗
░╚════╝░╚═════╝░╚═════╝░  ░╚════╝░░╚════╝░╚═════╝░╚══════╝
 

Hi! My name is 🄳🄰🄽🅃🄴_🄽🄻 and welcome to my CSS code file!
This contains the juice for my website, visible at dantenl.tk

© 2022 — @dante_nl
*/

/** Importing */
@import url('https://fonts.googleapis.com/css2?family=Caveat:wght@700&family=Open+Sans&family=Quicksand:wght@600&family=Source+Code+Pro&display=swap');
/* Fonts from Google Fonts,
• Open Sans
• Caveat
• Source Code Pro
• Quicksand */

/** Variables  */

:root {
	--main-gradient: linear-gradient(321deg, rgba(237, 227, 66, 1) 0%, rgba(255, 81, 235, 1) 100%);
	--main-color-a: #ff51eb;
	--main-color-b: #ede342;
	--background-primary: #2D3047;

	--color-error: #ef476f;
	--color-warning: #ffd166;
	--color-okay: #06d6a0;

	--font-primary: 'Open Sans', sans-serif;
	--font-details: 'Caveat', monospace;
	--font-code: 'Source Code Pro', monospace;
	--font-title: 'Quicksand', sans-serif;

	--text-color-primary: #D9F7FA;
	--url-color: #00a8e8;
}

/** Basics */

body {
	background-color: var(--background-primary);
	color: var(--text-color-primary);
	font-family: var(--font-primary);
}

h6 {
	font-size: 130%;
	font-family: var(--font-details);
	margin: 0;
	margin-top: 0;
}

a {
	color: var(--url-color);
	text-decoration: none;
}

a:hover {
	filter: brightness(85%);
}

.giant-white-space-like-seriously-its-huge-and-it-should-contain-no-content {
	margin: 10%;
}

.mobile .mobile-hidden {
	display: none;
}

.large {
	font-size: xx-large;
}

/** Layout and design  */
/* Knowing me, this will probably be the last comment in a while ;) */

.content {
	margin-left: 10%;
	margin-right: 10%;
}

.mobile .content {
	margin: 0;
}
.title-wrapper h1 {
	font-size: 500%;
	font-family: var(--font-title);
	margin: 0;
}

.text-gradient {
	background: var(--main-gradient);
	-webkit-background-clip: text;
	-webkit-text-fill-color: transparent;
	background-clip: text;
}

.grid {
	grid-template-columns: repeat(2, 1fr);
	display: grid;
}

.mobile .grid {
	display: block;
}

.project-banner {
	background:
		linear-gradient(var(--background-primary), var(--background-primary)) padding-box,
		linear-gradient(321deg, var(--main-color-b), var(--main-color-a)) border-box;
	border-radius: 10px;
	border: 4px solid transparent;
	margin: 10px;
}

.project-banner-inside {
	margin: 5px;
}

.languages {
	text-align: center;
	font-size: xx-large;
}

.beta-badge {
	border-radius: 30px;
	color: white;
	background-color: var(--url-color);
	font-family: var(--font-code);
	padding: 2px 20px
}

.soon-badge {
	border-radius: 30px;
	color: white;
	background-color: var(--main-color-a);
	font-family: var(--font-code);
	padding: 2px 20px
}