@charset "utf-8";
/* CSS Document */
html {
	scroll-behavior: smooth;
}
html, body {
	height: 100%;
}
.fauna-one-regular {
  font-family: "Fauna One", serif;
  font-weight: 400;
  font-style: normal;
}
body {
	background: #000;
}
.fauna-one-regular {
  font-family: "Fauna One", serif;
  font-weight: 400;
  font-style: normal;
}
// <weight>: Use a value from 400 to 900
// <uniquifier>: Use a unique and descriptive class name

.cinzel-600 {
  font-family: "Cinzel", serif;
  font-optical-sizing: auto;
  font-weight: 600;
  font-style: normal;
}
h1, h2, h3, h4, h5  {
	font-family: "Cinzel", serif;
}
.content {
	position:relative;
	display: block;
	min-height:100%;
	width:100vw;
	background-image: url("../images/connorakira-4k.jpg");
	background-size:cover;
	background-position:center center;
}
.infobox-svg {
	position: absolute;
    top:60%;
	left:15%;
	width:90%;
	transform: translate3d(0,0,.5px) scale(.95);
}
.link-box-svg {
	position: absolute;
	bottom:15%;
    left:20%;
	width:25%;
	transform: translate3d(0,0,2px) scale(.75);
}
.social-links {
	display:inline-block;
	width:23%;
	padding-right:10%;
}
.name-box {
	display:block;
	position:absolute;
	top:0%;left:10%;
    width: 100%;
	height: 100%;
	max-height: 60%;
	max-width: 50%;
	background-image: url("../images/connorakiranamewhiteblocks.svg");
	background-size:contain;
	background-repeat: no-repeat;
	transform: translate3d(0,0,-5px) scale(1.75);
	transform-style: preserve-3d;
}
.wrapper {
  height: 100vh;
  overflow-y: auto;
  overflow-x: hidden;
  perspective: 10px;
}

.parallax {
  position: relative;
  display: flex;
  justify-content: center;
  align-items: center;
  height: 100vh;
  transform-style: preserve-3d;
}

.parallaxbackground {
  transform: translate3d(0,0,-10px) scale(2);
	transform-style: preserve-3d;
	  height: 100vh;
	width:100%;
}

.parallaxforeground {
  transform: translate3d(0px,0,0px) scale(1);
	transform-style: preserve-3d;
	height:100%;
	left:50%;
}

.parallaxbackground,
.parallaxforeground {
  position: absolute;
  object-fit: cover;
}
.resume {
    transform-style: preserve-3d;
	position: relative;
	color:#000;
	background: #ffffff !important;
	font-size:.75rem;
}
.bio {
    transform-style: preserve-3d;
	position: relative;
	color:#fff;
	background: #5e2f4b!important;
	font-size:.75rem;
		padding-top:4rem;
	padding-bottom: 4rem;
}
.contact {
    transform-style: preserve-3d;
	position: relative;
	color:#fff;
	background: #111!important;
	font-size:.75rem;
		padding-top:4rem;
	padding-bottom: 4rem;
}

@media (orientation:portrait) {
.name-box {
	max-width:90%;
	top:-10%;left:-17%;
	transform: translate3d(0,0,-5px) scale(1.4);
}
	.content {
    background-image: url("../images/connorakirabackground.jpg");
	background-size:cover;
	background-position:40% 50%;
}
.infobox-svg {
	left:5%;
	top:70%;
	width:90%;
}
.link-box-svg {
	position: absolute;
	left:5%;
	bottom:25%;
	width:75%;
}
	.social-links{
	padding-right:1.5rem;
}
	.parallaxforeground {
		left:30%;
		height:90%;
		bottom:0;
	}
}
	.infobox-svg {
		font-size:1.2rem;
}
	.infobox-svg h1{
		font-size:1em;
}
	.infobox-svg h2{
		font-size:.6em;
}
@media screen and (min-width: 576px) {
	.infobox-svg h1{
		font-size:1em;
}

@media screen and (min-width: 768px) {
	.resume, .bio, .contact {
	font-size:1rem;
}
	.infobox-svg {
		font-size:1.5rem;
}
@media screen and (min-width: 1024px) {
	.resume, .bio, .contact {
	font-size:1.4rem;
}
	.infobox-svg {
		font-size:2rem;
}
}
@media screen and (min-width: 1200px) {

	.infobox-svg {
		font-size:2.5rem;
}
}
.whitebackground {
	background-color: #fff;
	padding-top:4rem;
	padding-bottom:4rem;
}
.homehero {
	background-image: url(/images/connorakira-4k.jpg);
	background-size: cover;
	background-position:top center;
	height: 100vh;
	width: 100vw;
}
.animateme {
	opacity: 0%;
}
.logos-delay-1 {
	animation-delay: .25s;
}
.logos-delay-2 {
	animation-delay: .5s;
}
.logos-delay-3 {
	animation-delay: .75s;
}
.logos-delay-4 {
	animation-delay: 1s;
}
.logos-delay-5 {
	animation-delay: 1.25s;
}
.logos-delay-6 {
	animation-delay: 1.5s;
}
.logos-delay-7 {
	animation-delay: 1.75s;
}
.whiteshadow {
  -webkit-filter: drop-shadow( 0px 0px 20px rgba(223, 194, 114, 1));
  filter: drop-shadow( 0px 0px 20px rgba(223, 194, 114, 1));
  /* Similar syntax to box-shadow */
}