/* body {
background: whitesmoke;
color: black;
margin: 0;
padding: 0;
height: 100%;
width: 100%;
} */

@font-face {
    font-family: 'Archivo Narrow';
    src: url('./fonts/ArchivoNarrow[wght].ttf') format('truetype');
    font-weight: 400 700;
    font-style: normal;
    font-display: swap;
}

#parentWrapper {
    font-family: 'Archivo Narrow', "Yle Next";

    
background-size: cover;
font-weight: 200;
min-height: 100dvh;
box-sizing: initial;
-webkit-font-smoothing: unset;
line-height: 1;
 /* font-size: 22px; */
   font-size: clamp(18px, 2.5vw, 22px);
margin: auto;
position: relative;
background: #000;
width: 100%;
color: white;
    background-image: url("../images/background.png");
    background-repeat: no-repeat;
    background-size: contain;
    background-position-x: center;

}

#parentWrapper .fas {
    margin-left: 0.3em;
    margin-right: 0.3em;
}
#parentWrapper .pieni {
   font-size: 17px;
}

#parentWrapper #tekijat {
margin: 0px 1em;
    display: none;
}

#parentWrapper #tekijat .pieni {
    margin: 4vh auto;
    text-align: center;
    line-height: 1.1;
    font-weight: 400;
    max-width: 400px;
 }

/* #parentWrapper.level0 {
background: #AFDDEC;
background: linear-gradient(0deg,rgba(175, 221, 236, 1) 0%, rgba(211, 236, 243, 1) 100%);
}

#parentWrapper.level1 {
background: #AFDDEC;
background: linear-gradient(0deg,rgba(175, 221, 236, 1) 0%, rgba(211, 236, 243, 1) 100%);
}
#parentWrapper.level2 {
background: #AFDDEC;
background: linear-gradient(0deg,rgba(175, 221, 236, 1) 0%, rgba(211, 236, 243, 1) 100%);
} */
#parentWrapper a {
color: unset;
    text-decoration: underline;
}

#parentWrapper .otsikko {
color: white;
text-transform: uppercase;
font-size: 2.2em;
    width: 50%;
    max-width: 300px;
    margin-top: 1em;

}

#parentWrapper .otsikko img{

    width: 100%;
}
#headerWrapper {
position: relative; 
display: flex;
flex-wrap: nowrap;
justify-content: space-between;
align-items: center;
/*background: rgba(255, 255, 255, 0.5);
border-bottom: rgba(74, 84, 100,0.4);*/
z-index: 20;
padding: 2vh;
flex-direction: column;
padding-bottom: 1vh;
}

#mainWrapper  {
max-width: 600px;
    margin: auto;
}
#mainWrapper .circle .teksti {
    font-size: 0.65em;
    font-weight: 600;
    text-transform: uppercase;
    text-align: center;
    position: relative;
    color: rgb(254, 254, 254);
    background-color: whitesmoke;
    hyphens: manual;
    width: 100%;
    height: 100%;
    display: flex;
    flex-wrap: nowrap;
    align-content: center;
    justify-content: center;
    align-items: center;
    padding-top: 0.3em;
}

#teksti .ingressi {
    /* font-size: 1.1em; */
    margin: 1.5em 0.5em 1em;
      color: rgb(254, 254, 254);
    text-align: center;
    line-height: 1.2;
    font-weight: 500;
}

#teksti .giffi {
    padding-top: 4vh;
    text-align: center;
    }
#teksti .giffi img{
    width: 45%;
}

#button {
    margin: 1em;
}
#bingoGrid .item.active.suora .teksti {
/* background-color: #fde461; */
}

.level1 #bingoGrid .item.active.suora .teksti {
background-color: #bb9109;
}

.level2 #bingoGrid .item.active.suora .teksti {
background-color: #aa6b4c;
}

#mainWrapper .circle .checkbox {
    text-align: left;
    top: 0%;
    /* transform: translate(-50%, -50%); */
    position: absolute;
    font-size: 0.7em;
    color: #000;
    text-shadow: 0 0 8px rgba(0, 0, 0, 0.3);
    cursor: pointer;
    right: 0%;
    pointer-events:none;

}

#mainWrapper .circle .checkbox .fa-square {  
opacity: 0.8;
}
#mainWrapper .circle .checkbox .fa-check-square {  
opacity: 1;
}

#backgroundImage {
background-size: cover;
background-position:center;
height: 100vh;
width: 100vw;   
position: absolute; 
top: 0;
z-index: 0;
}

#bingoGrid.container {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    grid-template-rows: repeat(4, minmax(0, 1fr));
    gap: 4px;
    width: 96%;
    box-sizing: border-box;
    margin: auto;

}

#bingoGrid .item {
  border: 1px solid rgb(19, 20, 21);
  background: none;
  font-family: inherit;
  color: black;
  aspect-ratio: 1 / 1;
    box-sizing: border-box;
width: 100%;
    min-width: 0;
    min-height: 0;
  border-radius: 8px;
  display: grid;
  place-content: center;
  text-align: center;
  cursor: pointer;
  user-select: none;
  letter-spacing: 0.03em;
  /* font-size: 15px;
  line-height: 1.3; */
  font-stretch: condensed;
  box-shadow:
    rgba(255, 255, 255, 0.05) 0px 2px 0px inset,
    rgba(0, 0, 0, 0.2) 0px -4px 0px inset,
    rgba(0, 0, 0, 0.1) 0px 5px 0px -0.5px;
  padding: 5px 6px 7px;
  background-color: rgb(228 237 239);
  /* background-color: rgb(74, 79, 84); */
  /* background-image: linear-gradient(
    0deg,
    rgba(249, 117, 150, 0) 0%,
    rgba(249, 120, 117, 0) 0%,
    rgba(251, 142, 96, 0) 0%
  ); */
  transform: none;
  font-weight: 400;
  overflow-wrap: anywhere;
    font-size: clamp(12px, 2.5vw, 18px);
}

#bingoGrid .item.active.suora {
  border-color: #83a01c;
}

.level0 #bingoGrid .item.active.suora {
  color: black;
border: 1px solid rgba(126 202 39 0%);
background-color: rgb(126 202 39);
background-image: linear-gradient(rgb(187 245 120) 0%, rgb(126 202 39) 100%)

}

.level1 #bingoGrid .item.active.suora {
  border-color: #bb9109;
}

.level2 #bingoGrid .item.active.suora {
  border-color: #aa6b4c;
}

#bingoGrid .item.active {
  /* filter: brightness(1.1); */
      /* border: 1px solid rgb(126 202 39); */
      color: black;
      background: rgb(50 217 200);
      background-image: linear-gradient(rgb(88 237 222) 0%, rgb(50 217 200));

}

#parentWrapper .button {
    box-sizing: border-box;
    margin: 2%;
    background: #83e9dd;
    background-size: contain;
    text-transform: uppercase;
    font-size: 1.2em;
    width: fit-content;
    margin: auto;
    cursor: pointer;
    padding: 0.6em;
    color: black;
    line-height: 1.2;
    font-weight: bold;
    border-radius: 8px;
    padding: 4px 16px;
    border: 2px solid transparent;
    min-height: 3rem;
    min-width: 3rem;
        display: flex;
    flex-wrap: nowrap;
    align-content: center;
    justify-content: center;
    align-items: center;
}


/*https://codepen.io/tchaflich/pen/LKyxqY*/
.sizer {
height: 100%;
background-color: rgba(0, 0, 0, 0.3);
overflow: visible;
width: 20%;
margin: 0 auto;
position: relative;
}
.vino.rotate0 {
transform: rotate(1deg);
}
.vino.rotate1 {
transform: rotate(3deg);
}
.vino.rotate2 {
transform: rotate(4deg);
}
.vino.rotate3 {
transform: rotate(5deg);
}

.vino.rotate-1 {
transform: rotate(-1deg);
}
.vino.rotate-2 {
transform: rotate(-3deg);
}
.vino.rotate-3 {
transform: rotate(-4.5deg);
}

#mutedContainer {
position: absolute;
top: 0;
right: 0;
}
.muteControl {
padding: 2vh 2vh 2vh 1vh;
}
#headerWrapper #logo {
    position: absolute;
    top: 0;
    left: 0;

    }
    #headerWrapper #logo img{
        height: 1.4em;
        width: auto;
        padding: 2.6vh 0 0 1vh;
        opacity: 1;

    }
  


.muteControl::after {
    font-family: "Font Awesome 5 Free";
    font-weight: 900;
    content: "\f028";
    font-size: 1.2em;
    color: white;
    cursor: pointer;
    display: flex;
    justify-content: center;
    flex-direction: column;
    line-height: 1.8;
}
.muteControl.muted::after {
content: "\f6a9";
}

#teksti {
color: white;
text-align: center;
font-size: 1.2em;
line-height: 1.1;
}
#teksti .teksticontainer{
    margin: 1em;
    color: white;
    font-weight: 400;
    }

#teksti .badge img {
width: 40%;
padding: 0 2% 4%;
}

/*
.sizer::before {
position: absolute;
top: 0;
right: 0;
text-align: right;
color: white;
z-index: 2;
margin: 4px;
background-image: url("info-48.png");
background-size: 20px 20px;
display: inline-block;
width: 20px; 
height: 20px;
content:"";
}
*/
.square {
width: 100%;
padding-bottom: 100%;
position: relative;
}

.circle {
/* position: absolute;
top: 0;
bottom: 0;
width: 100%;
height: 100%; */
}

.kuvalaatikko {
position: relative;
border: solid 1px rgba(0, 0, 0, 0.3);
margin-bottom: 2.5em;
}

.kuvateksti {
position: absolute;
font-size: 1.5em;
font-weight: 900;
text-transform: uppercase;
text-align: center;
bottom: 0;
transform: translate(-50%, 50%);
color: black;
background-color: white;
border: solid 1px black;
/* margin: 0 5%; */
left: 50%;
padding: 1% 5%;
width: 75%;
hyphens: manual;
}


.modal__content .teksti {
font-size: 1.1em;
}

.modal__container img{
width: 100%;
height: auto;
margin-left: auto;
margin-right: auto;
display: block;

}

#footerWrapper {
        max-width: 600px;
        margin: auto;
}

/* SHARE-NAPIT */

#parentWrapper  #shareWrapper {
overflow: hidden;

}
#shareWrapper a {
text-decoration: none;
}

#parentWrapper  #shareButtons {
display: flex;
justify-content: center;
flex-direction: row;
margin: 0;
padding-top: 0.3em;
text-shadow: none;

}

#shareButtons a {
text-decoration: none;
}

#shareButtons div {
border: none;
/* border-radius: 999px;
background-color: #315b7d; 


margin: 0.2em 0.5em;*/
outline: none;
font-size: 1.4em;
text-decoration: none;
width: 2.2em;
height: 2.2em;
color: #fff;
position: relative;
cursor: pointer;
display: flex;
justify-content: center;
flex-direction: column;
text-align: -webkit-center;
text-align: center;
padding: 0;
}

#shareText {
font-size: 16px;
text-align: center;
width: 70%;
margin: 0 auto 0.2em;
border-top: rgb(254, 253, 253) solid 1px; 
color: white;
text-transform: uppercase;
padding-top: 1em;


}

#shareButtons div {
color: white;
}

/* #shareButtons #linkShare {
    background: #545454;
    }

#shareButtons #fbShare {
background: #3b5998;
}
#shareButtons #waShare {
background: #4dc247;
}
#shareButtons #twShare {
background: #00aced;
} */

#headerWrapper .plyr--audio .plyr__control:hover{
background: rgba(0, 0, 0, 1)!important;
}


#fairy-dust {
    position: fixed;
    inset: 0;
    width: 100%;
    height: 100%;
    pointer-events: none;
    z-index: 9999;
}
@media only screen and (max-height: 600px) {
#parentWrapper {
    font-size: 0.85em
}
}



@media only screen and (min-width: 800px) {

}

/* FYNDIN PALKIT PIILOON */ 
.node__status, ul.tabs, ul.tabs--primary, .element-invisible , #navbar-administration, #ylefifooter, .yle-header-ad,  .l-region.l-region--header{
display:none!important;
}
.node-unpublished {
background-color: unset;
}

.empty {
position: absolute;
bottom: 5px;
right: 5px;
}