body {
	margin: 0px;
	padding: 0px;
	font-weight: 100;
	font-family: "Work Sans", sans-serif;
}

a {
	font-weight: 400;
	text-decoration: none;
}

b {
	font-weight: 450 !important;
}

dt {
	line-height: 30px;
}

.low-reso {
	display: none;
	font-size: 5em;
	text-align: center !important;
}

/* 
  ##Device = Tablets, Ipads (portrait)
  ##Screen = B/w 768px to 1024px
*/

@media (min-width: 768px) and (max-width: 1024px) {
    .fab, .fas, .fa-brands {
        font-family: "Font Awesome 5 Free";
        background-image: url('assets/bkg.jpg');
        background-size: 3em 2em;
        background-clip:text;
        -webkit-background-clip:text;
        color:transparent;
    }

	.low-reso {
		display: inline !important;
	}

	.panel-container>.main-panel {
		width: 100%;
		padding: 10%;
	}

	.panel-container>.side-panel {
		display: none;
		text-align: center !important;
		width: 100% !important;
		background-size: auto !important;
	}

	span {
		letter-spacing: 10px;
		font-size: 130px !important;
	}

	h1 {
		font-size: 72px;
	}
}

/* 
    ##Device = Tablets, Ipads (landscape)
    ##Screen = B/w 768px to 1024px
 */

@media (min-width: 768px) and (max-width: 1024px) and (orientation: landscape) {
  .fab, .fas, .fa-brands {
    font-family: "Font Awesome 5 Free";
    background-image: url('assets/bkg.jpg');
    background-size: 3em 2em;
    background-clip:text;
    -webkit-background-clip:text;
    color:transparent;
}

	.low-reso {
		display: inline !important;
	}

	.panel-container>.main-panel {
		width: 100%;
		padding: 10%;
	}

	.panel-container>.side-panel {
		display: none;
		text-align: center !important;
		width: 100% !important;
		background-size: 100% auto !important;
	}

	span {
		letter-spacing: 10px;
		font-size: 130px !important;
	}

	h1 {
		font-size: 72px;
	}
}

/* 
    ##Device = Low Resolution Tablets, Mobiles (Landscape)
    ##Screen = B/w 481px to 767px
  */

@media (min-width: 481px) and (max-width: 767px) {
	.fab, .fas, .fa-brands {
    font-family: "Font Awesome 5 Free";
    background-image: url('assets/bkg.jpg');
    background-size: 3em 2em;
    background-clip:text;
    -webkit-background-clip:text;
    color:transparent;
}

	.low-reso {
		display: inline !important;
	}

	.panel-container>.main-panel {
		width: 100%;
		padding: 10%;
	}

	.panel-container>.side-panel {
		display: none;
	}

	span {
		letter-spacing: 10px;
		font-size: 130px !important;
	}

	h1 {
		font-size: 72px;
	}
}

/* 
    ##Device = Most of the Smartphones Mobiles (Portrait)
    ##Screen = B/w 320px to 479px
  */

@media (min-width: 320px) and (max-width: 480px) {
	.fab, .fas, .fa-brands {
    font-family: "Font Awesome 5 Free";
    background-image: url('assets/bkg.jpg');
    background-size: 3em 2em;
    background-clip:text;
    -webkit-background-clip:text;
    color:transparent;
}

	.low-reso {
		display: inline !important;
	}

	.panel-container>.main-panel {
		width: 70%;
	}

	.panel-container>.side-panel {
		display: none;
	}

	span {
		letter-spacing: 10px;
		font-size: 130px !important;
	}

	h1 {
		font-size: 130px;
	}
}

/* Desktop/Laptop */

/* 
  ##Device = Desktops
  ##Screen = 1281px to higher resolution desktops
*/

@media (min-width: 1281px) {
	.panel-container>.main-panel {
		padding: 50px;
		width: 75%;
	}

	.main-panel>.panel-content {
		width: 100%;
	}

	.panel-container>.side-panel {
		width: 650px;
	}

	h1 {
		font-size: 48px;
	}

	span {
		letter-spacing: 10px;
		font-size: 48px !important;
	}
}

/* 
    ##Device = Laptops, Desktops
    ##Screen = B/w 1025px to 1280px
  */

@media (min-width: 1025px) and (max-width: 1280px) {
	.panel-container>.main-panel {
		padding: 50px;
		width: 75%;
	}

	.main-panel>.panel-content {
		width: 100%;
	}

	.panel-container>.side-panel {
		width: 650px;
	}

	h1 {
		font-size: 48px;
	}

	span {
		letter-spacing: 10px;
		font-size: 48px !important;
	}
}

.panel-container {
	position: absolute;
	top: 0;
	bottom: 0;
	display: flex;
}

.panel-container>.main-panel {
	color: #494f5a;
	background: #fff;
	display: flex;
	flex-direction: column;
	overflow: auto;
	font-family: "Roboto", sans-serif !important;
	font-weight: 300;
}

.main-panel>.panel-content {
	letter-spacing: 1px;
}

.panel-container>.side-panel {
	color: #fff;

	padding-top: 220px;
	text-align: center;
	background: #7666dc;
	background-image: url("assets/bkg.jpg");
	background-repeat: no-repeat;
	background-attachment: fixed;
	background-size: 70% auto;
}

h1 {
	letter-spacing: 10px;
	font-weight: 100;
}

.zeroth {
	color: #494f5a;
}

.first {
	color: #6e60db;
}

.second {
	color: #b359ca;
}

.third {
	color: #d87180;
}

.fourth {
	color: #e69b72;
}

.panel-content>a:hover,
a:active {
	color: #fff;
	background-color: #5041d8;
}

h2 {
	font-weight: 400;
}

mark.peach {
	font-weight: bold;
	color: #d87180;
	background-color: #FFFFFF;
}

mark.orange {
	font-weight: bold;
	color: #e69b72;
	background-color: #FFFFFF;
}

mark.blue {
	font-weight: bold;
	color: #5041d8;
	background-color: #FFFFFF;
}

span {
	letter-spacing: 10px;
}

span>a {
	color: #fff;
}

span>a:visited {
	color: #fff;
}

span>a:active,
a:hover {
	color: #b359ca;
}

.line {
	margin-top: 30px;
	width: 60%;
	border-radius: 50px;
}

.footer {
	width: 1.5em;
	height: 1.5em;
}