@import url("https://fonts.googleapis.com/css?family=Catamaran:300,400,500,600,700");
body {
  padding: 0;
  margin: 0;
}
$cap-fallback: calc(1100% + 0.35vw);
#wrapper-canvas {
  display: block;
  width: 100%;
  height: 100%;
  background: #FFFFFF;
}

.more-pens {
  position: fixed;
  right: 20px;
  top: 20px;
  z-index: 10;
  font-family: "Catamaran", sans-serif;
  font-size: 12px;
}

a.white-mode:link, a.white-mode:visited, a.white-mode:active {
  font-family: "Catamaran", sans-serif;
  font-size: 12px;
  text-decoration: none;
  background: #212121;
  padding: 8px 18px;
  color: #f7f7f7;
  border-radius: 20px;
  margin: 0 4px;
}
a.white-mode--highlight:link, a.white-mode--highlight:visited, a.white-mode--highlight:active {
  background: #293FE9;
}
a.white-mode:hover {
  background: #edf3f8;
  color: #212121;
}

body {
  margin: 0;
  padding: 0;
  overflow: hidden;
  width: 100%;
  height: 100%;
}

.content {
  -webkit-transform: translateY(-50%);
  -moz-transform: translateY(-50%);
  -ms-transform: translateY(-50%);
  -o-transform: translateY(-50%);
  transform: translateY(-50%);
  z-index: 10;
  position: absolute;
  margin-left: auto;
  margin-right: auto;
  top: 50%;
  padding: 0 90px;
  text-align: center;
  pointer-events: none;
}

.title {
  font-family: "Catamaran", sans-serif;
  pointer-events: none;
  font-weight: 700;
  font-size: 55px;
  line-height: 1.2;
  margin-top: 14px;
  color: #212121;
  display: block;
  pointer-events: none;
}
.title span {
  color: #EC456C;
}

.subtitle {
  font-family: 'Yatra One', cursive;
  pointer-events: none;
  font-weight: 300;
  font-size: 30px;
  line-height: 1.2;
  margin-top: 0;
  color: #212121;
  display: block;
  pointer-events: none;
}
.subtitle span {
  color: #EC456C;
}

.button {
  -webkit-transition: all 0.3s cubic-bezier(0.69, 0, 0.185, 1);
  transition: all 0.3s cubic-bezier(0.69, 0, 0.185, 1);
  border-radius: 30px;
  font-family: "Catamaran", sans-serif;
  font-size: 21px;
  font-style: normal;
  font-weight: 300;
  text-align: center;
  text-rendering: optimizeLegibility;
  padding: 18px 60px;
  line-height: 1;
  color: #90e5fb;
  margin: 20px auto 0;
  display: inline-block;
  background: #222222;
  text-decoration: none;
  box-shadow: 0 0 30px #90e5fb;
}
.titlet {
  font-size: 6rem;
  font-family: "Knewave", cursive;
  text-transform: uppercase;
  color: WHITE;
  -webkit-transform: skew(-5deg, -5deg) rotate(5deg);
  transform: skew(-5deg, -5deg) rotate(5deg);
  -webkit-transform-origin: center center;
  transform-origin: center center;
  text-shadow: 1px 1px gray, 2px 2px gray, 3px 3px lightgray, 4px 4px blue,
    5px 5px lime, 6px 6px gray, 7px 7px purple, 8px 8px pink, 9px 9px blue,
    10px 10px green, 11px 11px 15px rgba(0, 0, 0, 0.5);
}
.title2 {
  font-size: 2rem;
  font-family: "Knewave", cursive;
  text-transform: uppercase;
  color: #f2395a;
  -webkit-transform: skew(-5deg, -5deg) rotate(5deg);
  transform: skew(-5deg, -5deg) rotate(5deg);
  -webkit-transform-origin: center center;
  transform-origin: center center;
  text-shadow: 1px 1px #d10e31, 2px 2px #d10e31, 3px 3px #d10e31,
    4px 4px #d10e31, 5px 5px #d10e31, 6px 6px #d10e31, 7px 7px #d10e31,
    8px 8px #890920, 9px 9px #890920, 10px 10px #890920,
    11px 11px 15px rgba(0, 0, 0, 0.5);
}
.Bottom {
  font-family: "Knewave", cursive;
  color: white;
}

.banner {
	position: relative;
	z-index: 1;
	margin: 80px auto;
	width: 330px;
}

.banner .line {
	margin: 0 0 10px;
	width: 100%;
	height: 78px;
	box-shadow: 10px 10px 10px rgba(0,0,0,0.05);
	text-align: center;
	text-transform: uppercase;
	font-size: 3em;
	line-height: 78px;
	transform: skew(0, -15deg);
}

.banner .line:after,
.banner .line:first-child:before {
	position: absolute;
	top: 44px;
	left: 0;
	z-index: -1;
	display: block;
	width: 330px;
	height: 78px;
	border-radius: 4px;
	background: rgba(180,180,180,0.8);
	content: '';
	transform: skew(0, 15deg);
}

.banner .line:first-child:before {
	top: -10px;
	right: 0;
	left: auto;
}

.banner .line:first-child:before,
.banner .line:last-child:after {
	width: 0;
	height: 0;
	border-width: 38px;
	border-style: solid;
	border-color: rgba(180,180,180,0.8) rgba(180,180,180,0.8) transparent transparent;
	background: transparent;
}

.banner .line:last-child:after {
	top: 12px;
	border-color: transparent transparent rgba(180,180,180,0.8) rgba(180,180,180,0.8);
}

.banner span {
	display: block;
	width: 100%;
	height: 100%;
	border-radius: 4px;
	background: rgba(255,255,255,0.9);
	color: #666;
	text-shadow: 1px 1px 0 #444;
}