html {
  scroll-behavior: smooth;
}

body {
    margin: 0;
    padding: 0;
    /*overflow: hidden;*/
    background-color: #f0f0f0;
}

#app {
    margin: 0;
    padding: 0;
    height:100vh;
    display:flex; 
    flex-direction:column;
}

#nav-wrapper {
    /*background: black;*/
    color: gray;
}

#nav-wrapper a {
    color: dodgerblue;
    text-decoration: underline;
}

#footer {
    margin-top: auto;
}

/* Quizz photos */

#quizz #photos .photo {
  position:relative;
}
#quizz #photos .close {
  position:absolute;top:7px;right:7px;border:2px solid white;color:white;background:darkblue;border-radius:100px;padding:0 7px 7px;line-height:1;
}

@media (max-width: 576px) {
  #quizz #photos .photo {
    transform: none!important;
    margin-bottom: 4px;
  }
}
@media (min-width: 576px) {
  #quizz #photos .photo {
    display:inline-block;
    padding:10px;
    background:white;
    box-shadow:0 0 10px gray;
  }
  #quizz #photos .photo img {
    max-width:340px;
    max-height:340px;
  }
}

/* Quizz result table */

#quizz table {
  font-family:"Comic Sans MS", cursive, sans-serif;
  font-size:20px;
  line-height:1;
  font-weight:bold;
  text-align:center
}

#quizz table td {
  border: 1px solid gray;
  height:24px;
  padding:0
}

@media (min-width: 576px) {
  #quizz #question-box {
    max-width:36%;
  }
}