/* Bigfatgothic, credits to Alit Design */ 
/* Departure Mono, credits to Helena Zhang */

@font-face {
  font-family: "Bigfatgothic-Regular.ttf";
  src: url("../fonts/Bigfatgothic-Regular.tff") format("truetype");
  
}

@font-face {
  font-family: "DepartureMono-Regular.otf";
  src: url("../fonts/DepartureMono-Regular.otf") format("opentype");
}

:root {
	--bg-color: rgb(0, 0, 0);
	--f-color: rgb(255, 255, 255);
}

* {
  padding: 0;
  margin: 0;
}

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

html {
  	font-size: 62.5%;
	scroll-behavior: smooth;
	-webkit-font-smoothing: antialiased;
	font-family: "Departure Mono", monospace;
	height: 100dvh;
	min-width: 100%;	
	min-height: 100%;
	box-sizing: border-box;
}

body {
	height: 100%;
}

li, ol, ul {
	list-style-type: none;
}

h1, .item a {
  font-family: "Bigfat gothic", monospace;
}

h1::first-letter {
  font-size: 4rem;
}

h1 {
  font-size: 3rem;
}

p a {
	font-size: 24px;
}

p, .item, .overlay {
	font-family: "Departure Mono", monospace;
}

body, .breadcrumb a, .end {
	background: var(--bg-color);
	color: var(--f-color);
	text-decoration: none;
}

a {
	text-decoration: none;
	font-weight: bold;
	color: var(--text-color);
}

img {
	max-width: 100%;
	display: auto;
	object-fit: cover;
}

main {
	  padding: 10em 10em 0;
	  display: block;
}

#logo {
		cursor: pointer;
		padding: 1.5em;
		position: fixed;
}

p, .welcome {
	line-height: 1.9rem;
	font-weight: bold;
	font-size: 1.3rem;
	letter-spacing: 0.1rem;
}

.navbar {
	backdrop-filter: blur(1.2em);
}

.icon {
	 cursor: pointer;
}

/* NAVIGATIONAL -- OVERLAY */

#nav-toggler {
		  -webkit-appearance: none;
		  position: fixed;
		  top: 1em;
		  right: 4rem;
		  cursor: pointer;
		  z-index: 1010;
		  font-size: 3rem;
		}

		#nav-toggler:checked {
		  transform: rotate(180deg);
		}

		#nav-toggler:checked::before {
		  content: '\f00d';
		  color:#fff;
		  transition: .2s linear .2s;
		}

		#nav-toggler:checked ~ .navbar {
		  left: 0;
		}

		.navbar {
		  position: fixed;
		  top:0; 
		  left:-110%;
		  height: 100%;
		  width: 100%;
		  z-index: 1000;
		  display: flex;
		  align-items: flex-start;
		  justify-content: center;
		  flex-flow: column;
		  padding:0 10%;
		  text-transform: uppercase;
		}

		.navbar a {
		  font-size: 4em;
		  color: transparent;
		  -webkit-text-stroke: 1px rgba(255,255,255, 1);
		  font-weight: bolder;
		  position: relative;
		  letter-spacing: 3px;
		}

/* MAIN */

.title {
	  text-align: center;
	  font-size: 3.5em;
	  letter-spacing: 0.3rem;
	  margin-bottom: 3rem;
}

.subtitle {
	  letter-spacing: 0.3rem;
	  padding-bottom: 1.5rem;
	  font-size: 3.5em;
}

.subheading {
	letter-spacing: 0.3rem;
	font-size: 2.3em;
	margin: 2em 0 1em 0;
}

/* Tooltip container */

.tooltip {
	position: relative;
	display: inline-block;
}

/* Tooltip text */

.tooltip .tooltiptext {
	visibility: hidden;
	top: 25%;
	right: 25%;
	margin-top: 1rem;
	font-family: 'Departure Mono', monospace;
	position: absolute;
	z-index: 1;
}

/* Show the tooltip text when you mouse over the tooltip container */

.tooltip:hover .tooltiptext {
    visibility: visible;
}	

/* FOOTER */

.end, .fin {
	font-size: clamp(0.8rem, 2.5vw, 1.3rem);
	padding: 1rem;
	text-align: center;
	bottom: 10%;
	top: 0;
	letter-spacing: 0.2rem;
}

/* MEDIA QUERIES */

@media screen and (max-width: 700px) {
	.closing p {
		padding-top: clamp(3rem, 3.5em, 5em);
	}
	.item {
		padding: 0.2em;
	}
	.grid-container .item(2), .grid-container .item(3), grid-container .item(4), .grid-container .item(5)   {
		padding: 10px;
		transform: translate(-5%, 4%);
		margin: 5px 7px;
	}
}