:root {
    font-size: 10px;

    --black: rgba(0, 0, 0, 1);
    --white: rgba(255, 255, 255, 1);
    --navigation-grey: rgba(102, 102, 102, 1);
    --header-grey: rgba(177, 177, 177, 1);
}

* {
	margin: 0;
	padding: 0;
}

a {text-decoration: none;}

ul {list-style: none;}

body {
	height: 100vh;

	display: grid;
	grid-template-rows: 19fr 1fr;

	overflow: hidden;

	user-select: none;
}

aside {
	position: fixed;
	top: 0;
	z-index: 9999;

	height: 7.5vh;
	width: 100vw;

	display: grid;
	grid-template-columns: 6fr minmax(20em, 4fr) 6fr;

	align-items: center;
	text-align: end;

	font-size: min(3.5vh, 3vw);
	font-weight: bold;
	letter-spacing: -.025em;

	background-color: rgba(0, 0, 0, 0.9);
	backdrop-filter: saturate(180%) blur(20px);
	-webkit-backdrop-filter: saturate(180%) blur(20px);

	user-select: none;
}

aside > nav.global-navigation {
	grid-column: 2/3;

	font-family: Poppins, sans-serif;
}

nav.global-navigation > ul.global-navigation-items {
	display: flex;
	flex-direction: row;

	justify-content: space-between;

	list-style: none;
}

nav.global-navigation a.global-navigation-link {
	color: var(--darkg);

	transition: 0.5s cubic-bezier(0.4, 0, 1, 1);
}

nav.global-navigation a.global-navigation-link:hover {
	color: var(--lightg);

	text-decoration: underline;
}

nav.global-navigation a.global-navigation-link.active {
	color: var(--lightg);
}

main {
	grid-row: 1/2;

	width: 100vw;

	display: grid;
	grid-auto-rows: 0.5vh 4.4vh 0.1vh minmax(90.5vh, max-content) auto minmax(89.5vh, max-content);

	overflow-y: scroll;
}

main > div.header-margin-1 {
	grid-row: 1/2;

	background: var(--blackbg);
}

main > div.header-margin-2 {
	grid-row: 2/3;

	background: var(--whitebg);
}

main > div.header-margin-3 {
	grid-row: 3/4;

	background: var(--blackbg);
}

section.cover {
	grid-row: 4/5;

	display: grid;
	grid-template-columns: 2.5fr 2.5fr 2.5fr 1fr 8fr 1fr 2.5fr 2.5fr 2.5fr;
	grid-template-rows: 3fr 2.5fr 3fr 7fr 2.5fr 3fr;

	background: var(--blackbg);
}

section.cover > h1 {
	grid-column: 2/4;
	grid-row: 2/3;

	max-height: 20vh;
	max-width: 20vw;

	align-self: end;

	font-size: min(5vh, 2.5vw);
	font-family: Poppins, sans-serif;
	color: var(--lightg);
}

section.cover > div.welcome {
	grid-column: 2/4;
	grid-row: 3/4;

	font-size: min(3.5vh, 1.75vw);
	font-family: Poppins, sans-serif;
	color: var(--lightg);
}

section.cover > div.description {
	grid-column: 5/8;
	grid-row: 4/5;

	font-size: min(3.5vh, 1.75vw);
	font-family: Poppins, sans-serif;
	color: var(--lightg);
}

section.projects {
	grid-row: 4/5;
	max-height: minmax(90vh, auto);

	display: grid;
	grid-template-columns: 2.5fr 2.5fr 15fr 2.5fr 2.5fr;
	grid-template-rows: 0.5fr minmax(5vh, 1fr) 19fr;
}

section.projects > div.header {
    position: sticky;
	top: 7.25vh;
	left: 0;
	z-index: 9990;

	grid-column: 1/6;
	grid-row: 2/3;

	height: 5vh;

	display: grid;

	align-items: center;
}

section.projects > div.header.white {
	padding-left: 10%;

	background-color: rgba(255, 255, 255, 1);
	backdrop-filter: saturate(180%) blur(20px);
	-webkit-backdrop-filter: saturate(180%) blur(20px);

	color: var(--blackbg);
	font-size: min(3vh, 2.5vw);
	font-weight: bold;
	letter-spacing: -.025em;
}

section.projects > div.header.black {
	padding-left: 10%;

	background-color: rgba(0, 0, 0, 0.95);
	backdrop-filter: saturate(180%) blur(20px);
	-webkit-backdrop-filter: saturate(180%) blur(20px);

    color: var(--lightg);
	font-size: min(3vh, 2.5vw);
	font-weight: bold;
	letter-spacing: -.025em;
}

section.projects > div.header > h2 {
	font-size: min(3.5vh, 3vw);
	font-weight: bold;
	letter-spacing: -.025em;
}

section.projects > ul.projects-list {
	grid-column: 3/4;
	grid-row: 3/4;

	margin-bottom: 7.5vh;
}

ul.projects-list > li.project-item {
	width: 100%;
	height: min(52vh, 30vw);

	margin: 2vh;
	box-shadow: 0.1em 0.1em 0.5em #888888;

	display: grid;
	grid-template-columns: 1fr 7.5fr 7.5fr;
	grid-template-rows: 2fr 8fr 2fr 1fr;
}

li.project-item > a.project-link {
	width: 100%;
	height: 100%;

	grid-column: 2/3;
	grid-row: 1/5;

	display: grid;
	grid-template-rows: 2fr 10fr 1fr;
}

li.project-item h3 {
	grid-row: 1/2;

	align-self: center;

	color: var(--blackbg);
	font-size: min(3vh, 2.5vw);
	font-weight: bold;
	letter-spacing: -.025em;
}

li.project-item div.project-visual {
	grid-row: 2/3;

	padding-left: 5%;
	padding-right: 5%;
}

div.project-visual > img {
	width: min(40vh, 25vw);
	height: min(40vh, 25vw);

	box-shadow: 0.075em 0.075em 0.25em #888888;
}

div.project-visual > img:hover {
	width: min(42vh, 26vw);
	height: min(42vh, 26vw);

	margin-top: -min(1vh, 1vw);
	margin-left: -min(1vh, 1vw);
	box-shadow: 0.1em 0.1em 0.25em #888888;
}

li.project-item > div.project-description {
	grid-column: 3/4;
    grid-row: 2/3;

	color: var(--blackbg);
	font-size: min(3vh, 2.5vw);
}

li.project-item > a.continue {
	grid-row: 3/4;
	grid-column: 3/4;

    align-self: center;

	color: var(--blackbg);
	font-size: min(3vh, 2.5vw);
	letter-spacing: -.025em;
}

section.about {
	grid-row: 6/7;

	display: grid;
	grid-template-columns: 2.5fr 1.5fr 3.5fr 1fr 8fr 1fr 2.5fr 2.5fr 2.5fr;
	grid-template-rows: 6fr 2.5fr 3fr 7fr 2.5fr;

	background: var(--blackbg);
}

section.about > h2.tag {
	grid-column: 2/4;
	grid-row: 2/3;
    align-self: end;

	max-height: 20vh;
	max-width: 20vw;

	color: var(--lightg);
	font-size: min(5vh, 2.5vw);
	font-family: Poppins, sans-serif;
}

section.about > div.site {
	grid-column: 3/7;
	grid-row: 3/4;

	color: var(--lightg);
	font-size: min(3.5vh, 1.75vw);
	font-family: Poppins, sans-serif;
}

.flyin {
	transform: translateX(7.5em);
	animation: come-in 1s ease-out;
}

@keyframes come-in {
	to {
		transform: translateX(0px);
		opacity: 1;
	}
}

.flyout {
	transform: translateX(0px);
	animation: come-out 0.5s ease-in;
}

@keyframes come-out {
  to {
	  transform: translateX(7.5em);
	  opacity: 0.5;
  }
}

.hidden {
	visibility: hidden;
}

.visible {
	visibility: visible;
}

main::-webkit-scrollbar {
	width: 3px;

	border-left: var(--lightg) 1px solid;

	background: rgba(172, 172, 172, 0.15);
}

main::-webkit-scrollbar:hover {
	background: rgba(172, 172, 172, 0.8);
}

main::-webkit-scrollbar:hover ~ main::-webkit-scrollbar-thumb {
	background: rgba(7, 5, 7, 0.8);
}

main::-webkit-scrollbar-thumb {
	width: 3px;

	background: rgba(7, 5, 7, 0.15); /*darkest*/
}

main::-webkit-scrollbar-thumb:hover {
	background: rgba(7, 5, 7, 0.8); /*darkest*/
}

footer {
	position: fixed;
	top: 95vh;

	height: 5vh;
	width: 100vw;

	display: flex;
	flex-direction: column;

	text-align: center;
	justify-content: center;

	user-select: none;

	background: radial-gradient(rgba(102, 102, 102, .1) 10%, transparent 50%) 0 2px;
	background-color: var(--blackbg);
	background-size: 3px 3px;

    color: var(--darkg);
	font-size: min(2vh, 3vw);
}

footer a.footer-link {
	text-align: center;

	color: var(--darkg);

	text-decoration: none;

	transition: 0.5s cubic-bezier(0.4, 0, 1, 1);
}

footer a.footer-link:hover {
	color: var(--lightg);
}

/*
  Based on:
  1. http://stephen.io/mediaqueries/
  2. https://css-tricks.com/snippets/css/media-queries-for-standard-devices/
  3. https://www.paintcodeapp.com/news/ultimate-guide-to-iphone-resolutions/
*/



/* iPhone 2g/3g/3gs/4/4s in portrait */
@media only screen
and (min-device-width : 320px)
and (max-device-width : 480px)
and (orientation : portrait) {
    section.cover {
        display: grid;
        grid-template-columns: 1fr 13fr 1fr;
        grid-template-rows: 4fr 1fr 1fr 2fr 6fr 4fr;
    }

    section.cover > h1 {
        grid-column: 2/3;
        grid-row: 2/3;

        max-width: max-content;

        font-size: 3.5vh;
    }
    section.cover > div.welcome {
        grid-column: 2/3;
        grid-row: 3/4;

        font-size: 3vh;
    }
    section.cover > div.description {
        grid-column: 2/3;
        grid-row: 5/6;

        font-size: 2vh;
    }
    section.projects {
        display: grid;
        grid-template-rows: 2fr 1fr 1fr 36fr;
    }
    section.projects > div.header {
        grid-row: 2/3;
    }
    section.projects > ul.projects-list {
        grid-column: 2/5;
        grid-row: 4/5;
    }
    section.projects > ul.projects-list > li.project-item {
        grid-column: 2/5;
        grid-row: 4/5;

        display: grid;
        grid-template-columns: 1fr 9fr 9fr 1fr;
        grid-template-rows: 1fr 5fr 1fr 1fr;
    }
    li.project-item > a.project-link {
        grid-column: 2/3;
        grid-row: 2/4;

        display: grid;
        grid-template-rows: 1fr 1fr 7fr 1fr;
    }
    li.project-item > a.project-link > h3 {
        grid-row: 2/3;
    }
    li.project-item > a.project-link > div.project-visual {
        grid-row: 3/4;
    }
    li.project-item > a.project-link > div.project-visual > img {
        padding: 5px;

        height: 100% !important;
        width: auto;
    }
    li.project-item > div.project-description {
        grid-column: 3/4;
        grid-row: 2/3;
    }
    li.project-item > a.continue {
        grid-column: 3/4;
        grid-row: 3/4;
    }

}

/* Galaxy S4 portrait */
@media screen
  and (device-width: 320px)
  and (device-height: 640px)
  and (-webkit-device-pixel-ratio: 3)
  and (orientation: portrait) {

}

/* iPhone 5/5s/5c/SE in portrait */
@media only screen
and (min-device-width : 320px)
and (max-device-width : 568px)
and (orientation : portrait) {

}

/* Galaxy S5/S6/S7/S8 portrait */
@media screen
  and (device-width: 360px)
  and (device-height: 640px)
  and (-webkit-device-pixel-ratio: 3)
  and (orientation: portrait) {

}

/* iPhone 6/6s/7/8 in portrait */
@media only screen
and (min-device-width : 375px)
and (max-device-width : 667px)
and (orientation : portrait) {

}

/* iPhone 11pro/X/Xs in portrait */
@media only screen
and (min-device-width : 375px)
and (max-device-width : 812px)
and (orientation : portrait) {

}

/* iPhone 6+/6s+/7+/8+ in portrait */
@media only screen
and (min-device-width : 414px)
and (max-device-width : 736px)
and (orientation : portrait) {

}

/* iPhone 11/11ProMax/XsMax/Xr in portrait */
@media only screen
and (min-device-width : 414px)
and (max-device-width : 896px)
and (orientation : portrait) {

}

/* iPad/iPad2/iPad3 in portrait */
@media only screen
and (min-device-width : 768px)
and (max-device-width : 1024px)
and (orientation : portrait) {

}





/* iPhone 2g/3g/3gs/4/4s in landscape */
@media only screen
and (min-device-width : 320px)
and (max-device-width : 480px)
and (orientation : landscape) {

}

/* iPhone 5/5s/5c/SE in landscape */
@media only screen
and (min-device-width : 320px)
and (max-device-width : 568px)
and (orientation : landscape) {

}

/* Galaxy S4 landscape */
@media screen
  and (device-width: 320px)
  and (device-height: 640px)
  and (-webkit-device-pixel-ratio: 3)
  and (orientation: landscape) {

}

/* Galaxy S5/S6/S7/S8 landscape */
@media screen
  and (device-width: 360px)
  and (device-height: 640px)
  and (-webkit-device-pixel-ratio: 3)
  and (orientation: landscape) {

}

/* iPhone 6/6s/7/8 in landscape */
@media only screen
and (min-device-width : 375px)
and (max-device-width : 667px)
and (orientation : landscape) {

}

/* iPhone 6+/6s+/7+/8+ in landscape */
@media only screen
and (min-device-width : 414px)
and (max-device-width : 736px)
and (orientation : landscape) {

}

/* iPhone 11pro/X/Xs in landscape */
@media only screen
and (min-device-width : 375px)
and (max-device-width : 812px)
and (orientation : landscape) {

}

/* iPhone 11/11ProMax/XsMax/Xr in landscape */
@media only screen
and (min-device-width : 414px)
and (max-device-width : 896px)
and (orientation : landscape) {

}

/* iPad/iPad2/iPad3 in landscape */
@media only screen
and (min-device-width : 768px)
and (max-device-width : 1024px)
and (orientation : landscape) {

}