body{
	background-color: #EEEEEE;
}

*{
	
}


h6{
	margin: 0;
}


p{
	font-family: 'Raleway', sans-serif;
	font-weight: 500;
	margin: 1.5em;
	text-align: center;
	font-size: 1.2rem;
}






.container{
	margin: auto;
    text-align: center;
    left: 50%;
    width: 65%;
	padding: 3em;
}

.font-regular{
	font-family: 'Raleway', sans-serif;
	font-weight: 500;
}

.font-bold{
	font-family: 'Raleway', sans-serif;
	font-weight: 900;
	font-size: 1.2rem;
}

.font-paragrapgh{
	font-family: 'Noto Serif', serif;
}






.title-box{
	width: fit-content;
	padding: .6em;
	font-size: 2rem;
	border: solid 1px rgba(20,20,30,.8);
	background-color: rgba(150,150,170,.9);
	color: rgba(20,20,20,1);
	border-radius: .5em;
	margin: auto;
}

.question{
	text-align: center;
}


.form-wrapper{
	display: inline-block;
	margin: 1em;
}

.form-wrapper input{
	width: 80px;
	height: 30px;
}



.paragraph-generator-btn{
	margin: 1em;
	text-align: center;
}

.paragraph-generator-btn button{
	box-shadow: none;
	padding: .5em;
	background-color: rgba(190,200,190,.7);
	color: rgba(15,15,15,.9);
	border: solid 1px rgba(10,10,80,.9);
	border-radius: .3em;
	cursor: pointer;
}

.paragraph-generator-btn button:hover{
	background-color: rgba(100,100,100,.7);
}


.clear-btn{
	margin: 0 .5em;
}


.selected-word:hover{
	cursor: pointer;
	color: #EE1522;
}





/****  The definitions Modal ***/
.modal {
	display: none; /* Hidden by default */
	position: fixed; /* Stay in place */
	z-index: 1; /* Sit on top */
	padding-top: 100px; /* Location of the box */
	left: 0;
	top: 0;
	width: 100%; /* Full width */
	height: 100%; /* Full height */
	overflow: auto; /* Enable scroll if needed */
	background-color: rgb(0,0,0); /* Fallback color */
	background-color: rgba(0,0,0,0.4); /* Black w/ opacity */
}

/* Modal Content */
.modal-content {
	background-color: #fefefe;
	margin: auto;
	padding: 20px;
	border: 1px solid #888;
	width: 60%;
}

#definitions p{
	margin: 1em;
	font-size: 1rem;
	text-align: left;
}

/* The Close Button */
.close {
  	color: #aaaaaa;
  	float: right;
	font-size: 28px;
  	font-weight: bold;
	margin: .3em;
}

.close:hover,
.close:focus {
  	color: #000;
  	text-decoration: none;
	cursor: pointer;
}
.loading{
	margin: auto;
	text-align: center;
}





@media(max-width: 767px){
	.container{
		width: 85%;
		padding: 1em;
	}
	p{
		font-size: 1rem;
	}
	.form-wrapper input{
		width: 300px;
	}
	.modal{
		padding-top: 40px;
	}
	#definitions p{
		font-size: .8rem;
	}
	.loading{
		width: 70%;
	}
	.loading img{
		width: inherit;
	}
}