/*----------Style---------*/
/*----------Global---------*/
:root{
	/* Colours */
	--transpblack: #000000C0;
	--transpwhite: #FFFFFF80;
	--grey: #202020;
	--greyshade: #2e2e2e80;
	--cyan: #0ef3ad;
	--cyan2: #07d5af;
	--cyandark: #046e6b;
	--cyansoft: #a4f8de;
	--bg1: #101d1f;
	--bg2: #14634f;
	--visited: #06665c;

	/* Sizes */
	--navbarwidth: 80vw;
	--titlewidth: 65vw;
	--bodywidth: 85vw;
	--footerwidth: 65vw;

	/* Curves */
	--curve-quart: cubic-bezier(0.76, 0, 0.24, 1);
	--curve-expo: cubic-bezier(0.87, 0, 0.13, 1);
	--curve-overshoot: cubic-bezier(0.68, -0.6, 0.32, 1.6);
}

*{
	font-family: ddin;
	box-sizing: border-box;		/* Takes the border and padding into consideration when computing size */
}

html{font-size: 18px;}			/* 1rem = 18px */
main{padding: 0px;}

body{
	background-image: linear-gradient(var(--bg1), var(--bg2));
	background-repeat: no-repeat;
	background-size: contain;
	margin: 0px;
	padding: 0px;
	min-height: 100vh;
}


/*----------Headers---------*/
h1, h2, h3, h4, h5{
	color: var(--cyan);
	margin: 0px;
}

h1{font-size: 3.5rem;} 																		/* Large titles */
h2{font-size: 3rem;	text-decoration-line: underline; text-decoration-color: var(--cyan);}	/* Abstracts */
h3{font-size: 2rem;}																		/* Article sections */
h4{font-size: 1.5rem;} 																		/* Smaller stuff */
h5{font-size: 2rem; font-family: Bytesized; color: white;}								   /* Reserved for captions*/


/*----------Text and Images---------*/
p, i, em, figcaption, li, code{
	margin: 0px;
	font-size: 1rem;
	margin-bottom: 20px;
	text-align: justify;
	color: white;
	font-family: Gidole;
}

figcaption{
	font-size: 0.75rem;
	padding-bottom: 1rem;
	text-align: center;
}

i, em{color: var(--cyan);}
code{font-family: RobotoCondensed;}
img, figure{margin: auto;}
figure, video{width: 100%;}


/*----------Links---------*/
a:link{
	color: var(--cyan2);
	border-color: #000000;
	transition: background-color 0.5s ease-in-out, border-color 0.3s ease-in-out;
	font-family: DDIN;
}

a:hover{
	background-color: #81818140;
	border: 2px dashed var(--cyandark);
	margin: -2px;
}

a:visited{color: var(--visited);}
a:active{color: blue;}

.nothover:hover{				/* For links that shouldn't be highlighted */
	border: 0px none;
	margin: 0px;
	background-color: transparent;
	color: transparent;
}

.notvisited:visited{color: var(--cyan2);}	/* For links that should not be highlighted when visited */


/*----------Tables---------*/
table{
	color: white;
	border-spacing: 0px;
}

td{padding: 10px;}
th{font-size: 1.05rem;}

.row-a{background-color: black;}
.row-b{background-color: var(--grey);}


/*----------Lists---------*/
ul{list-style-type: square;}
li{margin-bottom: auto;}


/*----------Fonts---------*/
@font-face{font-family: Bytesized; src: url("/assets/font/Bytesized.ttf");}
@font-face{font-family: Gidole; src: url("/assets/font/Gidole.ttf");}
@font-face{font-family: Mussels; src: url("/assets/font/Mussels.otf");}
@font-face{font-family: VGA; src: url("/assets/font/PerfectVGA437.ttf");}
@font-face{font-family: Roboto; src: url("/assets/font/Roboto.ttf");}
@font-face{font-family: RobotoCondensed; src: url("/assets/font/RobotoCondensed.ttf");}
@font-face{font-family: RobotoCondensedIt; src: url("/assets/font/RobotoCondensedIt.ttf");}
@font-face{font-family: Supply; src: url("/assets/font/Supply.otf");}
@font-face{font-family: DDIN; src: url("/assets/font/D-DIN.ttf");}
@font-face{font-family: DDINBold; src: url("/assets/font/D-DINBold.ttf");}
@font-face{font-family: UAVOSD; src: url("/assets/font/UAVOSD.ttf");}

.font-fp{font-family: FreePixel;}
.font-vga{font-family: VGA;}
.font-hack{font-family: hack;}
.font-DDIN{font-family: DDIN;}
.font-DDINBold{font-family: DDINBold;}

.f0-5{font-size: 0.5rem;}
.f0-75{font-size: 0.75rem;}
.f1{font-size: 1rem;}
.f1-25{font-size: 1.25rem;}
.f1-50{font-size: 1.5rem;}
.f1-75{font-size: 1.75rem;}
.f2{font-size: 2rem;}


/*----------Images---------*/
.img25, .img30, .img40, .img50, .img60, .img70, .img75, .img80, .img90, .img100{padding-bottom:1rem;}
.img25{width: 25%;}
.img30{width: 30%;}
.img40{width: 40%;}
.img50{width: 50%;}
.img60{width: 60%;}
.img70{width: 70%;}
.img75{width: 75%;}
.img80{width: 80%;}
.img90{width: 90%;}
.img100{width: 100%;}


/*----------Macros---------*/
.center{margin: auto;}
.text-center{text-align: center;}
.text-right{text-align: right;}
.whitespace-nowrap{white-space: nowrap;}

.m-0{margin: 0;}
.mb-0{margin-bottom: 0px;}
.mb-5{margin-bottom: 5px;}
.mb-10{margin-bottom: 10px;}
.mb-20{margin-bottom: 20px;}
.mb-30{margin-bottom: 30px;}
.ml-auto{margin-left: auto;}
.ml-0{margin-left: 0px;}
.ml-5{margin-left: 5px;}
.ml-10{margin-left: 10px;}
.mr-auto{margin-right: auto;}
.mr-0{margin-right: 0px;}
.mr-5{margin-right: 5px;}
.mr-10{margin-right: 10px;}

.block{display: block;}
.flex{display: flex;}
.flex-hcenter{justify-content: center;}
.flex-vcenter{align-items: center;}
.hidden{visibility: hidden;}

.text-black{color: black; text-decoration-color: black;}
.text-white{color: white;}
.text-cyan{color: var(--cyan);}


/*----------Tags---------*/
.tag-c{
	border: 3px solid var(--cyan);
	width: 100%;
	margin: 0.15rem;
}

.tag-img{
	background-color: var(--cyan);
	margin: 0px;
	width: 2.5rem;
}

.tag-txt{
	background-color: var(--grey);
	color: white;
	margin: 0px 2px 0px 2px;
	font-family: VGA;
	text-shadow: black 2px 2px;
	letter-spacing: -1px;
	padding: 0.2rem;
	width: 100%;
}


/*----------Common components---------*/
.title{width: var(--titlewidth);}

.title-c{
	margin-top: 1rem;
	padding: 1rem;
	background-color: white;
	background-color: #FFFFFF40;
	border-left: 3px solid var(--cyan);
	backdrop-filter: blur(10px);
	animation: expand-title 0.75s var(--curve-expo) forwards, title-overflow 3s forwards;
}

.title-back{
	position:absolute;
	top: 0px;
	left: 0px;
	z-index: -1;
	width: var(--titlewidth);
	height: 100%;
	padding: 1rem;				/* This has to be the same as title-c*/
	filter: blur(3px);
	opacity: 0.2;
	background-size: cover;
	background-position: center;
	background-repeat: no-repeat;
}

.content-c{
	width: var(--bodywidth);
	background-color: black;
	margin: auto;
	overflow: hidden;			/* Required to avoid top/bottom margin collapsing*/
}

.content{margin: 40px;}

.abstract{
	width: var(--bodywidth);
	position: relative;
	margin-top: 3rem;
	background-color: black;
}

.abstract-txt{margin: 2rem;}
.endsig{width: 2.5rem;}


/*----------Responsive Design---------*/
/*----------Medium---------*/
@media screen and (max-width: 768px) {
	:root{	
		--navbarwidth: 97vw;
		--bodywidth: 95vw;
		--titlewidth: 95vw;
		--footerwidth: 95vw;
	}
	html{font-size: 16px;}

	.img-caption{flex-wrap: wrap;}
}

/*----------Small---------*/
@media screen and (max-width: 640px) {
	html{font-size: 12px;}
	.content{margin: 20px;}
	.img-responsive{width: 100%;}				/* Makes the image take up the whole width once the viewport is small enough*/
}