html, body {
    width:100%;height:100%;margin:0;padding:0;background-color:black;overflow:hidden;color:white;
}
a{
    color:#ccc;text-decoration:none;
}
a:hover{
    text-decoration:underline;color:white;
}
a:active{
    color:#999;
}
#root {
    top:0;bottom:0;left:0;right:0;position:absolute;
    background:url(../img/devcat.jpg) no-repeat center;
    background-size:cover;
    @media (orientation: landscape) {
        background-image:url(../img/devcat.wide.jpg);
    }
}

#root>section{
    width:40%;height:100%;margin:0 auto;background-color:black;
    min-width:320px;
    -webkit-box-shadow:black 0 0 40px 36px ;
    box-shadow:black 0 0 40px 36px ; 
}
#root>section>aside{
    text-align:right
}
#root>section>aside.bottom{
    position:absolute;bottom:10px;font-size:.88em;
}
#root>section>header{
    float:right;position:relative;left:-50%;
}
#root>section>header>h1{
    margin:0;text-align:center;font:normal 8em Georgia,​Times,​serif;
    border-bottom:12px solid white;position:relative;left:50%;float:left;
    letter-spacing:.1em;
    @media screen and (max-width: 480px) {
        font-size: 20vw;
    }
}
#root>section>header>h2{
    font:normal 2em "Century Gothic",​​Arial,meiryo,'malgun gothic',dotum,​sans-serif;text-transform:uppercase;
    margin:0;margin:0;text-align:center;padding-left:1em;
    position:relative;left:50%;float:left;clear:left;
    @media screen and (max-width: 480px) {
        font-size: 5vw;
    }
}
#root>section>header>h2[lang=en]{
    letter-spacing:.43em;
}
#root>section>header>h2[lang=ko]{
    letter-spacing:1.05em;
}
#root>section>header>h2[lang=ja]{
    letter-spacing:0.7em;
}
#root>section>header>h2[lang=ca]{
    letter-spacing:0.45em;
}
#root>section>article{clear:both;padding-top:1em;text-align:center;}

#root>section>footer{
    text-align:center;vertical-align:middle;
}