@media screen and (min-width: 600px) {
	body{
		margin: 0;
		color: #000000 !important;
	}
	body::-webkit-scrollbar{
		display: none;
	}
	main{
		width: 100vw;
		padding: 0;
		margin: 0;
		display: flex;
		flex-direction: column;
		align-items: center;
		animation: opacity 2s backwards;
		padding-bottom: 5vw;
	}
	main > h1{
		font-size: 3vw;
		line-height: 4.5vw;
		text-align: center;
		padding: 6vw 0 3vw 0;
		width: 100vw;
		color: #000;
	}
	main > h1 > span{
		font-size: 4.5vw;
		color: #000;
	}
	@keyframes opacity{
		0%{opacity: 0;}
		100%{opacity: 1;}
	}
	.point{
		width: 1vw;
		height: 1vw;
		border-radius: 1vw;
		background-color: #bd7d57;
		position: relative;
	}
	.button{
		box-shadow: .3vw .3vw .8vw #a1a1a1, 
		            -.3vw -.3vw .8vw #fefefe;
		transition: all .1s;
		cursor: pointer;
		user-select: none;
	}
	.button:active{
		box-shadow: .15vw .15vw .4vw #a1a1a1, 
		            -.15vw -.15vw .4vw #fefefe;
	}
	.button-2{
		box-shadow: .15vw .15vw .4vw #a1a1a1, 
		            -.15vw -.15vw .4vw #fefefe;
		transition: all .1s;
		cursor: pointer;
		user-select: none;
	}
	.button-2:active{
		box-shadow: .08vw .08vw .2vw #a1a1a1, 
		            -.08vw -.08vw .2vw #fefefe;
	}
	.invisible{
		opacity: 0;
		pointer-events: none;
	}
	.input{
		box-shadow: inset .3vw .3vw .8vw #a1a1a1, 
            		inset -.3vw -.3vw .8vw #fefefe;
	}




	.calc-form-0{
		width: 85vw;
		position: relative;
		border-radius: 3vw;
		transition: all .3s;
		margin: 2vw 0;
	}
	.calc-form-0 > h2{
		width: 85vw;
		text-align: center;
		font-size: 3vw;
		margin: 1vw 0;
	}
	.calc-form{
		width: 85vw;
		display: flex;
		justify-content: center;
		flex-wrap: wrap;
		align-items: flex-start;
		align-content: flex-start;
	}
	.calc-form > div{
		width: 25vw;
		margin: 1vw 0;
		display: flex;
		justify-content: center;
		flex-wrap: wrap;
		align-items: flex-start;
		align-content: flex-start;
	}
	.calc-form > img{
		width: 2.5vw;
		margin: 0 .5vw;
		margin-top: 5.25vw;
	}
	.calc-form label{
		width: 25vw;
		font-size: 1.5vw;
		line-height: 3vw;
		font-weight: bold;
		text-align: center;
	}
	.form-input{
		width: 25vw;
		height: 4vw;
		margin: 0 1vw;
		border: none;
		border-radius: 4vw;
		font-size: 1.5vw;
		text-align: center;
		line-height: 4vw;
		font-weight: bold;
		color: #000;
		background-color: transparent;
	}



	
	.calc-form-2{
		width: 85vw;
		display: flex;
		justify-content: center;
		flex-wrap: wrap;
		align-items: flex-start;
		align-content: flex-start;
	}
	.calc-form-2 > img{
		width: 2.5vw;
		margin: 0 1.25vw;
		margin-top: 3vw;
	}
	.HRC-1, .HRB-1, .HV-1, .HBS-1{
		width: 16vw;
		height: 4.5vw;
		margin: 1.5vw 0;
		border-radius: 4.5vw;
		line-height: 4.5vw;
		font-size: 1.8vw;
		text-align: center;
		font-weight: bold;
		color: #000;
	}







	#bookmark{
		position: fixed;
		z-index: 300;
		width: 30vw;
		height: 15vw;
		left: 65vw;
		top: 3vw;
		opacity: 0;
		pointer-events: none;
		transition: all .3s;
	}
	.bookmark{
		display: none;
	}
	#bookmark::before{
		content: "";
		width: 2vw;
		height: 2vw;
		position: absolute;
		left: 14vw;
		top: -1vw;
		transform: rotate(45deg);
		background: linear-gradient(45deg, #8653ea 0%, #7053ea 20%, #535aea 40%, #5385ea 60%, #4fabde 80%, #50aadc 100%);
	}
	#bookmark-des{
		width: 30vw;
		height: 10vw;
		position: relative;
		z-index: 1;
		border-radius: 1vw;
		display: flex;
		justify-content: center;
		align-items: center;
		flex-direction: column;
		background-color: #bd7d57;
	}
	#bookmark-des > div{
		font-weight: bold;
		color: #fff;
	}
	#bookmark-des > div:nth-child(1){
		font-size: 1.5vw;
		line-height: 2vw;
	}
	#bookmark-des > div:nth-child(2){
		font-size: 3vw;
		line-height: 3.5vw;
	}


	#hardness-choose{
		width: 90vw;
		height: calc(100vh - 14vw);
		position: fixed;
		left: 5vw;
		top: 9vw;
		background-color: #f6f6f6;
		box-shadow: .2vw .2vw 2vw #666;
		border-radius: 5vw;
		z-index: 50;
		transition: all .5s;
	}
	#hardness-choose > div{
		width: 90vw;
		height: calc(100vh - 14vw);
		position: absolute;
		left: 0;
		top: 0;
		display: flex;
		flex-wrap: wrap;
		justify-content: center;
		align-items: center;
		align-content: center;
	}
	#hardness-choose > div > p{
		width: 90vw;
		margin: 0 0 2vw 0;
		font-size: 5vw;
		line-height: 5vw;
		text-align: center;
		font-weight: bold;
		color: #000;
	}
	#hardness-choose > div > div{
		width: 6vw;
		height: 3vw;
		margin: .5vw;
		border-radius: 3vw;
		line-height: 3vw;
		font-size: 1.3vw;
		text-align: center;
		font-weight: bold;
		color: #000;
		background-color: #f6f6f6;
		cursor: pointer;
	}

}




















@media screen and (max-width: 600px) {
	body{
		margin: 0;
		color: #000000 !important;
	}
	body::-webkit-scrollbar{
		display: none;
	}
	main{
		width: 100vw;
		padding: 0;
		margin: 0;
		display: flex;
		flex-direction: column;
		align-items: center;
		animation: opacity 2s backwards;
		padding-bottom: 5vw;
	}
	main > h1{
		font-size: 6vw;
		line-height: 8vw;
		text-align: center;
		padding: 25vw 2.5vw 9vw 2.5vw;
		width: 95vw;
		color: #000;
	}
	main > h1 > span{
		font-size: 9vw;
		line-height: 9vw;
		color: #999;
	}
	@keyframes opacity{
		0%{opacity: 0;}
		100%{opacity: 1;}
	}
	.point{
		width: 3vw;
		height: 3vw;
		border-radius: 3vw;
		background-color: #bd7d57;
		position: relative;
	}
	#bookmark{
		display: none;
	}
	.button{
		box-shadow: .6vw .6vw 1.6vw #a1a1a1, 
		            -.6vw -.6vw 1.6vw #fefefe;
		transition: all .1s;
		cursor: pointer;
	}
	.button:active{
		box-shadow: .3vw .3vw .8vw #a1a1a1, 
		            -.3vw -.3vw .8vw #fefefe;
	}
	.button-2{
		box-shadow: .3vw .3vw .8vw #a1a1a1, 
		            -.3vw -.3vw .8vw #fefefe;
		transition: all .1s;
		cursor: pointer;
		user-select: none;
	}
	.button-2:active{
		box-shadow: .16vw .16vw .4vw #a1a1a1, 
		            -.16vw -.16vw .4vw #fefefe;
	}
	.invisible{
		opacity: 0;
		pointer-events: none;
	}
	.input{
		box-shadow: inset .6vw .6vw 1.6vw #a1a1a1, 
            		inset -.6vw -.6vw 1.6vw #fefefe;
	}




	.calc-form-0{
		width: 95vw;
		position: relative;
		border-radius: 3vw;
		transition: all .3s;
		margin: 2vw 0;
	}
	.calc-form-0 > h2{
		width: 95vw;
		text-align: center;
		font-size: 6vw;
		margin: 3vw 0;
	}
	.calc-form{
		width: 95vw;
		display: flex;
		flex-direction: column;
		margin: 10vw 0;
	}
	.calc-form > div{
		width: 85vw;
		margin: 0 5vw;
		display: flex;
		flex-wrap: wrap;
	}
	.calc-form > img{
		width: 7.5vw;
		margin-left: 10vw;
		transform: rotate(90deg);
	}
	.calc-form label{
		width: 10vw;
		height: 12vw;
		font-size: 4.5vw;
		line-height: 12vw;
		font-weight: bold;
		text-align: right;
		margin: 0 5vw 0 10vw;
	}
	.form-input{
		width: 55vw;
		height: 12vw;
		margin: 0;
		border: none;
		border-radius: 12vw;
		font-size: 4.5vw;
		text-align: center;
		line-height: 12vw;
		font-weight: bold;
		color: #000;
		background-color: transparent;
	}



	
	.calc-form-2{
		width: 95vw;
		display: flex;
		flex-direction: column;
		margin: 10vw 0;
	}
	.calc-form-2 > img{
		width: 7.5vw;
		margin-left: 10vw;
		transform: rotate(90deg);
	}
	.HRC-1, .HRB-1, .HV-1, .HBS-1{
		width: 55vw;
		height: 13.5vw;
		margin-left: 22.5vw;
		border-radius: 13.5vw;
		line-height: 13.5vw;
		font-size: 5.4vw;
		text-align: center;
		font-weight: bold;
		color: #000;
	}






	#hardness-choose{
		width: 90vw;
		height: calc(100vh - 23vw);
		position: fixed;
		left: 5vw;
		top: 17vw;
		background-color: #f6f6f6;
		box-shadow: .2vw .2vw 2vw #666;
		border-radius: 5vw;
		z-index: 50;
		transition: all .5s;
	}
	#hardness-choose > div{
		width: 90vw;
		height: calc(100vh - 14vw);
		position: absolute;
		left: 0;
		top: 0;
		display: flex;
		flex-wrap: wrap;
		justify-content: center;
		align-items: center;
		align-content: center;
	}
	#hardness-choose > div > p{
		width: 90vw;
		margin: 0 0 6vw 0;
		font-size: 15vw;
		line-height: 15vw;
		text-align: center;
		font-weight: bold;
		color: #000;
	}
	#hardness-choose > div > div{
		width: 18vw;
		height: 9vw;
		margin: 1.5vw;
		border-radius: 9vw;
		line-height: 9vw;
		font-size: 3.9vw;
		text-align: center;
		font-weight: bold;
		color: #000;
		background-color: #f6f6f6;
		cursor: pointer;
	}
}