body{
	background-color:#343A40;
	font-size:15px;


	font-family:sans-serif;
	color: blanchedalmond;
	display: flex;
	justify-content: center;
	
}
main{
	display: flex;
	flex-direction: column;
}
#modules{
	color: rgb(212, 204, 193);
	font-size:1.5rem;
	text-decoration: none;
	border: 2px solid ;
	border-color: #ADB5BD;	
	border-radius: 10px;
	font-family:inherit;
	margin: 1px;
	padding:7px;
	width: min-content;
}
.card h1{
	text-align: center;
	margin-top: 12px;
	margin-bottom: 4px;
	font-size: 30px;
	font-weight: bold;
}
.card{
	border: 4px solid ;
	border-color: #191d1f;
	background-color: #2c3135;
    border-radius: 20px;
	
	width: 460px;
	margin-top: 0px;

}
.big{
    display: flex;
    flex-direction: row;

}

.list{
	border: 4px solid ;
    border-radius: 20px;
	border-color: #F4B400;
	background-color: #6e6d6a;
	padding: 10px;
    width: 140px;
	
}
.preview{
    border: 4px solid ;
	border-color: #F4B400;
	border-radius: 20px;

	background-color: #6e6d6a;

	padding: 10px;

	color: rgb(255, 255, 255);
	font-size: 16px;

	height: 240px;
	width: 260px;
}
.additional{
	margin-top: 20px;
	display: flex;
	align-items: center;
	justify-content: center;
	flex-direction: column;
}
.additional button{
	width: 90%;

}

.up{
	/* display: inline; */
	width: 49%;
}
button{
	background-color:rgb(189, 186, 173);
	
	font-size:1rem;
	color:black;
	border: 1px solid #F4B400;
	border-radius: 4px;
	transition: all 0.2s ease-out;

    margin: 3px 0px 3px 0px;
	width: 100%;
}
button:active{
	background-color:#DEE2E6;

}
button:hover{

	transform: translateX(.2em);
}
.up:active:active{
	background-color:#DEE2E6;

}
.up:hover{

	transform: translateY(-.1em);
}

#copied{
	position: relative;
	bottom:310px;
	left: 10px;
	font-size: 64px;
	opacity: 0;
  	transition: 1s;
	color: #838383;
}
#copied.fade-in{
	opacity: 1;
  	transition: 0s;
}