/*!********************************************************************************************************************!*\
!*** css ./node_modules/css-loader/dist/cjs.js!./node_modules/sass-loader/dist/cjs.js!./src/scss/application.scss ***!
\********************************************************************************************************************/@
/*!************************************************************************************************************************!*\
!*** css ./node_modules/css-loader/dist/cjs.js!./node_modules/sass-loader/dist/cjs.js!./src/scss/application.scss (1) ***!
\************************************************************************************************************************/*,:after,:before{
box-sizing:border-box
}
body,html {
	height:100%;
	min-height:100%
}
body{
	background:linear-gradient(162.14deg,#A05900 1.13%,white);
	color:white;
	font-family:Carter One,cursive;
	font-size:1rem;
	line-height:1.5rem;
	margin:0;
	min-width:320px
}
.visually-hidden{
	clip:rect(0 0 0 0);
	border:0;
	clip-path:inset(50%);
	height:1px;
	margin:-1px;
	overflow:hidden;
	padding:0;
	position:absolute;
	white-space:nowrap;
	width:1px
}
.hidden{
	opacity:0;
	visibility:hidden
}
.container{
	/*min-height:100%;*/
	position:relative
}
.nav{
	display:flex;
	justify-content:space-between;
	margin:1rem auto 2rem;
	max-width:37rem;
	padding:0rem;
	width:90%
}
.button,.nav{
	align-items:center
}
.button{
	background-color:#fff;
	border:1px solid #fff;
	border-radius:1.5rem;
	color:#01a08f;
	cursor:pointer;
	display:inline-flex;
	font-family:Carter One,cursive;
	font-size:1rem;
	height:2.5rem;
	justify-content:center;
	padding:.422rem 1rem
}
@media (min-width:768px){
	.button{
		border-radius:2rem;
		font-size:2rem;
		height:4rem;
		padding:1rem 2rem
	}
}
.button:focus,.button:hover{
	background-color:hsla(0,0%,100%,.9)
}
.button__icon{
	height:1em;
	width:1em
}
.hero{
	align-items:center;
	background-image:linear-gradient(180deg,hsla(0,0%,100%,.8),hsla(0,0%,100%,.4));
	border:1px solid #fff;
	border-radius:1rem;
	cursor:pointer;
	display:flex;
	height:5rem;
	justify-content:center;
	width:5rem
}@media (min-width:768px){
	.hero{
		height:12vw;
		width:12vw
	}
}
.hero:active,.hero:hover{
	border:2px solid #fff
}
.hero__img{
	height:4rem;
	width:4rem
}
@media (min-width:768px){
	.hero__img{
		height:12vw;
		width:12vw
	}
}
.board{
display:flex;
flex-wrap:wrap;
gap:2px;
justify-content:center;
margin:0 auto 1rem;
width:16rem
}
@media (min-width:768px){
.board{
margin:0 auto;
width:40vw;

}
}
.board__checkbox{
clip:rect(0 0 0 0);
border:0;
clip-path:inset(50%);
height:1px;
margin:-1px;
overflow:hidden;
padding:0;
position:absolute;
white-space:nowrap;
width:1px
}
.board__checkbox:focus+.hero{
outline:1px solid #fff
}
.dialog{
background:linear-gradient(162.14deg,#A05900 1.13%,white);
bottom:0;
left:0;
opacity:1;
padding:6.5rem 1rem;
position:absolute;
right:0;
text-align:center;
top:0;
visibility:visible
}
.dialog__text{
color:#fff;
font-size:1rem;
margin:0 0 1.5rem
}
@media (min-width:768px){
.dialog__text{
font-size:2rem;
margin:0 0 2.5rem}
}
.dialog__radio{
clip:rect(0 0 0 0);
border:0;
clip-path:inset(50%);
height:1px;
margin:-1px;
overflow:hidden;
padding:0;
position:absolute;
white-space:nowrap;
width:1px
}
.dialog__radio:focus+.hero{
outline:1px solid #fff}
.dialog__content{
display:flex;
gap:.5rem;
justify-content:center;
margin-bottom:1rem
}
@media (min-width:768px){
.dialog__content{
gap:2rem;
margin-bottom:2.5rem}
}