body{
     color:#333;
     font-family:"Helvetica Neue",sans-serif;
     margin: 0;
     padding: 0;
}
 a{
     color:#999;
     text-decoration:none;
}
 h1{
     animation: fadeInLeft 1s both;
     animation-delay: 1.2s;
}
 section{
     height: 100vh;
     width: 100vw;
     margin: 0;
     padding: 0;
}
 .tab-div {
     width: 100%;
     order: 1;
}
 input[type=radio], .tab-div, .address-bar, .app-title {
     display: none;
}
 input[type=radio]:checked + label {
     background-color: rgb(246,246,246);
}
input[type=radio]:checked + label + .address-bar,
input[type=radio]:checked + label + .app-title {
     order: -1;
     display: block;
}
input[type=radio]:checked + label + .address-bar + .tab-div,
input[type=radio]:checked + label + .app-title + .tab-div   {
     display: block;
}

 .column-flex-container {
     display: flex;
     flex-direction: column;
     justify-content: center;
     align-items: center;
}
 .row-flex-container {
     display: flex;
     flex-direction: row;
     justify-content: center;
     align-items: center;
}
 .section-namecard {
     background: linear-gradient(#333, #111);
}
 .section-two {
     background-color: DodgerBlue;
     color: #EEE;
}
 .section-no-battery {
     background-color: #FFF;
}
 #namecard{
     background:#fff url("//lh3.googleusercontent.com/-srwjbRbanm0/Tt43GT3cQJI/AAAAAAAAAoE/GyoC9Xa-yPI/s300/mii_424.png") no-repeat;
     border-radius:8px;
     width:450px;
     height:300px;
     background-position: 250px 10px;
     box-shadow: 5px 5px 20px #000;
     animation: bounceIn .8s ease both;
}
 #namecard blockquote{
     padding:1em 0.7em;
}
 #description{
     animation: fadeInLeft 1s both;
     animation-delay: 1.5s;
}
 footer{
     font-size:12px;
     color:#999;
     text-align: center;
}
 #blink-battery{
     color:#A11;
     animation: blink 4s infinite;
}
 .tsuzuku{
     font-size: 24pt;
     text-align: right;
}
 .item{
     margin: 0 2em;
}
.showcase {
     max-width: 800px;
     width: 80vw;
     background-color: rgb(246,246,246);
     border-radius:5px;
     box-shadow: rgba(0,0,0,.8) 0 10px 70px;
     color: #444;
     margin: 5em auto;
     overflow: hidden;
     order: 1;
      flex-basis: 100vw;
}

 .tabs{
     display:flex;
     flex-wrap: wrap;
}
 .tab {
     padding:2px 5px;
     flex: 1 0 0;
     background-color: #AAA;
     border: 1px solid rgba(220,220,220, 0.4);
     box-sizing:border-box;
     text-align: center;
     font-size: 0.8em;
     text-overflow: ellipsis;
     white-space: nowrap;
     overflow: hidden;
     cursor: pointer;
}
 #web>.toolbar{
     height: 20px;
     line-height: 20px;
}
 #app>.toolbar{
     height: 20px;
     line-height: 20px;
     font-size: 14px;
}
 .toolbar{
     padding-left: 10px;
     display: flex;
     flex-direction: row;
     align-items: center;
}
 .window-buttons {
     margin: 0 5px;
     flex: 0 0 50px;
}
 .window-button{
     height: 12px;
     width: 12px;
     border-radius: 12px;
     margin: 5px 3px;
}
 .window-button.red{
     background-color: #F96742;
}
 .window-button.yellow{
     background-color: #FDBB35;
}
 .window-button.green{
     background-color: #34DB0A;
}
 .app-button{
     height: 28px;
     width: 30px;
     line-height: 28px;
     border: 1px solid rgba(219,219,219,0.5);
     border-radius: 7px;
     background-color: rgb(246,246,246);
     text-align: center;
     color: #999;
}
 .address-bar{
     border: 1px solid rgba(219,219,219,1);
     height: 20px;
     line-height: 20px;
     background-color: #FFF;
     margin: 0 2em;
     text-align: center;
     width: 100%;
     font-size: 14px;
}
 .app-title{
     height: 10px;
     margin-top: -1em;
     line-height: 10px;
     text-align: center;
     width: 100%;
     font-size: 14px;
}
 .screenshot {
     width: 100%;
     margin-bottom: -3px;
     background-color: #FFF;
}
 .project-type-selector {
    display: flex;
    flex-wrap: wrap;
	justify-content: center;
	align-items: center;
}

.project-type-selector > label {
     border: 1px solid #FFF;
     background-color: transparent;
     box-sizing: border-box;
     color: #FFF;
     font-size: 1em;
	 height: 3em;
	 width: 10em;
	 line-height: 3em;
	 margin-top: 1em;
}

.project-type-selector > label:first-of-type{
    border-radius: 15px 0 0 15px;
    margin-left: calc(50% - 10em);
}

.project-type-selector > label:last-of-type{
    border-radius: 0 15px 15px 0;

    margin-right: calc(50% - 10em);
}

.project-type-selector > input[type=radio], .showcase {
  	display: none;
}
.project-type-selector > input[type=radio]:checked + label {
  	background-color: #FFF;
    color:DodgerBlue;
}
.project-type-selector > input[type=radio]:checked + label + .showcase {
  	display: block;
}
label{
	text-align: center;
}

.tab-div::after{
    min-width: 150px;
    background-color: rgba(0,0,0,0.9);
    color: #fff;
    text-align: center;
    white-space: pre;
    border-radius: 6px;
    padding: 0.5em 1em;
    margin: -5em 10px;
    display: block;
    position: absolute;
    z-index: 1;
    content: attr(data-desc);
    overflow: visible;
}

 @keyframes bounceIn {
    0% {
        opacity: 0;
         transform: translateY(-5000px);
    }
    60%{
        opacity: 1;
        transform: translateY(50px) rotate(10deg);
    }
    70%{transform: translateY(-50px) ; }
    80%{transform: translateY(30px)rotate(-10deg); }
    90%{transform: translateY(-30px); }
    100% {transform: translateY(0); }
}
 @keyframes fadeInLeft {
     0% {
        opacity: 0;
        transform: translateX(-10px);
    }
     100% {
        opacity: 1;
        transform: translateX(0);
    }
}
 @keyframes blink {
     0%   {opacity: 0.2; }
     40%  {opacity: 0.6; }
     60%  {opacity: 0.6; }
     100% {opacity: 0.2; }
}