:root{
    --color: #a3d2da;
}

*{
    padding:0;
    margin:0;
    box-sizing: border-box;
    font-family: 'Franklin Gothic Medium', 'Arial Narrow', Arial, sans-serif
}

 main, body{
    display:flex;
    flex-direction: column;
    align-items: center;
    gap:1rem;
    background-color: gainsboro;
 }

header{
    width:100%;
    display:flex;
    justify-content: start;
    gap:1rem;
    padding:.25rem;
    background-color: var(--color);
    flex-wrap: wrap;
    box-shadow: 3px 3px 3px black;
    
    button, a{
        width:4rem;
        font-size:3rem;
        border:none;
        background-color: transparent;
        color:black;
    }

    a{ font-size:3.2rem;margin-top:0.4rem;}

    h1{
        text-align: center;
        font-size: 2.5rem;
     
        padding: 0.5rem;
        border-radius:0.25rem;
    }
}

article>div{
    width:85rem;
    display:flex;
    justify-content: center;
    align-items: end;
    border-radius:0.5rem;
    padding:0.25rem;
    gap:0.2rem;
    z-index:-2;
    background-color: rgb(33, 33, 33);

    .task{
        width:100%;
        p{
           width:100%;
           min-height:250px;
           line-height:2rem;
           background-color: white;
           font-size:1.7rem;
           padding:0.25rem;
           border-radius: 0.25rem;
           img{width: 100%;}
        }       
    }

    .clock{
        width:250px;
        height:250px;
        margin-left:0.2rem;
        button{
            position: relative;
            background-color: rgba(211, 211, 211, 0.393);
            width:32%;
            border:none;
            font-size: 1.7rem;
            padding:0.25rem;
            z-index:2;
            top: -43px;

            border-radius: .5rem;
        }

        button:hover{
            background-color: rgba(211, 211, 211, 0.8);
        }

        svg{
            position: relative;
            z-index:0;
        }
    }
}

.qr-code{
    border: 10px solid white;
    border-radius: 0.25rem;
}

.feedback-panel{
    font-size:1.7rem;
    width:100%;
    background-color: rgb(33, 33, 33);
    color:white;
    display:flex;
    flex-direction: row;
    flex-wrap: wrap;
    gap: 1.5rem;
    padding:0.2rem;
    border-radius: .5rem;

    .feedback-id{
        font-family: monospace;
    }

    .white-button{
        color: white;
    }

   
}



input[type=number] { 
    -moz-appearance: textfield;
    appearance: textfield;
    margin: 0; 
}

input[type=number]::-webkit-inner-spin-button,
input[type=number]::-webkit-outer-spin-button { 
      -webkit-appearance: none; 
      margin: 0; 
}

.button{
  font-size: 2rem;
  background-color: transparent;
  color:black;
  border:none;
}

menu{
    width:85rem;
    display: flex;
    flex-wrap: wrap;
    gap:1rem;
    margin-bottom:0.2rem;

    output{
        font-size:2rem;
    }
}

#info, #feedback{
    width: 30rem;
    margin:6rem auto;
    background-color: var(--color);
    padding: .25rem;
    border:none;
    border-radius: 0.5rem; 
    box-shadow: 3px 3px 3px black;

    button, [type="submit"]{
        border:none;
        background-color: transparent;
        text-decoration: underline;
        font-size:1.1rem;
    }

    [type="submit"]{
        font-size:1.3rem;
    }

    input[type="text"]{
        font-size:1.1rem;
    }

    summary{
        font-size: 1.5rem;
    }

    fieldset{
        border:2px solid black;
        display:flex;
        flex-direction: column;
        gap:0.5rem;
        padding:0.25rem;

    }
  
}

@media screen and (max-width: 85rem) {
    article>div{
        width:99vw;
        flex-wrap: wrap;
        gap: .5rem 2rem;

        .task {
            div{
            height: calc(70vh - 250px);
            }
        }
    }

    menu{
        width:99vw;
    }

    #info, #feedback{
        width:99vw;
    }


}