:root {
    --contact: 25px;
	--fonts: clamp(.75em, 1.4vw, 1.5rem);
	--topbarheight: clamp(5.1em, 12vw, 8em);
	--bottombarheight: 2em;
    --AboutImage: clamp(1em, 30.5vw, 30.5vh);
}

.html {
	min-height: 100%;
	position: relative;
}
:focus:not(:focus-visible) {
  outline: 0;
  box-shadow: none;
}
:focus,
.focus-visible:focus:not(:focus-visible) {
  outline: 0;
  box-shadow:
    0 0 0 .2rem #fff,
    0 0 0 .35rem #069;
}
.body {
	height: 100%;
	background-color: #f7f7f7;
	margin-left: 0px;
	margin-top: 0px;
	margin-right: 0px;
	xmargin-bottom: var(--bottombarheight);
	font-family: 'Jost', sans-serif;
	font-size:25px;
	color:#404040;
	border: none;
	background-image: url("images/Background-top.webp");
	background-size:contain;
	background-repeat: no-repeat;
}
a {
	color: inherit;
	text-decoration: none;
}
a:hover { 
    color: inherit;
}
.marginl {
	width: 6.5vw;
	height: var(--topbarheight);
	float: left;
}
.marginr {
	width: 6.5vw;
	height: var(--topbarheight);
	float: right;
}
.bgbottom {
	background-image: url("images/Background-bottom.webp");
	background-position: bottom;
	background-repeat: no-repeat;
	background-size: 100% auto;
	position: fixed;
	bottom: 0;
	width: 100%;
	height: 50vh;
	z-index: -2 !important;
}
.bgtop {
	background-image: url("images/Background-top.webp");
	background-position: top;
	background-repeat: no-repeat;
	background-size: cover;
	position: absolute;
	top: 0;
	width: 100%;
	aspect-ratio: 1940 / 576;
	z-index: -22;
}
.titles {
	padding-top: 1em;
	font-weight: 700;
	letter-spacing: .15rem;
	color: #334ba7;
	padding-bottom: 1em;
	text-align: center;
}

/* INTRO */


@keyframes fadeaway {
  0% {
    opacity: 1;
  }
  100% {
    opacity: 0;
	display: none;
  }
}
@-webkit-keyframes fadeOut {
    0% { opacity: 1;}
    99% { opacity: 0.01;width: 100%; height: 100%; z-index:8;}
    100% { opacity: 0;width: 0; height: 0; display:none; z-index:-20;}
}  
@keyframes fadeOut {
    0% { opacity: 1;}
    99% { opacity: 0.01;width: 100%; height: 100%; z-index:8;}
    100% { opacity: 0;width: 0; height: 0; display:none; z-index:-20;}
}
.intro {
	position:absolute;
	background-color: #f7f7f7;
	height: 100vh;
	width: 100%;
	z-index: 8;
	background-image: url("images/Background-top.webp");
	background-size:contain;
	background-repeat: no-repeat;
	-webkit-animation: fadeOut 1s;
    animation: 1s ease-out 1.7s 1 fadeOut;
    animation-fill-mode: forwards;
	
}
.introimage {
	width:50vw;
	height:100vh;
	background-image: url(images/JMIDlogo.webp);
    background-repeat: no-repeat;
    background-position: center;
    background-size: contain;
    left: 50%;
    position: absolute;
    transform: translate(-50%);
	animation: ;
}
.introbackground {
	width: 100%;
	height: 50vh;
	position: absolute;
	bottom: 0px;
	background-image: url("images/Background-bottom.webp");
    background-repeat: no-repeat;
    background-position: bottom;
    background-size: contain;
	z-index: -1;
}


/* TOP BAR */


.topbar {
    color: #334ba7;
    height: var(--topbarheight);
    width: 100%;
	z-index: 7;
	background-image: url("images/Background-top.webp");
	background-size: cover;
	background-repeat: no-repeat;
	z-index: 2;
}
.topbutton {
	text-align: center;
	justify-content: center;
	width: 50%;
	height: var(--topbarheight);
	font-size: var(--fonts);
	display: flex;
    align-items: center;
	z-index: 2;
}
.topbutton a:hover{
	color: #EE9D50
}
.topbutton.buttonID {
	float: left;
	align-items: left;
	justify-content: left;
}
.topbutton.buttonLearning {
	float: left;
}
.topbutton.buttonMicro {
	float: right;
}
.topbutton.buttonVILT {
	float: right;
}
.logo {
    height: var(--topbarheight);
    width: var(--topbarheight);
    background-image: url(images/JM%20ID%20mini.webp);
    background-repeat: no-repeat;
    background-position: center center;
    background-size: contain;
    left: 50%;
    position: absolute;
    transform: translate(-50%);
}
.buttonContact {
	float: right;
	height: var(--topbarheight);
    width: var(--contact);
    background-image: url("images/contact.svg");
    background-repeat: no-repeat;
    background-position: center center;
    background-size: contain;
	z-index: 2;
}
.topbarleft {
    width: calc(50% - 12.5vw);
    height: 100%;
    float: left;
	z-index: 2;
}
.topbarright {
    width: calc(50% - 12.5vw - var(--contact));
    height: 100%;
    float: right;
	z-index: 2;
}


/* MENU */


#nav-container {
	position: fixed;
	top: 0;
	bottom: 0;
	.height: 100vh;
	overflow: hidden;
	width: 100%;
	pointer-events: none;
	z-index: 20;
}
#nav-container .bg {
	position: absolute;
	top: var(--topbarheight);
	left: 0;
	width: 100%;
	height: 100%;
	visibility: hidden;
	opacity: 0;
	transition: .3s;
	background: #000;
}
#nav-container:focus-within .bg {
	visibility: visible;
	opacity: .6;
}
#nav-container * {
	visibility: visible;
}
.button {
	visibility: hidden;
	opacity: 0;
	z-index: 1;
	right: 7vw;
	position: absolute;
	height: var(--topbarheight);
    width: 1.5em;
    background-image: url("images/menu.svg");
    background-repeat: no-repeat;
    background-position: center center;
    background-size: contain;
	cursor: pointer;
	z-index: 22;
}
.icon-bar {
	display: block;
	width: 100%;
	height: 5px;
	background: #aaa;
	transition: .3s;
}
.icon-bar + .icon-bar {
	margin-top: 5px;
}
#nav-container:focus-within .button {
	pointer-events: none;
}
#nav-content {
	margin-top: var(--topbarheight);
	.padding-top: calc(var(--topbarheight) - 1.25em);
	padding-right: 6.5vw;
	padding-left: 6.5vw;
	position: absolute;
	top: 0;
	right: 0;
	height: 100%;
	background: #f7f7f7;
	pointer-events: fill;
	-webkit-tap-highlight-color: rgba(0,0,0,0);
	-webkit-transform: scaleX(0);
	-moz-transform: scaleX(0);
	-ms-transform: scaleX(0);
	transform:scaleX(0);
	transform-origin: right;
	-webkit-transition: transform .3s;
	-moz-transition: transform .3s;
	transition: transform .3s;
	will-change: transform;
	contain: paint;
	text-align: right;
}
#nav-content ul {
  height: 100%;
  display: flex;
  flex-direction: column;
}
#nav-content li a {
  padding: 10px 5px;
  display: block;
  transition: color .1s;
}
#nav-content li a:hover {
  color: #EE9D50;
}
#nav-content li:not(.small) + .small {
  margin-top: auto;
}
.small {
  display: flex;
  align-self: center;
}
.small a {
  font-size: 12px;
  font-weight: 400;
  color: #888;
}
.small a + a {
  margin-left: 15px;
}
#nav-container:focus-within #nav-content {
  transform: none;
  z-index: 20;
}
a {
  color: currentColor;
  transition: .2s ease-in-out;
}
h1, h2, h3, h4 {
  margin: 0;
}
ul {
  padding: 0;
  list-style: none;
}


/* BOTTOM BAR */


.bottombar {
    color: #ffffff;
	background-color: #334ba7;
    height: var(--bottombarheight);
    width: 100%;
	position: fixed;
	bottom: 0;
	z-index: 7;
	transform: translate3d(0,0,0);
	overflow: auto;
	overflow-y: hidden;
}
.marginl.bottom {
	height: var(--bottombarheight);
}
.marginr.bottom {
	height: var(--bottombarheight);
}
.bottombutton {
	height: 100%;
	margin: auto;
	font-size: var(--fonts);
	display: flex;
    align-items: center;
}
.bottombutton.linkedin {
	float: left;
}
.bottombutton.email {
	position: relative;
	right: 6.5vw;
	float: right;
}
.linkedinicon {
	height: var(--fonts);
}


/* ABOUT SECTION */


.AboutContainer {
	background-color: #334ba7;
	padding: 6.5vw;
}
.AboutImageContainer {
	padding-right: 6vw;
	background-image: url("images/photo.webp");
    background-repeat: no-repeat;
    background-position: left center;
    background-size: contain;
	margin-top: -3em;
	width: var(--AboutImage);
	height: var(--AboutImage);
}
.AboutImageContainerB {
	height: 0;
	width: 0;
	visibility: hidden;
}
.AboutImageB {
	width: 0;
	visibility: hidden;
}
.AboutText {
	font-size: var(--fonts);
}
.AboutButton {
	display: inline-block;
	color: #ffffff;
	border: 1px solid;
	border-color: #FFFFFF;
	padding: .45em;
	padding-left: .6em;
	padding-right: .6em;
	transition: 0.3s;
	float:left;
	cursor: pointer;
}
.AboutButton:hover {
	background-color: rgba(255,255,255,.1);
}
.AboutButton.alt {
	display: block;
	float: inherit;
}
.spacer{
	float: left;
	width: 2em;
}
.AboutMeContainer {
	padding-left: 13vw;
	padding-right: 13vw;
	padding-bottom: 5.5vw;
	padding-top: 8vw;
	display: none;
	color: white;
	line-height: calc(1.5 * var(--fonts));
	text-align: center;
	font-size: var(--fonts);
	background-color: #4362cd;
}

/* PORTFOLIO */


.portfoliocontainer {
	padding-left: 6.5vw;
	padding-right: 6.5vw;
	padding-top: 1.5vw;
	padding-bottom: calc(1.5em + var(--bottombarheight));
	margin: auto;
	display: grid;
	grid-gap: 3.25vw;
	grid-template-columns: repeat(auto-fit, minmax(20em, 1fr));	
}
.portfoliocontainerb {
	display: flex;
	.align-items: center;
	justify-content: center;
}
.portfoliobox{
	display: block;
	box-shadow: .2em .2em 0 0 black;
	width: clamp(20em, 40.25vw, 31em);
	text-align: left;
	background-color: #edeff3;
	.float: left;
}
.playcontainer {
	aspect-ratio: 16 / 9;
	background-color: slateblue;
	position: relative;
	.z-index: 0;
}
.playbutton {
	opacity: .5;
	display: flex;
	position:absolute;
	top: 0;
	margin: auto;
	height: 100%;
	width: 100%;
}
.playbutton img{
	brightness(30%) saturate(90);
	height: 4em;
	margin: auto;
}
.playinfo {
	min-height: 11em;
	.background-color: #edeff3;
	padding: 1em;
	list-style-position:inside;
}
.playinfo p{
	margin-bottom: 0;
}
.playinfo a:hover{
	text-decoration: underline .1em;
	text-underline-offset: .2em;
}
.icons {
	opacity: .5;
	height: 1.5em;
	width: 1.5em;
	display: flex;
	position:relative;
	top: .75em;
	left: .75em;
	display: inline-block;
}
.bideo {
	max-height: calc(100vh - var(--topbarheight) - var(--bottombarheight) - 5em)
}


/* PROFILE */

.badgescontainer {
	padding-left: 6.5vw;
	padding-right: 6.5vw;
	padding-top: 1vw;
	padding-bottom: 4vw;
	margin: auto;
	display: grid;
	grid-gap: 3.25vw;
	.grid-template-columns: repeat(auto-fit, minmax(9em, 1fr));
	grid-template-columns: repeat(auto-fit, minmax(min(100%/3, max(9em, 100%/6)), 1fr));
}
.credly {
	height: calc(2 * var(--fonts));
	position: relative;
	bottom: calc(-.25 * var(--fonts));
}
.badgetitles {
	font-size: var(--fonts);
	margin: 0;
}
.badgeimage {
	max-width: 100%;
}
.profiletitle {
	font-weight: 700;
	letter-spacing: .15rem;
	color: #334ba7;
	padding-bottom: 1em;
}
.proficiency {
	display: flex;
	align-items: center;
	.justify-content: center;
	text-align: left;
	font-size: var(--fonts);
}
.proficiency-image {
	height: calc(2 * var(--fonts));
}

/* MOBILE STYLES */


@media screen and (max-width: 1080px) and (orientation:portrait){

:root {
--topbarheight: 20vw;
}

div.titles {
	padding-top: calc(1em + var(--topbarheight)) !important;
}
div.topbar {
	position: fixed;
}

div.topbutton{
    opacity: 0;
	width: 0;
	height: 0;
	visibility: hidden;
}
div.bottombutton {
	.font-size: calc(1 * var(--fonts));
	font-size: var(--fonts);
}
div.bottombutton, contact {
	font-size: 1em;	
}
div.buttonContact {
	visibility: hidden;
}
div.button {
	visibility: visible;
	opacity: 1;
	pointer-events: auto;
}
div.AboutImageContainer{
	all:unset;
	opacity: 0;
    display: inline-block;
	width: 0 !important;
	height: 0 !important;
}
div.AboutImageContainerB {
	all:unset;
}
div.AboutImage{
	all:unset;
	opacity: 0 !important;
	width: 0 !important;
	height: 0 !important;
	visibility: hidden !important;
	display: none !important;
}
img.AboutImageB {
	all:unset;
	margin: auto;
	opacity: 1;
	display: block;
	xwidth: 70% !important;
    width: clamp(1em, 70%, 40.5vh);
}
table.AboutTable {
	display: block;
	padding-top: var(--topbarheight);
}
td.Abouta{
    width: 100%;
	height: 0px;
	clear: both;
	display:block;
}
td.AboutText {
	all: unset;
	text-align:center !important;
    width:auto !important;
	clear:both;
}
div.AboutMeContainer {
	font-size: unset;
    text-align: center;
}
div.AboutButton {
	display: block;
	margin:auto;
	float: inherit;
}
div.spacer {
	height: 1em;
	float: inherit;
}
}