@keyframes loading-dots {
    0% {content: "\00a0\00a0\00a0";}
    25% {content: "\00a0\00a0\00a0";}
    50% {content: ".\00a0\00a0";}
    74% {content: "..\00a0";}
    100% {content: "...";}
}
@keyframes shine {
    to {
      background-position-x: -200%;
    }
}

*{
    font-family: 'Inter', sans-serif;
    box-sizing: border-box;
}

html, body{
    margin: 0;
    padding: 0;
    width: 100%;
    height: 100%;
    overflow: auto;
}

main{
    display:flex;
    width: 100%;
    max-width: 640px;
    height: 100%;
    margin: auto;
    padding: 0 8px;
    flex-direction: column;
}

header{
    display: flex;
    width: 100%;
    height: 64px;
    justify-content: space-between;
}

h1{
    width:auto;
    height: 100%;
    margin: 0;
    padding: 12px 0;
}

h1 img{
    height:100%;
    width: auto;
}

.riddles-step p{
    margin:0;
    padding:0;
    font-size:14px;
    height:32px;
    line-height:24px;
    text-align: right;
}

.riddles-step p:first-child{
    padding-top:8px;
    font-weight:800;
}

.riddles-step p:last-child{
    padding-bottom:8px;
    font-weight:300;
}

.riddles-step-count.loading:after{
    content:"...";
    display:inline-block;
    animation-name: loading-dots;
    animation-duration: 3s;
    animation-iteration-count: infinite;
}

section{
    display:flex;
    width:100%;
    height:100%;
    border-radius:12px;
    overflow: hidden;
    justify-content: center;
    align-items: center;
    flex:1;
}

section img{
    width: 100%;
    height: auto;
    margin: 0;
    padding: 0;
    border-radius: 12px;
}

section img.loading{
    background: #eee;
    background: linear-gradient(110deg, #ececec 8%, #f5f5f5 18%, #ececec 33%);
    background-size: 200% 100%;
    animation: 1.5s shine linear infinite;
}

footer{
    width: 100%;
    height: 64px;
    padding: 8px 0;
    position: relative;
}

footer .input-group{
    display:flex;
    width:100%;
    height:100%;
    padding:0;
    margin:0;
}

footer form{
    height:100%;
    width:100%;
}

footer .input-group input{
    flex:1;
    padding:8px 12px;
    border:none;
    background:none;
    border:solid 1px #ababab;
    border-right:none;
    font-size:14px;
    border-top-left-radius: 24px;
    border-bottom-left-radius: 24px;
}

footer .input-group button{
    padding:8px 24px;
    border:none;
    background:#005ba9;
    color:white;
    font-size:14px;
    border-top-right-radius: 24px;
    border-bottom-right-radius: 24px;
}

footer .input-group button:disabled,
footer .input-group button[disabled]{
    opacity:.75;
}


.modale{
    display:flex;
    position:fixed;
    width:100%;
    height:100%;
    top:0;
    left:0;
    background:rgba(0,0,0, .5);
    justify-content: center;
    align-items:center;
    opacity:0;
    visibility: hidden;
    transition:.6s;
}

.modale.open{
    opacity:1;
    visibility: visible;
}

.modale-container{
    display:flex;
    width:100%;
    max-width:480px;
    height: auto;
    max-height:100%;
    padding:24px;
    background:white;
    overflow:auto;
    text-align:center;
    justify-content: center;
    align-items: center;
    flex-direction: column;
}

.modale-title{
    margin:0;
    padding:0;
    font-size:24;
    text-transform: uppercase;
    font-weight:200;
}

.modale-feedback{
    font-size:14px;
    margin:0;
    padding:12px 0;
}

.modale-helper{
    font-size:14px;
    margin:0;
    padding:0;
    font-weight: 700;
}

.modale-continue{
    display:flex;
    width:100%;
    height:48px;
    margin-top:12px;
    padding:8px 12px;
    background: #005ba9;
    color:white;
    text-decoration: none;
    justify-content: center;
    align-items:center;
    text-align: center;
    font-size:14px;
    border:none;
}

.modal-form{
    width:100%;
}

.how-to-link{
    display:flex;
    position:absolute;
    width:100%;
    top: -24px;
    height: 24px;
    justify-content:center;
    align-items:center;
}

.how-to-link a{
    background:white;
    padding:0 12px;
    text-decoration:none; 
    color:#005ba9;
    line-height:24px;
}