@import 'fonts.css';
@import 'normalize.css';
@import 'transitions.css';
@import 'proj.css';

/* -------------------------------------
    STYLING AND FLEX
   ------------------------------------- */

*, *::after, *::before {
	box-sizing: border-box;
}

html {
  scroll-behavior: smooth;
	/* cursor: none; */
}

.cursor {
	position: fixed;
	width: 125px;
	height: 125px;
	border-radius: 50%;
	filter: blur(13px);
	background: rgb(255 220 166 / 20%);
	pointer-events: none;
	mix-blend-mode: luminosity;
	z-index: 999;
	transition: transform 0.2s;
	opacity: 0;
}

/* TEXT ELEMENTS
  ===========================================================================*/

body {
  font-family: 'Venus', Verdana, sans-serif;
  font-weight: normal;
  font-size: 1.25rem;
  color: #F8F0DF;
  background-color: #180B0B;
  
  text-rendering: optimizeLegibility;
  -moz-osx-font-smoothing: grayscale;
  -webkit-font-smoothing: antialiased;

	/* -ms-overflow-style: none;
		scrollbar-width: none; */
}

body::-webkit-scrollbar {
	display: none;
	width: 0;
	background: transparent;
}

a {
  text-decoration: none;
  color: currentColor;
}

a:hover{
	text-decoration: underline;
}

h1 {
  font-family: 'Voyage', Times, serif;
  font-weight: normal;
  font-style: normal;
  font-size: 1em;
}

h2 {
  font-family: 'SangBleu-Serif-Light', Times, serif;
  font-weight: normal;
  font-style: normal;
  font-size: 1em;
}

h3, li {
	font-family: 'SangBleu-Sans-Ital', Helvetica, sans-serif;
  font-weight: normal;
  font-style: italic;
	font-size: 18px;
}

h4, td {
  font-family: 'SangBleu-Serif-Light', Times, serif;
  font-weight: normal;
  font-style: normal;
	font-size: 18px;
  margin: auto;
	text-transform: uppercase;
}

p {
	font-family: 'SangBleu-Serif-Light', Times, serif;
	font-weight: normal;
	font-style: normal;
	font-size: 18px;
}

.underline {
	text-decoration: underline;
}

.center {
  text-align: center;
}

.left-align {
  text-align: left;
}

.right-align {
  text-align: right;
}

.top-align {
	vertical-align: super;
}

.margin-0 {
	margin: 0;
}

.margin-auto {
	margin: auto;
}

.position-inherit {
	position: inherit;
}

.indent {
	text-indent: 60px;
}

.caps {
	text-transform: capitalize;
}



/* SECTION, PADDING
  ===========================================================================*/

	header, footer {
	}

	.profile {
		width: 100%;
    	height: 100vh;
		background-image: url("images/ap-web.png");
		background-size: cover;
		background-position: center;
		margin: auto;
		z-index: -99;
	}

	.body-container {
		position: absolute;
		overflow: hidden;
		/* top: 91vh; */
		top: 0;
		width: 100%;

		/* animation-name: slideUp;
		animation-duration: 0.7s;
		animation-timing-function: ease-in-out;
		animation-delay: 1.8s;
		animation-fill-mode: forwards; */
	}

	/* @keyframes slideUp {
		from {
			top: 91vh;
		}
		to {
			top: 0;
		}
	} */

	#teal {
		position: relative;
		background-color: rgb(2, 34, 39);
		width: 93%;
		opacity: 1;
		margin: 75px auto 0 auto;
		padding-bottom: 3em;
		z-index: 1;

		transition: background-color 0.3s, width 0.09s ease-out;

		-moz-box-shadow: rgba(0, 0, 0, 0.4) 3px 3px 10px 5px;
	  -webkit-box-shadow: rgba(0, 0, 0, 0.4) 3px 3px 10px 5px;
	  box-shadow: rgba(0, 0, 0, 0.4) 3px 3px 10px 5px;
	}

	#work {
		position: relative;
		padding-top: 6em;
	}

	#about {
		position: relative;
		padding-top: 8em;
	}

	/* COMPONENTS
  ===========================================================================*/

/* NAVIGATION BAR */

.main-nav {
  display: flex;
  position: fixed;
  justify-content: space-between;
  width: 95vw;
  top: 0;
  margin: 0 2.5vw;
  padding: 1em;
  z-index: 99;
  font-size: 0.8em;
  /* mix-blend-mode: difference; */
}

.main-nav h1 {
	font-size: 1.6em;
	text-align: center;
	margin: auto auto -11px auto;
}

.main-nav a {
}

.main-nav a:hover, nav a:focus {
}

.content {
  width: 75%;
  margin: auto;
  padding-top: 10px;
}


/* HOME PAGE
  ===========================================================================*/

.logo {
	text-align: center;
	z-index: 1;
	width: 100%;
	margin: 2em auto 5em auto;
  padding-top: 3em;
}

.logo h1 {
	font-size: 11.5vw;
	margin: 0;
	line-height: 0.9em;
}

.logo img {
	overflow: hidden;
	object-fit: cover;
	object-position: center;
	width: 100%;
	max-width: 100%;
	max-height: 520px;
}

.description {
	text-align: center;
	width: 90%;
  margin-top: -1em;
  margin-right: auto;
  margin-bottom: -1em;
  margin-left: auto;
}

.description h2 {
	font-size: 1.0em;
}

.description h3 {
	font-size: 0.9em;
}

/* WORK
  ===========================================================================*/

#work ::selection {
	color: transparent;
	background-color: #f6de6bb0;
	text-shadow: 0 0px 1px #180B0B;
}

.card-container {
	display: flex;
  flex-wrap: nowrap;
  width: 74vmax;
  justify-content: center;
  text-align: left;
  margin: auto auto 6em auto;
  position: relative;
  z-index: 1;

	-moz-box-shadow: rgba(0, 0, 0, 0.2) 5px 5px 5px 2px;
  -webkit-box-shadow: rgba(0, 0, 0, 0.2) 5px 5px 5px 2px;
  box-shadow: rgba(0, 0, 0, 0.2) 5px 5px 5px 2px;
}

.card-container h4 {
	font-size: 16px;
}

.single-card {
	width: 37vmax;
}

.card-container h3, .card-container p, .card-container h4 {
	position: relative;
}

#card-item-1, #card-item-2, #card-item-3, #card-item-4, #card-item-5 {
	flex: 1 1 100%;
  	padding: 2.5% 5% 4% 5%;
	background-color: #F6EED6;
  	color: #180B0B;
	position: relative;
  	z-index: 1;
}

#card-item-5 {
	padding: 4.5% 10% 8% 10%;
}

#card-item-1::before,
#card-item-2::before,
#card-item-3::before,
#card-item-4::before,
#card-item-5::before {
	content: "";
	top: 0px;
	right: 0px;
	bottom: 0px;
	left: 0px;
	position: absolute;
	background-image: url("images/grain.jpg");
	background-blend-mode: multiply;
	background-size: cover;
	opacity: 0.2;
}

#card-item-1:hover,
#card-item-2:hover,
#card-item-3:hover,
#card-item-4:hover,
#card-item-5:hover,
#card-item-1:focus,
#card-item-2:focus,
#card-item-3:focus,
#card-item-4:focus,
#card-item-5:focus {
	text-decoration: none;
}

.img-parent {
	display: inline-block;
  position: relative;
  overflow: hidden;
  width: 100%;
	height: 352px;
  margin-top: 20px;
  margin-bottom: 35px;

  /* -webkit-border-radius: 2%;
  -moz-border-radius: 2%;
  border-radius: 2%; */

}

.img-child {
	width: 100%;
	height: 100%;
	background-size: cover;
	background-position: 50% 90%;
	background-repeat: no-repeat;
  filter: saturate(0) contrast(0.55);
	transition: filter .4s ease-out;

	-webkit-transition: all .3s;
  -moz-transition: all .3s;
  -o-transition: all .3s;
  transition: all .4s;

  /* -webkit-border-radius: 2%;
  -moz-border-radius: 2%;
  border-radius: 2%; */

	-moz-box-shadow: rgba(0, 0, 0, 0.4) 0px 0px 16px 4px inset;
	-webkit-box-shadow: rgba(0, 0, 0, 0.4) 0px 0px 16px 4px inset;
	box-shadow: rgba(0, 0, 0, 0.4) 0px 0px 16px 4px inset;
}

.work-1 {
	background-image: url("images/Audible.jpg");
}

.work-2 {
	background-image: url("images/ASICS.jpg");
}

.work-3 {
	background-image: url("images/Here.jpg");
}

.work-4 {
	background-image: url("images/FBCauses.jpg");
}

.work-5 {
	background-image: url("images/KSOON.png");
}

.project-title {
    display: flex;
    width: max-content;
    padding-bottom: 2%;
}

#stamp-1, #stamp-2, #stamp-3, #stamp-4, #stamp-5 {
	position: absolute;
	/* background-color: #3b3142; */
	/* background-color: #c4bdc7; */
	/* background-color: #c9dcc5; */
	background-color: #f3e4a6;
    border: double #180b0b47;
    color: #180b0b;
    border-radius: 50%;
    /* padding: 22px 20px; */
	padding: 18px 11px;
	-moz-box-shadow: rgba(0, 0, 0, 0.18) 0px 1px 4px 2px;
	-webkit-box-shadow: rgba(0, 0, 0, 0.18) 0px 1px 4px 2px;
	box-shadow: rgba(0, 0, 0, 0.18) 0px 1px 4px 2px;
}

#stamp-1 h4, #stamp-2 h4, #stamp-3 h4, #stamp-4 h4, #stamp-5 h4  {
	font-size: 12px;
}

#stamp-1 {
	top: 10%;
  	left: 4%;
	transform: rotate(-2deg);
}

#stamp-2 {
	top: 4%;
    left: 5%;
    transform: rotate(5deg);
}

#stamp-3 {
	top: 3%;
    left: 4%;
    transform: rotate(-5deg);
}

#stamp-4 {
	top: -2%;
    left: 8%;
    transform: rotate(3deg);
}

#stamp-5 {
	top: 3%;
    left: 3%;
    transform: rotate(-10deg);
}

/* ABOUT
  ===========================================================================*/

.portrait {
	position: absolute;
	width: 40%;
	top: -75px;
	left: 80%;
}

.portrait-img {
	width: 100%;
	height: 100%;
}

.monologue-bg {
	width: 74vmax;
	margin: auto;
	position: relative;
	padding: 13% 0% 9% 0%;
	background-color: #F6EED6;
	-moz-box-shadow: rgba(0, 0, 0, 0.2) 5px 5px 5px 2px;
	-webkit-box-shadow: rgba(0, 0, 0, 0.2) 5px 5px 5px 2px;
	box-shadow: rgba(0, 0, 0, 0.2) 5px 5px 5px 2px;
}

.monologue-bg::before {
	content: "";
	top: 0px;
right: 0px;
bottom: 0px;
left: 0px;
	position: absolute;
	background-image: url("images/paper2.jpg");
	background-size: cover;
	background-position-x: 45%;
opacity: 0.5;
}

.monologue {
	position: relative;
	width: 70%;
	margin: auto;
	color: #180B0B;
}

.monologue ::selection {
	color: transparent;
	background-color: #f6de6bb0;
	text-shadow: 0 0px 1px #180B0B;
}

.monologue a {
	color: #180B0B;
}

.monologue h3, .monologue h4, .monologue p {
	font-size: 20px;
}

.highlight, b {
	width: fit-content;
	margin: 0 auto;
	color: transparent;
	background-color: #f6de6bb0;
	text-shadow: 0 0px 1px #180B0B;
	font-weight: normal;
	font-style: normal;
}

.about-spacing {
	margin: 2.3em auto;
}

.credits ::selection, footer ::selection, nav ::selection, .logo ::selection, .description ::selection {
	color: #f6de6bb0;
	text-shadow: 0 0px 1px #F8F0DF;
}

.credits-spacing {
	margin: 5.5em auto;
}

.credits-title {
	display: flex;
	width: 100%;
	justify-content: center;
	text-align: center;
	margin: 2em auto;
}

.credits-clients {
	display: flex;
	width: 648px;
	justify-content: center;
	text-align: center;
	margin: 1em auto;
}

.credits-events {
	width: 757px;
	justify-content: center;
	text-align: center;
	margin: 1em auto;
}

.line-spacing {
	margin: 1.3em auto;
}

table {
	width: 633px;
	margin: 0.5em auto 1em auto;
}

td {
	vertical-align: top;
	margin: auto;
	width: 3.4em;
}

tr {
	height: 2em;
}

table br {
	display: none;
}

.outlink {
	height: 14px;
	padding-left: 6px;
	padding-right: 6px;
}

.contact table {
	flex: 1 1 50%;
	width: 581px;
	margin: 5.5em auto 2.5em auto;
}

.contact td {
	margin: 0;
	width: 4em;
}

.people {
	text-align: center;
	margin: auto;
	font-size: 3em;
	width: 90%;
}

.web {
	display: block;
}

.mobile {
	display: none;
}

.credits-spacing-end {
	/* margin: 7.5em auto 9.5em auto; */
	margin: 7.5em auto 13vh auto;
}

footer {
	display: flex;
	justify-content: space-between;
	margin: 0 2.5vw;
padding: 1em;
}

footer p{
	font-family: 'SangBleu-Serif-Light', Times, serif;
font-weight: normal;
font-style: normal;
	font-size: 14px;
}

.footer-1 {
	flex: 1 1 100%;
}
.footer-2 {
	flex: 1 0 19%;
}
.footer-3 {
	flex: 1 1 100%;
	text-align: right;
}

.br-footer-m {
	display: none;
}
.br-footer-s {
	display: none;
}

/*====*/