@import url('https://fonts.googleapis.com/css2?family=Cookie&family=Corinthia:wght@400;700&display=swap');

:root {
	--pane-height: 40%;
	--mar: hsl(18, 75%, 15%);
	--red: hsl(18, 75%, 26%);
	--god: hsl(39, 23%, 49%);
	--mid: hsl(39, 23%, 70%);
	--wit: hsl(39, 23%, 90%);
	--hea: hsla(39, 23%, 90%, 0.2);
	--bg-red: linear-gradient(135deg, var(--wit) 0%, var(--god) 100%);
	--bg-god: linear-gradient(45deg, var(--wit) 0%, var(--hea) 70%);
	--bg-aur: linear-gradient(45deg, var(--god) 15%, var(--mid) 50%, var(--god) 85%);
	--bg-auh: linear-gradient(45deg, var(--mar) 0%, var(--red) 50%, var(--mar) 100%);
	--shadow: 5px 5px 15px;
}
* {
	box-sizing: border-box;
	margin: 0;
	padding: 0;
}
@font-face {
	font-family: 'icon';
	src: url('../fonts/icon.eot?se2rfs');
	src: url('../fonts/icon.eot?se2rfs#iefix') format('embedded-opentype'),
	url('../fonts/icon.ttf?se2rfs') format('truetype'),
	url('../fonts/icon.woff?se2rfs') format('woff'),
	url('../fonts/icon.svg?se2rfs#icon') format('svg');
	font-weight: normal;
	font-style: normal;
	font-display: block;
}
i {
	font-family: 'icon' !important;
	font-style: normal;
	font-weight: normal;
	font-variant: normal;
	text-transform: none;
	line-height: 1;
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;
}

.i-amha:before {
	content: "\e900";
}
.i-print:before {
	content: "\e901";
}
.i-repeat:before {
	content: "\e90d";
}
.i-github:before {
	content: "\e907";
}
body {
	background: var(--wit);
	width: 100%;
	height: 100vh;
	min-height: 667px;
	margin: 0 auto;
	font-family: Arial, sans-serif;
	display: flex;
	justify-content: center;
	align-items: center;
	color: var(--mar);
}
header {
	background: var(--hea);
	display: flex;
	align-self: stretch;
	justify-content: space-between;
	padding: 1rem;
	box-shadow: var(--shadow);
	animation: fadeIn 1s ease-in forwards;
}
header ul li {
	list-style: none;
	font-size: 1.5rem;
}
.tools {
	display: flex;
}
.tools li {
	margin-left: .5em;
}
a:link, a:visited {
	text-decoration: none;
	color: var(--red);
}
a:hover {
	color: var(--god);
	scale: 1.5;
}
a:active {
	color: var(--mar);
}
h2 {
	text-transform: uppercase;
	font-size: 1rem;
	cursor: pointer;
}
#main {
	background: var(--bg-red);
	width: 100vw;
	height: 100%;
	display: flex;
	flex-direction: column;
	justify-content: space-between;
	align-items: center;
}

/* Start Pane Styles */
#title {
	margin: 1rem;
	background: var(--bg-auh);
	display: flex;
	flex-direction: column;
	justify-content: center;
	align-items: center;
	box-shadow: var(--shadow);
	border-radius: 2rem 0 ;
	color: var(--god);
	animation: fadeIn 1s ease-in forwards;
}
#title #h1 {
	margin: 2rem;
	font-size: 1.2rem;
	text-transform: uppercase;
	color: var(--wit);
}
#title #msg {
	margin: 0 3rem 2rem;
	font-size: .85rem;
	text-align: center;
	color: var(--wit);
	opacity: .7;
}
#pane {
	background: var(--bg-god);
	margin: 0 auto;
	padding: 1rem;
	display: flex;
	justify-content: center;
	align-items: center;
	border-radius: 0 2rem;
	/*box-shadow: var(--shadow);*/
	animation: fadeIn 1s ease-in forwards;
}
.selections {
	display: flex;
	flex-direction: column;
	align-items: center;
	margin: 1rem;
	width: 90%;
	background: var(--bg-aur);
	text-align: center;
	padding: 1rem;
	border-radius: 10px;
	box-shadow: 5px 5px 15px;
	text-transform: uppercase;
	font-size: .8rem;
	font-weight: bold;
}

.selections img {
	cursor: pointer;
	width: 50%;
	padding: 1rem;
	transition: all .2s ease-in-out;
}
.selections img:hover {
	transform: scale(1.2);
}

/* Textbox() */
#textbox {
	width: 100%;
	margin: 0 auto;
	padding: 1rem;
	display: flex;
	flex-direction: column;
	justify-content: center;
	align-items: center;
	align-content: center;
	animation: fadeIn 1s ease-in forwards;
}
textarea {
	width: 100%;
	height: auto;
	margin: 1rem;
	padding: 1rem;
}
textarea, .drop {
	margin: 1rem;
	padding: 1rem;
	background: hsla(39, 23%, 90%, 0.2);
	text-align: center;
}
textarea:focus, .drop:focus {
	background: hsla(39, 23%, 90%, 0.5);
}
textarea::placeholder, .drop::placeholder {
	text-align: center;
}
select, option {
	background: transparent;
	padding: .5rem;
}
button {
	background: linear-gradient(var(--mar), var(--red));
	padding: 1rem 2rem;
	border-radius: .5rem;
	border: none;
	color: var(--god);
	box-shadow: 0 5px 5px var(--mar);
	margin: 1rem;
}
button:hover {
	scale: .9;
	color: var(--wit);
}
#textbox h1 {
	text-align: center;
	margin: 1rem;
	font-size: 1.2rem;
	text-transform: uppercase;
}
#textbox p {
	font-size: .85rem;
	text-align: center;
	opacity: .5;
}

/* Wi-Fi Cards Style */
#a4 {
	margin: 0;
	padding-top: 1.5rem;
	width: 21cm;
	height: 29.7cm;
	display: flex;
	
	flex-direction: column;
	justify-content: start;
	align-items: center;
}

.page {
	margin: 0 auto;
	padding: .2rem;
	page-break-after: always;
	width: 19cm;
	max-height: 28.7cm;
	display: grid;
	grid-template-columns: repeat(4, 1fr);
	grid-template-rows: repeat(8, 1fr);
	gap: .4rem;
	justify-content: center;
	align-content: center;
	border: 1px dashed var(--god);
	animation: fadeIn 1s ease-in forwards;
}
.card {
	max-width: 5cm;
	min-height: 3.35cm;
	position: relative;
	border: 1px solid #000;
	display: flex;
	flex-direction: column;
	justify-content: space-between;
	align-items: center;
	margin: 0px;
	font-size: 14px;
	font-weight: bold;
}
.card img {
	width: 35%;
	height: auto;
}
#card-logo {
	padding-top: .5rem;
	z-index: 2
}
#card-wifi {
	position: absolute;
	width: 3cm;
	height: auto;
	opacity: .3;
}
.card p {
	margin-bottom: 5px;
}
.year-logo {
	color: var(--god);
	padding-top: .35rem;
	height: 2cm;
	display: flex;
}
.year-calc {
	margin: 1rem auto 0;
	position: absolute;
	width: 100%;
	display: flex;
	justify-content: center;
	align-items: center;
	background: conic-gradient(green, black, green, black, red, black) 0 0 / 100% 80%;
	-webkit-background-clip: text;
	-webkit-text-fill-color: transparent;
	background-size: 3rem;
	text-align: center;
	z-index: 10;
}
.year-calc p {
	font-size: .7rem;
	padding: .25rem;
}
.year-calc span {
	margin-left: .25rem;
	font-size: 2.8rem;
}
.year-calc small {
	font-size: 1rem;
}
h1.year-logo {
	font-size: 2rem;
	padding-bottom: .25rem;
	transform: skewY(-10deg);
}
.year-logo small {
	font-size: 1rem;
}
.year-welcome {
	font-size: .85rem;
	padding-top: .25rem;
	opacity: .65;
}
.hero-holidays {
	position: relative;
	width: 100%;
	min-height: 3rem
}
.hero-holidays img {
	position: absolute;
	z-index: -10;
	top: 0;
	width: 100%;
	height: auto;
	opacity: .5;
}
.hero-holidays h1 {
	margin: .5rem auto;
	font-size: 1.5rem;
	text-align: center;
	font-family: 'Corinthia', cursive;
	background: linear-gradient(0deg, green, red, green);
	-webkit-background-clip: text;
	-webkit-text-fill-color: transparent;
	background-clip: text;
	color: transparent;
}

.small {
	font-size: 0.65rem;
}
.wifi-detail {
	font-size: 0.75rem;
	line-height: normal;
}
.heavy {
	font-weight: bolder;
	text-transform: uppercase;
}

/* Code Sheet Style */
.code-page {
	margin: 0 auto;
	padding: 1rem;
	page-break-after: always;
	width: 19cm;
	height: 26.7cm;
	display: grid;
	grid-template-columns: repeat(10, 1fr);
	grid-template-rows: repeat(20, 1fr);
	gap: .1rem;
	justify-content: center;
	animation: fadeIn 1s ease-in forwards;
}
.code {
	width: 1.8cm;
	height: 1.2cm;
	border: 1px solid var(--god);
	display: flex;
	justify-content: center;
	align-items: center;
	margin: 1px;
	border-radius: .75rem 0 1rem .5rem;
}
#code-number {
	margin: .25rem;
	padding: .25rem;
	cursor: pointer;
}

.credits {
	text-align: center;
	margin: 1rem;
}
span.copy {
	display: inline-block;
	transform: rotateY(180deg);
}
p.js {
	font-size: .65rem;
	opacity: 0.25;
}
#footer {
	margin-top: 1rem;
}

/* JS Components */
.hide {
	display: none;
}
@media (width <= 600px) {
	#pane {
    width: 90%;
		margin: 0 auto;
		display: flex;
		flex-direction: column;
		justify-content: center;
		align-items: center;
		border: solid var(--god) 1px;
		border-radius: 0 1rem 0 1rem;
	}
	.selections img {
		width: 100px;
		height: auto;
	}
}
@media (width >= 600px) {
	.selections {
		width: 300px;
	}
	textarea {
		width: 60%;
	}
}
@media (orientation: portrait) {
	#pane {
		width: 80%;
	}
}
@media (orientation: landscape) {
    #pane {
        flex-direction: row;
    }
}
@media print {
	@page {
		size: A4;
		width: 90%;
		margin: 0 auto;
	}
	body {
		padding: 0;
		background: white;
	}
	.page {
		background: white;
		color: black;
	}
}
/* Keyframes */
@keyframes fadeIn {
	from {
		opacity: 0;
	}
	to {
		opacity: 1;
	}
}