@import "tablet.css";

/*general*/
body {
    padding: 40px 20px 20px 20px; 
	font-size: 12px;
}

.cursor, .cursor__ball {
    display: none !important; 
    pointer-events: none;
}

h1 {
    font-size: 20px;
}

h2 {
    font-size: 28px; 
    margin: 10px 0px 0px 0px;
}

h3 {
    font-size: 14px; 
	margin-top: 30px;
    margin-left: 30px;
	margin: 10px 0px 0px 0px;
}

h4{
	font-size:14px;
	margin:0px;
}

.gallery {
    margin-bottom: 14px; 
}

/* Header */
header{
	margin: 0px 0px 30px 0px;
}

header .nav {
    display: none;
}

/* Footer */
footer{
	margin-top: auto;
}

footer a{
	font-size: 14px;
}

.footer-icon {
    width: 20px; 
    height: 20px;
}

/* Menu Icon */
.menu-icon {
    position: absolute;
    top: 40px;
    right: 20px; 
    cursor: pointer;
    fill: #DAD5CB; 
    z-index: 1000;
    display: block; 
}

/* Overlay Menu */
.overlay-menu {
    position: fixed;
    top: 0;
    right: -100vw; 
    width: 100vw; 
    height: 100vh; 
    background-color: #E33013; 
    color: #DAD5CB; 
    display: flex;
    flex-direction: column;
    justify-content: flex-start; 
    align-items: flex-start; 
    padding: 15px; 
    box-sizing: border-box; 
    transform: none; 
    transition: right 0.8s ease; 
    z-index: 9999; 
	padding: 40px 20px;
}

.overlay-menu.open {
    right: 0; 
}

.overlay-menu a {
    font-size: 20px;
    color: #DAD5CB;
    text-decoration: none;
    margin: 20px; 
    font-family: 'Optima-Medium';
    text-align: left;
}

.overlay-nav{
	margin-top: 100px;
	display: flex;
	flex-direction: column;
}

.close-button {
    position: absolute;
    top: 40px;
    right: 20px; 
    cursor: pointer;
    fill: #DAD5CB; 
}

.overlay {
    padding: 30px;
    box-sizing: border-box;
}

/* Index Page */
.viewport {
    display: flex; 
    flex-direction: column; 
    height: calc(100vh - 70px); 
	overflow: hidden;
}

.intro {
    flex-grow: 1;
    display: flex;
    align-items: flex-start; 
    justify-content: flex-start;
    text-align: left;
    position: relative; 
    transform: translateY(20%); 
    width: 100%; 
    box-sizing: border-box; 
}


.intro h1 {
    font-size: 30px; 
}


.arrow {
    width: 40px;
    height: 60px;
}

.arrow svg {
    width: 30px;
    height: 30px;
}

/* Projects Page */
.project-wrapper {
    grid-column-gap: 20px; 
    grid-row-gap: 20px; 
	display: flex;
    flex-direction: column;
    min-height: calc(100vh - 80px); 
    justify-content: space-between; 
    box-sizing: border-box; 
}

.project1 {
    margin: 30px 0px 40px 0px; 
}

.project-wrapper h2 {
    font-size: 28px; 
}

.project-wrapper h3 {
    font-size: 14px; 
	margin-top: 15px;
}

.project2{
	margin: 0px;
}

.project2 p{
	margin-bottom: 24px;
}

.project3 {
	margin-bottom: 20px;
}

.project3 img{
	margin-bottom: 14px;
}

/*homepage grid*/
.home-wrapper {
	grid-template-columns: repeat(1, 1fr);
	grid-auto-rows: minmax(10px, auto);
	grid-row-gap: 4px;
	grid-template-areas: 
	'header'
	'home1'
	'home2'
	'home3'
	'home4'
	'home5'
	'home6'
	'footer';
}

/*project page grid*/
.project-wrapper {
	grid-template-columns: repeat(1, 1fr);
	grid-auto-rows: minmax(0px, auto);
	grid-row-gap: 4px;
	grid-template-areas: 
	'header'
	'project-nav'
	'project1'
	'project2'
	'project3'
	'footer';
}

.half{
	display:block;
}

.half img{
	max-width:100%;
}