@keyframes cursor {
  0%    {cursor: url(../img/cursor/banana1.png), auto;}
  12.5% {cursor: url(../img/cursor/banana2.png), auto;}
  25%   {cursor: url(../img/cursor/banana3.png), auto;}
  37.5% {cursor: url(../img/cursor/banana4.png), auto;}
  50%   {cursor: url(../img/cursor/banana5.png), auto;}
  62.5% {cursor: url(../img/cursor/banana6.png), auto;}
  74.5% {cursor: url(../img/cursor/banana7.png), auto;}
  100%  {cursor: url(../img/cursor/banana8.png), auto;}
}

body {
  margin: 0;
  background-image: url("../img/background-prolan3.png");
  
  /* ProLAN 1 - 4: Pokéball */
  /* cursor: url("data:image/x-icon;base64,AAACAAEAICAQAAAAAADoAgAAFgAAACgAAAAgAAAAQAAAAAEABAAAAAAAAAIAAAAAAAAAAAAAEAAAAAAAAAAAAAAApqamAP///wAAANkAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAREREAAAAAAAAAAAAAAAASIiIiEQAAAAAAAAAAAAABIAAiIiIQAAAAAAAAAAAAEgIiAAACIQAAAAAAAAAAABACIgAAAAEAAAAAAAAAAAAAAiIDMzAAAAAAAAAAAAAAAzAAMzMzMwAAAAAAAAAAADMzMzMzMzMwAAAAAAAAAAMzMzMzMzMzMAAAAAAAAAADMzMzMzMzMzAAAAAAAAAQAzMiMzMzMzMwAAAAAAAAEAAyIiMzMzMzAAAAAAAAABAAMiIjMzMzMwAAAAAAAAAQAAMiMzMzMzAAAAAAAAAAAQAAMzMzMzMAAAAAAAAAAAEAAAAzMzMAAAAAAAAAAAAAEAAAAAAAAAAAAAAAAAAAAAEQAAAAAAAAAAAAAAAAAAAAAREQAAAAAAAAAAAAAAD/////////////////////////////////////////////////////////////////A////AD///gAf//wAD//4AAf/+AAH//AAA//wAAP/8AAD//AAA//wAAP/0AAD/9gAB//YAAf/3AAP/84AH//PAD//x8D//8H////AH///w=="), auto;
  
  /*ProLAN 5: Badger */
  /* cursor: url("data:@file/png;base64,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"), auto; */
  /* padding: 0; */
 
  /*ProLAN 6: Peanut butter jelly time */
  cursor: url(../img/cursor/banana1.png), auto;
  animation: cursor 1000ms infinite;
    
  text-align: center;
  color: #fff;
  font-family: Courier, monospace, serif;
}

.navigation {
  float: left;
  width: 280px;
}

.navigation-content {
  padding: 20px;
  text-align: left;
}

.navigation-content a {
  display: block;
  border: 1px solid white;
  margin-top: 10px;
  padding-left: 10px;

  text-decoration: none;
  line-height: 50px;
}

.navigation-content a:hover {
  background-color: rgba(255, 255, 255, 0.5);
  color: black;
}

html,
body,
.navigation,
.content {
  height: 100%;
}

.content {
  float: right;
  border: none;
  padding-top: 20px;
  width: calc(100% - 300px);
}

.navigation-icon {
  position: relative;
  top: 10px;
  display: inline-block;
  margin-right: 5px;
  width: 30px;
}

.logo {
  display: inline-block;
  position: relative;
}

.version {
  position: absolute;
  top: 35px;
  right: -55px;

  line-height: 55px;
  color: white;
  font-size: 80px;
}

h1 {
  margin: 0;
}

.magic-word {
  position: relative;
  top: -214px;
  left: 155px;
  transform: rotate(-7deg);
  z-index: -1;
  width: 130px;
}

.content-block {
  display: inline-block;
  margin: 20px;
  vertical-align: top;
}

.content-block-new {
  display: block;
  margin: auto;
  max-width: 700px;
}

.content-block li {
  text-align: left;
}

dt {
  margin-bottom: 4px;
  font-size: 18px;
  font-weight: bold;
}

dd {
  margin-bottom: 18px;
  color: #cdffcf;
}

a {
  color: SandyBrown;
}

li {
  line-height: 24px;
}

.visitor-counter a {
  display: none;
}

.visitor-counter img {
  height: 40px;
}

.strike-through {
  text-decoration: line-through;
}

.star {
  color: red
}

/* Compo page */

.compos {
  padding: 0;
}

.compos li {
  vertical-align: top;
  display: inline-block;
  text-align: center;
}

.compos li + li {
  margin-left: 20px;
}

.compos a {
  text-decoration: none;
}

.note {
  padding: 10px;
  background-color: white;
  color: black;
}

.prize::after {
  color: red;
  content: "🏆";
}

.browsers a {
  text-decoration: none;
}

.secret-page {
  text-align: center;
}

.secret-list {
  margin: auto;
  margin-bottom: 20px;
  padding: 0;
  width: 600px;
  text-align: left;
  list-style-type: none;
}

.secret-challenge {
  margin-right: 10px;
  padding: 2px;
  background-color: gold;
  
  color: black;
  font-size: 12px;
}

.secret-date {
  margin-left: 5px;
  opacity: 0.5;
  font-size: 12px;
}

.s1 {
  opacity: 0;
}

@keyframes blinker {
  50% {
      opacity: 0;
  }
}

.popup {
  display: flex;
  flex-direction: column;
  position: fixed;
  bottom: 1rem;
  right: 1rem;
  transition: right ease-in-out 2s;

  border-top: 2px solid rgba(255, 255, 255, 0.75);
  border-left: 2px solid rgba(255, 255, 255, 0.75);
  width: 300px;
  padding: 3px;

  background-color: rgb(200, 200, 200);
  box-shadow: 2px 2px 0px 0px rgba(0,0,0,0.75);

  .header {
      display: flex;
      gap: 4px;
      background-color: #568FDE;
      padding: 4px;
      color: rgb(255, 255, 255);
  }

  .icon {
      font-size: 14px;
  }

  .title {
      flex-grow: 1;
      padding-left: 5px;
      text-align: left;
      font-size: 14px;
  }

  .close {
      border: none;
      border-top: 2px solid rgba(255, 255, 255, 0.35);
      border-left: 2px solid rgba(255, 255, 255, 0.35);
      
      background-color: rgb(178, 178, 178);
      text-align: left;
      color: black;
      font-family: 'Courier New', Courier, monospace;
      font-weight: 600;
      cursor: pointer;
      
      &:hover {
          background-color: rgba(200, 200, 200);
      }
  }
  
  .banner-content {
      flex-grow: 1;
      border-top: 3px solid rgba(178, 178, 178);
      background-color: rgb(242, 123, 232);;
      padding: 10px;
      text-align: center;
      color: rgb(255, 255, 255);
  }

  .banner {
      animation: blinker 2s step-start infinite;
      display: inline-block;
      margin: auto 20px;
      width: 200px;
      height: 40px;
      position: relative;
      background: rgb(253, 223, 0);
      text-align: center;
      font-size: 20px;
      text-transform: uppercase;
      font-weight: 600;
      line-height: 40px;
      color: rgb(255, 0, 0);

      &::after {
          content: "";
          position: absolute;
          left: -20px;
          bottom: 0;
          width: 0;
          height: 0;
          transform: rotate(180deg);
          border-left: 20px solid rgb(253, 223, 0);
          border-top: 20px solid transparent;
          border-bottom: 20px solid transparent;
      }

      &::before {
          content: "";
          position: absolute;
          right: -20px;
          bottom: 0;
          width: 0;
          height: 0;
          border-left: 20px solid rgb(253, 223, 0);
          border-top: 20px solid transparent;
          border-bottom: 20px solid transparent;
      }
  }

  .link {
      display: inline-block;
      color: rgb(0, 0, 238);
      text-decoration: underline;

      margin-bottom: 10px;
  }

  &.byebye {
    right: -330px;
  }
}

.new {
  display: inline-block;
  margin: 30px 0 0 0;
  padding: 5px 5px;
  background-color: #1a4c8d;
  
  text-align: left;
  color: white;
  font-weight: 600;

  + ul {
    margin: 5px 0 0 0;
  }
}