.main-area {max-width: 100vw;max-height: 100vh;}

@media (min-width: 600px) {
	.main-area {margin: 30px;height: calc(100vh - 60px);box-shadow: 2px 5px 30px rgba(0,0,0,.3);}
}

.logo--wrapper {width: 100px;max-width: 30vw;margin: -100px auto 30px;text-align: center;position: relative;}
.logo {display: inline-block;animation: bouncing 5s cubic-bezier(0.54, 0.07, 0.56, 1.01) infinite alternate, pulse 600ms linear infinite alternate;}

@keyframes bouncing {
	0% 		{transform: translateY(-10px);}
	50% 	{transform: translateY(10px);}
}

@keyframes pulse {
	0% {
		filter: brightness(1);
		-webkit-filter: brightness(1);
	}
	100% {
		filter: brightness(.95);
		-webkit-filter: brightness(.95);
	}
}

.logo--wrapper:after {content: "";box-shadow: 0px 17px 18px 1px #000;width: 40px;height: 0px;position: absolute;border-radius: 100%;left: 0;right: 0;margin: auto;bottom: 0;animation: shadow-pulsing 5s cubic-bezier(0.54, 0.07, 0.56, 1.01) infinite alternate;
}

@keyframes shadow-pulsing {
	0% 		{box-shadow: 0px 17px 18px 1px rgba(0, 0, 0, 0.48); width: 30px;}
	50% 	{box-shadow: 0px 17px 18px 1px rgb(0, 0, 0); width: 45px;}
}

h1 {word-break: break-all;}

.main-area .social-btn > li > a:after,
.main-area .notify-btn {border-color: #decf2c;background-color: #dbcd30;}
.main-area .notify-btn b {font-weight: 500;}

a:focus, a:active, a:hover, button:focus, button:active, button:hover, a b.light-color:hover {
	color: #decf2c;
}