/*  CS142 Final Project
    Designed by Kamiku Xue, Andrew Pang & Zecheng Jin
    Phone Version
*/

/*================
    Global Setting
==================*/   
*{
  font-size: 1em;
}

body{
    background-image: none;
    background-color: #434343;
}

#home h1.title-game-name{
  font-size: 2em;
  color: red;
}
/*================
    Modals
==================*/

/*================
    Header & Nav
==================*/
.common-header {
    display: grid;
    grid-template-columns: auto;
    grid-template-areas: 
        'logo'
        'link';
}

.common-header figure{
    width: 65%;
    margin: auto;
}

.common-nav{
    display: none;
}

#mobile-nav-menu-toggle:checked ~ .common-nav{
    display: block;
    animation: fadeIn ease .2s;
}

#mobile-nav-menu-toggle:checked ~ .common-nav .nav-container{
 margin-top: 1em;
}

.nav-container{
    flex-direction: column;
}

.common-header figure{
    padding: 1.2em;
}

.mobile-nav {
    z-index: 1;
    position: fixed;
    width: 3em;
    height: 3em;
    top: 1em;
    right: 1.5em;
    transition: background .3s;
    background: #fff;
    cursor: pointer;
    border-radius: 50%;
    box-shadow: 5px 5px 10px 5px rgba(255, 255, 255, 0.4);
}

.icon-line{
    display: block;
    width: 1.8em;
    top: 1em;
    left: 0.6em;
    position: absolute;
    height: 3px;
    background: #333;
    right: 0;
    transition: transform .35s, top .35s cubic-bezier(.165, .84, .44, 1), left .35s cubic-bezier(.165, .84, .44, 1), width .35s cubic-bezier(.165, .84, .44, 1), -webkit-transform .35s;
    border-radius: 5px;
}

.icon-line:nth-of-type(2) {
    top: 1.5em;
}

.icon-line:nth-of-type(3) {
    top: 2em;
}

#mobile-nav-menu-toggle:checked ~ .mobile-nav .icon-line:nth-of-type(1) {
    transform: rotate(45deg);
    top: 1.4em;
    left: 0.7em
}

#mobile-nav-menu-toggle:checked ~ .mobile-nav .icon-line:nth-of-type(2) {
    width: 0
}

#mobile-nav-menu-toggle:checked ~ .mobile-nav .icon-line:nth-of-type(3) {
    transform: rotate(-45deg);
    top: 1.4em;
    left: 0.7em
}

.nav-container {
    justify-content: stretch;
    align-items: stretch;
    align-content: stretch;
}

.nav-item a {
    font-size: 1em;
    color: white;
    padding: 1em;
}

.active a {
    background-color: white;
    color: black;
}

.active:after {
    content: '';
    bottom: 0;
    right: 0;
    border: 4px solid;
}

/*================
    Index
==================*/
#demo{
    display: block;
    margin: 1em 0;
}

#home .nav-container{
    width: 100%;
    margin: 0;
    display: grid;
    grid-template-columns: auto auto;
}

#home .nav-item{
    transform: scale(1);
}

.nav-item a{
    margin: 0.5em;
    padding: 0;
}

.nav-item:nth-child(5){
    grid-column: span 2;
}

.nav-item figure{
    margin: 0;
}

.nav-item figcaption{
    font-size: 1em;
}

.faq-area{
    width: 100%;
    padding: 1em;
    background-color: rgba(1,1,1,0.9)
}

.faq-container{
    grid-template-columns: auto;
    grid-gap: 0;
    margin: auto;
}

.faq-content{
    font-size: 0.8em;
    margin: 0;
    opacity: 0;
    display: none;
}

.faq-toggle:checked ~ .faq-content {
    display: block;
    animation: fadeIn ease 1s;
}

/*================
    Stories
==================*/

/*================
    Characters
==================*/

/*================
    Gallery
==================*/
.slides{
    width: 100%;
}

.slides h2{
    text-align: center;
}

.gallery-container{
    margin: 0.5em;
    display: grid;
    grid-template-columns: auto auto;
    grid-gap: 0.2em;
}

.gallery-item figcaption{
    text-align: center;
    font-size: 0.8em;
}
/*================ 
    Comments
==================*/

/*================
    About
==================*/
.about-container{
    display:contents;
    margin:auto;
    grid-template-columns: auto;
}
.parallax{
    height:475%
}
/*================
    Discusion
==================*/
#discussion-form{
width: 100%;
display: block;
margin-left: auto;
margin-right: auto;
background-color: rgba(1,1,1,0.8);
}
/*================
    Footer
==================*/
footer{
    margin-top: 1em;
    display: flex;
    flex-direction: column;
}

/*=================
    Animation
===================*/
@keyframes fadeIn {
  0% {
    opacity:0;
    transform: translate(0,-50%);
  }
    
    80%{
    transform: translate(0,0);
    }
    
  100% {
    opacity:1;
  }
}

@keyframes fadeOut {
  0% {
    opacity:1;
    transform: translate(0,0);
  }
    
    80%{
    transform: translate(0,-50%);
    }
    
  99% {
    opacity:0;
    
  }
    100% {
    visibility: hidden;
  }
}