@import url('https://fonts.googleapis.com/css2?family=Libre+Baskerville:ital@0;1&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700;800&display=swap');

/*import ttf font*/
@font-face {
    font-family: 'Libre Baskerville Cyrillic';
    src: url(../fonts/BACI____.ttf);
}
.content{
    width: 50%;
    height: 100%;
    background-color: #efe5d5;
    color: #1a1c1a;
    padding: 2em 3em;
    border-radius: 10px;
    margin: auto;
    margin-bottom: 0;
    overflow: auto;
    line-height: 2em;
    font-size: 1.1em;
    font-family: "Libre Baskerville", serif;
    transform: translateY(-5%);
}
.end{
    width: 50%;
    color: #1a1c1a;
    border-radius: 10px;
    margin: 0 auto 4em auto;
    line-height: 2em;
    font-size: 1.1em;
    font-family: "Libre Baskerville", serif;
}
.ukr{
    font-size: 1.2em;
    font-family: 'Libre Baskerville Cyrillic'!important;
}
.banner{
    width:100%;
    height:40vh;
    display: flex;
    align-items:center;
}
.banner img{
    width: 100%;
    height: 100%;
    object-fit: cover;
}
*{
    margin: 0;
    padding: 0;
}
.banner h1{
    position: absolute;
    font-size: 3em;
    color: #DDD;
    font-family: 'Inter', sans-serif;
    margin-left: 20%;
}

pre{
    font-size: 1em;
    font-family: "Inter", sans-serif;
    font-weight: 600;
}
.poem{
    width: 45%;
    color:#fff;
    backdrop-filter: blur(16px) saturate(180%);
    -webkit-backdrop-filter: blur(16px) saturate(180%);
    background-color: rgba(17, 25, 40, 0.75);
    border-radius: 12px;
    border: 1px solid rgba(255, 255, 255, 0.125);
    transform: translateY(-15%);
}
.banner-poem{
    height:60vh;
}

.short-poetry{
    width: fit-content;
    height: 100%;
    background-color: #efe5d5;
    color: #1a1c1a;
    padding: 2em 3em;
    border-radius: 10px;
    margin: 1em;
    line-height: 2em;
    font-size: 1.1em;
    font-family: "Libre Baskerville", serif;

}

.short-poetry-container{
    width: 100%;
    margin: 0 auto;
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    align-items: center;
}


/* dark mode */
@media (prefers-color-scheme: dark) {
    body{
        background-color: #1a1c1a;
        color: #efe5d5;
    }
    .end{
        color: #efe5d5;
    }
  }