@keyframes opacity{
	0%{opacity: 0;}
	100%{opacity: 1;}
}
@media screen and (min-width: 600px) {
	main{
		min-height: calc(100vh - 8vw);
		animation: opacity 2s backwards;
	}
	main > h1{
		font-size: 3vw;
		line-height: 3vw;
		text-align: center;
		padding: 6vw 0 3vw 0;
		width: 100vw;
	}
	.invisible{
		opacity: 0;
		pointer-events: none;
	}
	.visible{
		opacity: 1;
		pointer-events: inherit;
	}
	.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;
	}
	.calc-section{
		width: 82vw;
		display: flex;
		justify-content: space-between;
		height: 4.5vw;
		margin: 2.5vw 9vw;
	}
	.calc-section:first-child{
		display: none;
	}
	.NPS, .DN, .SCH{		
		width: 15vw;
		height: 4.5vw;
		margin: 0;
		position: relative;
	}
	.NPS-1, .DN-1, .SCH-1{		
		width: 15vw;
		height: 4.5vw;
		border-radius: 4.5vw;
		line-height: 4.5vw;
		font-size: 1.8vw;
		text-align: center;
		font-weight: bold;
		color: #000;
	}
	.NPS-2, .DN-2, .SCH-2{		
		width: 24vw;
		padding: .5vw;
		position: absolute;
		top: 5.5vw;
		left: -5vw;
		display: flex;
		flex-wrap: wrap;
		background-color: #f6f6f6;
		box-shadow: .2vw .2vw 2vw #666;
		border-radius: 2vw;
		transition: opacity .2s;
		z-index: 50;
	}
	.NPS-2 > div, .DN-2 > div, .SCH-2 > div{		
		width: 3vw;
		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;
	}
	.pipe-result{	
		width: 32vw;
		height: 4.5vw;
		border-radius: 4.5vw;
		line-height: 4.5vw;	
		font-size: 1.8vw;
		text-align: center;
		font-weight: bold;
		color: #000;
		box-shadow: inset .3vw .3vw 1vw #a1a1a1, 
            		inset -.3vw -.3vw 1vw #fefefe;
	}

	#plus-copy{
		width: 85vw;
		margin: 2vw 7.5vw;
		display: flex;
		justify-content: center;
		padding-bottom: 8vw;
	}
	#plus-button{	
		width: 15vw;
		height: 4.5vw;
		border-radius: 4.5vw;
		line-height: 4.5vw;
		font-size: 3vw;
		text-align: center;
		font-weight: bold;
		color: #fff;
		background-color: #bd7d57;
	}
}




















@media screen and (max-width: 600px) {
	main{
		min-height: 100vh;
		animation: opacity 2s backwards;
	}
	main > h1{
		font-size: 8vw;
		line-height: 8vw;
		text-align: center;
		padding: 27.5vw 5vw 5vw 5vw;
		width: 90vw;
	}
	.invisible{
		opacity: 0;
		pointer-events: none;
	}
	.visible{
		opacity: 1;
		pointer-events: inherit;
	}
	.button{
		box-shadow: .6vw .6vw 1.6vw #a1a1a1, 
		            -.6vw -.6vw 1.6vw #fefefe;
		transition: all .1s;
		cursor: pointer;
		user-select: none;
	}
	.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;
	}
	.calc-section{
		width: 100vw;
		display: flex;
		flex-wrap: wrap;
		justify-content: center;
		margin: 7.5vw 0;
		position: relative;
	}
	.calc-section:first-child{
		display: none;
	}
	.NPS, .DN{		
		width: 42.5vw;
		height: 13.5vw;
		margin: 2vw;
	}
	.NPS-1, .DN-1{		
		width: 42.5vw;
		height: 13.5vw;
		border-radius: 13.5vw;
		line-height: 13.5vw;
		font-size: 4.5vw;
		text-align: center;
		font-weight: bold;
		color: #000;
	}
	.SCH{		
		width: 90vw;
		height: 13.5vw;
		margin: 2vw;
	}
	.SCH-1{		
		width: 90vw;
		height: 13.5vw;
		border-radius: 13.5vw;
		line-height: 13.5vw;
		font-size: 4.5vw;
		text-align: center;
		font-weight: bold;
		color: #000;
	}
	.NPS-2, .DN-2, .SCH-2{		
		width: 72vw;
		padding: 1.5vw;
		position: absolute;
		left: 14vw;
		display: flex;
		flex-wrap: wrap;
		background-color: #f6f6f6;
		box-shadow: .6vw .6vw 6vw #666;
		border-radius: 6vw;
		transition: opacity .2s;
		z-index: 50;
	}
	.NPS-2, .DN-2{
		top: 18vw;
	}
	.SCH-2{
		top: 35.5vw;
	}
	.NPS-2 > div, .DN-2 > div, .SCH-2 > div{		
		width: 9vw;
		height: 9vw;
		margin: 1.5vw;
		border-radius: 9vw;
		line-height: 9vw;
		font-size: 3.6vw;
		text-align: center;
		font-weight: bold;
		color: #000;
		background-color: #f6f6f6;
		cursor: pointer;
	}
	.pipe-result{	
		width: 90vw;
		height: 13.5vw;
		border-radius: 13.5vw;
		line-height: 13.5vw;	
		font-size: 4.5vw;
		text-align: center;
		font-weight: bold;
		color: #000;
		box-shadow: inset .6vw .6vw 2vw #a1a1a1, 
            		inset -.6vw -.6vw 2vw #fefefe;
        margin: 2vw;
	}

	#plus-copy{
		width: 85vw;
		margin: 2vw 7.5vw;
		display: flex;
		justify-content: center;
		padding-bottom: 20vw;
	}
	#plus-button{	
		width: 45vw;
		height: 13.5vw;
		border-radius: 13.5vw;
		line-height: 13.5vw;
		font-size: 9vw;
		text-align: center;
		font-weight: bold;
		color: #fff;
		background-color: #bd7d57;
	}
}