@charset "utf-8";
/*
  @author timothy.zhong
 * */
 body {
     width: 100%;
     height: 100%;
     text-align: center;
     background-color: #87CEFA;
     position: relative;
     padding: 5% 0;
 }
 #logo {
     width: 50%;
     margin: 10% auto;
     position: relative;
 }
 .bg {
     width: 100%;
     top: 0;
 }
 #logo~img:hover {
    cursor: pointer;
 }
 #lefteye {
     position: absolute;
     left: 16.67%;
     top: 0;
     width: 30%;
 }
 #lefteye:hover {
     content: url("../images/righteye.png");
 }
 #righteye {
     position: absolute;
     right: 16.67%;
     top:0;
     width: 30%;
 }
#righteye:hover {
    content: url("../images/lefteye.png");
}
 #compname {
     position: absolute;
     bottom: 0;
     width: 40%;
     left: 30%;
 }
 .hide {
    position: absolute;
    display: none;
 }
 .circle1 {
    width: 8px;
    height: 8px;
    border: 2px solid white;
    border-radius: 5px;
 }
.circle2 {
    width: 18px;
    height: 18px;
    border: 2px solid white;
    border-radius: 10px;
 }
 .contact {
     border: 2px  solid white;
	 border-radius: 10px; 
     padding: 10px 10px;
 }
 .contact li {
     list-style: none;
 }
 #lastline {
     position: relative;
     margin: 0 auto;
     bottom: -50px;
 }
 #lastline a {
     color: white;
 }
 #screen {
     background-color: rgba(51,153,51, 0.7);
     width: 60%;
     height: 80%;
     position: absolute;
     top: 10%;
     left: 20%;
     z-index: 5;
     border: 2px solid darkgreen;
     box-shadow:
         0 -5px 8px -27px rgba(81, 81,81,0.8),
         0 -5px 8px -7px rgba(81, 81,81,0.8),
         5px 0 8px -1px  rgba(81, 81,81,0.4),
         5px 0 8px -1px  rgba(81, 81,81,0.8);
     border-radius: 15px;
 }