/* General */
html {
	scroll-behavior: smooth;
}
body {
    margin: 0;
    text-align: center;
    font-family: "Ojuju", sans-serif;
	font-size: 2.3vh;
	overflow: hidden;
}
::-webkit-scrollbar {
	width: 0.5vh;
}
::-webkit-scrollbar-thumb {
	background: #8C0000;
}
img {
    width: 100%;
	transition: 0.4s;
	filter: saturate(1.5);
}
h1 {
    opacity: 0.85;
    font-weight: 700;
    font-size: 10vh;
	pointer-events: none;
}
h2 {
    opacity: 0.85;
    font-weight: 600;
    font-size: 4vh;
	transition: 0.4s;
	pointer-events: none;
}
p {
    font-family: "Chakra Petch", sans-serif;
	font-weight: lighter;
}
a {
    text-decoration: none;
    color: inherit;
}
.back span {
	border-width: 0 0.6vh 0.6vh 0;
}
.paintCont img{
	filter: none;
}
#ellaPhone {
	display: none;
}

/* Navigation bar */
a span {
	border: solid;
	border-width: 0 0.3vh 0.3vh 0;
	padding: 0.5vh;
	font-size: 0;
	display: inline-block;
	transition: 0.4s;
}
nav {
    position: fixed;
    bottom: 0;
    width: 100%;
	z-index: 1;
	backdrop-filter: blur(10px);
	-webkit-backdrop-filter: blur(10px);
}
nav a div {
    width: 33.333%;
    font-weight: 600;
    display: inline-block;
    padding: 1vh 0 1vh 0;
	white-space: nowrap;
}
#portfolio, #ella, #contact {
    transition: 0.4s;
}

/* Navigation buttons */
#portfolio {
	background: rgb(230, 230, 230, 0.65);
	float: left;
	animation: .8s ease-in-out Nella;
}
#ella {
	background: #8C0000;
	animation: .8s ease-in-out ella;
	color: white;
}
#contact {
	color: white;
	background: rgb(26, 26, 26, 0.65);
    float: right;
	animation: .8s ease-in-out Nella;

}
#portfolio:hover {
	background: rgb(0, 0, 0, 0.85);
	color: white;
}

#contact:hover {
	background: rgb(255, 255, 255, 0.85);
	color: black;
}

/* Arrows */
#portfolio span {
	transform: rotate(135deg);
	border-color: rgb(230, 230, 230, 0);
}
#ella span {
	border-color: #8C0000;
}	
#contact span {
	transform: rotate(-45deg);
	border-color: rgb(255, 255, 255, 0);
}
#portfolio:hover span {
	border-color: white;
	margin: 0 5vh 0.3vh 0;
}
#ella:hover span {
	border-color: white;
	margin: 0vh 5vh 0.3vh 5vh;
}
#contact:hover span {
	border-color: black;
	margin: 0 0 0.3vh 5vh;
}



/* Phone */
@media only screen and (max-width: 600px) {
	#portfolio, #contact {
		display: none;
	}
	nav {
		width: 20vw;
		height: 20vw;
		border-radius: 50%;
		background: rgb(140 0 0 / 85%);
		bottom: 5vw;
		left: 5vw;
		box-shadow: 0 1vh 5vh rgb(0 0 0 / 30%);
		transition: 0.5s;
		line-height: 15.5vw;
		animation: phoneAni 3s;
	}
	nav a div {
		width: 100%;
	}
	#ella {
		display: none;
	}
	#ellaPhone {
		display: block;
		height: 8vh;
		font-size: 7.5vw;
		color: white;
	}
}