body {
height: 100%;
width: 100%;
margin: 0px;
}


img {
border-width: 0px;
}


@font-face {
    font-family: "GothamBook";
    src: url('../font/GothamBook.eot');
    src: url('../font/GothamBook.eot') format('embedded-opentype'),
         url('../font/GothamBook.woff') format('woff'),
         url('../font/GothamBook.ttf') format('truetype'),
         url('../font/GothamBook.svg#GothamBook') format('svg');
}


@font-face {
    font-family: "Poppins-Bold";
    src: url('../font/Poppins-Bold.eot');
    src: url('../font/Poppins-Bold.eot') format('embedded-opentype'),
         url('../font/Poppins-Bold.woff') format('woff'),
         url('../font/Poppins-Bold.ttf') format('truetype'),
         url('../font/Poppins-Bold.svg#Poppins-Bold') format('svg');
}


#preload {
display: none;
}


.mobile {
display: none;
}
@media screen and (orientation:portrait) {
.mobile {
display: block;
}
}




#intro {
position: absolute;
top: 0px;
left: 0px;
width: 100%;
height: 100%;
background-color: #333333;
overflow: hidden;
z-index: 1
}
@media screen and (orientation:portrait) {
#intro {
}
}


#intro_bg {
position: absolute;
top: 0px;
left: 0px;
width: 50%;
height: 100%;
object-fit: fill;
z-index: 0;
}
@media screen and (orientation:portrait) {
#intro_bg {
}
}


#green {
position: absolute;
top: 0px;
left: 50%;
width: 100%;
height: 100%;
background-color: #0CEDAA;
z-index: 1;
}
@media screen and (orientation:portrait) {
#green {
}
}


#logo {
position: absolute;
top: 18%;
left: 0px;
right: 0px;
margin-left: auto;
margin-right: auto;
width: auto;
height: 60%;
z-index: 2;
}
@media screen and (orientation:portrait) {
#logo {
width: 40%;
height: auto;
}
}


.name {
position: absolute;
top: 35%;
left: -10%;
width: 20%;
height: 25%;
font-family: "GothamBook", Arial, Helvetica, sans-serif;
font-size: 2vh;
line-height: 2vh;
color: #fff;
text-align: center;
transform: rotate(90deg);
-webkit-transform: rotate(90deg);
-moz-transform: rotate(90deg);
-ms-transform: rotate(90deg);
-o-transform: rotate(90deg);
z-index: 2;
}
@media screen and (orientation:portrait) {
.name {
left: -59%;
width: 80%;
height: 32%;
font-size: 4.5vw;
line-height: 4.5vw;
}
}


#download {
position: absolute;
top: 44%;
right: 2.5%;
width: auto;
height: 11%;
cursor: pointer;
z-index: 2;
}
@media screen and (orientation:portrait) {
#download {
top: 5%;
right: 44%;
width: 12%;
height: auto;
}
}


.arrow {
position: absolute;
bottom: 7%;
left: 0px;
right: 0px;
width: auto;
height: 40px;
margin-left: auto;
margin-right: auto;
cursor: pointer;
z-index: 2;
}
@media screen and (orientation:portrait) {
.arrow {
height: 70px;
}
}


#bio {
position: absolute;
top: 100%;
left: 0px;
width: 100%;
height: 60%;
font-family: "Poppins-Bold", Arial, Helvetica, sans-serif;
font-size: 2vh;
line-height: 2.8vh;
color: #333333;
background-color: #fff;
font-weight: bolder;
z-index: 2;
}
@media screen and (orientation:portrait) {
#bio {
height: 80%;
font-size: 3.6vw;
line-height: 4.7vw;
}
}


#bio span {
font-size: 3.5vh;
line-height: 3.8vh;
}
@media screen and (orientation:portrait) {
#bio span {
font-size: 5vw;
line-height: 5.5vw;
}
}


.highlight {
color: #0CEDAA;
}




.icon {
height: 45px;
margin-right: 3%;
}
@media screen and (orientation:portrait) {
.icon {
height: 90px;
margin-right: 6%;
}
}


#part01 {
position: absolute;
top: 10%;
left: 10%;
width: 35%;
height: 80%;
}
@media screen and (orientation:portrait) {
#part01 {
top: 7%;
height: 83%;
}
}


#part02 {
position: absolute;
top: 10%;
right: 10%;
width: 35%;
height: 80%;
}
@media screen and (orientation:portrait) {
#part02 {
top: 7%;
height: 83%;
}
}


#book {
position: absolute;
top: 160%;
left: 0px;
width: 100%;
height: 100%;
z-index: 2
}
@media screen and (orientation:portrait) {
#book {
top: 180%;
}
}


.work {
position: relative;
width: 100%;
height: 70%;
display: flex;
align-items: center;
justify-content: center;
color: #333333;
}
@media screen and (orientation:portrait) {
.work {
height: 55%;
}
}


.screenshot {
width: auto;
max-width: 80%;
max-height: 80%;
margin-top: 3%;
}
@media screen and (orientation:portrait) {
.screenshot {
width: 86%;
height: auto;
max-width: none;
max-height: none;
margin-left: 6%;
}
}


.video {
width: auto;
width: 80%;
height: 80%;
margin-top: 3%;
background-color: #000;
}
@media screen and (orientation:portrait) {
.video {
width: 86%;
height: 60%;
margin-left: 6%;
}
}


#goto {
cursor: pointer;
}


#project_name {
color: #333333;
}
@media screen and (orientation:portrait) {
#project_name {
left: -57%;
width: 100%;
font-size: 4vw;
line-height: 4vw;
}
}


.description {
position: absolute;
top: 3%;
width: 60%;
font-family: "GothamBook", Arial, Helvetica, sans-serif;
font-size: 2.3vh;
line-height: 3vh;
text-align: center;
}
@media screen and (orientation:portrait) {
.description {
width: 85%;
font-size: 3.8vw;
line-height: 4.3vw;
}
}


.description span {
font-weight: bold;
}