body {
    font-family: sans-serif;
    text-align: center;
    margin: 0;
    padding: 0;
    background-color: whitesmoke;
    /*
    background-image: url("../images/background.jpg");
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    background-attachment: fixed; */
}

h1 {
    color: black;
    font-size: 32px;
    text-align: center;
    margin-top: 20px;
}

.nav-buttons {
    margin-top: 10px;
}

.content img {
    width: 90%;
    height: auto;
    max-width: 1800px;
    border-radius: 8px;
    margin-top: 20px;
}
@media (max-width: 600px) {
    .content {
        width: 90%;
    }
}

h2 {
    color: black;
    font-size: 32px;
    text-align: center;
    margin-top: 80px;
}

h4 {
    color: black;
    font-size: 32px;
    text-align: center;
    margin-top: 10px;
}

.content iframe {
    width: 100%;
    max-width: 600px;
    height: 315px;
    border: none;
}
@media (max-width: 600px) {
    .content iframe {
        height: 200px;
    }
}

h3 {
    color: black;
    font-size: 32px;
    text-align: center;
    margin-top: 80px;
}

.tab-btn {
  padding: 10px 20px;
  cursor: pointer;
  border: none;
  background: #ddd;
  margin-right: 5px;
}

.tab-btn:hover {
  background: #ccc;
}

.tab-content {
  margin-top: 20px;
  padding: 15px;
  border: 1px solid #ccc;
}

.caracters {
    width: 100%;
    max-width: 600px;
    height: 315px;
    border: none;
}


.tabs {
  max-width: 1800px;
  margin: auto;
}

.tab-list {
  display: flex;
}

.tab-item {
  background-color: #fff;
  border: solid 1px black;
  padding: 0.5em 1.2em;
  cursor: pointer;
}

.tab-content {
  background-color: #f5f5f5;
}

.img-hyosi {
    width: 50%;
    height: auto;
    max-width: 1800px;
    border-radius: 8px;
    margin-top: 20px;
}
@media (max-width: 600px) {
    .content {
        width: 90%;
    }
}