@import url('https://fonts.googleapis.com/css2?family=Roboto+Slab:wght@700&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Ruda:wght@400..700&display=swap');
html,body,div,h1,h2,h3,p,a,input,label {
    font-weight: 400;
}
html {
    font-family: 'Ruda', sans-serif;
    /*font-size: 21.5px;*/
    color: hsl(0,0%,0%);
    background-color: #F6E9CB;
}
body {
    min-height: 100vh;
    padding-left: 0rem;
    padding-top: 0rem;
    font-size: 0;
    background-image: url(../img/kamer204.svg),url(../img/kamer204.svg),url(../img/kamer204.svg),url(../img/kamer204.svg),url(../img/kamer204.svg);
    background-size: 40rem 54rem,40rem 54rem,40rem 54rem,40rem 54rem,40rem 54rem;
    background-position: 0 0, 40rem -6rem, 80rem -12rem, 120rem -18rem, 160rem -24rem;
    background-repeat: repeat-y, repeat-y, repeat-y, repeat-y, repeat-y;
}
.container {
    padding: 3rem 2rem;
    display: flex;
    flex-wrap: wrap;
    max-width: 88rem;
    margin-left: max(0rem,round(down, calc( ( 100vw - 88rem ) / 2), 4rem ));
}
article {
    display: grid;
    grid-template-columns: 12rem 12rem;
    width: 24rem;
    font-size: 1rem;
    line-height: 1.5rem;
    margin: 3rem 2rem;
}
#kamer204 {
    grid-template-rows: 18rem 24rem;
}
#sopraan {
    grid-template-rows: 18rem 60rem;
}
#alt {
    grid-template-rows: 18rem 42rem;
}
#tenor {
    grid-template-rows: 18rem 42rem;
}
#dirigent {
    grid-template-rows: 18rem 24rem;
}
#bas {
    grid-template-rows: 18rem 36rem;
}
section.i1 {
    grid-column: 1;
    grid-row: 1;
}
section.i2 {
    grid-column: 2;
    grid-row: 1;
}
section.text {
    grid-column: 1 / 3;
    grid-row: 2;
}
#kamer204>section.i1 {
    grid-column: 1 / 3;
    grid-row: 1;
}
.text {
    padding: 1rem;
    border-radius: 1.5rem;
    text-align: left;
    background-color: #F6E9CB;
    box-shadow: 0.31rem 0.31rem 1.25rem 0.00rem #562C43;
}
.text h1 {
    font-family: 'Roboto Slab', serif;
    font-size: 1.5rem;
    font-weight: 400;
    margin-bottom: 0.5rem;
    padding: 0.5rem;
    padding-bottom: 0.25rem;
    color:  #F6E9CB;
    background-color: #1D5D71;
    border-radius: 0.5rem 0.5rem 0 0;
}
.text h2 {
    font-size: 1.0rem;
    font-weight: 700;
    margin-top: 0.5rem;
    margin-bottom: 0rem;
    padding-left: 0rem;
    padding-right: 0rem;
    color: #562C43;
}
.text p {
    font-size: 1.0rem;
    font-weight: 400;
    margin-top: 0rem;
    margin-bottom: 0rem;
    padding-left: 0rem;
    padding-right: 0rem;
    color: #562C43;
}
.text a {
    padding: 0.5rem;
    color: #562C43;
}
.text a:visited {
    color: #DCB669;
}
.text a:hover {
    text-decoration: none;
    color: #D53C12;
}
#rem {
    width: 1rem;
    height: 1rem;
    background-color: yellow;
}
img {
    width: 12rem;
    height: 18rem;
}
#kamer204 img {
    width: 24rem;
    height: 18rem;
}