@font-face{
	font-family: "ms-extrabold";
	src: url("fonts/Montserrat/Montserrat-ExtraBold.ttf");
}

@font-face{
	font-family: "raleway-t";
	src: url("fonts/Raleway/Raleway-T.ttf");
}

@font-face{
	font-family: "raleway-r";
	src: url("fonts/Raleway/Raleway-R.ttf");
} 


@font-face{
	font-family: "merriweather";
	src: url("fonts/MerriweatherSans-Regular.ttf");
}

@font-face{
	font-family: "heading";
	src: url("fonts/FredokaOne-Regular.ttf");
}

@font-face{
	font-family: "subheading";
	src: url("fonts/Comfortaa-Regular.ttf");
}

@font-face{
	font-family: "ibm";
	src: url("fonts/ibm.ttf");
}

@font-face{
	font-family: "ibm-light";
	src: url("fonts/IBM_Plex_Sans/IBMPlexSans-Thin.ttf");
}

@font-face{
	font-family: "naming";
	src: url("fonts/mg.ttf");
}

@font-face{
	font-family: "roboto-slab";
	src: url("fonts/Roboto_Slab/static/RobotoSlab-Regular.ttf");
}

/* Keyframes */

@keyframes move-twink-back {
    from {
    	background-position: 0 0;
    }

    to {
    	background-position: -10000px 5000px;
    }
}

@keyframes raise{
	from{
		margin-bottom: 2vh;
	}
	to{
		margin-bottom: 4vh;
	}
}

@keyframes fadein{
	from{
		opacity: 0;
	}
	to{
		opacity: 1;
	}
}

@keyframes hl{
	from{
		margin-bottom: 0vh;
		border-bottom: 2px solid var(--bg);
	}
	to{
		margin-bottom: 2vh;
		border-bottom: 2px solid var(--contrast);
	}
}

@keyframes spin {
  0% { 
  	transform: rotate(0deg); 
  }
  100% { 
  	transform: rotate(360deg); 
  }
}

html::-webkit-scrollbar {
	display: none;
}

html{
	scroll-behavior: smooth;
	/*--bg: #171717;*/
	--bg: #F3F4F8;
	--font: #36454f;
	/*--bg: #0d0f1a;*/
	/*--bg : #242424;*/
	/*--contrast: #C41E3A;
	--contrast: white;*/
	/*--contrast: #f2c600;*/
	/*--contrast: #deac21;*/
	/*--contrast: #8c1c36;*/
	--contrast: #f1ba55;
}

body {
	/*background: linear-gradient(90deg, rgba(62,128,222,1) 19%, rgba(0,202,255,1) 100%);*/
	background: var(--bg);
	color: var(--font);
	padding: 0;
	margin: 0;
	font-family: "ibm";
	overflow-x: hidden;
	animation: fadein 2s;
}

a {
	text-decoration: none;
	cursor: pointer;
	color: var(--contrast); 
}

#footer a {
	color: var(--contrast);
}

#topbar{
	/*background: var(--bg);*/
	background-color: var(--bg);
	color: var(--font);
	height: 7vh;
	width: 100vw;
	font-size: 2vh;
	position: absolute;
	top: 3vh;
	left: 0;
	display: flex;
	justify-content: flex-end;
	align-items: center;
	text-align: center;
	font-weight: bold;
	/*outline: 1px solid white;*/
}

#name-header{
	font-family: "naming";
	background: var(--bg);
	color: #333333;
	height: 4vh;
	width: auto;
	position: absolute;
	top: 3vh;
	left: 0;
	z-index: 2;
	margin-left: 7vw;
	padding: 2vh;
	font-size: 1.5vw;
}

.link{
	display: inline-block;
	padding: 2vh;
	margin-right: 0.5vh;
	text-decoration: none;
	color: var(--font);
}

.link:hover{
	animation: hl 0.5s forwards;
	cursor: pointer;
}

#navbar-spacer{
	width: 5vw;
}

#container{
	width: 100vw;
	height: 100vh;
	/* Nudges the whole hero stack down; raise/lower to move ANALYTICAL. */
	box-sizing: border-box;
	padding-top: 8vh;
	z-index: -1;
	/*background: var(--bg);*/
	/*background: url("images/bg");*/
	background-position: center;
	background-size: cover;
	display: flex;
	flex-direction: column;
  	align-items: center;
  	justify-content: center;
}

#hero-row{
	display: flex;
	align-items: center;
	justify-content: center;
	width: 100vw;
}

/* Social icons and the three cards share one line */
#hero-bottom{
	display: flex;
	align-items: center;
	width: 70vw;
	margin-top: 5vh;
}

#hero-bottom .contact-row{
	width: auto;
	flex-shrink: 0;
	align-items: center;
}

#content{
	font-family: "ibm", sans-serif;
	display: inline-block;
	color: #505050;
	font-size: 1vw;
	height: auto;
}

#name-description{
	width: 70%;
	font-size: 2vh;
}

#emphasis{
	font-family: "ms-extrabold", sans-serif;
	color: var(--font);
	font-size: 3.2vw;
	font-weight: 1000;
}

#name{
	width: 35vw;
	display: inline-block;
}

#picture{
	width: 35vw;
	height: auto;

	/* Need this for image */
	display: flex;
	flex-direction: column;
	justify-content: center;
	align-items: center;

	/* Need this for background */
	/*background-image: url(images/me.png);
	background-position: center;
	background-repeat: no-repeat;
	background-size: 75%, 75%;*/
}

/* Need this for image */
#picture > img{
	width: 380px;
	height: 350px;
	border-radius: 10%;
}

#about{
	width: 100vw;
	text-align: center;
	font-weight: lighter;
}
ul{
	list-style: none;
}
ul li::before{
	content: attr(data-icon);
	font-size: 1.25em;
}

.heading{
	position: relative;
	margin-top: 5vh;
}

.rheading{
	position: relative;
	margin-top: 5vh;
}

#about-title, #projects-title{
	position: relative;
	font-family: "raleway-r";
	text-align: left;
	display: inline-flex;
	width: 70vw;
	font-size: 2.5vw;
	padding: 0.1vh;
	/*font-weight: lighter;*/
}

#about-subtitle, #projects-subtitle{
	font-family: "raleway-r", sans-serif;
	text-align: left;
	display: inline-block;
	width: 70vw;
	font-size: 1.2vw;
	color: grey;
}

#exp-subtitle{
	font-family: "raleway-r", sans-serif;
	text-align: left;
	display: inline-block;
	width: 70vw;
	font-size: 1.2vw;
	color: grey;
}

#about-content {
	text-align: left;
	display: inline-block;
	width: 70vw;
	font-size: 1.1vw;
	/*font-weight: lighter;*/
}


#projects {
	text-align: center;
}

#exp-title{
	font-family: "raleway-r";
	text-align: left;
	display: inline-flex;
	width: 70vw;
	height: auto;
	font-size: 2.5vw;
	padding: 0.1vh;
	justify-content: flex-start;
}

#exp{
	height: auto;
	width: 100vw;
	text-align: center;
	font-weight: lighter;
}

.exp-grid{
	display: grid;
	grid-template-columns: repeat(2, 1fr);
	gap: 5vh 3vw;
	width: 70vw;
	margin: 0 auto;
	text-align: left;
}

.exp-item{
	display: flex;
	flex-direction: column;
	height: auto;
	width: 100%;
}

.exp-pic{
	width: 100%;
	text-align: left;
	margin: 0 0 1.5vh;
}

.exp-desc{
	width: 100%;
	text-align: left;
	margin: 0;
	font-size: 1.6vh;
}

.desc-title{
	/*font-family: "raleway-r";*/
	font-weight: bold;
	/*color: var(--contrast);*/
	font-size: 1.4vw;
}

.desc-subtitle{
	font-size: 1vw;
	color: grey;
}

.desc-image{
	/* block, not inline — an inline img sits on the text baseline and adds
	   ~4.5px of descender space, misaligning rows against .desc-wordmark */
	display: block;
	width: 240px;
	height: 170px;
	object-fit: contain;
	border-radius: 25px;
}

.desc-image.photo{
	object-fit: cover;
}

/* Portrait source in a landscape box: bias the crop up so the face survives */
.desc-image.photo.top{
	object-position: center 10%;
}

/* Text stand-in for experiences without a usable logo — bare type, no card */
.desc-wordmark{
	display: flex;
	align-items: center;
	justify-content: center;
	width: 240px;
	height: 170px;
	font-family: "roboto-slab", serif;
	font-size: 2.2vw;
	letter-spacing: -0.01em;
	color: var(--font);
}

.desc-location{
	font-size: 1vw;
	color: grey;
}

/* PROJECTS GRID */
.projects-grid{
	display: grid;
	grid-template-columns: repeat(2, 1fr);
	gap: 1.8vw;
	width: 70vw;
	margin: 4vh auto 0;
	text-align: left;
}

.project-card{
	position: relative;
	display: flex;
	flex-direction: column;
	background: white;
	border-radius: 0.5vw;
	padding: 3vh 1.8vw;
	box-shadow: 0 0.35vh 0.35vh rgba(0, 0, 0, 0.3);
	transition: transform 0.25s ease, box-shadow 0.25s ease;
}

.project-card:hover{
	transform: translateY(-0.6vh);
	box-shadow: 0 1vh 1.2vh rgba(0, 0, 0, 0.2);
}

/* Cards that link out; the arrow marks them as pressable */
a.project-card{
	color: inherit;
	text-decoration: none;
}

a.project-card::after{
	content: "\2197";
	position: absolute;
	top: 2.4vh;
	right: 1.4vw;
	font-size: 1vw;
	color: grey;
	transition: color 0.25s ease;
}

a.project-card:hover::after{
	color: var(--contrast);
}

/* Bottom label for work that can't be linked */
.project-note{
	margin-top: auto;
	padding-top: 2.5vh;
	font-size: 0.85vw;
	font-style: italic;
	color: grey;
}

.project-name{
	font-weight: bold;
	color: var(--font);
	font-size: 1.4vw;
}

.project-desc{
	color: var(--font);
	font-weight: lighter;
	font-size: 1vw;
	line-height: 1.55;
	margin: 1.5vh 0 0;
}

.project-tags{
	display: flex;
	flex-wrap: wrap;
	gap: 0.5vw;
	margin-top: auto;
	padding-top: 2.5vh;
}

.tag{
	font-size: 0.85vw;
	color: grey;
	background: var(--bg);
	padding: 0.6vh 0.7vw;
	border-radius: 0.4vw;
	white-space: nowrap;
}

/* PUBLICATION */
.publication-card{
	position: relative;
	overflow: hidden;
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 2vw;
	box-sizing: border-box;
	width: 70vw;
	margin: 4.5vh auto 0;
	text-align: left;
	background: white;
	border-radius: 0.5vw;
	padding: 3.5vh 2vw 3.5vh 2.4vw;
	box-shadow: 0 0.35vh 0.35vh rgba(0, 0, 0, 0.3);
	transition: transform 0.25s ease, box-shadow 0.25s ease;
}

/* Echoes the gradient block on the fun-fact cards */
.publication-card::before{
	content: "";
	position: absolute;
	top: 0;
	bottom: 0;
	left: 0;
	width: 0.5vw;
	background: linear-gradient(180deg, hsla(28, 77%, 49%, 1) 0%, hsla(42, 72%, 53%, 1) 100%);
}

.publication-card:hover{
	transform: translateY(-0.6vh);
	box-shadow: 0 1vh 1.2vh rgba(0, 0, 0, 0.2);
}

.publication-label{
	font-size: 0.8vw;
	letter-spacing: 0.2em;
	text-transform: uppercase;
	color: grey;
}

.publication-name{
	font-weight: bold;
	color: var(--font);
	font-size: 1.4vw;
	margin-top: 0.8vh;
}

.publication-desc{
	color: var(--font);
	font-weight: lighter;
	font-size: 1vw;
	line-height: 1.55;
	margin: 1.5vh 0 0;
	max-width: 46vw;
}

.publication-venue{
	flex-shrink: 0;
}

.venue-tag{
	display: inline-block;
	font-size: 0.95vw;
	font-weight: bold;
	letter-spacing: 0.05em;
	color: var(--font);
	background: var(--contrast);
	padding: 1vh 1.1vw;
	border-radius: 0.4vw;
	text-decoration: none;
	cursor: pointer;
	transition: background 0.2s ease, transform 0.2s ease;
}

.venue-tag:hover{
	background: hsla(42, 72%, 53%, 1);
	transform: translateY(-0.2vh);
}

.venue-tag:active{
	transform: translateY(0);
}

.venue-tag:focus-visible{
	outline: 2px solid var(--font);
	outline-offset: 3px;
}

@media only screen and (max-width: 900px){
	.exp-grid{
		grid-template-columns: 1fr;
		width: 86vw;
	}

	.projects-grid{
		grid-template-columns: 1fr;
		gap: 2vh;
		width: 86vw;
	}

	.publication-card{
		flex-direction: column;
		align-items: flex-start;
		gap: 2vh;
		width: 86vw;
		margin-top: 2vh;
	}
}

/*FUN FACTS CSS*/
#ff {
	display: flex;
	align-items: stretch;
	justify-content: space-between;
	gap: 1vw;
	/* takes whatever the icons leave on the row */
	flex: 1;
	margin-left: 3vw;
	/* was inherited from #about-content / #about before the cards moved into the hero */
	font-size: 0.95vw;
	font-weight: lighter;
	text-align: center;
}

.ff-item {
	display: flex;
	flex: 1;
	min-width: 0;
	border-radius: 0.5vw;
  box-shadow: 0 0.35vh 0.35vh rgba(0, 0, 0, 0.3);
  background: white;
  text-align: center;
}

.grad {
	border-radius: 0.5vw;
	background: linear-gradient(90deg, hsla(28, 77%, 49%, 1) 0%, hsla(42, 72%, 53%, 1) 100%);
	/*#f1ba32;*/
	/*linear-gradient(45deg, #7f7fd5, #86a8e7, #91eae4);  W3C, IE 10+/ Edge, Firefox 16+, Chrome 26+, Opera 12+, Safari 7+ */
}

.grad > img {
	margin: 1vh;
	width: 5vh;
	height: 5vh;
}

.ff-text {
	display: flex;
	flex-direction: column;
	justify-content: center;
	width: 100%;
	padding: 0.5vh;
}

.contact-row{
	display: flex;
	justify-content: flex-start;
	align-items: flex-start;
	height: auto;
	width: 70%;
}


.social{
	text-align: left;
	color: white;
	font-weight: lighter;
}

.handle{
	color: grey;
}

.icon{
	z-index: 1;
	height: 6vh;
	width: 6vh;
	background-size: cover;
	margin-right: 2vh;
}

#ghub{
	background-image: url(images/ghub.png);
}

#linkedin{
	background-image: url(images/lkn.png);
}

#email{
	background-image: url(images/mail.png);
}

#footer{
	text-align: center;
	font-size: 1.5vh;
	width: 100%;
	height: 7vh;
	font-weight: lighter;
}

#footer-content{
	display: inline-block;
	color: grey;
}

.skills-row{
	height: auto;
	width: 100%;
	display: flex;
	justify-content: center;
	align-items: center;
	padding: 2vh;
}


#warning-container{ 
	background-color: var(--bg);
	height: 100vh;
	width: 100vw;
	/*text-align: center;*/
	color: black;
	display: none; 
	text-align: center;
}

#warning{
	/*display: inline-block;*/
	margin: auto;
}

@media only screen and (orientation:portrait) {
	#wrapper { 
		display:none; 
	}

	#warning-container { 
		display:grid; 
	}
}

@media only screen and (orientation:landscape) {
	#warning-container { 
		display:none; 
	}
}