body {
  font: 24px Helvetica;
  background-image: url(./img/wall4.jpg);
  min-height: 98vh;
 }


 @media (min-width: 500px) {
      body {
          display: grid;   
      }
  }

  h2{
    color: rgb(255, 255, 255);
  }
  #canvas{
   
      box-sizing: border-box;
      position: relative;
      border: 8px  double royalblue;
      border-radius: 7pt;

  }
  
 #app {
  
  text-align: center;
  min-height: 700px;
  margin: 0px;
  padding: 0px;
  display: flex;
  }

 #app main {
  margin: 4px;
  border-radius: 7pt;
  background-repeat:no-repeat;
    background-size:100% 100%;
  -webkit-flex: 3 1 60%;
          flex: 3 1 60%;
  -webkit-order: 2;
          order: 2;
  }
 
 #app nav {
  margin: 4px;
  padding: 5px;
  border-radius: 7pt;
  border: 1px solid #ffffff;
  -webkit-flex: 1 1 5%;
          flex: 1 1 5%;
  -webkit-order: 1;
          order: 1;
  }
 
  li a {
      display: block;
      color: white;
      padding: 8px 16px;
      text-decoration: none;
  }

 #app aside {
  margin: 4px;
  padding: 5px;
  border-radius: 7pt;
  border: 1px solid #ffffff;
  -webkit-flex: 1 1 2%;
          flex: 1 1 2%;
  -webkit-order: 3; 
          order: 3;
  }

aside h5{
 display: block;
 color: white;
 padding: 0px 16px;   
}

 header {
  border: 1px solid #ffffff;
  background: linear-gradient( rgba(0, 0, 0, 0.4), rgba(0, 0, 0, 0.4) );
  background-repeat:no-repeat;
    background-size:100% 100%;
    color: rgb(255, 255, 255);
    padding-top: 20px;
    padding-left: 10px;
    padding-right: 10px;
  margin: 4px;
  border-radius: 7pt;
  text-align: right;
  }

  header h5{
    color: rgb(255, 255, 255);
    margin-left: 90%;
  }

  label{
          font-size: 18px;
  }

#welcome{
      margin-top: 10%;
}

#welcome img{
      height: 200px;
      width: 40%;
}
  
footer{
padding-top: 20px;       
text-align: center;
margin: 4px;
border-radius: 7pt;
background: linear-gradient( rgba(0, 0, 0, 0.4), rgba(0, 0, 0, 0.4) );
border: 1px solid #ffffff;
background-position: bottom;
color: rgb(255, 255, 255);
  
  }
  
  #register{
      margin-top: 5%;
    
  }

  #login{
      margin-top: 5%;  
  }
  
  #about
  {
       width: 50%;
        }


   ul {
      padding: 0;
      list-style-type: none;
  }
  
  ul li {
      box-sizing: border-box;
      width: 8em;
      height: 3em;
      font-size: 20px;
      border-radius: 0.5em;
      margin: 0.5em;
      box-shadow: 0 0 1em rgba(0,0,0,0.2);
      color: white;
      font-family: sans-serif;
      text-transform: capitalize;
      line-height: 3em;
      transition: 0.3s;
      cursor: pointer;
  }
  
  ul li:nth-child(odd) {
      background: linear-gradient(to right, orange, tomato);
      text-align: left;
      padding-left: 10%;
      transform: perspective(500px) rotateY(45deg);
  }
  
  ul li:nth-child(even) {
      background: linear-gradient(to left, orange, tomato);
      text-align: right;
      padding-right: 10%;
      transform: perspective(500px) rotateY(-45deg);
  }
  
  ul li:nth-child(odd):hover {
      transform: perspective(200px) rotateY(45deg);
      padding-left: 5%;
  }
  
  ul li:nth-child(even):hover {
      transform: perspective(200px) rotateY(-45deg);
      padding-right: 5%;
  }
  
  .buttonWelcom{
      line-height: 1;
      margin: 20px;
      padding: 1.0em 2.8em;
      border-radius: 0.6em;
      text-decoration: none;
      text-align: center;
      text-transform: uppercase;
      font-family: 'Montserrat', sans-serif;
      font-weight: 700;
      font-size: 1rem;
      background: linear-gradient(to right, orange, tomato);
      border-color: orange;
      color:white;
      box-shadow: 0 0 40px 40px tomato inset, 0 0 0 0 orange;
      transition: all 150ms ease-in-out;
  }

  .buttonWelcom:hover {
    box-shadow: 0 0 10px 0 tomato  inset, 0 0 10px 4px tomato ;
  }

  .buttonRegular{
      text-transform: uppercase;
      padding: 0.7em;
      font-family: 'Montserrat', sans-serif;
      font-weight: 700;
      font-size: 1rem;
      border-color: #343738;
      color:white;

      box-shadow: 0 0 40px 40px tomato inset, 0 0 0 0 #3498db;
      transition: all 150ms ease-in-out;
      border-radius: 0.6em;
      border-color: orange;
  }



  date {
    background: 97% 50% no-repeat ;
  }
    date::-webkit-inner-spin-button {
    display: none;
  }
    date::-webkit-calendar-picker-indicator {
    opacity: 0;
  }

  label.error{
    position:fixed;
    background-repeat:no-repeat;
    padding-left: 20px;
    margin-left: .3em;
    vertical-align:middle;
    background-color: #FFEBE8;
    border: solid 1px red;
    width:400px;
    height:20px;
    font-style: italic;
}


  input {
    color: rgb(255, 255, 255);
      font-style: normal;
      font-size:18px;
      width:300px;
      background-image: url(./img/wall4.jpg);
      background-attachment: fixed;
      border:none;
    border-bottom:1px solid whitesmoke;

    ;
  }
  input:focus{ 
      outline:none; 
}
    .butt{
    border-bottom-color: white;
    color:white;
}

#gameDetails{
    display: block;
    list-style-type: disc;
    margin-block-start: 1em;
    margin-block-end: 1em;
    margin-inline-start: 0px;
    margin-inline-end: 0px;
    padding-inline-start: 40px;
}