* {
	cursor: url("assets/images/cursors/cursor.cur"), pointer;
}

a,
i,
button,
input,
select,
.closeButton,
.khloe_core_section {
	cursor: url("assets/images/cursors/hand.png"), pointer;
}

#loading_bar {
	display: none;
	position:absolute;
	width:400px;
	height:30px;
	background-color: #D3D3D3;
	border-style: ridge;
	border-width: 5px;
	overflow: hidden;
	text-align: center;
}

.progress {
	height: 100%;
	width: 0;
	background-color: #C87F8B;
	border-radius: inherit;
	animation: fill 2s forwards;
	--width: 100%;
}

@keyframes fill {
	to{
		width:var(--width)
	}
}

body {
	display: flex;
	align-items: center;
	justify-content: center;
	height: 100vh;
	font-family: "JetBrains Mono";
}

/*LOGIN*/
#invalid_credentials {
	display: none;
	width:70%;
	height: 20%;
	margin-bottom: 2%;
	padding-left: 5px;
	border-color: #C87F8B;
	border-style: dotted;
}

input[type="text"] {
	width: 70%;
	height: 10%;
	margin-bottom: 2%;
	border-style: inset;
	font-family: "JetBrains Mono";
}

input[type="password"] {
	width: 70%;
	height: 10%;
	margin-bottom: 2%;
	border-style: inset;
	font-family: "JetBrains Mono";
}

input[type="submit"] {
	width:30%;
	height:10%;
	border-style: outset;
	box-shadow: 1px 2px;
	font-family: "JetBrains Mono";
	background-color: #C87F8B;
}

input[type="submit"]:hover {
	background-color: #D398A2;
}

input[type="submit"]:active {
	background-color: #A0656F;
}

.login {
	display: flex;
	flex-direction: column;
	justify-content: center;
	align-items: center;
	width:350px;
	height:400px;
	background-color: #EEEEEE;
	border-style: ridge;
	border-width: 5px;
	box-shadow: 0px 5px 15px dimgray;
}
/*LOGIN*/

/*LETTER*/
.letter {
	display: none;
	flex-direction: column;
	position: absolute;
	justify-content: center;
	align-items: center;
	width:510px;
	height:660px;
	background-color: #EEEEEE;
	border-style: ridge;
	border-width: 5px;
	box-shadow: 0px 5px 15px dimgray;
}
.caption {
	margin-left: 10px;
}

.card {
	position: relative;
	width:82px;
	height: 99px;
	top:-45%;
	background-color: #EEEEEE;
	border-radius: 1px;
}

.message {
	position: absolute;
	width:100%;
	height: 100%;
	background-color: #EEEEEE;
	border-radius: 1px;
	font-size: 15px;
}

.eraser {
	position: absolute;
	top:90%;
	right:80%;
	width:40px;
	height:30px;
	border-style: outset;
	box-shadow: 1px 2px;
	background-color: #C87F8B;
}

.eraser:hover {
	background-color: #D398A2;
}

.eraser:active {
	background-color: #A0656F;
}

.next {
	position: absolute;
	top:90%;
	left:80%;
	width:40px;
	height:30px;
	border-style: outset;
	box-shadow: 1px 2px;
	background-color: #C87F8B;
}

.next:hover {
	background-color: #D398A2;
}

.next:active {
	background-color: #A0656F;
}

.fa-sharp {
    color: #000000;
}

#cover {
	position: absolute;
	width: 100%;
	height: 100%;
}

#main_section_blocker {
	width: 400px;
	height: 300px;
	background: transparent;
	border: dotted;
	border-color: #A0656F;
	filter: drop-shadow(0px 5px 15px);
	text-align: center;
	overflow: hidden;
}
#error_logo {
	margin:auto;
	display: flex;
  background-color: #C87F8B;
	width: 50%;
	height: 70%;
	clip-path: polygon(50% 0%, 0% 100%, 100% 100%);
}

#error_logo h1 {
	margin:auto;
  color: #000000;
	font-size: 170px;
}

#main_section_blocker p {
  color: #EEEEEE;
	text-shadow: 0px 2px 2px black;
}

video {
	max-height: 75%;
	border-style: ridge;
	border-width: 5px;
}
/*LETTER*/

/*MAIN*/
.main_section {
	display: none;
	position: absolute;
	flex-direction: column;
	align-items: center;
	width:960px;
	height:540px;
	background-color: #EEEEEE;
	border-style: ridge;
	border-width: 5px;
	box-shadow: 0px 5px 15px dimgray;
	background-image: url(assets/images/khloe_core.png);
	font-size: 32px;
}

span {
	color: #C87F8B;
}

.khloe_core_section:hover {
	border-style: dotted;
}

#style {
	position:absolute;
	width: 270px;
	height: 247px;
	rotate: -12.7deg;
	top:145px;
	right: 152px;
}

#acads {
	position:absolute;
	width: 238px;
	height: 160px;
	top:275px;
	left: 417px;
}

#editing {
	position:absolute;
	width:305px;
	height:212px;
	top:260px;
	left: 130px;
}

#film {
	position:absolute;
	width:90px;
	height:140px;
	top:345px;
	left: 358px;
}

#games {
	position:absolute;
	width:168px;
	height:160px;
	top:335px;
	left: 490px;
	rotate:7.5deg;
}

#music {
	position:absolute;
	width:185px;
	height:118px;
	rotate:17.5deg;
	top:303px;
	right: 92px;
}

#youtube {
	position:absolute;
	width:130px;
	height:128px;
	rotate:-1.5deg;
	top:383px;
	right: 163px;
}

#art {
	position:absolute;
	width:173px;
	height:99px;
	rotate: -25.1deg;
	top:260px;
	left: 70px;
}

.modal {
  display: flex;
  border-style: ridge;
  background-color: #EEEEEE;
  width: 400px;
  height: 300px;
  position: fixed;
  right: 40%;
  top: 25%;
}

.inspo {
  width: 90%;
  height: 90%;
  margin: auto;
  background-size: contain;
}

.closeButton {
  width: 30px;
  height: 30px;
	background-color: #C87F8B;
	border-style: outset;
	border-width: 2px;
  font-family: "JetBrains Mono";
  font-size: 15px;
  position: absolute;
  right: 0;
  translate: 50% -50%;
}

.closeButton:hover {
  background-color: lightcoral;
}

/*MAIN*/