body {
  padding: 30px 25px;
  margin: 0;
  /* min-height: 100vh; */
  display: flex;
  flex-direction: column;
  background-image: url("../img/dragon0.jpg");
  background-attachment: fixed;
  background-position: top center;
  background-size: cover;
  box-sizing: border-box;
  position: relative;
  background-color: #000;
}

.scroll {   
  flex-grow: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  width: 100%;
  background-image: url("../img/paper.jpg");
  background-size: cover;
  background-position: top left;
  background-clip: padding-box; /* !importanté */
  border: solid 5px transparent; /* !importanté */
  border-radius: 1em;
  box-shadow:8px 9px 5px -3px #00000077;
  position: relative;
  padding-bottom: 25px;
}
.scroll::before {
  content: '';
  position: absolute;
  top: -5px; right: -5px; bottom: -5px; left: -5px;
  z-index: -1;
  border-radius: inherit; /* !importanté */
  background-size: 200% 200%;
  background: repeating-linear-gradient(to bottom right, #caae8c, #b00000, #400707, #caae8c, #b00000, #400707, #caae8c);
}
.scroll::after {
    content: '';
    position: absolute;
    top: 0; right: 0; bottom: 0; left: 0;
    border-radius: 10px;
    border: 1px solid #000;
    pointer-events: none;
}
.scroll.animated-border::before {
  animation: scrollScrollBorder 8s linear infinite;
}
@keyframes scrollScrollBorder {
  0% { background-position: 0% 0%; }
  100% { background-position: 100% 100%; }
}

.headingrow {
  width: 100%;
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 25px 40px;
  box-sizing: border-box;
}
.headingrow h1 {
  width: 100%;
  font-size: 40px;
  margin: 0;
  display: flex;
  align-items: center;
  white-space: nowrap;
  /* text-align: center; */
  font-family:'Morpheus';
  color: #dfe1ce;
  user-select: none;
  text-shadow:   0px -1px 0 #3c2a13,  
                 0px  2px 0 #3c2a13,
                -1px  0px 0 #3c2a13,  
                 2px  0px 0 #3c2a13,
                -1px -1px 0 #3c2a13,  
                 2px -1px 0 #3c2a13,
                 2px  2px 0 #3c2a13,
                -1px  2px 0 #3c2a13,
                -1px  3px 0 #3c2a13,
                 0px  3px 0 #3c2a13,
                 2px  3px 0 #3c2a13,
                 0 7px 1px rgba(0,0,0,.1),
                 0 1px 2px rgba(0,0,0,.3),
                 0 4px 2px rgba(0,0,0,.2),
                 0 8px 8px rgba(0,0,0,.2),
                 0 10px 10px rgba(0,0,0,.15);
}
h1::before, h1::after {
  content: '';
  height: 1px;
  flex-grow: 1;
  margin-top: 20px;
}

.headingrow.smaller {
  padding: 0px 40px;
}
.headingrow.smaller h1 {
  font-family: "Grenze";
  transform: scale(75%);
  color: #dfe1ce;
  text-shadow:   0px -1px 0 #3c2a13,  
  0px  1px 0 #3c2a13,
 -1px  0px 0 #3c2a13,  
  1px  0px 0 #3c2a13,
 -1px -1px 0 #3c2a13,  
  1px -1px 0 #3c2a13,
  1px  1px 0 #3c2a13,
 -1px  1px 0 #3c2a13,
 -1px  3px 0 #3c2a13,
  0px  3px 0 #3c2a13,
  1px  3px 0 #3c2a13,
  0 4px 1px rgba(0,0,0,.1),
  0 1px 1px rgba(0,0,0,.3),
  0 3px 1px rgba(0,0,0,.2),
  0 5px 5px rgba(0,0,0,.2),
  0 7px 7px rgba(0,0,0,.15);
}

h1::before {
  margin-right: 20px;
  background-image: linear-gradient(90deg, transparent 5%, #5d411d 40%, #5d411d 100%);
}
h1::after {
  margin-left: 20px;
  background-image: linear-gradient(90deg, #5d411d 0%, #5d411d 60%, transparent 95%);
}


.scroll object {
  max-width: 1200px;
  width: calc(100% - 80px);
  height: auto;
}
.scroll .scoreboard {
  max-width: 1200px;
  width: calc(100% - 80px);
  margin-left: 40px;
  margin-right: 40px;
  color: #121314;
  background-color: #ded4c0;
  user-select: none;
  outline: dotted 2px black;
  border-radius: 5px;
  margin-bottom: 20px;
}
.scoreboard img {
  max-width: 100%;
}

a.thumbnail img {
  outline: 1px dotted #3c2a13;
  margin-left: 25px;
}

a.link {
  display: block;
  position: absolute;
  right: 20px;
  bottom: 15px;
  width: 16px;
  height: 24px;
  background: transparent;
  font-size: 20pt;
  text-decoration: none;
  color: black;
}
a.link.challs {
  bottom: 20px;
  left: 15px;
}
a.link.scores {
  bottom: 20px;
  left: 50px;
}
a.link:hover {
  opacity: 0.5;
}

@media(min-width: 480px) {
  .headingrow h1 { font-size: 40px; }
}
@media(min-width: 600px) {
  .headingrow h1 { font-size: 56px; }
}
@media(min-width: 720px) {
  .headingrow h1 { font-size: 64px; }
}
@media(min-width: 900px) {
  .headingrow h1 { font-size: 72px; }
}

@media screen and (max-width: 600px) {
  body {
      transform: scale(calc(100vw / 600));
      transform-origin: top center;
      width: 600px;
      background-attachment: scroll !important;
      background-size: auto !important;
  }
}