/* @import url('https://fonts.googleapis.com/css2?family=Open+Sans&display=swap'); */
div {
	/* padding: 0.5em;
	padding-left: 1em; */
	color: #585858;
}
body {
	font-family: "Open Sans", "Arial";
	background-color: #fefefe;
	color: #585858;
	padding: 0.5em;
	padding-left: 1em;
	font-size: 16px;
	margin: 1em 5em;
	max-width: 100%;
	padding: 1em;
	line-height: 1.4;
	text-align: justify;
}

p {
    font-size: 20px;
    font-weight: bold;
}

input[type = "color"]{
    appearance: none;
    -moz-appearance: none;
    -webkit-appearance: none;
    background: none;
    border: 8px solid #f1f1f1;
    cursor: pointer;
    height: 128px;
    width: 128px;
    /* border-bottom: 10px; */
   
}

a:link { color: #dc9656; }
a:visited { color: #ab4642; }

.grid-container{
    display: grid;
    grid-template-columns: 8em 8em 8em 8em 8em 8em 8em 8em 8em;
    column-gap: 50px;
    margin-left: 0px;
    margin-top: 0px;
    row-gap: 0px;
    grid-template-rows: 8em 7em;


}
#inputcell {
    padding: 0;
    margin: 0;
    align-content: center;
}

#colour {
    padding: 0;
}
#swatch{
    background: white;
    box-shadow: 1em 1em 1em rgba(0, 0, 0, .1);
    display: flex;
    flex-direction: column;
}

.info h1{
    font-size: 20px;
}

.info h2{
    font-size: 15px;
}