body {
  font-family: helvetica, sans-serif;
  margin: 0;
  padding: 0;
  border: 0;
  background-color: #231f20;
}

h1, h2, h3, h4, h5, p {
	margin: 0;
}

@font-face {
	font-family: dm-sans;
	src: url(../fonts/DMSans-Bold.ttf);
	font-weight: bold;
}

@font-face {
	font-family: dm-sans;
	src: url(../fonts/DMSans-Regular.ttf);
	font-weight: normal;
}


@media (min-width: 300px) and (max-width: 1024px)
{

	#root-content-wrapper{
		width: 100vw;
	}

	.hero {
		position: relative;
		width: 80%;
		vertical-align: middle;
		padding-left: 10%;
		padding-top:50px;
		padding-bottom: 50px;
	}

	.hero-textbox {
		width:100%;
	}

	.hero-textbox h1 {
		font-size: 28pt;
	}

	.hero-textbox p {
		font-size: 16pt;
		padding-top:10px;
	}

	.section-wrapper {
		width:100%;
		padding-bottom: 50px;
		overflow: hidden;
	}

	.top-5-ranking {
		width:100%;
		background-color: dimgray;
		border: 2px solid dimgray;
	}

	.top-5-ranking-item {
		padding-left: 20px;
		padding-top: 15px;
		padding-bottom: 15px;
		background-color: #f1f2f2;
		border-bottom: 1px solid lightgray;
	}

	.top-5-ranking-item-rank {
		display: inline-block;
	}

	.top-5-ranking-item-title {
		display: inline-block;
		width:40%;
	}

	.top-5-ranking-item-album {
		padding-right: 10px;
	}

	.top-5-ranking-item-according-to {
		display: inline-block;
		color: lightgray;
		padding-top:5px;
	}

	.top-5-ranking-item-according-to p {
		display: inline-block;
		padding-right: 5px;
		font-size: 11pt;
	}

	.top-5-ranking-item-according-to:hover {
		color: dimgray;
	}

	.top-5-ranking-item-votes {
		display: inline-block;
		float: right;
		padding-right: 20px;
	}

	.top-5-ranking-item-votes h4 {
		display: inline-block;
	}

	.top-5-ranking-item-votes p {
		display: inline-block;
	}

	.link-full-ranking {
		padding-top: 10px;
		padding-bottom: 10px;
	}

	.link-full-ranking p {
		color: #f1f2f2;
		text-align: center;
		font-weight: bold;
	}

	.game-section {
		width: 100%;
		-moz-user-select: none;
		-webkit-user-select: none;
		-ms-user-select:none;
		user-select:none;
		-o-user-select:none;
	}

	.game-section-textbox h2 {
		text-align: center;
	}

	.game-wrapper {
		padding-top:30px;
		width:100%
	}

	.game-title h3 {
		text-align: center;
		padding-bottom:20px;
	}

	.optionA {
		width:calc(49% - 60px);
		background-color: aquamarine;
		display: inline-block;
		padding:30px;
	}

	.optionB {
		width:calc(49% - 60px);
		background-color: aquamarine;
		float: right;
		padding:30px;
	}

	.game-song-info-album-cover {
		width:100px;
		height:100px;
		background-color: white;
		display: inline-block;
		vertical-align: top;
	}

	.game-song-info-album-cover img {
		width: 100%;
	}

	.game-song-info {
		display: inline-block;
		vertical-align: top;
		padding-top:5px;
		height: 145px;
	}

	.game-song-info-title {
	}

	.game-song-info-album {
	}

	.game-song-info-title p {
		font-weight: bold;
		font-size: 20pt;
	}

	.faq-title {
		padding-left: 10%;
	}

	.faq-item {
		width:calc(49% - 60px);
		padding-top: 30px;
		padding-bottom: 30px;
		display: inline-block;
		padding-left: 10%;
	}

}

@media (min-width: 1024px)
{

	#root-content-wrapper{
		width: 100vw;
	}

	.hero {
		position: relative;
		width: 100%;
		padding-top:50px;
		display: inline-block;
	}

	.hero-textbox {
		width:40%;
		display: inline-block;
		vertical-align: top;
		padding-top: 50px;
	}

	.hero-textbox h1 {
		font-family: dm-sans;
		font-weight: bold;
		font-size: 55pt;
		letter-spacing: -3pt;
		line-height: 0.9;
		padding-bottom: 10px;
		color: #f1f2f2;
		padding-left: 100px;
	}

	.hero-textbox p {
		font-family: dm-sans;
		font-size: 17pt;
		letter-spacing: -0.3pt;
		line-height: 1.1;
	}

	.hero-top-song {
		display: inline-block;
		float: right;
		vertical-align: top;
		width:60%;
		margin-top:100px;
	}

	.hero-top-song-details {
		float: left;
		text-align: left;
	}

	.hero-top-song-details h2 {
		padding-bottom: 10px;
		font-family: dm-sans;
		letter-spacing: -0.6pt;
		color: #f1f2f2;
	}

	.hero-top-song-album-cover {
		display: inline-block;
		float: left;
		width:45%;
	}

	.hero-top-song-album-cover img {
		width:100%;
	}

	.hero-top-song-details-textbox {
		display: inline-block;
		vertical-align: top;
		width:52%;
		float: right;
	}

	.hero-top-song-details-textbox h3 {
		font-family: dm-sans;
		font-size: 45pt;
		letter-spacing: -2.5pt;
		line-height: 0.9;
		color: white;
		width:80%;
		margin-left: -150px;
		margin-top:50px;
		padding-bottom:30px;
		text-shadow: 0px 0px 40px black;
	}

	.hero-top-song-details-textbox h4 {
		font-family: dm-sans;
		font-size: 24pt;
		letter-spacing: -0.8pt;
		color: #f1f2f2;
	}

	.hero-top-song-according-to {

	}

	.hero-top-song-according-to img {
		width:18px;
		display: inline-block;
		padding-top: 4px;
		padding-right: 6px;
		float: left;
	}

	.hero-top-song-according-to p {
		display: inline-block;
		padding-right: 4px;
		font-family: dm-sans;
		font-weight: bold;
		letter-spacing: -0.2pt;
		color: #f1f2f2;
		font-size: 15pt;
	}

	.hero-top-song-votes {

	}

	.hero-top-song-votes h4 {
		font-size: 16pt;
		letter-spacing: -0.4pt;
		font-family: dm-sans;
		font-size: 26pt;
		display: inline-block;
		color: #f8bf0d;
	}

	.hero-top-song-votes p {
		font-family: dm-sans;
		color: #f8bf0d;
		font-size: 20pt;
		display: inline-block;
		letter-spacing: -0.4pt;
	}

	.section-wrapper {
		width:90%;
		left:0;
		right:0;
		margin: auto;
		padding-bottom: 50px;
		padding-top: 50px;
	}

	.top-5-ranking {
		width:100%;
		padding-top:75px;
	}

	.top-5-ranking-item {
		width:16%;
		display: inline-block;
		vertical-align: top;
		padding-right: calc(4% - 4px);
	}

	.top-5-ranking-item-rank {
	}

	.top-5-ranking-item-rank p {
		font-family: dm-sans;
		color: #4d4d4f;
		font-weight: bold;
		font-size: 120pt;
		margin-left: -40px;
	}

	.top-5-ranking-item-title {
		width:100%;
		margin-top:-100px;
	}

	.top-5-ranking-item-title h3 {
		font-family: dm-sans;
		letter-spacing: -0.9pt;
		line-height: 0.9;
		font-size: 34pt;
		color: #f1f2f2;
		display: inline-block;
	}

	.top-5-ranking-item-album {
		position: relative;
		width:100%;
	}

	.top-5-ranking-item-album h4 {
		color: #f1f2f2;
		font-family: dm-sans;
		font-size: 22pt;
		padding-top:5px;
		text-align: right;
		letter-spacing: -0.4pt;
		line-height: 1;
	}

	.top-5-ranking-item-according-to {
		width:100%;
		text-align: right;
	}

	.top-5-ranking-item-according-to img {
		width:18px;
		display: inline-block;
		position: relative;
	}

	.top-5-ranking-item-according-to p {
		display: inline-block;
		padding-right: 4px;
		font-family: dm-sans;
		font-weight: bold;
		letter-spacing: -0.2pt;
		color: #f1f2f2;
		font-size: 15pt;
		line-height: 1;
		position: relative;
		top:-1px;
		padding-left: 2px;
	}

	.top-5-ranking-item-votes {
		float: right;
	}

	.top-5-ranking-item-votes h4 {
		display: inline-block;
		color: #f8bf0d;
		font-family: dm-sans;
		font-size: 22pt;
		line-height: 1;
	}

	.top-5-ranking-item-votes p {
		display: inline-block;
		color: #f8bf0d;
		font-family: dm-sans;
		font-size: 18pt;
	}

	.link-full-ranking {
		padding-top: 50px;
		padding-bottom: 10px;
	}

	.link-full-ranking p {
		color: #f1f2f2;
		text-align: right;
		font-weight: bold;
		font-family: dm-sans;
		font-weight: bold;
		font-size: 30pt;
		letter-spacing: -1pt;
		width:425px;
		float: right;
	}

	.link-full-ranking p:hover {
		color: #f8bf0d;
	}

	.game-section {
		width: 100%;
		height: 258px;
		-moz-user-select: none;
		-webkit-user-select: none;
		-ms-user-select:none;
		user-select:none;
		-o-user-select:none;
		padding-top:100px;
		padding-bottom:150px;
	}

	.game-section-textbox h2 {
		font-family: dm-sans;
		font-size: 45pt;
		color: #f1f2f2;
		letter-spacing: -2pt;
	}

	.game-wrapper {
		padding-top:50px;
		width:80%;
		left:0;
		right:0;
		margin: auto;
	}

	.game-title h3 {
		text-align: center;
		padding-bottom:20px;
		font-family: dm-sans;
		font-size: 30pt;
		color: #f1f2f2;
		letter-spacing: -0.6pt;
	}

	.optionA {
		width:49%;
		display: inline-block;
		border-radius: 30px;
		box-shadow: 0px 0px 20px black;
		position: relative;
		overflow: hidden;
    background-color: rgba(248, 191, 13, 0.5);
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;
    background-blend-mode: multiply;
	}

	.optionB {
		width:49%;
		display: inline-block;
		border-radius: 30px;
		box-shadow: 0px 0px 20px black;
		position: relative;
		overflow: hidden;
		float: right;
    background-color: rgba(248, 191, 13, 0.5);
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;
    background-blend-mode: multiply;
	}

	.optionA img, .optionB img {
		width:100%;
		position: absolute;
	}

	@keyframes game-button-hover-pop {
		0% {transform: scale(1);}
		25% {transform: scale(0.98);}
		50% {transform: scale(1.05);}
		100% {transform: scale(1.03);}
	}

	.optionA:hover, .optionB:hover {
		animation: game-button-hover-pop 500ms ease-in-out;
		transform: scale(1.03);
	}

	.game-song-info {
		position: relative;
		display: inline-block;
		vertical-align: top;
		width: 100%;
		padding-left:30px;
		padding-right:30px;
		padding-top:100px;
		padding-bottom:100px;
	}

	.game-song-info-title {
		padding-left: 20px;
		width:80%;
	}

	.game-song-info-title p {
		font-family: dm-sans;
		font-weight: bold;
		letter-spacing: -1pt;
		line-height: 1;
		font-size: 30pt;
	}

	.game-song-info-album {
		padding-top:5px;
		padding-left: 20px;
	}

	.game-song-info-album p {
		font-family: dm-sans;
		font-weight: bold;
		letter-spacing: -1pt;
		line-height: 1;
		font-size: 22pt;
	}

	.faq-section {
		width: 100%;
		padding-top: 50px;
	}

	.faq-section h2 {
		font-family: dm-sans;
		color: #f1f2f2;
		font-size: 45pt;
		letter-spacing: -2pt;
		padding-bottom: 50px;
	}

	.faq-item {
		width:calc(31% - 60px);
		padding-top: 30px;
		padding-bottom: 30px;
		display: inline-block;
		vertical-align: top;
		margin-right: 2%;
	}

	.faq-item-textbox {

	}

	.faq-item-textbox h3 {
		color: #f1f2f2;
		font-family: dm-sans;
		font-size: 22pt;
		letter-spacing: -0.6pt;
		line-height: 1;
		width: 85%;
	}

	.faq-item-textbox p {
		color: #f1f2f2;
		font-family: dm-sans;
		font-size: 15pt;
		line-height: 1.2;
		padding-top:15px;
	}

	.footer {
		width: 90vw;
		padding-left: 5%;
		padding-right: 5%;
	}

	.footer-textbox {
		float: right;
		padding-bottom: 150px;
	}

	.footer-textbox h2 {
		font-family: dm-sans;
		font-size: 30pt;
		letter-spacing: -1pt;
		padding-top:100px;
		color: #f1f2f2;
		width:450px;
		text-align: right;
		line-height: 1;
		padding-bottom: 10px;
	}

	.footer-textbox h3 {
		font-family: dm-sans;
		color: #f1f2f2;
		font-size: 18pt;
		letter-spacing: -0.6pt;
		text-align: right;
		line-height: 1.2;
	}

}