/* 
╔═════════════╗
║smart grid	  ║
╚═════════════╝
*/
.main {
    display: grid;
    grid-gap: 10px;
    grid-template-columns: repeat(12, 1fr);
    margin: 0 auto;
    width: 100%;
    max-width: 1280px;
}
.one, .two, .three, .four, .five, .six,
.seven, .eight, .nine, .ten, .eleven, .twelve {
    grid-column-end: span 12;
}
.nested {
	display: grid;
	grid-gap: 10px;
	grid-template-columns: repeat(12, 1fr);
}
.merge-two-rows { grid-row-end: span 2 }
.merge-three-rows { grid-row-end: span 3 }
.merge-four-rows { grid-row-end: span 4 }
.merge-five-rows { grid-row-end: span 5 }
.merge-six-rows { grid-row-end: span 6 }
@media only screen and (min-width: 481px) {
    .one { grid-column-end: span 1 }
    .two { grid-column-end: span 2 }
    .three { grid-column-end: span 3 }
    .four { grid-column-end: span 4 }
    .five { grid-column-end: span 5 }
    .six { grid-column-end: span 6 }
    .seven { grid-column-end: span 7 }
    .eight { grid-column-end: span 8 }
    .nine { grid-column-end: span 9 }
    .ten { grid-column-end: span 10 }
    .eleven { grid-column-end: span 11 }
}

/* 
╔═════════════╗
║custom styles║
╚═════════════╝
*/

body{
	background:#1d1e22;
	color:#dadada;
	margin:0;
	font-family: "Roboto", sans-serif;
}
h1{
	font-size: 4rem;
	font-family: "Reem Kufi Fun", sans-serif;
}
#logo{
	display:flex;
	justify-content: space-evenly;
}
#logo svg{
	width:40px;
	padding:0 0px;
}
#logo h1{
	font-size: 4rem;
	margin:0;
}
a{
	color:#efefef;
	text-decoration: underline;
}
li {
	list-style: none;
	margin:0;
	font-size:1.3rem;
}
hr{
	border:none;
	border-top:solid 1px #555555;
	margin:1rem 0;
}
textarea{
	width:100%;
	max-width:100%;
	min-width:100px;
	min-height:150px;
	padding:10px;
	box-sizing:border-box;
	color:#dadada;	
	background:#1d1e22;
	border:solid 1px #888888;
	resize:none;
}
textarea:focus{
	outline: none !important;
	border:solid 2px #aa00f8;
}
form button{
	color:#dadada;
	padding:0.75rem 1.5rem;
	font-size: 1.5rem;
	background:none;
	border:solid 2px #aa00f8;
}
form button:hover{
	color:#eeeeee;
	background:#aa00f8;
}
.textcenter{
	text-align: center;
}
#clear{
	display: inline-block;
	margin:0 1rem;
}
#bulk-search{
	
}
#word-section{
	padding:1rem;
}
#word-list.results{
	padding:3rem 2rem;
	border-top:1px solid #dadada;
	border-bottom:1px solid #dadada;	
}
#alert1, #alert2, #alert3 {
	text-align: center;
	margin:1rem;
/* 	animation: bounce 5s infinite; */
}
#alert1 span,#alert2 span,#alert3 span{
	color:#eeeeee;
	background:#aa00f8;
	padding:5px 10px;
	animation: flash 2.5s infinite;
}
@keyframes bounce{
	0% {
	    transform: translateY(0px);
	}
	50% {
	    transform: translateY(-10px);
	}	
}
@keyframes flash{
	0% {
	    background:#aa00f8;
	}
	50% {
	    background:transparent;
	}	
}
#options{
/* 	border:solid 1px #888888; */
	background:#2e2c2e;
	padding:0.5rem;
}
.options-box{
/* 	border:solid 1px #888888; */
	background:#1d1e22;
	padding:1rem;
}
.options-box.alert{
	border:solid 1px #aa00f8;
}

#results-section{
	background:#2e2c2e;
	padding:1rem;
}
#about-section{
	padding:1rem;
	border-top:solid 1px #555555;
}
.steps{
	border:solid 2px #2e2c2e;
	padding:1rem;
	height:100%;
}
.step-number{
	font-family: "Reem Kufi Fun", sans-serif;
	font-size: 2.6rem;
	text-align: center;
	border-bottom:1px solid #2e2c2e;
	margin-bottom:1rem;
	padding-bottom:1rem;
}
.small-note{
	font-size: 0.8rem;
}
#footer{
	padding:2rem 0;
	text-align: center;
}


@media only screen and (max-width: 481px) {
	#logo svg{
		width:32px;
	}
	#logo h1{
		font-size: 3rem;
	}
}



/* checkbox styles... */
.option-wrap{
	display:inline-block;
	margin:0 1rem;
	text-align: center;
}
.option-wrap h4{
	margin: 0;
}
.tgl {
	display: none;
}
.tgl + .tgl-btn {
	outline: 0;
	display: block;
	width: 4em;
	height: 2em;
	position: relative;
	cursor: pointer;
	-webkit-user-select: none;
	-moz-user-select: none;
	-ms-user-select: none;
	user-select: none;
}
.tgl + .tgl-btn:after, .tgl + .tgl-btn:before {
	position: relative;
	display: block;
	content: "";
	width: 50%;
	height: 100%;
}
.tgl + .tgl-btn:after {
	left: 0;
}
.tgl + .tgl-btn:before {
	display: none;
}
.tgl:checked + .tgl-btn:after {
	left: 50%;
}
.tgl-light + .tgl-btn {
	background: #4e4c4e;
	border-radius: 2em;
	padding: 2px;
	transition: all 0.4s ease;
}
.tgl-light + .tgl-btn:after {
	border-radius: 50%;
	background: #dadada;
	transition: all 0.2s ease;
}
.tgl-light:checked + .tgl-btn {
	background: #aa00f8;
}