/* Setup - CSS */
body
{
	font-family: 'quicksand';
	padding-bottom: 128px;
}

h1, h2, h3, h4, h5
{
	font-family: 'Barriecito', cursive;
	font-weight: 100;
	color: #464845;
}

h1
{
    font-size: 40px;
}

h2
{
	font-size: 24px;
	color: #59655a;
	margin: 8px 0;
}

h3
{
	font-size: 24px;
}

h4
{
	font-size: 16px;
}

/* - gaps */

.gap8
{
	grid-gap: 8px;
}

.gap16
{
	grid-gap: 16px;
}
.gap32
{
	grid-gap: 32px;
}
.gap64
{
	grid-gap: 64px;
}

/* - */

input
{
	padding: 8px 16px;
    color: #5d5d5d;
    border: dashed 1px #a7a7a7;
	width: 400px;
	max-width: 100%;
}

/* - */

/* - */

.center
{
	justify-content: center;
	align-content: center;
}

p
{
	color: #404040;
	margin: 0;
}

.element
{
	display: grid;
	grid-gap: 8px;
}

.response
{
	display: grid;
	grid-gap: 8px;
	margin: 16px;
}

.done-tick
{
	color: #fff;
    background-color: #89b94a;
    border-radius: 64px;
    justify-self: center;
    width: 52px;
    text-align: center;
	margin: 0px;
}

.center-btn
{
	background-color: #89b94a;
    color: #fff;
    display: grid;
    justify-self: center;
    align-self: center;	
	transition: opacity ease .2s;
	margin-top: 16px;
	
	font-family: 'Barriecito', cursive;
    font-size: 32px;
    letter-spacing: 2px;
    padding: 4px 16px;
}

.center-btn:hover
{
	cursor: pointer;
	opacity: 0.5;
}



section
{
	display: grid;
	grid-template-columns: auto;
}


@media( min-width: 768px )
{
	section
	{
		grid-template-columns: auto 768px auto;
	}
}

@media( min-width: 992px )
{
	section
	{
		grid-template-columns: auto 992px auto;
	}
}

@media( min-width: 1200px )
{
	section
	{
		grid-template-columns: auto 1200px auto;
	}
}

section .workspace
{
	display: grid;
	grid-column: 2;
}