@font-face{
    font-family: 'engin';
    src: url('ENGIN.woff') format('woff');
    font-weight: normal;
    font-style: normal;   
}

@font-face{
    font-family: 'NHaasGrotesk-Light';
    src: url('NHaasGrotesk-light.woff') format('woff');
    font-weight: normal;
    font-style: normal;   
}

body {
	cursor:none;
	width: 100vw;
	height: auto;
	background-color: black;
}

div#main {
	width: 100vw;
	height: 100vh;
	overflow-y: hidden;
	overflow-x: hidden;
	position: absolute;
	top: 0;
	left: 0;
}

div#main_p {
	background-color: white;
	width: 100vw;
	height: auto;
	overflow-y: scroll;
	overflow-x: hidden;
	position: absolute;
	top: 43vh;
	left: 0;

	display: grid;
  	grid-gap: 1vh;
  	grid-template-columns: repeat(2, 1fr); 
}

div#main_pb {
	background-color: white;
	width: 100vw;
	height: auto;
	overflow-y: scroll;
	overflow-x: hidden;
	position: absolute;
	top: 63vh;
	left: 0;

	display: grid;
  	grid-gap: 1vh;
  	grid-template-columns: repeat(2, 1fr); 
}

div#main_a {
	background-color: white;
	width: 100vw;
	height: 100vh;
	overflow-y: scroll;
	overflow-x: hidden;
	position: absolute;
	top: 0;
	left: 0;

	display: grid;
  	grid-gap: 1vh;
  	grid-template-columns: repeat(2, 1fr); 
}

div#columnone {
	width: 40vw;
	height: 100vh;
	position: absolute;
	margin-left: 0;
	top: 43vh;
	left: 0;
	float: left;
	z-index: 2;
}

div#columnone_1 {
	width: 40vw;
	height: 100vh;
	position: relative;
	margin-left: 0;
	top: 0vh;
	left: 0;
	float: left;
	z-index: 2;
}


div#columnone_b {
	width: 40vw;
	height: 100vh;
	position: absolute;
	margin-left: 0;
	top: 63vh;
	left: 0;
	float: left;
	z-index: 2;
}

div#columntwo {
	width: 100vw;
	height: auto;
	position: relative;
	margin-left: 0;
	top: 0;
	left: 0;
	float: left;
}

div#columntwo_1 {
	width: 60vw;
	height: auto;
	position: relative;
	margin-left: 0;
	top: 0;
	left: 0;
	float: left;
}

div#footer {
	width: 100vw;
	height: auto;
	position: fixed;
	bottom: 2vh;
	left: 0;

	display: flex;
	flex-direction: row;
	align-items: center;
	justify-content: center;
}

a.title:link {
	color: white;
}

a.title:hover {
	color: transparent;
	text-shadow: 0 0 14px rgba(250,250,250,1);
}

.blur {
	color: transparent;
	text-shadow: 0 0 14px rgba(250,250,250,1);
}

p.title {
	font-family: 'engin';
	font-size: 10vw;
	line-height: 11vw;
	margin-top: 2vh;
	margin-left: 2vh;
	color: white;
}

p.title_p {
	font-family: 'engin';
	font-size: 10vw;
	line-height: 11vw;
	margin-top: 2vh;
	margin-left: 2vh;
	color: black;
}

p.titlee {
	font-family: 'engin';
	font-size: 8.9vw;
	line-height: 11vw;
	margin-top: 2vh;
	margin-left: 2vh;
	color: black;
}

span#digital {
	text-align: justify;
  	text-justify-last: justify;
  	letter-spacing: 6.1vw;
}

span#you {
	text-align: right;
	float: right;
	margin-right: 2vh;
}

div#projects {
	font-family: 'NHaasGrotesk-Light';
	font-size: 2vw;
	letter-spacing: 0.1vw;
}

a.links:link {
	color: black;
	text-decoration: none;
}

a.links:hover {
	color: transparent;
	text-decoration: none;
}

a.links:visited {
	color: black;
	text-decoration: none;
}

div#title_p {
	background-color: white;
	width: 100vw;
	height: 63vh;
	top: 0;
	left: 0;
	position: absolute;
	overflow-x: hidden;
	overflow-y: hidden;
}

div.dc, div.ba, div.v, div.um, div.sl {
	position: absolute;
	opacity: 1;
	z-index: 1;
}

div.dc {
	padding-bottom: 0;
	top: 2vh;
	right: 2vh;
}

div.ba {
	padding-bottom: 0;
	top: 13.5vh;
	left: 36vw;
}

div.v {
	padding-bottom: 0;
	top: 44vh;
	left: 46vw;
}

div.um {
	padding-bottom: 0;
	top: 58vh;
	right: 1.5vw;
}

div.sl {
	padding-bottom: 30vh;
	top: 78vh;
	left: 1.5vw;
}

hr.line {
    border: 0;
    width: 60vw;
    height: 1px;
    background-image: linear-gradient(to right, rgba(250, 250, 250, 0), rgba(250, 250, 250, 0.75), rgba(250, 250, 250, 0));
}

hr.line_p {
    border: 0;
    width: 30vw;
    height: 1px;
    background-image: linear-gradient(to right, rgba(0, 0, 0, 0), rgba(0, 0, 0, 0.75), rgba(0, 0, 0, 0));
}

a.about:link {
	font-family: 'engin';
	font-size: 3vh;
	color: white;
	text-decoration: none;

	margin: auto;
}

a.about:hover {
	color: transparent;
	text-shadow: 0 0 4px rgba(250,250,250,1);
}

a.about:visited {
	color: white;
	text-decoration: none;
}

a.home:link {
	font-family: 'engin';
	font-size: 3vh;
	color: black;
	text-decoration: none;
	margin: auto;
}

a.home:hover {
	color: transparent;
	text-shadow: 0 0 4px rgba(0,0,0,1);
}

a.home:visited {
	color: black;
	text-decoration: none;
}

.cursor {
  position: absolute;
  width: 50px;
  height: 50px;
  top: -50%;
  left: -50%;
  margin: -25px 0 0 -25px;
  border-radius: 50%;
  background-color: white;
  backface-visibility: hidden;
  transition: transform 0.2s ease-out;
  mix-blend-mode: difference;
  z-index: 1000;
  pointer-events: none;
}

p.project_title {
	font-family: 'NHaasGrotesk-Light';
	font-size: 4vh;
	letter-spacing: 0.1vh;
	margin-top: 2vh;
	margin-left: 1.5vw;
}


span.subtitle {
	font-family: 'NHaasGrotesk-Light';
	font-size: 3vh;
	letter-spacing: 0.05vh;
	margin-top: 0vh;
}

p.info {
	font-family: 'NHaasGrotesk-Light';
	font-size: 2vh;
	margin-top: -2vh;
	margin-left: 1.5vw;
	margin-right: 1.5vw;
}

p.sinopse {
	font-family: 'NHaasGrotesk-Light';
	font-size: 3vh;
	letter-spacing: 0.05vh;
	margin-top: 2vh;
	margin-left: 40vw;
	margin-right: 1.5vw;
}

p.sinopse_a {
	color: black;
	font-family: 'NHaasGrotesk-Light';
	font-size: 3vh;
	letter-spacing: 0.05vh;
	margin-top: 2vh;
	margin-left: 1.5vw;
	margin-right: 1.5vw;
}


a.link_to_project:link {
	font-family: 'NHaasGrotesk-Light';
	font-size: 3vh;
	letter-spacing: 0.05vh;
	margin-left: 40vw;
	color: black;
	text-decoration: none;
}

a.link_to_project:hover {
	color: transparent;
	text-shadow: 0 0 4px rgba(0,0,0,1);
}

a.link_to_project:visited {
	color: black;
	text-decoration: none;
}

img.img {
	width: 56.5vw;
	height: auto;
	margin-left: 40vw;
}