/* CSS is how you can add style to your website, such as colors, fonts, and positioning of your
   HTML content. To learn how to do something, just try searching Google for questions like
   "how to change link color." */

body {
  background-image: url('https://file.garden/aPORi5oGSn0LJJpj/WALLPAPER/koel_tile3.png');
  background-color: #997d67;
  background-size: 25%;
  background-position: center;
  background-attachment: fixed;
  color: #4a1c00; 
  font-family: Verdana;
  animation-name: background;
  animation-duration: 200s;
  animation-iteration-count: infinite}
  
@keyframes background {
  from {background-position: 0 0}
  to {background-position: -2256px 1263px}
  }
  
a:link{color: #cc4802; font-weight: bold} a:visited{color: #a54242; font-weight: normal}
iframe{width: 100%; box-shadow: 0 5px 8px #000}
details > summary{
  padding: 5px;
  font-size: 25px;
  font-weight: bold;
  cursor: pointer
  }
details > summary:hover{
  color: #f7721d;
  }
h2{margin: 0 auto auto}
h4{text-decoration: underline; margin: 15px 8px 8px 8px}
.menu i{font-size: 200%; margin: 10px}

  .column {
    display: block;
    width: 100%; 
    overflow: auto}
  .row:after {content: ""; display: table; clear: both;}
  .container {
    width: 100%;
    display: flex;
    margin: 10px auto
    }
  .menu{
        display: grid;
        grid-template-columns: 20% 40% 40%;
        grid-template-areas: 
          '. topnav topnav'
          'changelog mainpage mainpage'
          '. mainpage mainpage';
        padding: 5px
        }
  .dialog {
    background-color: rgba(232, 214, 200, 0.8);
    margin: 15px auto;
    padding: 15px;
    border: 3px solid #eeeeee;
    box-shadow: 0 5px 8px #000;
    overflow: auto
    }
  .centre {margin: 30px auto; width: 70%}
  .game {
    height: 640px;
    max-width: 1076px;
    border: none;
    margin: 10px auto}
    
  #changelog {
    grid-area: changelog;
    width: 80%;
    margin: 10px auto}
  #changelog ul{padding: 5px; margin: 5px}
  
  #topnav {
    grid-area: topnav;
    display: inline-flex; 
    padding: 0; justify-content: center}
  #topnav a {color: #4a1c00; font-size: 150%; font-weight: bold; padding: 5px 10px; margin: 0}
  #topnav a:hover{background-color: #f7721d; color: white}
  
  #mainpage {
    grid-area: mainpage
  }
  
  @media screen and (max-width: 1300px) {
    body{background-size: 40%}

    .container {margin:10px}
    .menu{
      grid-template-columns: 100%;
      grid-template-areas:
        'topnav'
        'mainpage'
        'changelog'
      }
    #topnav {font-size: 90%}
  }

  @media screen and (max-width: 503px) {
    #topnav{font-size: 70%}
  }