/* General */
p {
	margin: 0;
}
.panels {
    height: 100vh;
    display: inline-block;
    overflow-y: auto;
}
#main, .grid {
	animation: 0.8s fade-in;
}
#btnWrapper, #cvLink, #downloadBtn {
	display: none;
}

/* Home */
#ani {
	position: fixed;
	width: 10%;
	left: 0;
	top: 800000vh;
	z-index: 5;
	margin: 0 45%;
	opacity: 0;
	animation:
		spin 1.5s infinite linear,
		ani 3s;
}
.info {
    color: #8C0000;
}
.cont {
    margin: 0 9vh 9vh 9vh;
    padding-bottom: 6vh;
    transition: 0.4s;
}
.cont div {
	width: 100%;
	aspect-ratio: 3/2;
	transition: 0.4s;
	overflow: hidden;
}
.cont:hover div {
	background-size: 110%;
	box-shadow: 0 -0.5vh #8C0000;
}
.cont:hover h2 {
	font-weight: 650;
}
.cont img {
	min-height: 100%;
}
.cont:hover img {
	transform: scale(1.03);
}
.desc {
	transition: 0.4s;
    opacity: 0.65;
}
.desc p  {
    padding-left: 2vh;
    padding-right: 2vh;
}
.cont:hover .desc {
	opacity: 1;
}

/* Sheets */
#sheet {
	position: relative;
}
.sheets {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
}
.sheets h1{
	line-height: 60vh;
}
.hidden {
	display: none;
}
#portfolioIndex:target, #ellaPage:target, #paintingIndex:target {
	display: block;
}
.back span {
	transform: rotate(225deg);
    padding: 2vh;
	margin-top: 5vh;
	color: white;
	opacity: 0.85;
}
.back span:hover {
	color: black;
	opacity: 1;
}
.backPaint span:hover {
	color: #8C0000;
}

/* Portfolio */
#title {
    width: 33.333%;
	background: #8C0000;
	color: white;
	position: relative;
	z-index: 2;
}
#archive, #current {
    width: 50%;
	scroll-behavior: smooth;
}
#current {
    float: right;
    background: black;
    color: white;
}

/* Grid */
.grid {
    width: 66.666%;
	float: right;
	padding-bottom: 10vh;
	box-sizing: border-box;
}
.grid::-webkit-scrollbar-thumb {
	background: black;
}
#currentGrid, #archiveGrid {
	display: inline-block;
	margin-bottom: 0;
}
#currentGrid h2, #archiveGrid h2 {
	margin-bottom: 0;
}
.gridItem {
	font-family: "Chakra Petch", sans-serif;
	float: left;
	width: 33.333%;
	height: 33.333%;
	box-sizing: border-box;
	padding: 5vh;
	transition: 0.4s;
}
.gridImg {
	height: 20vh;
	overflow: hidden;
	transition: 0.4s;
}
.gridImg img {
	min-height: 20vh;
}
.gridDesc {
	padding: 2vh 0 2vh 0;
	transition: 0.4s;
}
.gridItem:hover .gridDesc{
	box-shadow: 0 0.3vh #8C0000;
}
.gridItem:hover img {
	transform: scale(1.1);
}

/* Ella page */
#main, #bio {
    height: 100svh;
    display: inline-block;
}
#main {
	width: 66.666%;
	text-align: left;
	padding: 3vh;
	box-sizing: border-box;
}
#main > *:first-child {
	width: 25%;
	display: inline-block;
}
#bio {
	width: 33.333%;
	background: #8C0000;
	float: right;
	box-sizing: border-box;
	padding: 0 3vh;
}
#bio img {
	display: none;
}
#bio h1 {
	text-align: right;
	color: white;
	line-height: 10vh;
	margin: 15vh 0 0 0;
}
#attr {
	width: 100%;
	text-align: center;
	padding: 1vh 0;
	transition: 0.4s;
	font-family: "Chakra Petch", sans-serif;
}
#attr:hover {
	box-shadow: 0 0.3vh #8C0000;
}

/* Ella page tabs */
#tabNav {
	position: relative;
}
#pages {
	width: 75%;
	float: right;
	box-sizing: border-box;
	padding: 0 0 0 3vh;
}
#pages h2 {
	margin-bottom: 2vh;
}
.tab {
	width: 33%;
	text-align: center;
	display: inline-block;
	cursor: pointer;
	transition: 0.4s;
	padding: 1vh 0;
}
.tab:hover {
	font-weight: 550;
}
.right {
	float: right;
}
.active {
	box-shadow: 0 0.3vh #8C0000;
	font-weight: 550;
}
.tabCont {
	display: none;
	width: 75%;
	margin: auto;
	margin-top: 3vh;
	animation: 0.8s fade-in;
	overflow: scroll;
	height: 80vh;
}
.tabCont div {
    font-family: "Chakra Petch", sans-serif;
}
.tabCont > div {
	padding-bottom: 2vh;
	overflow: auto;
}
.tag {
	width: 40%;
	float: left;
}
.level {
	background: rgb(230, 230, 230, 0.65);
	width: 50%;
	height: 1vh;
	display: inline-block;
	float: right;
	position: relative;
	top: 1vh;
}
.level::after {
	content: '';
	background: #8C0000;
	display: block;
	height: 1vh;
	width: var(--width);
	animation: 1s bar-fade;
}

/* Bio */
.pronouns {
	text-align: right;
	padding: 0;
	color: white;
	font-family: "Ojuju", sans-serif;
}
.statement {
	text-align: left;
	padding-top: 10vh;
	color: white;
}
svg {
	width: 5vh;
	height: 5vh;
}
.redes {
	width: fit-content;
	display: grid;
	grid-template-columns: auto auto auto;
	float: right;
}
.redes a div {
	color: white;
	font-weight: normal;
	padding: 5vh 0 0 2vh;
	opacity: 0.85;
	transition: 0.4s;
}
.redes a div:hover {
	color: black;
	opacity: 1;
}

/* Painting panel */
#paintPan {
	width: 33.333%;
	float: right;
	background: black;
	color: white;
	position: relative;
	z-index: 2;
}



/* Animation */
@keyframes ella {
	0% {
		padding: 57vh 0 43vh 0;
		width: 100%;
		opacity: 0.85;
		font-size: 3.7vh;
		pointer-events: none;
		}
	30% {
		padding: 57vh 0 43vh 0;
		opacity: 0.85;
		font-size: 3.7vh;
		}
	80% {
		padding: 1vh 0;
		width: 100%;
		opacity: 1;
		pointer-events: none;
		}
	100% {
		width: 33.333%;
		pointer-events: revert;
		}
}
@keyframes ani {
	0% {
		opacity: 1;
		display: block;
		top: 35vh;
	}
	30% {
		opacity: 1;
		display: block;
		top: 35vh;
	}
	40% {
		opacity: 0;
	}
	80% {
		top: 80vh;
	}
	100% {
		display: none;
	}
}
/* Portfolio and painting buttons animation */
@keyframes Nella {
	0% {
		width: 0%;
		}
	80% {
		width: 0%;
		}
	100% {
		width: 33.333%;
		}
}
/* Ella page CV animations */
@keyframes fade-in {
	0% {
		opacity: 0%;
		}
	100% {
		opacity: 1;
		}
}
@keyframes bar-fade {
	0% {
		width: 0%;
		}
	100% {
		width: var(--width);
		}
}
@keyframes spin {
    from {
        transform:rotate(0deg);
    }
    to {
        transform:rotate(360deg);
    }
}
@keyframes phoneAni {
	0% {
		bottom: 0;
		left: 0;
		width: 100vw;
		height: 100vh;
		border-radius: 0;
		line-height: 1100vh;
	}
	30% {
		bottom: 0;
		left: 0;
		width: 100vw;
		height: 100vh;
		border-radius: 0;
		line-height: 1100vh;
	}
}
/* Phone */
@media only screen and (max-width: 600px) {
	::-webkit-scrollbar {
		width: 0;
	}
	h1 {
		font-size: 6vh;
	}
	h2 {
		font-size: 3vh;
	}
	#portfolioIndex:target, #paintingIndex:target {
		display: none;
	}
	#ani {
		width: 50%;
		margin: 0 25%;
	}
	#phoneWrapper {
		width: 200%;
	}
	#archive {
		float: left;
	}
	#archive, #current {
		width: 46%;
	}
	#btnWrapper {
		display: inline-block;
		width: 8%;
		overflow: hidden;
	}
	#currentBtn, #archiveBtn {
		width: 50%;
		display: inline-block;
		height: 100vh;
	}
	#currentBtn {
		background: black;
		color: white;
		writing-mode: sideways-rl;
	}
	#archiveBtn {
		float: right;
		writing-mode: sideways-lr;
	}
	.cont {
		margin: 0 0 9vh 0;
	}
	.desc {
		padding: 0 2vh 0 2vh;
	}
	#sheet {
		z-index: 6;
	}
	#portfolioIndex, #paintingIndex {
		display: none;
	}
	#ellaPage {
		overflow: auto;
		height: 100vh;
	}
	.back {
		display: block;
	}
	#main {
		background: white;
		width: 100%;
		padding: revert;
	}
	#main img {
		display: none;
	}
	#main > *:first-child {
		display: none;
	}
	#pages {
		float: revert;
		padding: revert;
		width: revert;
		height: 94svh;
		overflow: hidden;
	}
	.tab {
		width: 32.9%;
	}
	#downloadBtn {
		display: block;
		float: right;
		padding: 0 1svh 1svh 0;
		width: 5svh;
		height: 5svh;
	}
	#bio {
		float: revert;
		width: 100%;
	}
	#bio img {
		display: revert;
		border: .5vh solid rgb(255 255 255 / 85%);
		box-sizing: border-box;
		width: 50%;
		margin-top: 5svh;
	}
	#bio h1 {
		line-height: revert;
		display: inline-block;
		width: 100%;
		margin: 2svh 0 0 0;
		text-align: revert;
		font-size: 6svh;
	}
	.pronouns {
		text-align: revert;
	}
	.statement {
		padding-top: 3svh;
	}
	.redes {
		float: revert;
	}
	#cvLink {
		display: revert;
	}
	.tabCont {
		height: 100%;
	}
}