@import url(https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.6.3/css/font-awesome.css);
 @import url('https://fonts.googleapis.com/css?family=Titan+One');
 body {
	 background: linear-gradient(to top, #7b00e0, #ff006a);
	 margin: 0;
	 height: 100%;
	 overflow: hidden;
}
 .container {
	 width: 100%;
	 height: 100vh;
	 margin: 0 auto;
	 overflow: hidden;
}
 .menu-container {
	 background-color: #ffc901;
	 border-radius: 100%;
	 color: white;
	 cursor: pointer;
	 position: absolute;
	 width: 300px;
	 height: 300px;
	 left: -120px;
	 top: -120px;
	 transition: all 0.3s;
}
 .menu-container.full-menu {
	 border-radius: 0;
	 padding: 0 !important;
	 position: aboslute;
	 width: 100%;
	 height: 100%;
	 left: 0;
	 top: 0;
	 transition: all 0.3s;
}
 .full-menu .menu {
	 top: 40px;
	 left: 40px;
}
 .menu {
	 color: white;
	 font-size: 3.5em;
	 position: absolute;
	 top: 160px;
	 left: 160px;
	 z-index: 100;
	 transition: all 0.3s;
}
 .menu i {
	 opacity: 0.7;
	 transform: scale(1);
	 transition: all 0.3s;
}
 .menu i:hover {
	 opacity: 1;
	 transform: scale(1.2);
	 transition: all 0.3s;
}
 .overlay {
	 position: fixed;
	 top: 0;
	 left: 0;
	 width: 100%;
	 height: 0%;
	 opacity: 0;
	 visibility: hidden;
	 overflow: hidden;
}
 .overlay.open {
	 opacity: 0.9;
	 visibility: visible;
	 height: 100%;
}
 .overlay.open li {
	 animation: fadeInRight 0.5s ease forwards;
	 animation-delay: 0.35s;
}
 .overlay.open li:nth-of-type(2) {
	 animation-delay: 0.4s;
}
 .overlay.open li:nth-of-type(3) {
	 animation-delay: 0.45s;
}
 .overlay.open li:nth-of-type(4) {
	 animation-delay: 0.5s;
}
 .overlay nav {
	 font-size: 3.2em;
	 font-family: 'Titan One', san-serif;
	 position: relative;
	 height: 70%;
	 top: 50%;
	 transform: translateY(-50%);
	 font-weight: 400;
	 text-align: center;
}
 .overlay ul {
	 list-style: none;
	 padding: 0;
	 margin: 0 auto;
	 display: inline-block;
	 position: relative;
	 height: 100%;
}
 .overlay ul li {
	 display: block;
	 height: 25%;
	 height: calc(100% / 4);
	 min-height: 50px;
	 position: relative;
	 opacity: 0;
}
 .overlay ul li a {
	 display: block;
	 position: relative;
	 color: #fff;
	 text-decoration: none;
	 overflow: hidden;
	 opacity: 0.7;
	 transform: scale(1);
	 transition: all 0.3s;
}
 .overlay ul li a:hover, .overlay ul li a:focus, .overlay ul li a:active {
	 opacity: 1;
	 transform: scale(1.2);
	 transition: all 0.3s;
}
 @keyframes fadeInRight {
	 0% {
		 opacity: 0;
		 left: 20%;
	}
	 100% {
		 opacity: 1;
		 left: 0;
	}
}
 h1 {
	 font-size: 5em;
	 font-family: 'Titan One', san-serif;
	 background-color: rgba(255, 0, 106, 0.4);
	 border-radius: 100%;
	 box-shadow: 0 0 2em 1em rgba(255, 0, 106, 0.4);
	 color: white;
	 margin: 30vh auto;
	 position: relative;
	 text-align: center;
	 text-shadow: 0 8px 0 rgba(123, 0, 224, 0.4);
	 transform: rotate(-12deg);
	 width: 800px;
	 height: auto;
	 z-index: -1;
}
 h1 span {
	 color: #ffc901;
}
 .blob {
	 animation: blobby 4s infinite;
}
 .blob2 {
	 animation: blobby2 6s infinite;
}
 @keyframes blobby {
	 0% {
		 transform: scale(1);
	}
	 50% {
		 transform: scale(1.08);
	}
	 100% {
		 transform: scale(1);
	}
}
 @keyframes blobby2 {
	 0% {
		 transform: scale(1);
	}
	 50% {
		 transform: scale(1.18);
	}
	 100% {
		 transform: scale(1);
	}
}
 svg {
	 position: absolute;
	 top: 0;
}
 #svg-right {
	 display: block;
	 fill: #7b00e0;
	 opacity: 0.5;
	 right: 0;
	 width: 60%;
	 z-index: -10;
}
 #svg-left {
	 fill: #ff006a;
	 margin: 0;
	 width: 60%;
	 z-index: -10;
}
 @media all and (max-width: 980px) {
	 h1 {
		 font-size: 3em;
		 font-family: 'Titan One', san-serif;
	}
}
 @media all and (max-width: 480px) {
	 h1 {
		 font-size: 2em;
		 font-family: 'Titan One', san-serif;
	}
}