/*
TO-DO list:
    - kontakty - grafika
    - kontakty - vyplnit
    - formulář - google form
            jméno, přijede?, alergie (jídlo), aktivita?, potřebuje odvoz? odkud?, potřebuje přespat?
            dotazy


    - nová stránka - představení snoubenců a svědků
    - faq - jídlo, ubytko, hudba

/*=========================================*/
/*=========================================*/
/*=========================================*/
.h1 { font-family: 'fancy'; font-size: 4rem; }
.h2 { font-family: 'fancy'; font-size: 2.5rem; padding-bottom: 20px}
.h3 { font-family: 'bold'; font-size: 1rem; }
.basic_text, body { font-family: 'thin'; font-size: 0.9rem; }

a { color: #ff6347; text-decoration: none; }
a:hover { color: #DE5632; }

img {
  padding: 0px;
  margin: 0px;
  object-fit: contain;
}

body { margin: 0; }
body { zoom: 200%; }


.section {
    padding: 20px;
    text-align: center;
}

.content {
    background-color: #fff;
    padding: 30px;
    border-radius: 1px;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
    max-width: 600px;
    margin: 0 auto;
}

/*=========================================*/
/*=========================================*/
/*=========================================*/

.header {
    background-color: #A1C9D1;
}

.blue_box{
    background-color: #439fb7;
    color: white;
    width: 50%;
    margin-left: auto;
    margin-right: auto;
    padding: 1%;
}

.characters {
    display: flex;
    justify-content: center;
    gap: 20px;
    margin-top: 20px;
}

.characters img {
    width: 100px;
    max-width: 15%;
    margin-top: auto;
}

/*=========================================*/
/*=========================================*/
/*=========================================*/

.info {
    background-color: #D8A044;
}

.info img {
    width: 60px;
    padding-top: 0px;
    padding-bottom: 10px;
}

table {
    margin: 0 auto;
    border-collapse: collapse;
    text-align: left;
}
td {
    padding: 2px;
    padding-right: 5px;
    border: 0px solid black;
}

/*=========================================*/
/*=========================================*/
/*=========================================*/

.people {
    background-color: #7C311E;
}

.people .container {
    display: flex;
    justify-content: center;
    flex-wrap: wrap;
}

.adventurer {
    padding: 10px;
    max-width: 250px;
}

.adventurer img {
    max-width: 250px;
    border-radius: 50%;
}

/*=========================================*/
/*=========================================*/
/*=========================================*/

.directions {
    background-color: #8A6B59;
}

.directions .container {
    display: flex;
    justify-content: center;
}

.directions .container img {
    max-width: 300px;
}



/*=========================================*/
/*=========================================*/
/*=========================================*/

.about {
    background-color: #90322D;
}

.about p {
    text-align: justify;
}

.about img {
    width: 40%;
    padding-top: 10px;
    padding-bottom: 0px;
}

/*=========================================*/
/*=========================================*/
/*=========================================*/

.clothes {
    background-color: #A1C9D1;
}

.clothes img {
    width: 100%;
    padding-top: 20px;
    padding-bottom: 10px;
}

/*=========================================*/
/*=========================================*/
/*=========================================*/

.artifacts {
    background-color: #775694;
}

.artifacts p {
    text-align: justify;
}

.artifacts table {
    table-layout: fixed;
}

.artifacts td {
    min-width: 200px;
    padding: 10px;
}

.artifacts img {
    width: 100%;
    padding-top: 20px;
    padding-bottom: 10px;
}

/*=========================================*/
/*=========================================*/
/*=========================================*/

.program {
    background-color: #439FB7;
}

.program .content {
    background-image: url("./graphic/pergamen.png");
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;
    background-origin: content-box;
}

.program .content .vertical_center {
    display: flex;
    min-height: 300px;
    align-items: center;
    justify-content: center;

}

/*=========================================*/
/*=========================================*/
/*=========================================*/

.form {
    background-color: #D8A044;
}

.form table {
    table-layout: fixed;
}

.form td {
    min-width: 10px;
    padding: 10px;
}

.form img {
    width: 100%;
    padding-top: 10px;
    padding-bottom: 0px;
}

/*=========================================*/
/*=========================================*/
/*=========================================*/

.companions {
    background-color: #4376A5;
}

.companions table {
    table-layout: fixed;
}

.companions td {
    min-width: 200px;
    padding: 10px;
}

.companions img {
    width: 100%;
    padding-top: 10px;
    padding-bottom: 00px;
}

/*=========================================*/
/*=========================================*/
/*=========================================*/

.contacts {
    background-color: #8A6B59;
}

.contacts .container {
            display: flex;
            flex-wrap: wrap;
            justify-content: space-around;
            font-family: Arial, sans-serif;
            margin: 20px;
}

.item {
    display: flex;
    align-items: center;
    margin: 20px;
    width: 200px;
}

.number {
    font-size: 4em;
    font-weight: normal;
    padding-right: 10px;
    margin-right: 20px;
    position: relative;
}

.number::after {
    content: '';
    position: absolute;
    right: -5px;
    top: 0;
    bottom: 0;
    width: 1px;
    background: black;
}

.flex_content {
    display: flex;
    flex-direction: column;
}

.name {
    font-size: 1.2em;
    font-weight: bold;
}

.contact {
    font-size: 0.8em;
    margin-top: 5px;
}



/*=========================================*/
/*=========================================*/
/*=========================================*/

.faq {
    background-color: #7B993F;
}

.faq p {
    margin-left: 100px;
    margin-right: 100px;
    text-align: justify;
}

.faq img {
    width: 200px;
    padding-top: 10px;
    padding-bottom: 00px;
}

/*=========================================*/
/*=========================================*/
/*=========================================*/

.footer {
    background-color: #42322A;
}

.footer .content {
    background-color: #42322A;
    box-shadow: none;
    background-image: url("./graphic/dwarf.png");
    background-position: center;
    background-repeat: no-repeat;
    background-size: contain;
    background-origin: content-box;
}

.footer .content .vertical_center {
    display: flex;
    min-height: 200px;
    align-items: center;
    justify-content: center;
}

/*=========================================*/
/*=========================================*/
/*=========================================*/

@media (max-width: 1500px) { body { zoom: 200%; } }
@media (max-width: 1400px) { body { zoom: 187%; } }
@media (max-width: 1300px) { body { zoom: 173%; } }
@media (max-width: 1200px) { body { zoom: 160%; } }
@media (max-width: 1100px) { body { zoom: 147%; } }
@media (max-width: 1000px) { body { zoom: 133%; } }
@media (max-width: 900px) { body { zoom: 120%; } }
@media (max-width: 800px) { body { zoom: 107%; } }
@media (max-width: 700px) { body { zoom: 93%; } }
@media (max-width: 600px) { body { zoom: 80%; } }
@media (max-width: 500px) { body { zoom: 67%; } }
@media (max-width: 400px) { body { zoom: 53%; } }
@media (max-width: 300px) { body { zoom: 40%; } }
@media (max-width: 200px) { body { zoom: 27%; } }