*{
	margin: 0;
	padding: 0;
	box-sizing: border-box;
	scroll-behavior: smooth;
}

body{
	font-family: Candara, Arial, sans-serif;
	color: #b8b8b8;
	font-size: 1.5rem;
	background-color: black;
}

h2{font-size: 2.5rem;}

a{color: inherit;}

select{
	height: 2.5rem;
	border-radius: 5px;
}

button{cursor: pointer;}

fieldset{
	width: fit-content;
	margin: 1rem;
	padding: 1.5rem;
}

.container{
	width: 100%;
	margin: 0;
	padding: 0;
}.container .project-section:nth-child(even){
	background-color: #444;
}

.flex{
	display:flex;
	/*flex-wrap: wrap;*/
}

.display-none{display: none}

.btn{
	padding: .6rem 1rem;
	text-transform: uppercase;
	background-color: black;
	color: white;
	cursor: pointer;
	border-radius: 5px;
	border:none;
}.btn:hover{
	box-shadow: 0px 1px 3px rgba(250,250,250, .3);
}

.input-form{
	display: block;
	margin: .6rem 1rem;
	padding: .5rem;
	font-size: 2rem;
}

.project-section{
	padding: 1rem 8rem;
	height: 100vh;
	background-color: #222;
	text-align: center;
	display: flex;
	align-items: center;
	flex-flow: column wrap;
	justify-content: space-around;
}

.form-group{
	margin: 0 auto 1rem;
	display: block;
}

/*-----------------DRAWING APP*/
#toolbox{
	background-color: #111;
	display: flex;
	width: 100%;
	color: black;
	font-size: 1rem;
	padding: .5rem;
	margin-top: -0.4rem;
	border-bottom: black 2px solid;
}#toolbox > *{
	background-color: whitesmoke;
	border: none;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 25px;
	height: 25px;
	margin: .1rem;
}#toolbox > *:last-child{margin-left: auto;}


/*----------------------SECRET*/
#secret-mask{
	width: 60vw;
	height: 200px;
	transition: 1s;
}

.secret-mask{
	background:url("https://source.unsplash.com/random/1200x600") no-repeat center center/contain;
	clip-path: circle(40px at var(--x) var(--y));
}.secret-mask:active{
	clip-path: circle(100px at var(--x) var(--y));
}

/*---------------------------PLANETS PROJ*/
.planets{
	width: 100%;
}

.input{
	width: 20rem;
	height: 2.5rem;
	border-radius: 5px;
	margin-bottom: 1rem;
	padding-left: 1rem;
}.input:focus{
	outline: none;
	border:none;
}

#weight-results{
	margin: 2rem auto;
	padding: 1.5rem;
	text-align: center;
	border-radius: 5px;
	max-width: 40rem;
	height: 5rem;
	background-color: #333;
}

/*------------CLOCK*/
.clock-container {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  align-items: center;
}

.clock {
  position: relative;
  width: 200px;
  height: 200px;
}

.needle {
  background-color: black;
  position: absolute;
  top: 50%;
  left: 50%;
  height: 65px;
  width: 3px;
  transform-origin: bottom center;
  transition: all 0.5s ease-in;
}

.needle.hour {
  transform: translate(-50%, -100%) rotate(0deg);
}

.needle.minute {
  transform: translate(-50%, -100%) rotate(0deg);
  height: 100px;
}

.needle.second {
  transform: translate(-50%, -100%) rotate(0deg);
  height: 100px;
  background-color: #e74c3c;
}

.time {
  font-size: 60px;
}

.date {
  color: #aaa;
  font-size: 14px;
  letter-spacing: 0.3px;
  text-transform: uppercase;
}

/*.date .circle {
  background-color: var(--primary-color);
  color: var(--secondary-color);
  border-radius: 50%;
  height: 18px;
  width: 18px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  line-height: 18px;
  transition: all 0.5s ease-in;
  font-size: 12px;
}*/

/*------------MAIN FOOTER*/
.main-footer{
	padding: 2rem;
	display: flex;
	align-items: center;
	justify-content: center;
}.main-footer p{
	max-width: 60vw;
	font-size: 1.2rem;
}




@media(max-width: 500px){
	.flex{
		/*flex-direction: column;*/
	}

	h2{font-size: 4rem}

	.project-section{
		padding: 1rem 2rem;
	}

}