Pen Settings

HTML

CSS

CSS Base

Vendor Prefixing

Add External Stylesheets/Pens

Any URLs added here will be added as <link>s in order, and before the CSS in the editor. You can use the CSS from another Pen by using its URL and the proper URL extension.

+ add another resource

JavaScript

Babel includes JSX processing.

Add External Scripts/Pens

Any URL's added here will be added as <script>s in order, and run before the JavaScript in the editor. You can use the URL of any other Pen and it will include the JavaScript from that Pen.

+ add another resource

Packages

Add Packages

Search for and use JavaScript packages from npm here. By selecting a package, an import statement will be added to the top of the JavaScript editor for this package.

Behavior

Auto Save

If active, Pens will autosave every 30 seconds after being saved once.

Auto-Updating Preview

If enabled, the preview panel updates automatically as you code. If disabled, use the "Run" button to update.

Format on Save

If enabled, your code will be formatted when you actively save your Pen. Note: your code becomes un-folded during formatting.

Editor Settings

Code Indentation

Want to change your Syntax Highlighting theme, Fonts and more?

Visit your global Editor Settings.

HTML

              
                //- Canvas
.canvas._ribby
	//-- Menu
	.menu
		.menu__item._ribby
		.menu__item._nonsense
		.menu__item._know
		.menu__item._garden
		.menu__item._fury
		.menu__item._finish
		.menu__item._casino
	//-- Burger
	label.burger
		input.burger__input(type='checkbox')
		svg.strokeWrap(viewBox="30 30 40 40" xmlns='http://www.w3.org/2000/svg')
			path.strokeWrap__stroke._first(d='M0 40h62c13 0 6 28-4 18L35 35')
			path.strokeWrap__stroke._second(d='M0 50h70')
			path.strokeWrap__stroke._third(d='M0 60h62c13 0 6-28-4-18L35 65')
	//-- Ribby
	mixin triangleMix()
		.sideBlock__triangle
			.sideBlock__tAngle
			.sideBlock__bAngle
	.container.ribby
		.wrap
			.sideCard
				.sideCard__rhombus
				.sideCard__content
					.sideCard__letter C
					.sideCard__letter H
					.sideCard__img
			.card
				.box
					header.header.clearfix
						.sideBox
							.sideBox__inside._cuphead
						.sideBlock
							+triangleMix()
							.sideBlock__article
								mixin gridMix(letter, padding)
									.grid
										.grid__btn(class=`_p${padding}`)
											span.grid__letter= letter
								+gridMix('R')
								+gridMix('I', '16')
								+gridMix('B')
								+gridMix('B')
								+gridMix('Y')
							+triangleMix()
						.sideBox
							.sideBox__inside._cuphead._reverse
					main.main
						.presentBlock.clearfix
							.gradientBox
							.characterBlock
								.characterBlock__rope._1
								.characterBlock__rope._2
								.characterBlock__rope._3
								.characterBlock__article
									.characterBlock__quoteWrap
										h1.characterBlock__quote We had a battle of the soul
								.characterBlock__img._ribbyGif
							.gradientBox
						.characterInfo
							.sideBox
								.sideBox__inside._tube
							.sideBlock
								h1.sideBlock__title DISASTER
							.sideBox
								.sideBox__inside._tube._reverse
					footer.footer
						.sideBox
							.sideBox__inside
								h1.sideBox__title 0,3
								p.sideBox__text LITER
						.sideBlock
							+triangleMix()
							.sideBlock__article
								h1.sideBlock__title
									span Little
									| tadpole <br/> battle
									span Soul
							+triangleMix()
						.sideBox
							.sideBox__inside
								h1.sideBox__title 4,7
								p.sideBox__text PROZENT
			.sideCard
				.sideCard__rhombus
				.sideCard__content
					.sideCard__letter C
					.sideCard__letter H
					.sideCard__img._reverse
	//-- Nonsense
	.container.nonsense
		.wrap
			.sideCard
				.sideCard__img._reverse
				.sideCard__titleWrap
					h1.sideCard__title Clamping
			.card
				.box
					header.header.clearfix
						.gradientBox
						.sideBlock__article
							h1.sideBlock__title make
						.gradientBox._reverse
					main.main
						.main__titleWrap
							h1.main__title nonsense
						.characterBlock.clearfix
							.characterBlock__side
								.characterBlock__sideImg
								.characterBlock__sideImg
							.characterBlock__square
								.squareWall
								.squareFloor
								.squareImg
								.squareShadow
							.characterBlock__side._reverse
								.characterBlock__sideImg
								.characterBlock__sideImg
						.characterInfo.clearfix
							.sideBox
								.sideBox__img._reverse
							.sideBlock
								h1.sideBlock__title great
							.sideBox
								.sideBox__img
					footer.footer.clearfix
						.gradientBox
						.sideBlock__article
							h1.sideBlock__title again
						.gradientBox._reverse
			.sideCard
				.sideCard__img
				.sideCard__titleWrap
					h1.sideCard__title Clamping
	//-- Know
	.container.know
		.wrap
			.sideCard
				.sideCard__img
				.sideCard__titleWrap
					h1.sideCard__title headache
			.card
				.box
					header.header
						h1.header__title everyone
						h1.header__title know
					main.main
						.main__cautionWrap
							h1.main__caution zombies
							h1.main__caution instantly
						.main__character
						.main__circle
							h1.main__circleTitle NEW
					footer.footer
						.footer__title
							span.purple about
						.sideBlock__article
							mixin gridMix(letter, padding)
								.grid
									.grid__btn(class=`_p${padding}`)
										span.grid__letter= letter
							+gridMix('H')
							+gridMix('Y')
							+gridMix('P')
							+gridMix('N')
							+gridMix('O')
							+gridMix('S')
							+gridMix('I', '16')
							+gridMix('S')
						.footer__title
							span.pink for 
							span.orange.swampy reasonable
						.footer__title
							span.blue vegetables
			.sideCard
				.sideCard__img
				.sideCard__titleWrap
					h1.sideCard__title headache
	//- Garden
	.container.garden
		.wrap
			.sideCard
				.sideCard__img
				.sideCard__titleWrap
					h1.sideCard__title escape
			.card
				.box
					header.header
						h1.header__title ALWAYS
					main.main
						.presentBlock.clearfix
							.gradientBox
							.characterBlock
								- var list = ['potato', 'potato', 'onion', 'onion']
								each item in list
									.characterBlock__square(class=`_${item}`)
								.characterBlock__circle
									.circleWall
									.circleFloor
									.circleImg
							.gradientBox
					footer.footer
						.sideBox._reverse
						.sideBlock
							.sideBlock__article
								.sideBlock__titleWrap
									h1.sideBlock__title run from
								.sideBlock__titleWrap
									h1.sideBlock__title garden
							.sideBlock__gradient
						.sideBox
			.sideCard
				.sideCard__img._reverse
				.sideCard__titleWrap
					h1.sideCard__title escape
	//-- Fury
	.container.fury
		.wrap
			.sideCard
				.sideCard__img._reverse
				.sideCard__titleWrap
					h1.sideCard__title allergy
			.card
				.box
					header.header
						.header__titleWrap
							h1.header__title Floral Fury
					main.main
						.presentBlock.clearfix
							.gradientBox
							.characterBlock
								- for (var x = 0; x < 4; x++)
									.characterBlock__square
								.characterBlock__circle
									.circleWall
									.circleFloor
									.circleImg
							.gradientBox._reverse
						.characterInfo.clearfix
							.characterInfo__gradient
							.characterInfo__gradient._reverse
							.characterInfo__triangleWrap
								.characterInfo__triangle
							.characterInfo__circle
								.characterInfo__article
									h1.characterInfo__title 24
									h1.characterInfo__title seven
							.characterInfo__img._cil
							.characterInfo__img._cir._reverse
					footer.footer.clearfix
						- var list = ['Blue', 'Girl', 'Red', 'Flower']
						each item in list
							.footer__circle(class=`_cup${item}`)
			.sideCard
				.sideCard__img
				.sideCard__titleWrap
					h1.sideCard__title allergy
	//-- Finish
	mixin sideBoxMix(reverse)
		.sideBox
			.sideBox__angle(class=`_${reverse}`)
			.sideBox__square
	.container.finish
		.wrap
			.sideCard
				.sideCard__img._reverse
				.sideCard__titleWrap
					h1.sideCard__title Nightmare
			.card
				.box
					header.header.clearfix
						+sideBoxMix()
						.sideBlock
							.sideBlock__article
								h1.sideBlock__title MY
						+sideBoxMix('reverse')
					main.main
						.gradientBox
						.presentBlock
							.presentBlock__titleWrap
								h1.presentBlock__commas._reverse "
								h1.presentBlock__title FINISH
								h1.presentBlock__commas "
							.characterBlock.clearfix
								.characterBlock__side._reverse
									.characterBlock__sideImg
									.characterBlock__sideImg
								.characterBlock__img
								.characterBlock__side
									.characterBlock__sideImg
									.characterBlock__sideImg
							.characterInfo
								.sideBox
									.sideBox__img._reverse
								.sideBlock
									h1.sideBlock__title
										span.high
											span.orange SAMEDI 
											span.blue 12
											| .
											span.purple MAI <br/>
										| ARBOET 
										span.purple ALL 
										span.blue NIGHT <br/>
										span.high
											span.blue RUE 
											span.orange LAK
											span.purple ,
											| PARIS
								.sideBox
									.sideBox__img
						.gradientBox._reverse
					footer.footer.clearfix
						+sideBoxMix()
						.sideBlock
						+sideBoxMix('reverse')
			.sideCard
				.sideCard__img
				.sideCard__titleWrap
					h1.sideCard__title Nightmare
	//- Casino
	.container.casino
		<iframe class="casinoFrame" src="https://kerthin.github.io/cuphead-templateSait/casino.html" scrolling="auto"></iframe>
		
		
//- Social links
.social
	ul.socialList
		li.socialList__item
			a.socialList__link(href="https://github.com/Kerthin?tab=overview&from=2021-05-01&to=2021-05-05" target="_blank")
				svg.socialList__icon(viewBox="0 0 24 24" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round")
					path(d="M9 19c-5 1.5-5-2.5-7-3m14 6v-3.87a3.37 3.37 0 0 0-.94-2.61c3.14-.35 6.44-1.54 6.44-7A5.44 5.44 0 0 0 20 4.77 5.07 5.07 0 0 0 19.91 1S18.73.65 16 2.48a13.38 13.38 0 0 0-7 0C6.27.65 5.09 1 5.09 1A5.07 5.07 0 0 0 5 4.77a5.44 5.44 0 0 0-1.5 3.78c0 5.42 3.3 6.61 6.44 7A3.37 3.37 0 0 0 9 18.13V22")
		li.socialList__item
			a.socialList__link(href="https://codepen.io/Astap" target="_blank")
				svg.socialList__icon(viewBox="0 0 24 24" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round")
					polygon(points="12 2 22 8.5 22 15.5 12 22 2 15.5 2 8.5 12 2")
					line(x1="12" y1="22" x2="12" y2="15.5")
					polyline(points="22 8.5 12 15.5 2 8.5")
					polyline(points="2 15.5 12 8.5 22 15.5")
					line(x1="12" y1="2" x2="12" y2="8.5")
		li.socialList__item
			a.socialList__link(href="https://twitter.com/BelichenkoRoden" target="_blank")
				svg.socialList__icon(viewBox="0 0 24 24" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round")
					path(d="M23 3a10.9 10.9 0 0 1-3.14 1.53 4.48 4.48 0 0 0-7.86 3v1A10.66 10.66 0 0 1 3 4s-4 9 5 13a11.64 11.64 0 0 1-7 2c9 5 20 0 20-11.5a4.5 4.5 0 0 0-.08-.83A7.72 7.72 0 0 0 23 3z")
              
            
!

CSS

              
                * {
	margin: 0;
	padding: 0;
	box-sizing: border-box;
}

body {
	overflow: hidden;
}

::-webkit-scrollbar {
	width: 0;
}

.clearfix:after {
	content: "";
	display: table;
	clear: both;
}

@import url('https://rawcdn.githack.com/Kerthin/cuphead-templateSait/edf2f2804372735acaed7858f0c28b889db4a4d0/dist/css/fontLinks.css');

._reverse {
	transform: scaleX(-1);
}


._bg_black {
	background-color: #000;
}
._bg_red {
	background-color: #de162a;
}

.canvas {
	position: relative;
	width: 100%;
	height: 100vh;
	overflow: hidden;
	background-color: #f1eee2;
	transition: 1s;

	@mixin treeChoseNameMix($treeName) {
		&._#{$treeName} {
			.#{$treeName} {
				display: block;
			}
		}
	}

	@include treeChoseNameMix(ribby);
	@include treeChoseNameMix(nonsense);
	@include treeChoseNameMix(know);
	@include treeChoseNameMix(garden);
	@include treeChoseNameMix(fury);
	@include treeChoseNameMix(finish);
	@include treeChoseNameMix(casino);

	.ribby,
	.nonsense,
	.know,
	.garden,
	.fury,
	.finish,
	.casino {
		display: none;
	}

	&.popup {
		transform: scale(.9);
	}
}

// Menu
.menu {
	position: fixed;
	display: flex;
	justify-content: center;
	flex-wrap: wrap;
	width: 100%;
	height: 100%;
	top: -100%;
	background-color: #f1eee2;
	overflow: scroll;
	transition: 1s;
	z-index: 10;

	&.popup {
		top: 0;
		transition-delay: .2s;
	}

	.menu__item {
		float: left;
		margin-bottom: 10px;
		margin-right: 10px;
		width: 450px;
		height: 450px;
		background-position: center;
		background-size: contain;
		background-repeat: no-repeat;
		cursor: pointer;
		transition: .3s;

		&:hover {
			transform: scale(.9);
		}
		&:active {
			transform: scale(.85);
		}

		&.active {
			background-color: #e0dabf;
		}

		@mixin menuItemBgMix($itemBg) {
			&._#{$itemBg} {
				background-image: url(https://rawcdn.githack.com/Kerthin/cuphead-templateSait/a1357c221bb01ee24ab484ed4b93312b7c0948bf/app/image/static/codepenMenu/#{$itemBg}.png);
			}
		}
		@include menuItemBgMix(ribby);
		@include menuItemBgMix(nonsense);
		@include menuItemBgMix(know);
		@include menuItemBgMix(garden);
		@include menuItemBgMix(fury);
		@include menuItemBgMix(finish);
		@include menuItemBgMix(casino);
	}
}
@media screen and (max-width: 480px) {
	.menu__item {
		margin-right: 0;
		width: 260px;
		height: 260px;
	}
}
@media screen and (max-width: 370px) {
	.menu__item {
		width: 220px;
		height: 220px;
	}
}

// Burger
.burger {
	position: absolute;
	right: 5px;
	width: 50px;
	height: 50px;
	cursor: pointer;
	z-index: 11;

	.burger__input {
		display: none;
		outline: none;

		&.checked {
			+ .strokeWrap {
				._first,
				._third {
					--length: 22.627416998;
					--offset: -94.1149185097;
				}

				._second {
					--length: 0;
					--offset: -50;
				}
			}
		}
	}

	.strokeWrap__stroke {
		fill: none;
		stroke: #000;
		stroke-width: 3;
		stroke-linecap: round;
		stroke-linejoin: round;
		--length: 24;
		--offset: -38;
		stroke-dasharray: var(--length) var(--total-length);
		stroke-dashoffset: var(--offset);
		transition: all .8s cubic-bezier(.645, .045, .355, 1);

		&._first,
		&._third {
			--total-length: 126.64183044433594;
		}

		&._second {
			--total-length: 70;
		}
	}
}

// 
.wrap {
	position: relative;
	width: 100%;
	height: 100vh;
	background-color: #f0966d;
}

.sideCard {
	position: absolute;
	top: 50%;
	transform: translateY(-50%) translateX(-5%);
	width: 300px;
	height: 300px;
}
.sideCard:first-child {
	left: 5%;
}
.sideCard__img {
	width: 100%;
	height: 80%;
	background-size: contain;
	background-position: center;
	background-repeat: no-repeat;
}
.sideCard__titleWrap {
	width: 100%;
	height: 20%;
}
.sideCard__title {
	text-align: center;
	text-transform: uppercase;
	color: #fbf2e4;
}

.card {
	position: absolute;
	top: 50%;
	left: 50%;
	transform: translateY(-50%) translateX(-50%);
	box-shadow: 0 24px 28px rgba(0,0,0,0.95), 0 5px 5px rgba(0,0,0,0.22);
	z-index: 2;
	overflow: auto;
}

// Ribby
._ribbyGif {
	background-image: url('https://rawcdn.githack.com/Kerthin/cuphead-templateSait/38147226b7f4f4950895e0ad75d7ad0bde720965/app/image/gif/ribby/Imageproxy_(4).gif');
}
._cuphead {
	background-image: url('https://rawcdn.githack.com/Kerthin/cuphead-templateSait/38147226b7f4f4950895e0ad75d7ad0bde720965/app/image/static/ribby/cuphead__angle.png');
}
._tube {
	background-image: url('https://rawcdn.githack.com/Kerthin/cuphead-templateSait/38147226b7f4f4950895e0ad75d7ad0bde720965/app/image/static/ribby/tube_yellow.png');
}

.container.ribby {
	.wrap {
		background-color: #ff9baa;
	}

	.sideCard:last-child {
		right: 2.5%;
	}
	.sideCard__rhombus {
		position: relative;
		margin-top: 45px;
		margin-left: 45px;
		width: 200px;
		height: 200px;
		border: 5px solid #ffc014;
		transform: rotate(45deg);
	}
	.sideCard__content {
		position: absolute;
		top: calc(50% - 5px);
		left: calc(50% - 5px);
		transform: translateY(-50%) translateX(-50%); 
		width: 250px;
		height: 250px;

		.sideCard__letter {
			position: absolute;
			top: 50%;
			transform: translateY(-50%); 
			width: 30px;
			height: 30px;
			border-radius: 50%;
			border: 1px solid;
			background-color: #fbf2e4;
			text-align: center;
			font-family: sans-serif;
			font-size: 25px;
			font-weight: 900;

			&:nth-child(1) {
				left: 0;
			}
			&:nth-child(2) {
				right: 0;
			}
		}

		.sideCard__img {
			background-image: url('https://rawcdn.githack.com/Kerthin/cuphead-templateSait/38147226b7f4f4950895e0ad75d7ad0bde720965/app/image/static/ribby/cupheadScared.png');
		}
	}

	.card {
		padding: 45px 30px;
		width: 925px;
		height: 965px;
		background-color: #ffc014;

		.box {
			width: 100%;
			height: 100%;

			.header,
			.main,
			.footer {
				position: relative;
			}

			.header {
				width: 100%;
				height: 100px;
				margin-bottom: 10px;
			}
			.main {
				width: 100%;
				height: calc(100% - 220px);
				margin-bottom: 10px;
			}
			.footer {
				width: 100%;
				height: 100px;

				.sideBlock__article {
					padding: 15px 0;
					border-radius: 50px;
					background-color: #ffc014;
				}

				.sideBlock__title {
					text-transform: uppercase;
					font-size: 40px;
					line-height: 30px;
					color: #eb5631;

					&::before,
					&::after {
						position: absolute;
						top: 50%;
						transform: translateY(-50%);
						display: inline-block;
						content: "";
						width: 10px;
						height: 10px;
						background-color: #eb5631;
						border-radius: 50%;
						margin-bottom: 8px;
					}

					&::before {
						left: 50px;
					}
					&::after {
						right: 50px;
					}

					span {
						font-family: 'Bimbo';
						font-size: 30px;
						text-transform: capitalize;
					}
				}
			}
		}
	}

	.sideBox {
		float: left;
		width: 100px;
		height: 100%;
		border: 5px solid;

		&:first-child {
			margin-right: 10px;
		}

		&__inside {
			width: 100%;
			height: 100%;
			border: 3px solid #ff9baa;
			background-color: #eb5631;
			background-size: contain;
			background-position: center;
			background-repeat: no-repeat;

			.sideBox__title,
			.sideBox__text {
				font-family: 'Swampy';
				color: #fbf2e4;
				text-align: center;
				font-weight: 900;
			}
			.sideBox__title {
				font-size: 50px;
			}
			.sideBox__text {
				font-size: 18px;
			}
		}
	}

	.sideBlock {
		position: relative;
		float: left;
		width: calc(100% - 220px);
		height: 100%;
		margin-right: 10px;
		border: 5px solid;
		background-color: #eb5631;

		&__triangle {
			position: absolute;
			border-top: 45px solid transparent;
			border-left: 130px solid #000;
			border-bottom: 45px solid transparent;
			z-index: 1;

			&:last-child {
				right: 0;
				transform: scaleX(-1);
			}

			.sideBlock__tAngle {
				position: absolute;
				top: 100%;
				left: 104%;
				transform: translateY(-106%) translateX(-120%);
				border-bottom: 37.5px solid #ff9baa;
				border-right: 107px solid transparent;
			}
			.sideBlock__bAngle {
				position: absolute;
				top: 4%;
				left: 110%;
				transform: translateY(6%) translateX(-120%);
				border-top: 37.5px solid #fbf2e4;
				border-right: 107px solid transparent;
			}
		}

		&__article {
			position: absolute;
			top: -5px;
			left: 50%;
			transform: translateX(-50%);
			width: 425px;
			height: calc(100% + 10px);
			border: 5px solid;
			background-color: #ff9baa;
		}

		&__title {
			font-family: 'Swampy';
			text-align: center;
			font-weight: 900;
			font-size: 140px;
		}
	}

	.grid {
		float: left;
		margin-left: -15px; 
		width: 90px;
		height: 90px;

		&:first-child {
			margin-left: 15px; 
		}

		&__btn {
			width: 60%;
			height: 60%;
			background-color: #fbf2e4;
			border: 4px solid #000;
			line-height: 48px;
			margin: 10% 26%;
			padding: 0 7px;
			position: relative;
			transition: all 0.05s ease-in;

			&::before,
			&::after {
				border: 4px solid #000;
				content: '';
				position: absolute;
				transition: all 0.05s ease-in;
			}

			&::before {
				background-color: #f5d152;
			}
			&::after {
				background-color: #eb5631;
			}

			&::before {
				width: 20%;
				height: calc(100% + 2px);
				border-right: 0;
				border-bottom-width: 2px;
				transform: skew(0deg, -45deg) translateX(-4px);
				transform-origin: top right;
				top: -8px;
				right: 99%;
			}
			&::after {
				width: calc(100% + 1px);
				height: 20%;
				border-top: 0;
				border-left-width: 3px;
				transform: skew(-45deg, 0deg) translateY(4px);
				transform-origin: top right;
				top: 100%;
				right: -8px;
			}

			&._p16 {
				padding: 0 16px;
			}

			.grid__letter {
				font-family: sans-serif;
				font-size: 45px;
				font-weight: 900;
			}
		}
	}

	.presentBlock {
		width: 100%;
		height: 468px;

		.gradientBox {
			float: left;
			width: 100px;
			height: 100%;
			border: 5px solid;
			border-bottom: 0;
			background: repeating-linear-gradient(125deg, #eb5631, #eb5631 30px, #fbf2e4 30px, #fbf2e4 66.3px);
			animation: animationGradient 4s linear infinite;

			&:first-child {
				margin-right: 10px;
			}
			&:last-child {
				transform: scaleX(-1);
			}
		}

		.characterBlock {
			position: relative;
			float: left;
			width: calc(100% - 220px);
			height: calc(100% - 10px);
			margin-right: 10px;
			border: 5px solid;
			overflow: hidden;

			&__rope {
				position: absolute;
				left: -77.5px;
				width: 800px;
				height: 300px;
				border-radius: 50%;
				border: 5px solid #fbf2e4;
				border-left-color: transparent;
				border-right-color: transparent;
				border-bottom-color: transparent;

				&:nth-child(1) {
					bottom: -190px;
				}
				&:nth-child(2) {
					bottom: -150px;
				}
				&:nth-child(3) {
					bottom: -110px;
				}
			}

			&__article {
				position: absolute;
				top: 20px;
				padding: 10px 0;
				width: 100%;
				height: 75px;
				border: 5px solid #000;
				border-left: 0;
				border-right: 0;

				.characterBlock__quoteWrap {
					width: 100%;
					height: 100%;
					background-color: #eb5631;

					.characterBlock__quote {
						font-family: 'Swampy';
						color: #fbf2e4;
						text-align: center;
						font-weight: 900;
						font-size: 40px;
						text-transform: uppercase;
						word-spacing: -10px;

						&::before,
						&::after {
							display: inline-block;
							content: "";
							width: 10px;
							height: 10px;
							background-color: #fbf2e4;
							border-radius: 50%;
							margin-bottom: 8px;
						}

						&::before {
							margin-right: 12px;
						}
						&::after {
							margin-left: 12px;
						}
					}
				}
			}

			&__img {
				position: absolute;
				width: 100%;
				height: 100%;
				background-size: contain;
				background-position: center;
				background-repeat: no-repeat;
			}
		}
	}

	.characterInfo {
		width: 100%;
		height: 187px;

		.sideBox__inside {
			border: 0;
		}

		.sideBlock {
			border: 7px solid;
			background-color: #ff9baa;
		}
	}
}

@keyframes animationGradient {
	from {
		background-position: 0 0;
	}
	to {
		background-position: 0 458px;
	}
}

// Media
@media screen and (orientation: landscape) and (max-height: 985px) {
	.container.ribby {
		.card {
			transform: translate(-50%, -50%) scale(.8);
		}
		.sideCard {
			transform: translateY(-50%) translateX(-5%) scale(.8);
		}
	}
}
@media screen and (orientation: landscape) and (max-height: 790px) {
	.container.ribby {
		.card {
			transform: translate(-50%, -50%) scale(.6);
		}
		.sideCard {
			transform: translateY(-50%) translateX(-5%) scale(.6);
		}
	}
}
@media screen and (orientation: landscape) and (max-height: 600px) {
	.container.ribby {
		.card {
			transform: translate(-50%, -50%) scale(.4);
		}
		.sideCard {
			transform: translateY(-50%) translateX(-5%) scale(.4);
		}
	}
}
@media screen and (orientation: landscape) and (max-height: 405px) {
	.container.ribby {
		.card {
			transform: translate(-50%, -50%) scale(.2);
		}
		.sideCard {
			transform: translateY(-50%) translateX(-5%) scale(.2);
		}
	}
}

@media screen and (max-width: 1700px) {
	.container.ribby {
		.card {
			transform: translate(-50%, -50%) scale(.8);
		}
		.sideCard {
			transform: translateY(-50%) translateX(-5%) scale(.8);
		}
	}
}
@media screen and (max-width: 1400px) {
	.container.ribby {
		.card {
			transform: translate(-50%, -50%) scale(.6);
		}
		.sideCard {
			transform: translateY(-50%) translateX(-5%) scale(.6);
		}
	}
}
@media screen and (max-width: 1140px) {
	.container.ribby {
		.card {
			transform: translate(-50%, -50%) scale(.4);
		}
		.sideCard {
			transform: translateY(-50%) translateX(-5%) scale(.4);
		}
	}
}
@media screen and (max-width: 890px) {
	.container.ribby {
		.card {
			transform: translate(-50%, -50%) scale(.3);
		}
		.sideCard {
			display: none;
		}
	}
}
@media screen and (max-width: 320px) {
	.container.ribby {
		.card {
			transform: translate(-50%, -50%) scale(.28);
		}
	}
}

// Nonsense Card
.container.nonsense {
	.wrap {
		background-color: #fff;
	}

	.sideCard:last-child {
		right: 3.2%;
	}

	.sideCard__img {
		background-image: url('https://rawcdn.githack.com/Kerthin/cuphead-templateSait/9fa6f08f6306ffdc3201b8783e6f4555f6cf579c/app/image/static/nonsense/croaks_side.png');
	}
	.sideCard__title {
		font-family: 'Rounds';
		font-size: 45px;
		line-height: 55px;
		color: #000;
	}

	.card {
		padding: 30px 24px;
		width: 925px;
		height: 965px;
		background-color: #f8f4e1;

		.box {
			width: 100%;
			height: 100%;

			.header,
			.main,
			.footer {
				position: relative;
			}
			.header,
			.footer {
				width: 100%;
				height: 54px;
			}
			.header {
				margin-bottom: 14px;
			}
			.main {
				width: 100%;
				height: calc(100% - 136px);
				margin-bottom: 14px;
			}
		}
	}

	.gradientBox,
	.sideBlock__article {
		position: relative;
		float: left;
	}

	.gradientBox {
		margin-top: 3.5px;
		width: 308px;
		height: 47px;
		border: 5px solid;
		background: repeating-linear-gradient(125deg, #ec492e, #ec492e 30px, #779d9a 30px, #779d9a 61px);
		animation: animationGradientH 4s linear infinite;
	}
	.sideBlock__article {
		position: relative;
		float: left;
		width: calc(100% - 616px);
		height: 100%;
	}
	.sideBlock__title {
		margin-top: -15px;
		font-family: sans-serif;
		font-size: 75px;
		letter-spacing: -4px;
		text-transform: uppercase;
		text-align: center;
	}

	.main__titleWrap {
		margin-bottom: 14px;
		width: 100%;
		height: 194px;
		border: 14px solid #779d9a;
		background-color: #000;

		.main__title {
			margin-top: 5px;
			margin-left: -20px;
			text-align: center;
			font-family: 'Rounds';
			font-size: 185px;
			line-height: 185px;
			color: #fbf2e4;
			letter-spacing: -12px;
			text-transform: uppercase;
		}
	}

	.characterBlock {
		margin-bottom: 14px;
		width: 100%;
		height: 382px;

		&__side {
			float: left;
			width: 165px;
			height: 100%;

			&:first-child {
				margin-right: 14px;
			}

			.characterBlock__sideImg {
				width: 100%;
				border: 5px solid;
				background-size: contain;
				background-position: center;
				background-repeat: no-repeat;

				&:first-child {
					margin-bottom: 14px;
					height: 165px;
					background-color: #e89eab;
					background-image: url('https://rawcdn.githack.com/Kerthin/cuphead-templateSait/9fa6f08f6306ffdc3201b8783e6f4555f6cf579c/app/image/static/nonsense/ribby_lose.png')
				}
				&:last-child {
					height: calc(100% - 179px);
					background-color: #779d9a;
					background-image: url('https://rawcdn.githack.com/Kerthin/cuphead-templateSait/9fa6f08f6306ffdc3201b8783e6f4555f6cf579c/app/image/static/nonsense/croaks_win.png')
				}
			}
		}

		.characterBlock__square {
			position: relative;
			margin-right: 14px;
			float: left;
			width: calc(100% - 358px);
			height: 100%;
			border: 5px solid;
			overflow: hidden;

			.squareWall {
				width: 100%;
				height: 250px;
				background-color: #000;
				background-image: linear-gradient(335deg, #ec492e 23px, transparent 23px),
				linear-gradient(155deg, #ec492e 23px, transparent 23px),
				linear-gradient(335deg, #ec492e 23px, transparent 23px),
				linear-gradient(155deg, #ec492e 23px, transparent 23px);
				background-size: 58px 58px;
				background-position: 0px 2px, 4px 35px, 29px 31px, 34px 6px;
			}
			.squareFloor {
				width: 100%;
				height: 126px;
				border-top: 5px solid;
				background-color: #e89eab;
			}
			.squareImg {
				position: absolute;
				top: 0;
				width: 100%;
				height: 100%;
				background-size: contain;
				background-position: center;
				background-repeat: no-repeat;
				background-image: url('https://rawcdn.githack.com/Kerthin/cuphead-templateSait/9fa6f08f6306ffdc3201b8783e6f4555f6cf579c/app/image/gif/nonsense/Imageproxy_(2).gif');
				z-index: 1;
			}
			.squareShadow {
				position: absolute;
				bottom: 0;
				left: 50%;
				transform: translateX(-50%);
				width: 300px;
				height: 40px;
				border-radius: 50%;
				background-color: #000;
			}
		}
	}

	.characterInfo {
		width: 100%;
		height: 165px;

		.sideBox {
			position: relative;
			float: left;
			width: 165px;
			height: 100%;
			border: 5px solid;
			background-color: #ec492e;

			:first-child {
				margin-right: 14px;
			}

			&__img {
				position: absolute;
				width: 100%;
				height: 100%;
				background-size: contain;
				background-position: center;
				background-repeat: no-repeat;
				background-image: url('https://rawcdn.githack.com/Kerthin/cuphead-templateSait/9fa6f08f6306ffdc3201b8783e6f4555f6cf579c/app/image/gif/nonsense/cuphead_mugen.gif');
				z-index: 2;
			}
		}

		.sideBlock {
			float: left;
			margin-right: 14px;
			width: calc(100% - 358px);
			height: 100%;
			background: #000;

			&__title {
				font-family: 'Rounds';
				margin-top: 5px;
				margin-left: -20px;
				text-align: center;
				font-size: 185px;
				line-height: 185px;
				color: #fbf2e4;
			}
		}
	}
}

@keyframes animationGradientH {
	from {
		background-position: 0 0;
	}
	to {
		background-position: 298px 0;
	}
}

@media screen and (orientation: landscape) and (max-height: 985px) {
	.container.nonsense {
		.card {
			transform: translate(-50%, -50%) scale(.8);
		}
		.sideCard {
			transform: translateY(-50%) translateX(-5%) scale(.8);
		}
	}
}
@media screen and (orientation: landscape) and (max-height: 790px) {
	.container.nonsense {
		.card {
			transform: translate(-50%, -50%) scale(.6);
		}
		.sideCard {
			transform: translateY(-50%) translateX(-5%) scale(.6);
		}
	}
}
@media screen and (orientation: landscape) and (max-height: 600px) {
	.container.nonsense {
		.card {
			transform: translate(-50%, -50%) scale(.4);
		}
		.sideCard {
			transform: translateY(-50%) translateX(-5%) scale(.4);
		}
	}
}
@media screen and (orientation: landscape) and (max-height: 405px) {
	.container.nonsense {
		.card {
			transform: translate(-50%, -50%) scale(.2);
		}
		.sideCard {
			transform: translateY(-50%) translateX(-5%) scale(.2);
		}
	}
}

@media screen and (max-width: 1700px) {
	.container.nonsense {
		.card {
			transform: translate(-50%, -50%) scale(.8);
		}
		.sideCard {
			transform: translateY(-50%) translateX(-5%) scale(.8);
		}
	}
}
@media screen and (max-width: 1400px) {
	.container.nonsense {
		.card {
			transform: translate(-50%, -50%) scale(.6);
		}
		.sideCard {
			transform: translateY(-50%) translateX(-5%) scale(.6);
		}
	}
}
@media screen and (max-width: 1140px) {
	.container.nonsense {
		.card {
			transform: translate(-50%, -50%) scale(.4);
		}
		.sideCard {
			transform: translateY(-50%) translateX(-5%) scale(.4);
		}
	}
}
@media screen and (max-width: 890px) {
	.container.nonsense {
		.card {
			transform: translate(-50%, -50%) scale(.3);
		}
		.sideCard {
			display: none;
		}
	}
}
@media screen and (max-width: 320px) {
	.container.nonsense {
		.card {
			transform: translate(-50%, -50%) scale(.28);
		}
	}
}

// Know Card
.container.know {
	.wrap {
		background-color: #e55137;
	}

	.sideCard:last-child {
		right: 3.2%;
	}

	.sideCard__img {
		background-image: url('https://rawcdn.githack.com/Kerthin/cuphead-templateSait/a59bac90b013dbc0064aac64dd6ab8c630915b15/app/image/gif/know/headache.gif');
	}
	.sideCard__title {
		font-family: 'Rounds';
		font-size: 45px;
		line-height: 55px;
		color: #fbf2e4;
	}

	.purple {
		color: #8f599c;
	}
	.pink {
		color: #de9da8;
	}
	.orange {
		color: #e55137;
	}
	.blue {
		color: #47aee5;
	}

	.swampy {
		font-family: 'Swampy';
	}

	.card {
		padding: 15px 26px;
		width: 805px;
		height: 959px;
		background-color: #000;

		.box {
			width: 100%;
			height: 100%;

			.header,
			.main,
			.footer {
				position: relative;
			}
			.header,
			.footer {
				width: 100%;
			}
			.header {
				height: 266px;
			}
			.footer {
				height: 224px;
			}
			.main {
				position: relative;
				width: 100%;
				height: calc(100% - 490px);
				background-color: #000;
			}
		}
	}

	.header__title {
		text-align: center;

		&:first-child {
			font-family: 'Rounds';
			font-size: 66px;
			padding: 0;
			text-transform: uppercase;
			color: #fbf2e4;
		}
		&:last-child {
			margin-top: -7px;
			margin-left: -18px;
			font-family: 'Bottle';
			font-size: 200px;
			line-height: 155px;
			text-transform: uppercase;
			color: #47aee5;
		}
	}

	.main__cautionWrap {
		position: absolute;
		top: 50%;
		transform: translateY(-50%);
		width: 140px;
		text-transform: uppercase;

		.main__caution {
			font-family: 'Rounds';
			text-align: center;
			color: #fbf2e4;

			&:first-child {
				font-size: 25px;
			}
			&:last-child {
				padding-top: 3px;
				font-size: 28px;
				margin-top: 17px;
				transform: scaleY(2);
				border: 2px solid;
				border-right: 0;
				border-left: 0;
				line-height: 28px;
			}
		}
	}

	.main__character {
		position: absolute;
		top: 50%;
		left: 50%;
		transform: translateY(-50%) translateX(-50%);
		width: 439px;
		height: 439px;
		border-radius: 50%;
		background-color: #e55137;
		background-size: contain;
		background-position: center 20px;
		background-repeat: no-repeat;
		background-image: url('https://rawcdn.githack.com/Kerthin/cuphead-templateSait/a59bac90b013dbc0064aac64dd6ab8c630915b15/app/image/gif/know/hypnosis.gif');
	}

	.main__circle {
		position: absolute;
		right: 0;
		width: 115px;
		height: 115px;
		border-radius: 50%;
		background-color: #fbf2e4;
		transform: rotate(-15deg);

		&Title {
			position: absolute;
			top: 50%;
			left: 50%;
			transform: translateY(-50%) translateX(-50%);
			border: 3px solid;
			border-right: 0;
			border-left: 0;
			color: #000;
		}
	}

	.footer__title {
		font-family: 'Bottle';
		font-size: 60px;
		line-height: 46px;
		text-align: center;
	}

	.sideBlock__article {
		position: relative;
		top: 5px;
		left: 50%;
		transform: translateX(-50%);
		width: 535px;
		height: 80px;

		.grid {
			float: left;
			margin-left: -15px; 
			width: 80px;
			height: 80px;

			&:first-child {
				margin-left: 0px; 
			}

			.grid__btn {
				width: 60%;
				height: 60%;
				background-color: #fbf2e4;
				border: 4px solid #000;
				line-height: 40px;
				margin: 10% 26%;
				padding: 0 9px;
				position: relative;
				transition: all 0.05s ease-in;

				&::before,
				&::after {
					border: 4px solid #000;
					content: '';
					position: absolute;
					transition: all 0.05s ease-in;
				}

				&::before {
					background-color: #47aee5;
				}
				&::after {
					background-color: #000;
				}

				&::before {
					width: 20%;
					height: calc(100% + 2px);
					border-right: 0;
					border-bottom-width: 2px;
					transform: skew(0deg, -45deg) translateX(-4px);
					transform-origin: top right;
					top: -8px;
					right: 99%;
				}
				&::after {
					width: calc(100% + 1px);
					height: 20%;
					border-top: 0;
					border-left-width: 3px;
					transform: skew(-45deg, 0deg) translateY(4px);
					transform-origin: top right;
					top: 100%;
					right: -8px;
				}

				&._p16 {
					padding: 0 16px;
				}

				.grid__letter {
					font-family: sans-serif;
					font-size: 30px;
					font-weight: 900;
				}
			}
		}
	}
}

@media screen and (orientation: landscape) and (max-height: 990px) {
	.container.know {
		.card {
			transform: translate(-50%, -50%) scale(.8);
		}
		.sideCard {
			transform: translateY(-50%) translateX(-5%) scale(.8);
		}
	}
}
@media screen and (orientation: landscape) and (max-height: 797px) {
	.container.know {
		.card {
			transform: translate(-50%, -50%) scale(.6);
		}
		.sideCard {
			transform: translateY(-50%) translateX(-5%) scale(.6);
		}
	}
}
@media screen and (orientation: landscape) and (max-height: 595px) {
	.container.know {
		.card {
			transform: translate(-50%, -50%) scale(.4);
		}
		.sideCard {
			transform: translateY(-50%) translateX(-5%) scale(.4);
		}
	}
}
@media screen and (orientation: landscape) and (max-height: 400px) {
	.container.know {
		.card {
			transform: translate(-50%, -50%) scale(.2);
		}
		.sideCard {
			transform: translateY(-50%) translateX(-5%) scale(.2);
		}
	}
}


@media screen and (max-width: 1530px) {
	.container.know {
		.card {
			transform: translate(-50%, -50%) scale(.8);
		}
		.sideCard {
			transform: translateY(-50%) translateX(-5%) scale(.8);
		}
	}
}
@media screen and (max-width: 1280px) {
	.container.know {
		.card {
			transform: translate(-50%, -50%) scale(.6);
		}
		.sideCard {
			transform: translateY(-50%) translateX(-5%) scale(.6);
		}
	}
}
@media screen and (max-width: 1060px) {
	.container.know {
		.card {
			transform: translate(-50%, -50%) scale(.4);
		}
		.sideCard {
			transform: translateY(-50%) translateX(-5%) scale(.4);
		}
	}
}
@media screen and (max-width: 830px) {
	.container.know {
		.sideCard {
			display: none;
		}
	}
}
@media screen and (max-width: 360px) {
	.container.know {
		.card {
			transform: translate(-50%, -50%) scale(.35);
		}
	}
}

// Garden
._potato {
	background-image: url('https://rawcdn.githack.com/Kerthin/cuphead-templateSait/0b4795f18e04cbeb331b18c7dec808815dc18bd6/app/image/static/garden/potato_72.png');
}
._onion {
	background-image: url('https://rawcdn.githack.com/Kerthin/cuphead-templateSait/0b4795f18e04cbeb331b18c7dec808815dc18bd6/app/image/static/garden/carrots-png-two-6.png');
}

.container.garden {
	.wrap {
		background-color: #398387;
	}

	.sideCard:last-child {
		right: 3.2%;
	}

	.sideCard__img {
		background-image: url('https://rawcdn.githack.com/Kerthin/cuphead-templateSait/0b4795f18e04cbeb331b18c7dec808815dc18bd6/app/image/static/garden/Weepy.png');
	}
	.sideCard__title {
		font-family: 'Bimbo';
		font-size: 50px;
		line-height: 50px;
	}

	.card {
		padding: 20px 20px;
		width: 925px;
		height: 965px;
		background-color: #fbf2e4;

		.box {
			width: 100%;
			height: 100%;

			.header {
				position: relative;
				background-color: #000;

				.header__title {
					position: absolute;
					top: -30px;
					left: 10px;
					font-family: 'Swampy';
					font-weight: 900;
					font-size: 300px;
					line-height: 300px;
					color: #fbf2e4;
					letter-spacing: -20px;
				}
			}
			.header,
			.footer {
				width: 100%;
				height: 235px;
			}
			.main {
				width: 100%;
				height: calc(100% - 490px);
			}
			.header,
			.main {
				margin-bottom: 10px;
			}
		}
	}

	.presentBlock {
		width: 100%;
		height: 100%;

		.gradientBox {
			float: left;
			width: 100px;
			height: 100%;
			border: 5px solid;
			background: repeating-linear-gradient(125deg, #398387, #398387 30px, #000 30px, #000 61px);
			animation: animationGradient 4s linear infinite;

			&:first-child {
				margin-right: 10px;
			}
			&:last-child {
				transform: scaleX(-1);
			}
		}

		.characterBlock {
			position: relative;
			float: left;
			width: calc(100% - 220px);
			height: 100%;
			margin-right: 10px;
			background-color: #000;

			&__square {
				position: absolute;
				width: 82px;
				height: 82px;
				background-size: contain;
				background-position: center;
				background-repeat: no-repeat;
				background-color: red;

				&:nth-child(1) {
					top: 20px;
					left: 20px;
					background-color: #ea5d56;
				}
				&:nth-child(2) {
					top: 20px;
					right: 20px;
					background-color: #ea5d56;
				}
				&:nth-child(3) {
					bottom: 20px;
					left: 20px;
					background-color: #398387;
				}
				&:nth-child(4) {
					bottom: 20px;
					right: 20px;
					background-color: #398387;
				}
			}

			&__circle {
				position: absolute;
				top: 50%;
				left: 50%;
				transform: translateY(-50%) translateX(-50%);
				width: 445px;
				height: 445px;
				border-radius: 50%;
				border: 5px solid;
				overflow: hidden;

				.circleWall {
					width: 100%;
					height: 280px;
					background-color: #fef5d6;
				}
				.circleFloor {
					width: 100%;
					height: 160px;
					border-top: 5px solid;
					background-color: #ea5d56;
				}
				.circleImg {
					position: absolute;
					top: 0;
					width: 100%;
					height: 100%;
					background-size: contain;
					background-position: center;
					background-repeat: no-repeat;
					background-image: url('https://rawcdn.githack.com/Kerthin/cuphead-templateSait/0b4795f18e04cbeb331b18c7dec808815dc18bd6/app/image/gif/garden/blyaaaa.gif');
				}
			}
		}
	}

	.sideBox {
		float: left;
		width: 214px;
		height: 100%;
		border: 5px solid;
		background-color: #ea5d56;
		background-size: contain;
		background-position: center;
		background-repeat: no-repeat;
		background-image: url('https://rawcdn.githack.com/Kerthin/cuphead-templateSait/0b4795f18e04cbeb331b18c7dec808815dc18bd6/app/image/static/garden/Genie.png');

		&:first-child {
			margin-right: 10px;
		}
	}
	.sideBlock {
		position: relative;
		float: left;
		width: calc(100% - 448px);
		height: 100%;
		margin-right: 10px;

		&__article {
			width: 100%;
			height: 178px;
			margin-bottom: 10px;
		}

		&__gradient {
			border: 5px solid;
			width: 100%;
			height: 47px;
			background: repeating-linear-gradient(125deg, #398387, #398387 30px, #000 30px, #000 58px);
			animation: animationGradientH 4s linear infinite;
		}
	}

	.sideBlock__titleWrap {
		&:first-child {
			position: relative;
			width: 100%;
			height: 48px;

			.sideBlock__title {
				color: #000;
				font-size: 57px;
				top: -5px;
				left: 50%;
				transform: translateX(-50%);
				letter-spacing: -5px;
				word-spacing: -15px;
			}
		}
		&:last-child {
			position: relative;
			width: 100%;
			height: 130px;
			background-color: #000;

			.sideBlock__title {
				font-size: 160px;
				top: -25px;
				left: 50%;
				transform: translateX(-50%);
				letter-spacing: -20px;
			}
		}

		.sideBlock__title {
			text-align: center;
			position: absolute;
			font-family: 'Swampy';
			text-align: center;
			color: #fbf2e4;
		}
	}
}

@keyframes animationGradient {
	from {
		background-position: 0 0;
	}
	to {
		background-position: 0 425px;
	}
}

@keyframes animationGradientH {
	from {
		background-position: 0 0;
	}
	to {
		background-position: 427px 0;
	}
}


@media screen and (orientation: landscape) and (max-height: 985px) {
	.container.garden {
		.card {
			transform: translate(-50%, -50%) scale(.8);
		}
		.sideCard {
			transform: translateY(-50%) translateX(-5%) scale(.8);
		}
	}
}
@media screen and (orientation: landscape) and (max-height: 790px) {
	.container.garden {
		.card {
			transform: translate(-50%, -50%) scale(.6);
		}
		.sideCard {
			transform: translateY(-50%) translateX(-5%) scale(.6);
		}
	}
}
@media screen and (orientation: landscape) and (max-height: 600px) {
	.container.garden {
		.card {
			transform: translate(-50%, -50%) scale(.4);
		}
		.sideCard {
			transform: translateY(-50%) translateX(-5%) scale(.4);
		}
	}
}
@media screen and (orientation: landscape) and (max-height: 405px) {
	.container.garden {
		.card {
			transform: translate(-50%, -50%) scale(.2);
		}
		.sideCard {
			transform: translateY(-50%) translateX(-5%) scale(.2);
		}
	}
}

@media screen and (max-width: 1700px) {
	.container.garden {
		.card {
			transform: translate(-50%, -50%) scale(.8);
		}
		.sideCard {
			transform: translateY(-50%) translateX(-5%) scale(.8);
		}
	}
}
@media screen and (max-width: 1400px) {
	.container.garden {
		.card {
			transform: translate(-50%, -50%) scale(.6);
		}
		.sideCard {
			transform: translateY(-50%) translateX(-5%) scale(.6);
		}
	}
}
@media screen and (max-width: 1140px) {
	.container.garden {
		.card {
			transform: translate(-50%, -50%) scale(.4);
		}
		.sideCard {
			transform: translateY(-50%) translateX(-5%) scale(.4);
		}
	}
}
@media screen and (max-width: 890px) {
	.container.garden {
		.card {
			transform: translate(-50%, -50%) scale(.3);
		}
		.sideCard {
			display: none;
		}
	}
}
@media screen and (max-width: 320px) {
	.container.garden {
		.card {
			transform: translate(-50%, -50%) scale(.28);
		}
	}
}

// Fury
.container.fury {
	.wrap {
		background-color: #f092a3;
	}

	.sideCard:last-child {
		right: 3.2%;
	}

	.sideCard__img {
		background-image: url('https://rawcdn.githack.com/Kerthin/cuphead-templateSait/53dd03524f53318c7ec624095b28342089f5235c/app/image/gif/fury/26193722_60x60.gif');
	}
	.sideCard__title {
		font-family: 'Rounds';
		font-size: 45px;
		line-height: 55px;
		color: #fbf2e4;
	}

	._cil {
		left: 180px;
	}
	._cir {
		right: 180px;
	}

	._cupBlue {
		background-image: url('https://rawcdn.githack.com/Kerthin/cuphead-templateSait/53dd03524f53318c7ec624095b28342089f5235c/app/image/static/fury/cuphead_blue.png');
	}
	._cupGirl {
		background-image: url('https://rawcdn.githack.com/Kerthin/cuphead-templateSait/53dd03524f53318c7ec624095b28342089f5235c/app/image/static/fury/cuphead_girl.png');
	}
	._cupRed {
		background-image: url('https://rawcdn.githack.com/Kerthin/cuphead-templateSait/53dd03524f53318c7ec624095b28342089f5235c/app/image/static/fury/cuphead_red.png');
	}
	._cupFlower {
		background-size: 75%;
		background-image: url('https://rawcdn.githack.com/Kerthin/cuphead-templateSait/53dd03524f53318c7ec624095b28342089f5235c/app/image/static/fury/Idle_18.png');
	}

	.card {
		padding: 22px 24px;
		width: 820px;
		height: 978px;
		background-color: #ee5e29;

		.box {
			width: 100%;
			height: 100%;

			.header,
			.main,
			.footer {
				position: relative;
			}
			.header,
			.footer {
				width: 100%;
			}
			.header {
				margin-bottom: 10px;
				height: 156px;
				border: solid 5px #000;
			}
			.footer {
				height: 156px;
			}
			.main {
				position: relative;
				margin-bottom: 10px;
				width: 100%;
				height: calc(100% - 332px);
			}
		}
	}

	.header__titleWrap {
		width: 100%;
		height: 100%;
		border: solid 14px #3689c2;
		background-color: #000;

		.header__title {
			margin-top: 14px;
			padding-top: 10px;
			font-family: 'Rounds';
			font-size: 104px;
			line-height: 90px;
			text-transform: uppercase;
			text-align: center;
			transform: scaleY(1.3);
			color: #fbf2e4;
			word-spacing: 15px;
		}
	}

	.presentBlock {
		margin-bottom: 10px;
		width: 100%;
		height: 397px;
		z-index: 999;

		.gradientBox {
			float: left;
			width: 100px;
			height: 100%;
			border: 5px solid;
			background: repeating-linear-gradient(125deg, #3689c2, #3689c2 30px, #000 30px, #000 55.5px);
			animation: animationGradient 3s linear infinite;

			&:first-child {
				margin-right: 10px;
			}
		}

		.characterBlock {
			position: relative;
			float: left;
			width: calc(100% - 220px);
			height: 100%;
			margin-right: 10px;
			border: 5px solid;
			overflow: hidden;
			background-color: #f092a3;
			z-index: 1;

			&__square {
				position: absolute;
				width: 45px;
				height: 45px;
				border: 5px solid #fff;
				transform: rotate(-45deg);

				&:nth-child(1) {
					top: 25px;
					left: 25px;
				}
				&:nth-child(2) {
					top: 25px;
					right: 25px;
				}
				&:nth-child(3) {
					bottom: 25px;
					left: 25px;
				}
				&:nth-child(4) {
					bottom: 25px;
					right: 25px;
				}
			}

			.characterBlock__circle {
				position: absolute;
				top: 50%;
				left: 50%;
				transform: translateY(-50%) translateX(-50%);
				width: 397px;
				height: 397px;
				border-radius: 50%;
				border: 5px solid;
				overflow: hidden;

				.circleWall {
					width: 100%;
					height: 280px;
					background-color: #000;
					background-image: linear-gradient(335deg, #fbf2e4 23px, transparent 23px),
					linear-gradient(155deg, #fbf2e4 23px, transparent 23px),
					linear-gradient(335deg, #fbf2e4 23px, transparent 23px),
					linear-gradient(155deg, #fbf2e4 23px, transparent 23px);
					background-size: 58px 58px;
					background-position: 0px 2px, 4px 35px, 29px 31px, 34px 6px;
				}
				.circleFloor {
					width: 100%;
					height: 120px;
					border-top: 5px solid;
					background-color: #3689c2;
				}
				.circleImg {
					position: absolute;
					top: 0;
					width: 100%;
					height: 100%;
					background-size: contain;
					background-position: center;
					background-repeat: no-repeat;
					background-image: url('https://rawcdn.githack.com/Kerthin/cuphead-templateSait/53dd03524f53318c7ec624095b28342089f5235c/app/image/gif/fury/ce75f3_dee38d3cdbfd4a4192171e1b9646ce4f_mv2.gif');
				}
			}
		}
	}

	.characterInfo {
		position: relative;
		width: 100%;
		height: calc(100% - 407px);

		&__gradient {
			float: left;
			width: 50%;
			height: 100%;
			background: repeating-linear-gradient(-125deg, #fbf2e4, #fbf2e4 30px, #000 30px, #000 55.8px);
			animation: animationGradient 3s linear infinite;
		}

		&__triangleWrap {
			position: absolute;
			bottom: 0;
			left: 50%;
			transform: translateX(-50%);
			border-left: 386px solid transparent;
			border-right: 386px solid transparent;
			border-bottom: 224px solid #ee5e29;

			.characterInfo__triangle {
				position: absolute;
				bottom: -224px;
				left: 50%;
				transform: translateX(-50%);
				border-left: 352px solid transparent;
				border-right: 352px solid transparent;
				border-bottom: 205px solid #3689c2;
			}
		}

		&__circle {
			position: absolute;
			top: calc(50% + 2px);
			left: 50%;
			transform: translateY(-50%) translateX(-50%);
			width: 180px;
			height: 180px;
			border: 5px solid;
			border-radius: 50%;
			background-color: #f092a3;

			.characterInfo__article {
				position: absolute;
				top: calc(50% + 10px);
				left: 50%;
				transform: translateY(-50%) translateX(-50%);
				width: 90%;

				.characterInfo__title {
					font-size: 80px;
					color: #000;
					text-align: center;
					font-family: "Rounds";

					&:first-child {
						line-height: 60px;
						transform: scaleY(1.3);
					}
					&:last-child {
						margin-top: 10px;
						font-size: 40px;
						border-top: 3px solid #ee5e29;
					}
				}
			}
		}

		&__img {
			position: absolute;
			bottom: 0;
			width: 90px;
			height: 90px;
			z-index: 2;
			background-size: contain;
			background-position: center;
			background-repeat: no-repeat;
			background-image: url('https://rawcdn.githack.com/Kerthin/cuphead-templateSait/53dd03524f53318c7ec624095b28342089f5235c/app/image/gif/fury/cuphead_animClean.gif');
		}
	}

	.footer__circle {
		float: left;
		margin-right: 49px;
		width: 156px;
		height: 156px;
		border-radius: 50%;
		border: 5px solid;
		background-color: #f092a3;
		background-size: 90%;
		background-position: center;
		background-repeat: no-repeat;

		&:last-child {
			margin-right: 0;
		}

		&._cupFlower {
			background-size: 75%;
		}
	}
}

@keyframes animationGradient {
	from {
		background-position: 0 0;
	}
	to {
		background-position: 0 387px;
	}
}

@media screen and (orientation: landscape) and (max-height: 1000px) {
	.container.fury {
		.card {
			transform: translate(-50%, -50%) scale(.8);
		}
		.sideCard {
			transform: translateY(-50%) translateX(-5%) scale(.8);
		}
	}
}
@media screen and (orientation: landscape) and (max-height: 810px) {
	.container.fury {
		.card {
			transform: translate(-50%, -50%) scale(.6);
		}
		.sideCard {
			transform: translateY(-50%) translateX(-5%) scale(.6);
		}
	}
}
@media screen and (orientation: landscape) and (max-height: 620px) {
	.container.fury {
		.card {
			transform: translate(-50%, -50%) scale(.4);
		}
		.sideCard {
			transform: translateY(-50%) translateX(-5%) scale(.4);
		}
	}
}
@media screen and (orientation: landscape) and (max-height: 420px) {
	.container.fury {
		.card {
			transform: translate(-50%, -50%) scale(.2);
		}
		.sideCard {
			transform: translateY(-50%) translateX(-5%) scale(.2);
		}
	}
}

@media screen and (max-width: 1560px) {
	.container.fury {
		.card {
			transform: translate(-50%, -50%) scale(.8);
		}
		.sideCard {
			transform: translateY(-50%) translateX(-5%) scale(.8);
		}
	}
}
@media screen and (max-width: 1360px) {
	.container.fury {
		.card {
			transform: translate(-50%, -50%) scale(.6);
		}
		.sideCard {
			transform: translateY(-50%) translateX(-5%) scale(.6);
		}
	}
}
@media screen and (max-width: 1080px) {
	.container.fury {
		.card {
			transform: translate(-50%, -50%) scale(.4);
		}
		.sideCard {
			transform: translateY(-50%) translateX(-5%) scale(.4);
		}
	}
}
@media screen and (max-width: 890px) {
	.container.fury {
		.sideCard {
			display: none;
		}
	}
}
@media screen and (max-width: 370px) {
	.container.fury {
		.card {
			transform: translate(-50%, -50%) scale(.35);
		}
	}
}

// Finish
.container.finish {

	.wrap {
		background-color: #f0966d;
	}

	.sideCard:last-child {
		right: 3.2%;
	}

	.sideCard__img {
		background-image: url('https://rawcdn.githack.com/Kerthin/cuphead-templateSait/31e6998cfc7775c5790f2fcd7bd40baccc963e7f/app/image/static/finish/kingSideBox.png');
	}
	.sideCard__title {
		font-family: 'Rounds';
		font-size: 45px;
		line-height: 55px;
	}

	.high {
		font-size: 53px;
		line-height: 53px;
	}
	.orange {
		color: #f0966d;
	}
	.blue {
		color: #7fcae2;
	}
	.purple {
		color: #c6a8ca;
	}

	.card {
		padding: 27px;
		width: 908px;
		height: 908px;
		background-color: #fbf2e4;

		.box {
			width: 100%;
			height: 100%;
			background-color: #000;

			.header,
			.main,
			.footer {
				position: relative;
			}
			.header,
			.footer {
				width: 100%;
				height: 65px;
			}
			.main {
				width: 100%;
				height: calc(100% - 130px);
				background-color: #7fcae2;
			}
		}
	}

	.sideBox {
		position: relative;
		float: left;
		width: 65px;
		height: 100%;
		background-color: #7fcae2;

		&__angle {
			border-top: 65px solid #000;
			border-right: 65px solid transparent;
		}
		&__square {
			position: absolute;
			top: 50%;
			left: 50%;
			transform: translateY(-50%) translateX(-50%);
			width: 38px;
			height: 38px;
			border: 2px solid;
			background-color: #fff;
		}
	}

	.sideBlock {
		position: relative;
		float: left;
		width: calc(100% - 130px);
		height: 100%;
		border: 5px solid;
		background: repeating-linear-gradient(125deg, #f0966d, #f0966d 30px, #000 30px, #000 58.5px);
		animation: animationGradientH 4s linear infinite;

		&__article {
			position: absolute;
			top: -5px;
			left: 50%;
			transform: translateX(-50%);
			width: 100px;
			height: calc(100% + 10px);
			border: 5px solid;
			background-color: #c6a8ca;

			.sideBlock__title {
				font-family: sans-serif;
				text-align: center;
				font-size: 60px;
				line-height: 60px;
			}
		}
	}

	.gradientBox {
		float: left;
		width: 65px;
		height: 100%;
		border: 5px solid;
		background: repeating-linear-gradient(125deg, #c6a8ca, #c6a8ca 15px, #000 15px, #000 34.1px);
		animation: animationGradient 4s linear infinite;

		&:first-child {
			margin-right: 10px;
		}
	}

	.presentBlock {
		position: relative;
		float: left;
		margin: 10px 10px 0 0;
		width: calc(100% - 150px);
		height: calc(100% - 20px);

		&__titleWrap {
			margin-bottom: 10px;
			width: 100%;
			height: 163px;
			background-color: #000;

			.presentBlock__commas {
				position: absolute;
				top: -10px;
				font-family: 'Swampy';
				font-size: 180px;
				line-height: 180px;
				color: #c6a8ca;

				&:first-child {
					left: 30px;
				}
				&:last-child {
					right: 30px;
				}
			}

			.presentBlock__title {
				position: absolute;
				top: 5px;
				left: 50%;
				transform: translateX(-50%);
				font-family: 'Rounds';
				font-size: 180px;
				line-height: 180px;
				color: #fbf2e4;
				letter-spacing: -15px;
			}
		}
	}

	.characterBlock {
		margin-bottom: 10px;
		width: 100%;
		height: 363px;

		&__side {
			float: left;
			width: 158px;
			height: 100%;

			&:first-child {
				margin-right: 10px;
			}

			.characterBlock__sideImg {
				width: 100%;
				border: 5px solid;
				background-size: contain;
				background-position: center;
				background-repeat: no-repeat;

				&:first-child {
					margin-bottom: 10px;
					height: 158px;
					background-color: #f0966d;
					background-image: url('https://rawcdn.githack.com/Kerthin/cuphead-templateSait/31e6998cfc7775c5790f2fcd7bd40baccc963e7f/app/image/static/finish/kingHead_151.png')
				}

				&:last-child {
					height: calc(100% - 168px);
					background-color: #fbf2e4;
					background-image: url('https://rawcdn.githack.com/Kerthin/cuphead-templateSait/31e6998cfc7775c5790f2fcd7bd40baccc963e7f/app/image/static/finish/fullKing_151.png')
				}
			}
		}

		&__img {
			margin-right: 10px;
			float: left;
			width: calc(100% - 336px);
			height: 100%;
			border: 5px solid;
			background-size: contain;
			background-position: center;
			background-repeat: no-repeat;
			background-image: url('https://rawcdn.githack.com/Kerthin/cuphead-templateSait/31e6998cfc7775c5790f2fcd7bd40baccc963e7f/app/image/gif/finish/king_clean2.gif');
			background-color: #c6a8ca;
		}
	}

	.characterInfo {
		width: 100%;
		height: 158px;

		.sideBox {
			position: relative;
			width: 158px;
			height: 100%;
			border: 5px solid;
			background-color: #f0966d;

			&:first-child {
				margin-right: 10px;
			}

			&__img {
				position: absolute;
				top: 55px;
				width: 100%;
				height: 100%;
				background-size: cover;
				background-position: -45px;
				background-repeat: no-repeat;
				background-image: url('https://rawcdn.githack.com/Kerthin/cuphead-templateSait/31e6998cfc7775c5790f2fcd7bd40baccc963e7f/app/image/static/finish/cuphead-king-dice-png-1.png');
				z-index: 2;
			}
		}

		.sideBlock {
			margin-right: 10px;
			width: calc(100% - 336px);
			height: 100%;
			background: #000;

			&__title {
				font-family: 'Rounds';
				text-align: center;
				font-size: 41px;
				line-height: 41px;
				color: #fbf2e4;
			}
		}
	}
}

@keyframes animationGradient {
	from {
		background-position: 0 0;
	}
	to {
		background-position: 0 714px;
	}
}

@keyframes animationGradientH {
	from {
		background-position: 0 0;
	}
	to {
		background-position: 714px 0;
	}
}

@media screen and (orientation: landscape) and (max-height: 938px) {
	.container.finish {
		.card {
			transform: translate(-50%, -50%) scale(.8);
		}
		.sideCard {
			transform: translateY(-50%) translateX(-5%) scale(.8);
		}
	}
}
@media screen and (orientation: landscape) and (max-height: 757px) {
	.container.finish {
		.card {
			transform: translate(-50%, -50%) scale(.6);
		}
		.sideCard {
			transform: translateY(-50%) translateX(-5%) scale(.6);
		}
	}
}
@media screen and (orientation: landscape) and (max-height: 574px) {
	.container.finish {
		.card {
			transform: translate(-50%, -50%) scale(.4);
		}
		.sideCard {
			transform: translateY(-50%) translateX(-5%) scale(.4);
		}
	}
}
@media screen and (orientation: landscape) and (max-height: 393px) {
	.container.finish {
		.card {
			transform: translate(-50%, -50%) scale(.2);
		}
		.sideCard {
			transform: translateY(-50%) translateX(-5%) scale(.2);
		}
	}
}

@media screen and (max-width: 1700px) {
	.container.finish {
		.card {
			transform: translate(-50%, -50%) scale(.8);
		}
		.sideCard {
			transform: translateY(-50%) translateX(-5%) scale(.8);
		}
	}
}
@media screen and (max-width: 1460px) {
	.container.finish {
		.card {
			transform: translate(-50%, -50%) scale(.6);
		}
		.sideCard {
			transform: translateY(-50%) translateX(-5%) scale(.6);
		}
	}
}
@media screen and (max-width: 1180px) {
	.container.finish {
		.card {
			transform: translate(-50%, -50%) scale(.4);
		}
		.sideCard {
			transform: translateY(-50%) translateX(-5%) scale(.4);
		}
	}
}
@media screen and (max-width: 900px) {
	.container.finish {
		.sideCard {
			display: none;
		}
	}
}
@media screen and (max-width: 390px) {
	.container.finish {
		.card {
			transform: translate(-50%, -50%) scale(.35);
		}
	}
}
@media screen and (max-width: 330px) {
	.container.finish {
		.card {
			transform: translate(-50%, -50%) scale(.3);
		}
	}
}

// Casino
.container.casino {
	height: 100%;
}
.casinoFrame {
	width: 100%;
	height: 100%;
}

/*____________________________________________________________
# Social links
____________________________________________________________*/
.social {
	position: fixed;
	bottom: 0;
	left: 30px;
}
.socialList {
	list-style: none;
	
	&:after {
		content: '';
		display: block;
		margin: 0 auto;
		width: 1px;
		height: 40px;
		background: #749064;
	}
}
.socialList__item {
	margin-bottom: 10px;
	width: 20px;
	height: 20px;
	transition: transform .2s;
	
	&:hover {
		transform: translateY(-3px);
		
		.socialList__icon {
			stroke: #7dcbd8;
		}
	}
}

.socialList__icon {
	fill: none;
	stroke: #749064;
}
              
            
!

JS

              
                "use strict";

var burgerBtn = document.querySelector(".burger__input");
var menuBlock = document.querySelector(".menu");
let containerVar = document.querySelector('.canvas');
let menuItemVar = document.getElementsByClassName("menu__item");

burgerBtn.onclick = function() {
	if (menuBlock.classList.contains('popup') === false) {
		this.classList.add('checked');
		menuBlock.classList.add('popup');
		containerVar.classList.add('popup');
	} else {
		this.classList.remove('checked');
		menuBlock.classList.remove('popup');
		containerVar.classList.remove('popup');
	}
}

for(let el of menuItemVar) {
	el.addEventListener("click", function() {
		let claas = el.classList[1];
		containerVar.setAttribute('class',`${containerVar.classList[0]} ${claas}`);
		let x = document.getElementsByClassName("menu__item");
		Array.prototype.forEach.call(x, function(el) {
			el.classList.remove("active");
			menuBlock.classList.remove('popup');
			burgerBtn.classList.remove('checked');
		});

		this.classList.add('active');
	});
}
              
            
!
999px

Console