@import url("https://fonts.googleapis.com/css2?family=Open+Sans:wght@100;200;300;400;500;600;700;800;900&display=swap");
@import url("https://fonts.googleapis.com/css2?family=Pontano+Sans:wght@100;200;300;400;500;600;700;800;900&display=swap");

* {
    -webkit-box-sizing: border-box;
    box-sizing: border-box;
    margin: 0;
    padding: 0;
}

body, html {
    height: 100%;
    width: 100%;
    /*background-color: rgb(6 21 28);*/
    background-color: rgb(240 240 240 / 1);
    margin: 0;
    padding: 0;
    overflow-x: hidden;
    /*margin: 0;*/
    /*overflow: hidden;*/
}

/*p {*/
/*    font-size: 15px;*/
/*}*/


/*html .sites {*/
/*    background-color: rgb(240 240 240 / 1);*/
/*}*/

body {
    font-family: "Open Sans", sans-serif;
    /*font-family: "Pontano Sans", sans-serif;*/
    font-weight: 400;
    /*color: #555555;*/
    /*color: #555555;*/
    font-size: 0.95rem !important;
    line-height: 1.5;
    letter-spacing: 0.3px;
    overflow-y: auto;
    overflow-x: hidden;
}

html .sites {
    background-color: rgb(240 240 240 / 1);
}

#diloogia-header {
    /*margin: 0 auto;*/
    /*max-width: 80%;*/
    /*text-align: center;*/
    font-family: "Pontano Sans", sans-serif;
    font-weight: 100;
    text-align: center;
    display: flex;
    flex-direction: column;
    letter-spacing: 1px;
}

h1 {
    font-size: 1.8rem;
    font-weight: 100;
    line-height: 2rem;
    margin: 1.5rem auto 1rem;

}

/*#diloogia-title {*/
/*    width: fit-content;*/
/*    margin: auto;*/
/*    padding: 0 2rem;*/
/*    border-bottom: #ddd 1px solid;*/
/*}*/

#border-line {
    width: 30%;
    margin: auto;
    border-top: #ddd 1px solid;
}

#page-choice {
    display: flex;
    flex-wrap: wrap;
    /*width: fit-content;*/
    margin: auto;
    /*align-self: start;*/
    justify-content: center;
    /*border-top: #555555 1px solid;*/

    /*display: flex;*/
    /*!*flex-wrap: nowrap;*!*/
    gap: 0 5rem;
    /*align-self: center;*/
}

#page-choice a {
    font-weight: 100;
    font-size: 1.7rem;
    padding: 10px;
}

#page-choice a h5 {
    font-weight: 500;
    font-size: 1.2rem;
    line-height: 1rem;
    /*padding-bottom: 10px;*/
}

.flex-container {
    display: flex;
    flex-wrap: wrap;
    margin: auto;
    max-width: 80%;
}

.flex-item {
    background-color: #f1f1f1;
    padding: 15px;
    text-align: left;
    /*font-size: 30px;*/
    flex: 50%;
}

.poster-container {
    max-width: 95%;
    /*padding: 10px;*/
    margin: auto;
    /*width: 50%;*/
}

#poster-LJL-EE {
    content: url("../LOOMINE_JA_LOPP/LJL-photos/LOOMINE_JA_LOPP_poster_wo_qr.jpg");
}

#poster-LJL-EN {
    content: url("../LOOMINE_JA_LOPP/LJL-photos/CREATION_AND_END_poster_wo_qr.jpg");
}

#poster-SUI-EE {
    content: url("../SOOME-UGRI_ITKUD/SUI-photos/SOOME-UGRI_ITKUD_poster_wo_qr.jpg");
}

#poster-SUI-EN {
    content: url("../SOOME-UGRI_ITKUD/SUI-photos/FINNO-UGRIC_LAMENTS_poster_wo_qr.jpg");
}


fieldset {
    margin: auto;
    padding: 40px 15px 15px;
    border: none;
    border-top: 1px solid #ddd;
    border-radius: 4px;
    display: block;
    /*justify-content: center;*/
    /*width: 45%;*/
    /*max-width: 1440px;*/
    text-align: left;
    font-weight: 400;
    /*background-color: #FFFFFF;*/
    color: #222222;
    height: 100%;
}

legend {
    font-size: 1.2rem;
    padding: 0 20px;
    font-weight: 600;
    color: #222222;
    text-align: left;
}

a, a:link, a:visited {
    text-decoration: none;
    font-weight: 600;
    color: #222222;
}

a:hover {
    color: rgb(38 114 135 / 0.8);
}

::-webkit-scrollbar {
    width: 10px;
}

::-webkit-scrollbar-track {
    background: #f1f1f1;
}

::-webkit-scrollbar-thumb {
    background: #888;
}

::-webkit-scrollbar-thumb:hover {
    background: #555;
}

#performances p {
    line-height: 2;
}

h8 { font-weight: 600; }


.socialbtns { padding: 5px; text-align: center;  display: flex; margin: 20px auto 0; flex-direction: column;}
.socialbtns ul {
    display: flex;
    flex-wrap: wrap;
    /*align-self: start;*/
    justify-content: center;
    gap: 10px;
    padding: 5px;
    list-style: none;
    /*margin-bottom: 1rem;*/
}
.socialbtns .fa {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 50px;
    height: 44px;
    color: #555555;
    background-color: #e6e6e6;
    font-weight: 100 !important;
    letter-spacing: 0;
    border-radius: 20px;
    transition: color 0.2s, background-color 0.2s;
}
.socialbtns .fa:hover { border-radius: 20px; color: #787878; background-color: #fff; }

#lang {
    display: flex;
    margin-top: 2rem;
    padding-top: 1.5rem;
    font-size: 1.2rem;
    gap: 0 2rem;
    /*margin-bottom: 2rem;*/
    width: fit-content;
    justify-content: center;
    align-self: center;
    border-top: #ddd 1px solid;
    /*border-top: #ddd 1px solid;*/
    /*align-self: end;*/
    /*align-content: space-between;*/
    /*letter-spacing: 2px;*/
}

#lang a { padding-left: 0.7rem; font-weight: 500;}

@media screen and (max-width: 1400px) {
    .flex-container {
        max-width: 100%;
    }
}

@media screen and (max-width: 1000px) {
    /*.flex-container {*/
    /*    max-width: 100%;*/
    /*}*/
    .flex-item {
        flex: 100%;
    }

    /*legend {*/
    /*    font-size: 1.6rem;*/
    /*    text-align: center;*/
    /*}*/

    /*p {*/
    /*    font-size: 16px;*/
    /*}*/
}

@media screen and (max-width: 800px) {
    /*p {*/
    /*    font-size: 16px;*/
    /*}*/
}

@media screen and (max-width: 600px) {
    /*p {*/
    /*    font-size: 17px;*/
    /*}*/

}