body {
    background-color: dimgray;
    margin-left: 2%;
    margin-right: 2%;
    margin-bottom: 2%;
    background-position: center;
    background-size: 100%;
    background-repeat: no-repeat;
    background-attachment: fixed;
    color: black;
  }

  
  .bgDBFZ {
    background-image: url("../images/dbfz/background.jpg");
  }
  
  .bgTH {
    background-image: url("../images/th/background.jpg");
  }
  
  .bgSONIC {
    background-image: url("../images/sonic/background.jpg");
  }
  
  nav {
    display: flex;
    flex-wrap: nowrap;
    text-align: justify;
    justify-content: center;
    background-color: rgba(30, 30, 30, 0.785);
    color: aliceblue;
  }
  
  nav>div {
    padding-bottom: 20px;
    padding-top: 20px;
    padding-left: 40px;
    padding-right: 40px;
  }
  
  nav>div:hover {
    background-color: #b2b2b272;
  }
  
  header {
    text-align: center;
    padding: 20px;
    padding-top: 2px;
    padding-bottom: 2px;
    background-color: rgba(150, 150, 150, .35);
    color: aliceblue;
  }
  
  article {
    padding: 2%;
    margin-top: 2%;
    margin-bottom: 4%;
    margin-left: 15%;
    margin-right: 15%;
    text-align: center;
    font-size: large;
    background-color: rgba(255, 255, 255, 0.622);
    ;
  }
  
  footer {
    text-align: center;
    padding: 1%;
    background-color: rgba(150, 150, 150, .35);
    color: aliceblue;
  }
  
  a {
    text-decoration: none;
    color: aliceblue;
  }
  
  
  p {
    font-size: large;
  }
  
  ul {
    text-align: center;
    list-style-position: inside;
  }
  
  audio {
    margin: 2%;
  }
  
  .badapple {
    display: flex;
    flex-direction: row;
    flex-wrap: nowrap;
  }
  
  .boxaside {
    display: flex;
    flex-wrap: nowrap;
    justify-content: space-between;
    background-color: rgba(255, 255, 255, .35);
    margin-left: 15%;
    margin-right: 15%;
    padding-top: 1%;
    color: black;
  }
  
  .articles {
    margin-top: 3%;
    margin-bottom: 3%;
    margin-left: 2%;
    margin-right: 2%;
    display: flex;
    flex-wrap: wrap;
    flex-direction: column;
    justify-content: space-evenly;
    width: 50%;
  }
  
  .fleximages {
    display: flex;
    flex-direction: column;
    justify-content: space-around;
    margin-top: 3%;
    margin-bottom: 3%;
    margin-right: 2%;
    margin-left: 2%;
    padding-left: 8%;
    padding-right: 8%;
  }
  
  .icons {
    width: 380px;
    height: 380px;
    max-width: 100%;
    height: auto;
  }
  
  .fin{
    background: rgba(255, 255, 255, 0.622);
  }
  
  @media screen and (max-width: 600px) {
  
    nav {
      display: flex;
      justify-content: space-evenly;
      flex-wrap: nowrap;
      flex-direction: column;
      vertical-align: middle;
    }
  
    .fleximages {
      display: none;
    }
  
    html,
    body {
      overflow-x: hidden;
    }
  
    body {
      position: relative;
      background-size: auto;
    }
  
    .badapple {
      display: flex;
      flex-direction: column;
      flex-wrap: nowrap;
    }
  
    iframe {
      width: 256px;
      height: 144px;
    }
  
    .boxaside {
      display: flex;
      flex-wrap: nowrap;
      justify-content: space-evenly;
      flex-direction: column;
    }
  
    img {
      display: none;
    }
  
    .articles {
      margin: auto;
      display: flex;
      flex-wrap: wrap;
      flex-direction: column;
      justify-content: space-evenly;
      width: auto
    }
  }