/* ----------------------------------------------------------------
 All Law, No Order v1.0
 https://psych.uncharted-sky.org
 DO NOT STEAL, MODIFY, USE, CLAIM, OR REDISTRIBUTE ANY OF MY CODES!
 Coding and content © Kupo; Created September 2025
---------------------------------------------------------------- */

@import url('https://fonts.googleapis.com/css2?family=Montserrat:ital,wght@0,100..900;1,100..900&family=National+Park:wght@200..800&family=Oldenburg&family=Oleo+Script:wght@400;700&family=Short+Stack&family=Special+Elite&family=Yusei+Magic&display=swap');

@font-face {
    font-family: 'American Typewriter';
    src: url('fonts/AmericanTypewriter-Bold.woff2') format('woff2'),
        url('fonts/AmericanTypewriter-Bold.woff') format('woff');
    font-display: swap;
    font-style: normal;
    font-weight: bold;
}

	@font-face {
	    font-family: 'American Typewriter Ita';
	    src: url('fonts/AmericanTypewriter-MdIt.woff2') format('woff2'),
	        url('fonts/AmericanTypewriter-MdIt.woff') format('woff');
	    font-display: swap;
	    font-style: italic;
	    font-weight: 400;
	}

:root {
	/* >> color palette >> */
	--bg: #F8F9F8;
	--text: #555;

	/*>>  accent colors >> */
	--blue: #5495A3;
	--forest: #74A96B;
	--gold: #B6A237;
	--green: #859D70;
	--orange: #D7823A;
	--red: #B2544D;
	--brown: #AC7958;

	--dark: #333;
	--light: #D2C9B4;
	--muted: #B9B2BA;
	--stats: #F1F2F3;
	--txtsha: #EEEEEE;
	--white: #FFFFFF;

	/*>> accent colors rgb >> */
	--redRGB: 201, 42, 62;

	--darkRGB: 33, 37, 41;
	--lightRGB: 238, 238, 238;
	--whiteRGB: 255, 255, 255;

	/* >> lovely fonts >> */
	--big: 'National Park', sans-serif;
	--bold: "Special Elite", system-ui;
	--doodle: "Short Stack", cursive;
	--italic: "American Typewriter Ita", serif;
	--sans: 'Montserrat', sans-serif;
	--serif: "American Typewriter", serif;

	/* >> images that get a lot of use >> */
	--border: url(../assets/svg/border.svg);
	--btnbder: url(../assets/svg/button.svg);
	--legbder: url(../assets/svg/legend.svg);
	--statsbg: url("../assets/img/bg.png");
}

::-webkit-scrollbar-track { background: var(--muted); border: 7px solid var(--bg); }
::-webkit-scrollbar-thumb { background: var(--brown); border: 5px solid var(--bg); }
::-webkit-scrollbar-corner { background: var(--bg); border: 1px solid var(--bg); }
::-webkit-scrollbar { background: var(--bg); height: 15px; width: 15px; }

::selection { background: var(--light); color: var(--text); }
::-moz-selection { background: var(--light); color: var(--text); }

/* -----------------------------------
>>  [  --- basic elements ---  ]
------------------------------------*/

body {
	background: var(--bg) url("../assets/img/bg.png") center;
	color: var(--text);
	font: 500 1.025em / 1.85rem var(--sans);
	font-optical-sizing: auto;
	letter-spacing: .25px;
    text-align: justify;
}

.container { max-width: 1250px; }
.mb-4h { margin-bottom: 2.25rem !important; }
.mb-5h { margin-bottom: 3.5rem !important; }

/* -----------------------------------
>>  [  --- header & nav styles ---  ]
------------------------------------*/

header {
	background: url("../assets/img/cork.png");
	background-position: center;
	background-repeat: repeat;
	background-size: 475px;
	height: 630px;
}

	header .hd {
		background: url(../assets/img/hd.png);
		background-position: bottom center;
		background-repeat: no-repeat;
		background-size: 100%;
		height: 645px;
	}

	header .img {
		background: url("../assets/img/header.png");
		background-position: center;
		background-repeat: no-repeat;
		height: 630px;
	}

.nav-link {
	color: #252525;
	font: 400 2em/1.15em var(--serif);
	letter-spacing: -.25px;
	height: 55px;
	padding: .25em 2.5rem !important;
	text-transform: lowercase;
}

	.nav-link:hover { color: #434343; }
	nav li:hover { animation: shake 0.5s ease-in-out; }

	nav li:nth-child(1) { background: url("../assets/img/nbg1.png") no-repeat top; }
	nav li:nth-child(2) { background: url("../assets/img/nbg2.png") no-repeat top; }
	nav li:nth-child(3) { background: url("../assets/img/nbg3.png") no-repeat top; width: 150px; }
	nav li:nth-child(4) { background: url("../assets/img/nbg4.png") no-repeat top; }
	nav li:nth-child(5) { background: url("../assets/img/nbg5.png") no-repeat top; }
	nav li:nth-child(6) { background: url("../assets/img/nbg6.png") no-repeat top; }
	nav li:nth-child(7) { background: url("../assets/img/nbg7.png") no-repeat top; }

/* -----------------------------------
>>  [  --- content elements ---  ]
------------------------------------*/

main {
	margin: -10px 0 20px 0;
	text-shadow: 1px 1px var(--txtsha);
}

	main .stats {
		border-image: var(--border) 10 10 10 10 stretch stretch;
		border-radius: .5rem;
		border-style: solid;
		border-width: 7px 7px 7px 7px;
		margin: 0 auto 1.85rem auto;
		padding: 30px 0;
		width: 73%;
	}

			main .stats .fans {
				align-content: center;
				border-image: url(../assets/svg/fans.svg) 0 6 3 6 stretch stretch;
				border-left-style: solid;
				border-width: 0px 5px 3px 5px;
				padding: 10px 20px;
				text-align: center;
			}

				/* FIX THIS SO THAT THE NUMBERS ACTUALLY LOOK GOOD! */

				main .stats .fans .ransom-note {
					-webkit-font-smoothing: antialiased;
					display: block;
					font: 500 6.25em/3rem var(--big) !important;
					letter-spacing: -4.5px;
					margin-bottom: 10px;
					text-shadow: none;
					width: 100%;
				}

					main .stats .fans .ransom-note .words {
						display: inline-block;
						/* filter: drop-shadow(1px 2px 2.5px #aaa) */
					}

					/* BEGIN TYPOGRAPHY */
					main .stats .fans .ransom-note span span {
						display: block;
						float: left;
					}

						main .stats .fans .ransom-note span span::before {
							content: "";
							display: block;
							position: absolute;
							top: 0;
							left: 0;
							width: 100%;
							height: 100%;
							z-index: 1;
						}

						main .stats .fans .ransom-note span:nth-child(2n+1) span:nth-child(5n+1),
						main .stats .fans .ransom-note span:nth-child(2n+2) span:nth-child(5n+3) {
							color: #e9e9e9;
							font: 400 105%/75% "Oleo Script", system-ui;
							margin: .3em -.2em 0 0;
							padding: .2em .15em .15em .1em;
							paint-order: stroke fill;
							position: relative;
							rotate: -.25deg;
							top: .01em;
							width: 90px;
							z-index: 1;
						}

							main .stats .fans .ransom-note span:nth-child(2n+1) span:nth-child(5n+1)::before,
							main .stats .fans .ransom-note span:nth-child(2n+2) span:nth-child(5n+3)::before {
								background: url(../assets/img/f1.png) center no-repeat;
								height: 114px;
								width: 90px;
								z-index: -5;
							}

						main .stats .fans .ransom-note span:nth-child(2n+1) span:nth-child(5n+2),
						main .stats .fans .ransom-note span:nth-child(2n+2) span:nth-child(5n+1) {
							color: var(--dark);
							font: 400 100%/75% "Oldenburg", serif;
							margin: .1em -.075em 0 0;
							padding: .3em .2em .25em .2em;
							paint-order: stroke fill;
							position: relative;
							rotate: -2deg;
							width: 118px;
							z-index: 2;
						}

							main .stats .fans .ransom-note span:nth-child(2n+1) span:nth-child(5n+2)::before,
							main .stats .fans .ransom-note span:nth-child(2n+2) span:nth-child(5n+1)::before {
								background: url(../assets/img/f2.png) center no-repeat;
								height: 127px;
								width: 118px;
								z-index: -6;
							}

						main .stats .fans .ransom-note span:nth-child(2n+1) span:nth-child(5n+3),
						main .stats .fans .ransom-note span:nth-child(2n+2) span:nth-child(5n+4) {
							color: #f7ebdd;
							font: 400 85%/75% "Yusei Magic", sans-serif;
							margin: .3em -.185em 0 -.195em;
							padding: .15em .3em;
							paint-order: stroke fill;
							position: relative;
							rotate: 5deg;
							text-transform: lowercase;
							top: .1em;
							width: 102px;
							z-index: 3;
						}

							main .stats .fans .ransom-note span:nth-child(2n+1) span:nth-child(5n+3)::before,
							main .stats .fans .ransom-note span:nth-child(2n+2) span:nth-child(5n+4)::before {
								background: url(../assets/img/f3.png) center no-repeat;
								height: 97px;
								width: 102px;
								z-index: -7;
							}

				main .stats .fans small {
					display: block;
					font-size: .93em;
				}

			main .stats .info {
				line-height: 1.75rem;
				padding: 10px 20px;
			}

				main .stats .info p {
					text-indent: 0;
				}

				main .stats .info strong {
					line-height: 1.75rem;
				}

				main .stats .info a {
					font-size: 1.15em;
					line-height: 1.75rem;
				}

					main .stats .info a.img, main .showAffiliates a.img {
						border-image: none;
						border-style: none;
						border-width: 0;
						opacity: 1;
						position: relative;
						text-decoration: unset;
						transition: opacity .3s ease;
					}

						main .stats .info a.img:hover, main .showAffiliates a.img:hover {
							opacity: .85;
						}

	main img {
		border-image: var(--btnbder) 4 4 4 4 stretch stretch;
		border-radius: .35rem;
		border-style: solid;
		border-width: 3.5px 3.5px 3.5px 3.5px;
		margin: 3px 1.75px;
		padding: 3px;
	}

		main img:hover {
			opacity: .85;
		}

	main #show-members .col-lg-3:nth-of-type(3n+3) {
		transform: rotate(2deg);
	}

		main #show-members .col-lg-3:nth-of-type(3n+5) {
			transform: rotate(-2deg);
		}

		main #show-members .members {
			border-image: var(--border) 10 10 10 10 stretch stretch;
			border-radius: .5rem;
			border-style: solid;
			border-width: 7px 7px 7px 7px;
			color: #808080;
			margin-bottom: 5px;
			padding: 20px 0;
		}

			main #show-members .members img {
				border-image: none;
				border-style: solid;
				border-width: 0;
				height: 23px;
				margin: -5px 0 0 5px;
				padding: 0;
				width: 23px;
			}

			main #show-members .members .ph-bold {
				color: var(--muted);
				font-size: .75em;
				margin: 0 7px;
			}

	main #show-codes {
		padding: 20px 35px 0 35px;
	}

		main #show-codes .codesBlock {
			border-image: var(--border) 10 10 10 10 stretch stretch;
			border-radius: .5rem;
			border-style: solid;
			border-width: 7px 7px 7px 7px;
			margin: 0 auto 1.35rem auto !important;
			padding: 35px 30px 15px 30px;
			/* width: 78.75%; */
		}

			main #show-codes .codesBlock:last-of-type {
				margin-bottom: 2.15rem !important;
			}

	main ul li {
		display: block;
		list-style-type: none;
		padding: .15rem;
	}

		main ul li::before {
			color: var(--orange);
			content: "* ";
			font-family: var(--doodle);
			font-size: 1.35em;
			margin-right: .25rem;
			vertical-align: bottom;
		}

/* -----------------------------------
>>  [  --- footer elements ---  ]
------------------------------------*/

footer {
	font-size: .9em;
	line-height: 1.5rem;
	padding: 7px 0 15px 0;
}

	footer a {
		font: 400 1.115em/1.35rem var(--serif);
	}

		footer a:hover {
			font: 400 1.115em/1.35rem var(--serif) !important;
		}

	footer strong {
		font: 700 1.05em/1.5rem var(--bold);
	}

	footer em {
		font: 600 italic 1.05em/1.5rem var(--italic);
	}

/* -----------------------------------
>>  [  --- alert styles ---  ]
------------------------------------*/

.alert {
    background-color: transparent;
    border: none;
}

	.alert-light {
		border-image: url(../assets/svg/bq.svg) 0 6 3 6 stretch stretch;
		border-left-style: solid;
		border-right-width: 0;
		border-width: 0 6px 3px 6px;
		color: var(--gold);
		font: 400 1.1575em/1.85em var(--serif);
	}

/* -----------------------------------
>>  [  --- form styles ---  ]
------------------------------------*/

form {
	justify-self: center;
	padding: 30px 35px 0 35px;
	margin-bottom: 0rem !important;
	position: relative;
	text-shadow: 1px 1px #F3F3F3;
}

	fieldset {
		border-radius: .5rem;
		margin-bottom: 2.15rem;
		padding: 30px 30px 15px 30px;
	}

		fieldset:nth-of-type(3n+2) {
			transform: rotate(-.5deg);
		}

			fieldset:nth-of-type(3n+4) {
				transform: rotate(.5deg);
			}

		fieldset legend {
			background: var(--bg) var(--statsbg) center;
			border-image: var(--legbder) 10 10 10 10 stretch stretch;
			border-radius: .5rem;
			border-style: solid;
			border-width: 8px 8px 8px 8px;
			color: rgba(var(--redRGB), .85);
			font: 600 1.65em/1em var(--bold);
			letter-spacing: -.5px;
			margin: -57px 0 0 -10px;
			padding: .2em .85rem 0 .85rem;
			text-shadow: none;
			text-transform: lowercase;
			transform: rotate(-2deg);
			width: fit-content;
		}

		fieldset p {
			font-size: .985em;
		}

		fieldset label strong {
			color: var(--text);
			font: 700 1.1575em/1.85em var(--bold);
			letter-spacing: -.25px;
		}

		.form-control, .form-select {
			line-height: 1.5em;
		}

		.req {
			color: var(--gold);
			font: 600 1.15em/1.85em var(--big);
			margin: 0 3.5px;
		}

.forms-div {
	border-image: url(../assets/svg/bq.svg) 0 6 3 6 stretch stretch;
	border-left-style: solid;
	border-right-width: 0;
	border-width: 0 6px 3px 6px;
	color: var(--gold);
	margin: 0 auto;
	padding: .5rem 1rem 1rem 1rem;
	text-align: center;
}

/* >> button styles >> */

.btn {
	background-blend-mode: multiply;
	border: 0;
	color: var(--text);
	font: 600 1.1585em/1.85em var(--bold) !important;
	letter-spacing: -.25px;
	margin: 0 2.5px;
	padding: 5px 15px 0 15px;
	text-transform: lowercase;
	transition: background .3s ease, transform .3s ease;
}

	.btn:hover {
		background-blend-mode: multiply;
		transform: rotate(-3deg);		
	}

	.btn-success {
		background: #809F85;
	}

		.btn-success:hover {
			background: #809F85;
		}

	.btn-danger {
		background: rgba(var(--redRGB), .77);
	}

		.btn-danger:hover {
			background: rgba(var(--redRGB), .77);
		}

/* -----------------------------------
>>  [  --- general text styles ---  ]
------------------------------------*/

h1 {
	color: var(--forest);
	font: 400 2.65em/2.25rem var(--serif);
	letter-spacing: -1.5px;
	margin: 0 0 15px 0;
	padding: 0 23px 0 0;
	position: relative;
	text-align: right;
	text-shadow: 1.5px 2px var(--txtsha);
	text-transform: lowercase;
	transform: rotate(.5deg);
}

	h1:before {
	    background: url(../assets/img/h1.png) no-repeat bottom right;
	    background-size: 100%;
	    content: "";
	    display: block;
	    height: 80px;
	    position: absolute;
	    right: -15px;
	    top: -35px;
	    width: 60px;
	    z-index: -1;
	}

h2 {
	color: var(--forest);
	font: 400 2.15em/2.25rem var(--serif);
	letter-spacing: -1.5px;
	margin: 0 0 10px 3px;
	padding: 0 0 0 45px;
	position: relative;
	text-shadow: 1px 1.5px var(--txtsha);
	text-transform: lowercase;
	transform: rotate(-.5deg);
}

	h2:before {
		content: url("../assets/img/h2.png");
		display: block;
		left: 0;
		position: absolute;
		top: -5px;
		z-index: -1;
	}

	/* h2:before {
		color: #DBB059;
		content: "+ ";
		display: block;
		left: 0;
		position: absolute;
		top: 2px;
		z-index: -1;
	} */

h3 {
	background: var(--bg) var(--statsbg) center;
	border-image: var(--legbder) 10 10 10 10 stretch stretch;
	border-radius: .5rem;
	border-style: solid;
	border-width: 8px 8px 8px 8px;
	color: rgba(var(--redRGB), .85);
	font: 700 1.65em/1em var(--bold);
	letter-spacing: -.5px;
	padding: .45rem .55rem .05rem .55rem;
	position: relative;
	text-align: center;
	transform: rotate(-2deg);
	width: fit-content;
	z-index: 3;
}

h4 {
	color: var(--blue);
	font: 600 italic 1.585em/1.25em var(--italic);
	letter-spacing: -.15px;	
	margin: 0;
	text-shadow: none;
	text-transform: lowercase;
}

p {
	margin-bottom: 1.5rem;
}

	main p:first-of-type {
		text-indent: 20px;
	}

	p:last-of-type {
		margin-bottom: 0;
	}

	#show-affiliates p {
		text-indent: 0;
	}

a {
	border-image: url(../assets/svg/link.svg) 0 3 6 3 stretch stretch;
	border-style: solid;
	border-width: 0px 3px 5px 3px;
	color: var(--green);
	display: inline;
	font: 400 1.135em/1.75em var(--serif);
	letter-spacing: -.35px;
	position: relative;
	text-decoration: unset;
	text-transform: lowercase;
	transition: color .3s ease;
}

	a:not(.nav-link):hover {
		color: #81977E;
	}

strong {
	color: var(--red);
	font: 700 1.1em/1.85em var(--bold);
	letter-spacing: .25px;
	text-transform: lowercase;
	vertical-align: middle;
}

em {
	color: var(--blue);
	font: 600 italic 1.085em/1.85em var(--italic);
	letter-spacing: -.15px;
}

del {
	font: 600 italic 1.085em/1.85em var(--italic);
	position: relative;
	text-decoration: none;
	text-transform: lowercase;
}

	del:before {
		border-bottom-style: solid;
		border-image: url(../assets/svg/del.svg) 0 3 8 3 stretch stretch;
		border-width: 0px 3px 5px 3px;
		content: "";
		left: 0;
		opacity: .85;
		position: absolute;
		right: 0;
		top: 40%;
		transform: rotate(-5deg);
	}

/* -----------------------------------
>>  [  --- tooltip & top styles ---  ]
------------------------------------*/

#s-m-t-tooltip {
	background: var(--dark);
	border-radius: .3rem;
	color: var(--txtsha);
	font: 500 .75em var(--sans);
	letter-spacing: 1px;
	margin: 20px 0 0 10px;
	max-width: 500px;
	padding: 7px 10px 7px 11px;
	text-transform: uppercase;
	z-index: 1000;
}

#top {
	background: rgba(var(--darkRGB), .5);
	border-radius: 50%;
	border: none;
	bottom: 2em;
	color: var(--txtsha);
	display: none;
	height: 35px;
	padding: 5px 0 0 0;
	position: fixed;
	right: 2em;
	text-decoration: none;
	transition: background .3s ease;
	width: 35px;
	z-index: 1000;
}

	#top:hover {
		background: rgba(var(--darkRGB), .75);
	}

/* -----------------------------------
>>  [  --- keyframe animations ---  ]
------------------------------------*/

@keyframes shake {
    0% { transform: rotate(5deg); }
    25% { transform: rotate(-6deg); }
    50% { transform: rotate(5deg); }
    75% { transform: rotate(-6deg); }
    100% { transform: rotate(5deg); }
}

/* -----------------------------------
>>  [  --- responsive styles ---  ]
------------------------------------*/

@media only screen and (max-width: 576px) {
	header {
		background: url("../assets/img/cork.png");
		background-position: center;
		background-repeat: repeat;
		background-size: 41%;
		height: 620px;
	}

		header .hd {
			background: url(../assets/img/hd.png);
			background-position: bottom center;
			background-repeat: no-repeat;
			height: 625px;
		}

		header .img {
			background: url("../assets/img/header.png");
			background-position: 17%;
			background-repeat: no-repeat;
			height: 630px;
		}

		nav li:nth-child(1) { background: url("../assets/img/nbg1.png") no-repeat top; width: 185px; }
		nav li:nth-child(2) { background: url("../assets/img/nbg2.png") no-repeat top; width: 175px; }
		nav li:nth-child(3) { background: url("../assets/img/nbg3.png") no-repeat top; width: 150px; }
		nav li:nth-child(4) { background: url("../assets/img/nbg4.png") no-repeat top; width: 210px; }
		nav li:nth-child(5) { background: url("../assets/img/nbg5.png") no-repeat top; width: 197px; }
		nav li:nth-child(6) { background: url("../assets/img/nbg6.png") no-repeat top; width: 145px; }
		nav li:nth-child(7) { background: url("../assets/img/nbg7.png") no-repeat top; width: 175px; }

	main {
		margin-top: 20px;
	}

		main .stats, main .forms-div, main form, main .alert-light, main .codesBlock {
			width: 100%;
		}

			main .stats .fans {
				border-left: 0px solid #DADBDC;
				border-top: 1px solid #DADBDC;
				margin-top: 20px;
				padding: 20px 0 0 0;
			}

		main ul {
			columns: 1;
			padding-left: 1.75rem;
		}

		main h1 {
			font-size: 2.25em;
			margin: 20px 0 15px 0;
		}

		main h3 {
			margin: 0 0 -30px 7.5%;
		}
}

@media only screen and (min-width: 768px) {
	header {
		background: url("../assets/img/cork.png");
		background-position: center;
		background-repeat: repeat;
		background-size: 35%;
		height: 620px;
	}

		header .hd {
			background: url(../assets/img/hd.png);
			background-position: bottom center;
			background-repeat: no-repeat;
			height: 625px;
		}

		header .img {
			background: url("../assets/img/header.png");
			background-position: 39.5%;
			background-repeat: no-repeat;
			height: 630px;
		}

		nav li:nth-child(1) { background: url("../assets/img/nbg1.png") no-repeat top; width: 185px; }
		nav li:nth-child(2) { background: url("../assets/img/nbg2.png") no-repeat top; width: 175px; }
		nav li:nth-child(3) { background: url("../assets/img/nbg3.png") no-repeat top; width: 150px; }
		nav li:nth-child(4) { background: url("../assets/img/nbg4.png") no-repeat top; width: 210px; }
		nav li:nth-child(5) { background: url("../assets/img/nbg5.png") no-repeat top; width: 197px; }
		nav li:nth-child(6) { background: url("../assets/img/nbg6.png") no-repeat top; width: 145px; }
		nav li:nth-child(7) { background: url("../assets/img/nbg7.png") no-repeat top; width: 175px; }

	main {
		margin-top: 20px;
	}

		main .stats, main form, main .codesBlock {
			width: 100%;
		}

		main ul {
			columns: 1;
			padding-left: 2.75rem;
		}

		main .forms-div {
			width: 60%;
		}

		main .alert-light {
			width: 55%;
		}

		main h1 {
			margin: 15px 0 15px 0;
		}

		main h3 {
			margin: 0 0 -30px 4%;
		}
}

@media only screen and (min-width: 992px) {
	header {
		background: url("../assets/img/cork.png");
		background-position: center;
		background-repeat: repeat;
		background-size: 35%;
		height: 620px;
	}

		header .hd {
			background: url(../assets/img/hd.png);
			background-position: bottom center;
			background-repeat: no-repeat;
			height: 625px;
		}

		header .img {
			background: url("../assets/img/header.png");
			background-position: 39.5%;
			background-repeat: no-repeat;
			height: 630px;
		}

		.navbar-nav {
			padding-top: 5px;
		}

		.nav-item, .nav-link {
			text-align: center;
			flex: 1 1 auto;
		}

			.nav-link {
				padding: 0 1.45rem !important;
				width: 100%;
			}

			.nav-link:hover { color: #434343; }
			nav li:hover { animation: shake 0.5s ease-in-out; }

				nav li:nth-child(1) { background: url("../assets/img/nbg1.png") no-repeat top; width: 100%; }
				nav li:nth-child(2) { background: url("../assets/img/nbg2.png") no-repeat top; width: 100%; }
				nav li:nth-child(3) { background: url("../assets/img/nbg3.png") no-repeat top; width: 100%; }
				nav li:nth-child(4) { background: url("../assets/img/nbg4.png") no-repeat top; width: 100%; }
				nav li:nth-child(5) { background: url("../assets/img/nbg5.png") no-repeat top; width: 100%; }
				nav li:nth-child(6) { background: url("../assets/img/nbg6.png") no-repeat top; width: 100%; }
				nav li:nth-child(7) { background: url("../assets/img/nbg7.png") no-repeat top; width: 100%; }

	main {
		margin-top: 0;
	}

		main .stats {
			width: 80%;
		}

		main ul {
			columns: 2;
			padding-left: 2.75rem;
		}

		main .alert-light {
			width: 45%;
		}

		main .alert-info {
			width: 90%;
		}

		main .forms-div {
			margin-top: 30px;
			width: 40%;
		}

		main form {
			width: 90%;
		}

		main h1 {
			margin: 0 0 15px 0;
		}

		main h3 {
			margin: 0 0 -30px 13.25%;
		}

		main .codesBlock {
			width: 78.75%;
		}
}

@media only screen and (min-width: 1200px) {
	header {
		background: url("../assets/img/cork.png");
		background-position: center;
		background-repeat: repeat;
		background-size: 475px;
		height: 630px;
	}

		header .hd {
			background: url(../assets/img/hd.png);
			background-position: bottom center;
			background-repeat: no-repeat;
			background-size: 100%;
			height: 645px;
		}

		header .img {
			background: url("../assets/img/header.png");
			background-position: center;
			background-repeat: no-repeat;
			height: 630px;
		}

	nav {
		margin-top: -10px;
	}

		.nav-link {
			color: #252525;
			font: 400 2em/1.15em var(--serif);
			letter-spacing: -.25px;
			height: 55px;
			padding: .25em 2.585rem !important;
			text-transform: lowercase;
		}

			.nav-link:hover { color: #434343; }
			nav li:hover { animation: shake 0.5s ease-in-out; }

			nav li:nth-child(1) { background: url("../assets/img/nbg1.png") no-repeat top; }
			nav li:nth-child(2) { background: url("../assets/img/nbg2.png") no-repeat top; }
			nav li:nth-child(3) { background: url("../assets/img/nbg3.png") no-repeat top; width: 150px; }
			nav li:nth-child(4) { background: url("../assets/img/nbg4.png") no-repeat top; }
			nav li:nth-child(5) { background: url("../assets/img/nbg5.png") no-repeat top; }
			nav li:nth-child(6) { background: url("../assets/img/nbg6.png") no-repeat top; }
			nav li:nth-child(7) { background: url("../assets/img/nbg7.png") no-repeat top; }

		main .stats {
			width: 70%;
		}

		main ul {
			columns: 2;
			padding-left: 2.75rem;
		}

	main .alert-light {
		margin-bottom: 1.15rem !important;
		width: 35%;
	}

	main .forms-div {
		margin-top: 30px;
		width: 31.5%;
	}

	main form {
		width: 80%;
	}

	main h3 {
		margin: 0 0 -30px 12.5%;
	}
}