@charset "utf-8";

* {
	margin: 0;
	padding: 0;
	font-family: DR Publik, Product, Arial, sans-serif;
}

.wrapper {
	width: 100vw;
	max-width: 100vw;
	height: 100vh;
	max-height: 100vh;
	overflow-x: hidden;
	overflow-y: overlay;
}

@font-face {
	font-family: 'Product';
	src: url(Resources/Fonts/Product-Sans-Bold.ttf);
	font-style: oblique;
	font-weight: 300;
}

@font-face {
	font-family: 'Product';
	src: url(Resources/Fonts/Product-Sans-Bold-Italic.ttf);
	font-style: oblique;
	font-weight: 400;
}

@font-face {
	font-family: 'Product';
	src: url(Resources/Fonts/Product-Sans-Italic.ttf);
	font-style: italic;
	font-weight: 200;
}

@font-face {
	font-family: 'Product';
	src: url(Resources/Fonts/Product-Sans-Regular.ttf);
	font-style: normal;
	font-weight: 100;
}

/* ---------- ANIMATION STYLING ---------- */

@keyframes statusIcon {
	0% {opacity: 100%;}
	50% {opacity: 25%;}
	100% {opacity: 100%;}
}

/* ---------- FONT STYLING ---------- */

strong {font-weight: 500;}

h1 {
	font-size: 4rem;
	font-weight: 500;
	color: white;
}

.title {
	color: #EC1C24;
	font-size: 3rem;
	font-weight: 500;
}

h2 {
	font-size: 2rem;
	font-weight: 100;
	color: white;
}

h3 {
	font-size: 1.5rem;
	font-weight: 500;
}

.underline {
	color: white;
	font-weight: 500;
	transition: all 0.15s ease-in-out;
	position: relative;
	z-index: 2;
}

.underline::before {
	background-color: black;
	content: '';
	position: absolute;
	transform: translate(-1%, 12%);
	width: 102%;
	height: 100%;
	z-index: -1;
}

.underline:hover {
	opacity: 50%;
}

/* ---------- SITE CONTENT ---------- */

.wrapper {
	/*background: -moz-linear-gradient(135deg, rgba(45,8,6,1) 0%, rgba(14,2,2,1) 100%) !important;
	background: -webkit-linear-gradient(135deg, rgba(45,8,6,1) 0%, rgba(14,2,2,1) 100%) !important;
	background: linear-gradient(135deg, rgba(45,8,6,1) 0%, rgba(14,2,2,1) 100%) !important;*/
	background-color: rgb(10,10,10);
}

.wrapper::before {
	background: url("Resources/Grain.png") no-repeat center center;
	background-size: cover;
	content: '';
	mix-blend-mode: overlay;
	position: absolute;
	z-index: 1;
	width: 100%;
	height: 100%;
}

#sidemenu {
	background: -moz-linear-gradient(180deg, #EC1C24 0%, rgba(45,8,6,1) 100%);
	background: -webkit-linear-gradient(180deg, #EC1C24 0%, rgba(45,8,6,1) 100%);
	background: linear-gradient(180deg, #EC1C24 0%, rgba(45,8,6,1) 100%);
	
	box-shadow: 0 0 25px 0 rgba(0,0,0,.75);
	position: absolute;
	left: 0;
	width: 4rem;
	height: 100%;
	transition: all 0.4s ease-in-out;
	z-index: 10;
}

#sidemenu:hover {width: 20rem;}
#sidemenu:hover .menuBtn > p {opacity: 100%;}
#sidemenu:hover .menuBtn.active > p {opacity: 50%;}

#sidemenu > #buttons {
	position: absolute;
	top: 50%;
	-webkit-transform: translateY(-50%);
	transform: translateY(-50%);
}

#sidemenu .menuBtn {
	align-items: center;
	display: flex;
	fill: white;
	margin: 2rem 0;
	text-decoration: none;
}

#sidemenu .menuBtn span {
	/*background-color: rgb(10,10,10);*/
	background-color: #EC1C24;
	border-radius: 1rem;
	box-shadow: 0 0 25px 0 rgba(0,0,0,.75);
	display: flex;
	align-items: center;
	justify-content: center;
	margin: 0 1rem 0 2rem;
	width: 4rem;
	height: 4rem;
	transition: all 0.1s ease-in-out;
}

#sidemenu .menuBtn.active span {background-color: #2D0806;}

#sidemenu .menuBtn > span > svg {width: 75%;}
#sidemenu .menuBtn:nth-child(3) > span > svg {width: 60%;}
#sidemenu .menuBtn:nth-child(4) > span > svg {width: 70%;}

#sidemenu .menuBtn p {
	color: white;
	font-size: 1.5rem;
	opacity: 0%;
	pointer-events: none;
	transition: all 0.4s ease-in-out;
	white-space: nowrap;
}

#sidemenu .menuBtn:not(.active):hover span {
	background-color: #2D0806;
	cursor: pointer;
}

#tasks {
	box-sizing: border-box;
	list-style: none;
	padding: 4rem 4rem 0 4rem;
	width: calc(100vw - 4rem);
	height: calc(100vh - 5.5rem);
	margin-left: 4rem;
	position: relative;
	z-index: 2;
}

#header {
	align-items: flex-end;
	color: rgba(255,255,255,0.25);
	display: flex;
	font-weight: 100;
	justify-content: space-between;
	margin: 0 0 2rem 0;
}

#header > span {line-height: 100%;}

#tasks > .task {
	align-items: center;
	background-color: rgb(15,15,15);
	border-radius: 1rem;
	box-shadow: 0 0 25px 5px rgba(0,0,0,.08);
	-webkit-box-shadow: 0 0 25px 5px rgba(0,0,0,.08);
	-moz-box-shadow: 0 0 25px 5px rgba(0,0,0,.08);
	-o-box-shadow: 0 0 25px 5px rgba(0,0,0,.08);
	box-sizing: border-box;
	color: white;
	display: flex;
	justify-content: space-between;
	padding: .5rem;
	position: relative;
	margin: 1rem 0;
}

#tasks > .task:hover {background-color: rgb(20,20,20); cursor: pointer;}
#tasks > .task:hover .text > .taskTitle,
#tasks > .task:hover .infoBtn > p {text-decoration: underline;}

#tasks > .task > .icon-text {display: flex; align-items: center; pointer-events: none;}

#tasks > .task > .icon-text > .status {
	background-color: rgba(255,255,255,0.1);
	border-radius: .6rem;
	display: flex;
	align-items: center;
	justify-content: center;
	width: 3rem;
	height: 3rem;
	margin-right: 0.5rem;
}

#tasks > .task > .icon-text > .status.medium {background-color: rgb(255,175,50);}
#tasks > .task > .icon-text > .status.high {background-color: rgb(255,0,25);}
#tasks > .task > .icon-text > .status.low {background-color: rgb(0,150,255);}

#tasks > .task > .icon-text > .status > svg {
	animation: statusIcon 2s ease-in-out infinite;
	width: 75%;
}
#tasks > .task > .icon-text > .text > p {display: block; line-height: 100%;}
#tasks > .task > .icon-text > .text > .priority-tags {display: flex;}
#tasks > .task > .icon-text > .text > .priority-tags > .priority {font-weight: 100; margin: 0 .5rem .25rem 0;}
#tasks > .task > .icon-text > .text > .priority-tags > .priority.high {color: rgb(255,0,25);}
#tasks > .task > .icon-text > .text > .priority-tags > .priority.medium {color: rgb(255,175,50);}
#tasks > .task > .icon-text > .text > .priority-tags > .priority.low {color: rgb(0,150,255);}
#tasks > .task > .icon-text > .text > .priority-tags > .tags {opacity: 25%;}
#tasks > .task > .icon-text > .text > .taskTitle {font-size: 1.5rem;}

#tasks > .task > .infoBtn {
	align-items: center;
	display: flex;
	font-size: 1.25rem;
	font-weight: 500;
	height: 2rem;
	pointer-events: none;
}

#tasks > .task > .infoBtn > svg {
	fill: white;
	margin-left: 5px;
	height: inherit;
}

#socials {
	box-sizing: border-box;
	display: flex;
	justify-content: space-between;
	padding: 0 4rem;
	width: calc(100vw - 4rem);
	height: 1.5rem;
	margin: 2rem 0 2rem 4rem;
	position: relative;
	z-index: 2;
}

#socials > .media {
	color: white;
	display: flex;
	opacity: 25%;
	text-decoration: none;
	transition: all 0.2s ease-in-out;
	white-space: nowrap;
}

#socials > .media:hover {opacity: 100%;}

#socials > .media > span > img {
	height: 1.5rem;
	margin-right: 1rem;
}

#socials > .media > p {line-height: 1.5rem;}

/* ---------- MODALS ---------- */

/* The Modal (background) */
.modal {
	box-sizing: border-box;
	display: none; /* Hidden by default */
	position: fixed; /* Stay in place */
	z-index: 100; /* Sit on top */
	/*padding-top: calc(80px + 3rem);*/ /* 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.75); /* Black w/ opacity */
}

/* Modal Content */
.modal-content {
	background-color: white;
	box-sizing: border-box;
	margin: auto;
	width: 50%;
	padding: 4rem;
	position: absolute;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
	-webkit-transform: translate(-50%, -50%);
	-moz-transform: translate(-50%, -50%);
	-o-transformm: translate(-50%, -50%);
}

.modal-content > .opacity {color: rgba(0,0,0,.25);}
.modal-content > h2 {color: black; font-weight: 500; margin-bottom: 1rem;}
.modal-content > p:not(.opacity) {
	font-size: 1rem;
	margin-bottom: 4rem;
	text-align: justify;
}
.modal-content > p > .heading {font-size: 1.25rem;}
.modal-content > p > .heading.warning {color: #EC1C24;}
.modal-content > p > .emoji {font-size: 1.25rem;}
.modal-content > p > .link {text-decoration: none; color: rgb(0,100,255);}
.modal-content > p > .link:hover {text-decoration: underline;}

/* The Close Button */
.close {
	background-color: #EC1C24;
	box-sizing: border-box;
	color: white;
	display: block;
	font-size: 1.25rem;
	font-weight: bold;
	text-align: center;
	padding: .75rem 0;
	transition: all 0.2s ease-in-out;
}

.close:hover, .close:focus {
	color: #000;
	cursor: pointer;
	text-decoration: none;
}

/* ---------- VIP Content ---------- */

#content {
	box-sizing: border-box;
	color: white;
	list-style: none;
	overflow-y: scroll;
	padding: 4rem 0 0 4rem;
	width: calc(50vw - 4rem);
	height: calc(100vh - 5.5rem);
	margin-left: 4rem;
	position: relative;
	z-index: 2;
}

#content::-webkit-scrollbar {width: .5rem;}
#content::-webkit-scrollbar-thumb {background: rgba(255,255,255,.25);}
#content::-webkit-scrollbar-thumb:hover {background: rgba(255,255,255,.5);}

#content > div > div {display: flex;}

#content > div > div > ul {width: 100%;}

#content > div > div > ul > lh {
	background-color: #EC1C24;
	display: block;
	font-size: 1.25rem;
	line-height: 2.5rem;
	padding: 0 1rem;
}

#content > div > div > ul > li {
	background-color: rgb(15,15,15);
	box-sizing: border-box;
	display: block;
	line-height: 2rem;
	padding: 0 1rem;
	width: 100%;
	height: 2rem;
}

#content > div > div > ul > li:nth-child(odd) {background-color: rgb(20,20,20);}

/* ---------- MEDIA QUERIES ---------- */

@media only screen and (max-width: 1200px) {
	.modal-content {width: 75%;}
}

@media only screen and (max-width: 1024px) {
	.title {margin: 0;}	
	#header {display: block;}
	#header > span {display: block;}
	#header > .lastUpdated {margin-top: .5rem;}
	
	#socials {height: 1rem;}
	#socials > .media {height: 1rem;}
	#socials > .media > span > img {height: 1rem;}
	#socials > .media > p {font-size: .8rem; line-height: 1rem;}
	
	.modal-content {
		top: 4rem;
		transform: translate(-50%, 0);
		-webkit-transform: translate(-50%, 0);
	}
	.modal-content > h2 {font-size: 1.5rem;}
	.modal-content > p > .heading {font-size: 1rem;}
	.modal-content > p, .modal-content > p:not(.opacity) {font-size: .9rem;}
	
	#content {
		padding: 4rem 0 0 4rem;
		width: calc(100vw - 8rem);
	}
}

@media only screen and (max-width: 800px) {
	#tasks > .task.TwoFA > .icon-text > .text > .taskTitle > span {display: none;}
}

@media only screen and (max-width: 768px) {
	#sidemenu {
		background: -moz-linear-gradient(90deg, #EC1C24 0%, rgba(45,8,6,1) 100%);
		background: -webkit-linear-gradient(90deg, #EC1C24 0%, rgba(45,8,6,1) 100%);
		background: linear-gradient(90deg, #EC1C24 0%, rgba(45,8,6,1) 100%);
		width: 100%;
		height: 4rem;
		bottom: 0;
	}
	
	#sidemenu #buttons {
		display: flex;
		left: 50%;
		top: 0;
		-webkit-transform: translate(-50%, -50%);
		transform: translate(-50%, -50%);
	}
	#sidemenu .menuBtn span {margin: 1rem;}
	#sidemenu .menuBtn p {display: none;}
	
	#tasks {
		margin-left: 0;
		width: 100vw;
		height: 100vh;
	}
	
	#socials {display: none;}
	
	#tasks > .task > .icon-text > .text > .priority-tags {font-size: .9rem;}
	#tasks > .task > .icon-text > .text > .taskTitle {font-size: 1.25rem;}
	#tasks > .task > .infoBtn {font-size: 1rem;}
	
	.modal-content {padding: 2rem; width: calc(100% - 8rem);}
	.modal-content > p:not(.opacity) {margin-bottom: 2rem;}
	
	#content {
		margin-left: 0;
		width: calc(100vw - 4rem);
		height: calc(100vh - 8rem);
	}
}

@media only screen and (max-width: 540px) {
	#sidemenu {height: 3rem;}
	#sidemenu .menuBtn span {border-radius: .75rem; width: 3rem; height: 3rem;}
	
	#tasks {padding: 4rem 2rem;}
	.modal-content {
		top: 2rem;
		width: calc(100% - 4rem);
	}
	
	#content {
		padding: 4rem 0 0 2rem;
		width: calc(100vw - 2rem);
		height: calc(100vh - 6.5rem)
	}
}

@media only screen and (max-width: 425px) {
	#tasks {padding: 3rem 1rem;}
	
	#header > .title {font-size: 1.5rem;}
	#header > .lastUpdated {font-size: .9rem;}
	
	#tasks > .task > .icon-text > .status {width: 2.5rem; height: 2.5rem;}
	
	#tasks > .task > .icon-text > .text > .priority-tags {font-size: .8rem;}
	#tasks > .task > .icon-text > .text > .taskTitle {font-size: 1rem;}
	
	.modal-content {
		top: 0;
		width: 100%;
	}
	
	#content {
		padding: 3rem 0 0 1rem;
		width: calc(100% - 1rem);
		height: calc(100% - 5.5rem);
	}
}