:root {
    --primaryColor: rgb(255,255,255);
    --secondaryColor: rgb(20,20,20);
    --companyColor1: rgb(173,3,252);
    --companyColor2: rgb(3,248,252);
    --backgroundColor: rgb(0,0,0);
    --transparent: rgba(0,0,0,0);
}

body {
    background: -webkit-linear-gradient(top,  var(--backgroundColor), rgb(18, 0, 27), rgb(0, 42, 43), var(--backgroundColor)); 
    color: var(--primaryColor);
	font-size: 0.80em;
	font-family: 'Roboto', sans-serif;
	font-weight: lighter;
}

h1, h2, h3, h4, h5, h6 {
	font-weight: lighter;
}

ul {
	padding: 0%;
}

#topBar {
    background: var(--backgroundColor) url("/video/final.gif") no-repeat fixed top center;
    background-size: 50%;
    color: var(--transparent);
    font-size: 19vw;
}

.center {
    text-align: center;
}

.justify {
    text-align: justify;
}

.gradient {
    background: -webkit-linear-gradient(left, var(--companyColor1), var(--companyColor2)) 0%;
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
}

.gradient-vertical {
    background: -webkit-linear-gradient(top, var(--companyColor1), var(--companyColor2)) 0%;
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
}

.vertical-line {
	font-size: 2em;
}

hr {
	border: 0;
	background: -webkit-linear-gradient(left, var(--companyColor1) 50%, var(--companyColor2));
	height: 1px;
	width: 95%;
}

.flex-container {
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    justify-content: center;
  	align-items: center;
}

.sticky {
	position: fixed;
	top: 0;
	width: 100%;
  }

nav {
	background-color: var(--backgroundColor);
}

nav ul li {
	display: inline;
	font-size: 1.5em;
	background-image: linear-gradient(var(--companyColor1), var(--companyColor2)), linear-gradient(var(--companyColor1), var(--companyColor2));
	background-size:1px 100%;
    background-position:0 0, 100% 0;
    background-repeat:no-repeat;
}

nav ul {
	align-items: center;
	justify-content: center;
}

a {
	text-decoration: none;
	color: var(--primaryColor);
	border-radius: 50px;
	padding: 5px 20px;
}

a:hover {
	color: var(--companyColor1);
}

a:active {
	color: var(--companyColor2);
	background-color: var(--companyColor1);
}

.heading {
    color: var(--primaryColor);
    font-size: 2.5em;
}

.paragraph {
    color: var(--primaryColor);
    font-size: 1.5em;
}

.list-paragraph {
	font-size: 0.75em;
}

section {
    padding: 0.1% 5% 2% 5%;
    font-size: larger;
}

.list {
    list-style-type: none;
    font-size: 1.5em;
}

#signature {
	font-family: 'Mr Dafoe', cursive;
	font-size: 1.3em;
}

#polygonArtTitle {
    font-size: 2em;
}

.listHeading {
    font-size: 1.25em;
    font-weight: lighter;
}

.panel-footer {
    font-size: 0.75em;
}


.footer-heading {
	font-size: 2em;
}

.footer-content {
	font-size: 1.5em;
}

.footer-list {
	display: inline;
}

.fa {
	text-decoration: none;
	font-size: 1.5em;
	background: -webkit-linear-gradient(left, var(--companyColor1), var(--companyColor2)) 0%;
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
}