/* http://meyerweb.com/eric/tools/css/reset/ 
   v2.0 | 20110126
   License: none (public domain)
*/

html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
b, u, i, center,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td,
article, aside, canvas, details, embed, 
figure, figcaption, footer, header, hgroup, 
menu, nav, output, ruby, section, summary,
time, mark, audio, video {
	margin: 0;
	padding: 0;
	border: 0;
	font-size: 100%;
	font: inherit;
	vertical-align: baseline;
}
/* HTML5 display-role reset for older browsers */
article, aside, details, figcaption, figure, 
footer, header, hgroup, menu, nav, section {
	display: block;
}
body {
	line-height: 1;
}
ol, ul {
	list-style: none;
}
blockquote, q {
	quotes: none;
}
blockquote:before, blockquote:after,
q:before, q:after {
	content: '';
	content: none;
}
table {
	border-collapse: collapse;
	border-spacing: 0;
}
p{line-height: 32px;}


a{
    text-decoration: none;
    cursor: pointer;
}
body {
    font: 16px sans-serif;
    padding-bottom: 15px;
    background-color: #774898;
    padding:0px;
  
}

/*falling background*/
.falling{
    position:fixed;
    width:100%;
    height:1280px;
    top:-200px;
    float:left;
}
.falling img{
    height:auto;
    display:inline-block;
    width:6%;
}

.falling-phone{
    z-index:-10;
    position: relative;
    left:240px;
/*  -webkit-transform: scale3d(1,.5,1) rotateZ(10deg);*/
    -webkit-animation: falling-phone 3s ease-in-out infinite;
}

.falling-phone:nth-child(5n+1) {
-webkit-animation-delay: 1s;
-moz-animation-delay: 1s;
}
.falling-phone:nth-child(3n+2) {
-webkit-animation-delay: 1.5s;
-moz-animation-delay: 1.5s;
}

.falling-phone:nth-child(2n+5) {
-webkit-animation-delay: 1.7s;
-moz-animation-delay: 1.7s;
    -webkit-transform:rotateZ(0deg);
    
}

@-webkit-keyframes falling-phone{
  0%   { top:0%; left: 0%; -webkit-transform:rotateZ(0deg); }
  100% { top:100%; left: 0%; -webkit-transform:rotateZ(270deg); }
}


.falling-car{
    position: relative;
    z-index:-9;
    margin-left:300px;
    -webkit-animation: falling-car 2s ease-in-out infinite;
}

.falling-car:nth-child(4n+1) {
-webkit-animation-delay: 1s;
-moz-animation-delay: 1s;
}
.falling-car:nth-child(2n+6) {
-webkit-animation-delay: 1.5s;
-moz-animation-delay: 1.5s;
}

.falling-car:nth-child(3n+5) {
-webkit-animation-delay: 1.7s;
-moz-animation-delay: 1.7s;
    -webkit-transform:rotateZ(0deg);
    
}

@-webkit-keyframes falling-car{
  0%   { top:0%; left: 0%; -webkit-transform:rotateZ(0deg); }
  100% { top:100%; left: 0%; -webkit-transform:rotateZ(360deg); }
}

.falling-pc{
    position: relative;
    z-index:-15;
    float:right;
    -webkit-animation: falling-pc 4s ease-in-out infinite;
}

.falling-pc:nth-child(2n+3) {
-webkit-animation-delay: 1s;
-moz-animation-delay: 1s;
}
.falling-pc:nth-child(5n+3) {
-webkit-animation-delay: 1.5s;
-moz-animation-delay: 1.5s;
}

.falling-pc:nth-child(3n+2) {
-webkit-animation-delay: 1.7s;
-moz-animation-delay: 1.7s;
    
}

@-webkit-keyframes falling-pc{
    0%   { top:0%; left: 0%; -webkit-transform:rotateZ(0deg); }
    100% { top:100%; left: 0%; -webkit-transform:rotateZ(-270deg); }
}

.falling-watch{
    z-index:-8;
    position: relative;
    float:right;
    -webkit-animation: falling-pc 2s ease-in-out infinite;
}

.falling-watch:nth-child(3n+2) {
-webkit-animation-delay: 1s;
-moz-animation-delay: 1s;
}
.falling-watch:nth-child(5n+1) {
-webkit-animation-delay: 1.5s;
-moz-animation-delay: 1.5s;
}

.falling-watch:nth-child(2n+5) {
-webkit-animation-delay: 1.7s;
-moz-animation-delay: 1.7s;
}

@-webkit-keyframes falling-watch{
    0%   { top:0%; left: 0%; -webkit-transform:rotateZ(0deg); }
    100% { top:100%; left: 0%; -webkit-transform:rotateZ(210deg); }
}


#bodybox {
    position:relative;
    z-index:5;
    margin: 96px auto;
    color:#00a8b5;
    width: 360px;
    font: 16px;
/*    border-radius: 20px;*/
    padding:16px;
    top: 80px;
    font-family: 'Inconsolata', monospace;
}

.chatlog {
    font-size: 14px;
    
}
input{
    font-size: 14px;
    width: 100%;
    padding:8px;
    border-radius: 4px;
    font-family: 'Inconsolata', monospace;
}

pre {
  background-color: #f0f0f0;
  margin-left: 20px;
}
.pcman{
    margin:0px auto;
    width:100%;
    position:absolute;
    z-index:-3;
    display: flex;
    align-items: center;
    justify-content: center;
}
.pcman img{
    width:60%;
    margin-left:-10%;
}
.bodyimg{
    position:absolute;
    margin: 0px auto;
    width:100%;
    
}

.fightL{
    width:45%;
    position:absolute;
    top:800px;
    z-index:-2;
    left:2%;
    transform: rotate(-10deg);
}

.fightR{
    width:45%;
    position:absolute;
    right:16%;
    top:800px;
    z-index:0;
}
.video-1{
    width:280px;
    height:162px;
    position:absolute;
    top:780px;
    z-index:2;
    left:12%;
    transform: rotate(-10deg);
    border: solid 10px white;
    border-radius: 20px;
    background-color:white;
    
}
.video-2{
    width:280px;
    height:162px;
    position:absolute;
    right:12%;
    top:720px;
    z-index:0;
    transform: rotate(5deg);
    border: solid 10px white;
    border-radius: 20px;
    background-color:white;
}
.title{
    position:absolute;
    margin:0px auto;
    z-index:1;
    font-size: 100px;
    width:100%;
    top:500px;
    text-align:center;
    color:#fbb901;
    font-family: 'Alfa Slab One', cursive;
    text-shadow: 2px 5px 20px #5A357C;
    
}
.ascii-art {
    font-family: 'Inconsolata', monospace;
    white-space: pre;
    color:pink;
    font-size:18px;
    position:absolute;
    font-weight:600;
}
.bubble1{
    left:16%;
}
.bubble2{ 
    right:8%;
    top:400px;
}
.bubble3{ 
    left:8%;
    top:1100px;
    z-index:-20;
}
.robot{
    top:700px;
    left:30%;
}
.robothead{
    color:white;
    top:640px;
    left:33%;
    font-size:20;
}
.dialogue{
    text-align:center;
    position:absolute;
    font-size: 16px;
    z-index:-9;
    font-family: 'Inconsolata', monospace;
    color:white;
    opacity:0.5;
    width:40%;
    top:500px;
    line-height:28px;
    position:relative;
    margin:0px auto;
    padding:24px;
    
}
.btn {
    color:white;
    width:120px;
    position:relative;
    margin:0px auto;
/*    position:absolute;*/
    z-index:10;
    background-color: #79d180;
    border: none;
    padding: 12px 24px;
    cursor: pointer;
    font-size: 14px;
    border-radius: 100px;
    top:360px;
}
.btn a{
    color:mediumpurple;
    cursor: pointer;
}

/* Darker background on mouse-over */
.btn:hover {
    background-color: white;
}

@media only screen and (min-width: 1920px){
    
    
}


/*----responsive----*/
@media only screen and (max-width: 768px) {
    .pcman img{
        width:90%;
    }
    .falling img{
        width:10%;
    }
    .fightL, .fightR{
        width:90%;
    }
    .fightL, .video-1{
        top:1200px;
    }
    .fightL{
        left:-10%;
    }
    .fightR,.video-2{
        right:-1%;
    }
    .title{
        left:16px;
        width:98%;
    }
    .btn{
        font-size:28px;
        width:240px;
        padding:18px 24px;
    }
    .dialogue{
        
    }
    .bubble1{
        top:20px;
    }
    .bubble2{
        right:0px;
    }
    .bubble3{
        top:800px
    }
    .robothead{
        display:none;
    }
}

@media only screen and (max-width: 414px) {
    body{
        overflow-x:hidden;
    }
    .chatlog{
        line-height: 16px;
    }
    .pcman img{
        width:130%;
        margin-left:-72px;
    }
    #bodybox{
        width:220px;
        font-size:14px;
        z-index:5;
        top:72px;
        
    }
    input{
        padding:4px;
        height:28px;
    }
    .bodyimg{
        margin-top:20px;
    }

    .title{
        width:100%;
/*        left:20%;*/
        text-align:center;
        font-size:60px;
        top:360px;
    }
    .fightL{
        width:120%;
        top: 960px;
/*        left:-40%;*/
    }
    .video-1{
        top:880px;
        transform: rotate(-5deg);
    }
    .fightR{
        width:120%;
        top: 1250px;
        
    }
    .video-2{
        top: 1150px;
        left:50%;
        transform: rotate(15deg);
        
    }
    .falling img{
        width:12%;
    }
    .dialogue{
        width:80%;
        font-size:14px;
        text-align:left;
        top:960px;
        position:absolute;
    }
    .btn{
        top:1280px;
    }
    .bubble1{
        top:4px;
        left:72px;
    }
    .bubble2{
        top:460px;
        right:-20px;
    }
    .bubble3{
        top:780px;
        z-index:9;
    }
    
}