#tartalom{
    font-family: 'Times New Roman', Times, serif;
    padding: 3%;
    margin: auto;
}
table,
td,
th {
    border : 1px solid gray;
    padding: 5px;
}

table {
    border-collapse : collapse;
    background-color: beige;
    caption-side    : bottom;
}
#tartalom p {
    text-align: justify;
}
.info{
    padding: 0px 2%;
}
figcaption {
    text-align: center;
}
#navi ol{
  font-weight: bolder;
  font-size: 150%;
}
audio,
video {
    display  : block;
    margin   : 15px auto;
    max-width: 100%;
}
img {
    max-width    : 100%;
    height       : auto;
    display      : block;
    margin       : 10px auto;
    border-radius: 5px;
    box-shadow   : 2px 2px 5px rgba(0, 0, 0, 0.1);
}
#gallery{
    padding: 0px;
}
.gallery {
  border: 1px solid #ccc;
  padding: 0px;
  margin: 0px;
}  
.gallery:hover {
  border: 1px solid #777;
}  
.gallery img {
  width: 100%;
  height: auto;
}  
.desc {
  padding: 15px;
  text-align: center;
}
.responsive {
  padding: 0 6px;
  float: left;
  width: 25%;
}
.clearfix:after {
  content: "";
  display: table;
  clear: both;
}
.triviaPic{
    max-width: 200%;
    height: auto;
    padding: 1rem;
}
.triviaText {
    padding: 1rem;
}
#trivia {
  display: flex;
  align-items: center;
  justify-content: center
}
@media only screen and (max-width: 700px) {
  .responsive {
    width: 100%;
  }
  #trivia{
    display: block;
  }
  .triviaPic img{
    width: 100%;
  }
}
@media (min-width: 769px) {
    table {
        float      : right;
        margin-left: 20px;
    }
}
@media (max-width: 768px) {
    *{
      font-family: sans-serif;
    }
    img,
    video,
    audio {
        max-width: 100%;
    }

    div#bevezeto {
        column-count: 1;
    }

    table {
        float : none;
        margin: 0 auto;
    }

    h1 {
        font-size: 1.3rem;
    }
    h2{
        font-size: 1.1rem;
    }
}