@charset "UTF-8";
/* #DaftPunKonsole
 * Malik Dellidj - @Dathink
 *
 * There are existing apps or flash to do this, but no web version so here it is.
 *
 * How to play :
 * You may notice that in the song all theses words are used
 * but sometimes in a different layout
 * e.g.
 * – Work it, make it, do it, makes us
 * – Harder, better, faster, stronger
 * –––
 * – Work it, harder, make it, better
 * – Do it, faster, makes us, stronger
 *
 * Check the lyrics ! and the different tones to recreate over half of the song !
 *
 * Many thanks to my work mates who helped me when I was stuck
 *
 * Nb : Hey IE fellaz, get a browser : www.google.com/chrome, it's free !
 */
 html, body, .container {
   height: 1000px;
 }

 header {
   width: 100%;
   min-height: 100px;
   text-align: center;
 }

 nav {
   background-color: #808080;
   width: 100%;
   min-height: 45px;
 }





 body {

   font-family: 'DM Sans', sans-serif;
 }

 .serious {

   font-family: 'DM Sans', sans-serif;
   color: #b1cdcd;
   background-color: black;

 }


 #left {
     background-color:#b1cdcd;
   border: 3px solid black;
     position: fixed;
     top: 0px;
     bottom: 0;
     left: 0;
     width: 50%;
     overflow-y: scroll;
   }

   #right {
     background-color:#b1cdcd;
   border: 3px solid black;
     position: fixed;
     top: 0;
     bottom: 0;
     right: 0;
     overflow-y: scroll;
     width: 50%;
   }


 p{
   font-size: 20px;
   line-height:30px;
   margin:30px;

 }




 @media screen and (max-width: 500px) {

   #left {
    display:none;
   }

   #right {
    display:none;
   }
 }


  #moving {
   font-size: 40px;
   font-family: 'DM Sans', sans-serif;
    font-weight: 500;
   line-height:1.78em;
   padding: 15px;
   background-color:#b1cdcd;
   border: 3px solid black;
   margin:40px;
   text-align:center;
   position: fixed;
   z-index: 999;
   animation-name: example;
   animation-duration: 8s;
   animation-iteration-count: infinite;
 }

 /* Standard syntax */
 @keyframes example {
   0%   {color:black; left:300px; top:0px;}
   50%  {color:black; left:300px; top:500px;}
   100% {color:black; left:300px; top:0px;}
 }


 .cheese:hover{
   background:black;
   padding:5px;
   }

 div{
 display: inline-block;
 }

 .modal ul {
   display: -webkit-box;
   display: flex;
 }
 .modal ul li {
   margin: 1.25rem;
 }


 * {
   box-sizing: none;
 }

 body {
   font-family: 'Verdana', Geneva, sans-serif;
   background-color: none;
   border: 0px;
   margin: 8px;
 }

 h1 { font-size: 28px; }
 h2 { font-size: 24px; }
 h3 { font-size: 20px; }
 h4 { font-size: 18px; }
 p, span { font-size: 16px; }

 logo { grid-area: logo;
   font-size: 3em;
   height: 1.1em;
 	line-height: .9em;
   font-weight: 300;
   text-align: left;
   background-color: none;
   border-top-style: hidden;
   border-left-style: hidden;

 }

 navm { grid-area: navm;

   border-top-style:hidden;
   color: #ffffff;
   border: 0.00125rem solid #ffffff;
   padding: 0.625rem 1.25rem;
   border-radius: 3.125rem;
   -webkit-transition: margin 0.3s ease;
   transition: margin 0.3s ease;
 }

 srch { grid-area: srch;
   display: flex;
   align-items: center;
   background-color: none;
   border-radius: 0 18px 0 0;
   border-right-style: hidden;
   border-top-style: hidden;
 }

 misp { grid-area: misp;
   background-color: none;
   color: none;
   font-color: white;
   border-radius: 0 0px 0px 0;
   border: 0px sol #DDD;

   border-color: none;
   border-left-style: hidden;
   border-right-style: hidden;
   border-top-style: hidden;
   border-bottom-style: hidden;
   opacity: 0.001;
 }

 side { grid-area: side;
   background-color: none;
   border-color: none;
   border-right-style: hidden;
 }

 fot1 { grid-area: fot1;
   background-color: none;
   border-color: none;
   border-left-style: hidden;
   border-right-style: hidden;
   border-top-style:hidden;
   color: #ffffff;
   border: 0.00125rem solid #ffffff;
   padding: 0.625rem 1.25rem;
   border-radius: 3.125rem;
   -webkit-transition: margin 0.3s ease;
   transition: margin 0.3s ease;
 }

 fot2 { grid-area: fot2;
   background-color: none;
   border-color: none;
   border-right-style:hidden;
   border-top-style:hidden;
   color: #ffffff;
   border: 0.00125rem solid #ffffff;
   padding: 0.625rem 1.25rem;
   border-radius: 3.125rem;
   -webkit-transition: margin 0.3s ease;
   transition: margin 0.3s ease;
 }

 fot3 { grid-area: fot3;
   background-color: none;
   border-color: none;
   border-right-style: hidden;
   border-top-style:hidden;
   color: #ffffff;
   border: 0.00125rem solid #ffffff;
   padding: 0.625rem 1.25rem;
   border-radius: 3.125rem;
   -webkit-transition: margin 0.3s ease;
   transition: margin 0.3s ease;
 }

 fot4 { grid-area: fot4;
   background-color: none;
   border-right-style: hidden;
   border-top-style:hidden;
   color: #ffffff;
   border: 0.00125rem solid #ffffff;
   padding: 0.625rem 1.25rem;
   border-radius: 3.125rem;
   -webkit-transition: margin 0.3s ease;
   transition: margin 0.3s ease;
 }

 menu { grid-area: menu;
   background-color: none;
   color: white;
 }

 disp { grid-area: disp;
   text-align: center;
   background-color: none;
   color: white;
   font-color: white;
 }

 html, body, .grid-container {
   height: 100%;
   margin: 5px 5px 5px 5px;


 }

 .grid-container * {
   /* border: 1px solid red;
   border: 1px solid none; */
   position: relative;
 }

 .grid-container *:after {
   /* content:attr(class); */
   position: absolute;
   top: 0;
   left: 0;
 }

 /* the guts of the grid */
 .grid-container {
   display: grid;
   grid-template-columns: 1fr 1fr 1fr 1fr;
   grid-template-rows: 50px 1fr 25% 40px 30px;
   grid-template-areas:
     "logo navm navm srch"
     "misp misp misp side"
     "fot1 fot2 fot3 fot4"
     "menu menu menu menu"
     "disp disp disp disp";
     background-color: none;
     width: 100vw;
     height: 100vh;

   /* height: calc(100vh - 10px); */
 }
 .logo { grid-area: logo; }
 .navm { grid-area: navm; }
 .srch { grid-area: srch; }
 .misp { grid-area: misp; }
 .side { grid-area: side; }
 .fot1 { grid-area: fot1; }
 .fot2 { grid-area: fot2; }
 .fot3 { grid-area: fot3; }
 .fot4 { grid-area: fot4; }
 .menu { grid-area: menu; }
 .disp { grid-area: disp; }

 /* Flex Toolbox for links and other bits within the html project */

 /* not used but left in */
 .block {
    min-height: 250px;
 }

 /* This section deals with the upper top menu bar, that's been styled with vanilla CSS. */

 .topnav ul {
   list-style-type: none;
   border-style: none;
   padding: 0px;
   margin-left: 0px;
   margin-top: 0px;
 }

 .topnav li {
   display: inline-block;
   border-style: none;

   top: 14px;
   height: 35px;
 }

 .topnav li a:link,
 .topnav li a:visited {
   text-decoration: none;
   background-color: none;
 	font-color: none;
 	color: none;
   font-weight: bold;
   padding: 4px 20px;
   border-radius: 12px;
   border: 1px solid #DDD;
 }

 .topnav li a:hover {
 	background-color: white;
 }

 .topnav li.current-menu-item a:link,
 .topnav li.current-menu-item a:visited,
 .topnav li.current-page-ancestor a:link,
 .topnav li.current-page-ancestor a:visited {
   background-color: #006ec3;
 	font-weight: normal;
   font-color: white;
 	color: black;
 }


 /* This section deals with the lower bottom menu bar, that's been styled with vanilla CSS. */

 .botnav ul {
   list-style-type: none;
   border-style: none;
   margin-left: 20px;
   margin-top: 2px;
   padding: 0px;
 }

 .botnav li {
   display: inline-block;
   border-style: none;
   top: 6px;
   height: 6px;
   margin: 2px 14px;
 }

 .botnav li a:link,
 .botnav li a:visited {
   text-decoration: none;
 	padding: 3px 20px;
   color: white;
   border-radius: 0px;
   border: 0px solid #DDD;
 }

 .botnav li a:hover {
 	background-color: white;
 }

 .botnav li.current-menu-item a:link,
 .botnav li.current-menu-item a:visited,
 .botnav li.current-page-ancestor a:link,
 .botnav li.current-page-ancestor a:visited {
 	font-weight: bold;
 	background-color: #006ec3;
  opacity: 0.001;
 	color: #FFF;
 }


 /* you can also use
  <ul class="navm flex-row-nowrap">
  <li class="navm_item">
 And then sytle every link thereafter with Flex - your choice here, but I stayed with straight forward CCS styling; because I'm still learning and Flex seems to be hard work. */
 ul.navm {
   justify-content: flex-end;
   margin: 0;
   padding: 0;
 }

 li.navm_item {
   list-style-type: none;
   flex-flow: row nowrap;
   padding: 15px;
 	display: block;
 }
 li.navm_item a, a:visited {
   text-decoration: none;
   color: none;
   display: block;
   padding: 10px 17px;
 	text-decoration: none;
 	border: 1px solid #DDD;
 	border-bottom: none;
 }
 li.navm_item a:hover {
   color: dimnone;
   display: block;
   padding: 10px 17px;
 	text-decoration: none;
 	border: 1px solid #DDD;
 	border-bottom: none;
 }

 /* This section deals with the lower menu bar, and I've stuck with straight forward CSS to style it. */
 ul.menu {
   margin: 5px;
   padding: 0;
 }

 li.menu_item {
   list-style-type: none;
   flex-flow: row nowrap;
   padding: 10px;
 }

 li.menu_item a, a:visited {
   text-decoration: none;
   color: white;
 }

 li.menu_item a:hover {
   color: white;
 }

 /* Flex tools for displaying content */
 .flex-column {
     display: flex;
     flex-direction: column;
     justify-content: center;
     align-items: center;
 }
 .flex-row-wrap {
     display: flex;
     flex-flow: row wrap;
     justify-content: space-evenly;
     align-items: center;
 }
 .flex-row-nowrap {
     display: flex;
     flex-flow: row nowrap;
     justify-content: space-evenly;
     align-items: center;
 }












 .grid-container *:after {
   /* content:attr(class); */
   position: absolute;
   top: 0;
   left: 0;
 }

 .grid-container {
   display: grid;
   grid-template-columns: 1fr 1fr 1fr 1fr;
   grid-template-rows: 50px 1fr 25% 40px 30px;
   grid-template-areas:
     "logo navm navm srch"
     "misp misp misp side"
     "fot1 fot2 fot3 fot4"
     "menu menu menu menu"
     "disp disp disp disp";
     background-color: none;
     width: 100vw;
     height: 100vh;
   /* height: calc(100vh - 10px); */
 }
 .flex-column {
     display: flex;
     flex-direction: column;
     justify-content: center;
     align-items: center;
 }
 .botnav ul {
   list-style-type: none;
   border-style: none;
   margin-left: 20px;
   margin-top: 2px;
   padding: 0px;
 }

 .botnav li {
   display: inline-block;
   border-style: none;
   top: 6px;
   height: 6px;
   margin: 2px 14px;
 }

 .botnav li a:link,
 .botnav li a:visited {
   text-decoration: none;
 	padding: 3px 20px;
   color: white;
   border-radius: 12px;
   border: 1px solid #ffffff;
 }


 .botnav li a:hover {
 	background-color: white;
  color: none;
 }

 .botnav li.current-menu-item a:link,
 .botnav li.current-menu-item a:visited,
 .botnav li.current-page-ancestor a:link,
 .botnav li.current-page-ancestor a:visited {
 	font-weight: bold;
 	background-color: none;
 	color: none;
 }


 a:hover img,
 a:focus img,
 a.active img {
   filter: none;
 }

 p.product a img {
     display: none;
     position: absolute;
     left: -80px;
     top: -22px;

 }
 p.product a {
     display: inline-block;
     position: relative;
 }
 p.product {
     margin-left: 150px;
 }
 #myVideo {
   position: fixed;
   right: 0;
   bottom: 0;
   min-width: 100%;
   min-height: 100%;
 }

html, body {
  height: 100vh;
  width: 100vw;
}

body {
  font: normal 1em/1.45em "Helvetica Neue", Helvetica, Arial, sans-serif;
  background: url(https://s.cdpn.io/190177/Daft_Punk_bg.svg) no-repeat center center #ffffff;
  display: -webkit-box;
  display: flex;
  -webkit-box-align: center;
          align-items: center;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
          flex-direction: column;
  justify-content: space-around;
  -webkit-font-smoothing: antialiased;
  color: #ffffff;
  -webkit-font-smoothing: subpixel-antialiased;
  text-rendering: optimizeLegibility;
  background-size: 95%;
}

a {
  text-decoration: none;
  color: #404048;
}


.extra {
  color: #15d880;
}

.lyrics {
  -webkit-box-flex: 1;
          flex: 1;
  -webkit-box-align: center;
          align-items: center;
  -webkit-box-pack: center;
          justify-content: center;
  display: -webkit-box;
  display: flex;
  font-size: 3.625rem;
  position: relative;
}
.lyrics span {
  -webkit-animation-duration: 1s;
          animation-duration: 1s;
  white-space: nowrap;
  font-weight: 500;
}
.Normal .lyrics span {
  color: #15d880;
  text-shadow: 0 0 0.625rem rgba(21, 216, 128, 0.2);
}
.High .lyrics span {
  color: #d43f57;
  text-shadow: 0 0 0.625rem rgba(212, 63, 87, 0.2);
}
.Low .lyrics span {
  color: #dfba69;
  text-shadow: 0 0 0.625rem rgba(223, 186, 105, 0.2);
}

.wk {
  display: -webkit-box;
  display: flex;
  -webkit-box-align: center;
          align-items: center;
  -webkit-box-pack: center;
          justify-content: center;
  -webkit-box-flex: 2;
          flex: 2;
}

.k {
  width: 39.375rem;
  padding-right: 2.5%;
  -webkit-user-select: none;
     -moz-user-select: none;
      -ms-user-select: none;
          user-select: none;
  -webkit-tap-highlight-color: transparent;
  -webkit-tap-highlight-color: transparent;
}
.k .r {
  position: relative;
  display: -webkit-box;
  display: flex;
  -webkit-box-pack: justify;
          justify-content: space-between;
  margin: 0.625rem;
}
.k .r:nth-child(1) i:nth-last-child(-n+4), .k .r:nth-child(1) i:nth-child(-n+4), .k .r:nth-child(2) i:nth-last-child(-n+4), .k .r:nth-child(2) i:nth-child(-n+4) {
  color: #b3b3bb;
}
.k .r:nth-child(1) i:nth-last-child(-n+4):hover, .k .r:nth-child(1) i:nth-child(-n+4):hover, .k .r:nth-child(2) i:nth-last-child(-n+4):hover, .k .r:nth-child(2) i:nth-child(-n+4):hover {
  color: #15d880;
  border-color: #15d880;
}
.k .r:nth-child(1) i:nth-last-child(-n+4):active, .k .r:nth-child(1) i:nth-last-child(-n+4).is-active, .k .r:nth-child(1) i:nth-child(-n+4):active, .k .r:nth-child(1) i:nth-child(-n+4).is-active, .k .r:nth-child(2) i:nth-last-child(-n+4):active, .k .r:nth-child(2) i:nth-last-child(-n+4).is-active, .k .r:nth-child(2) i:nth-child(-n+4):active, .k .r:nth-child(2) i:nth-child(-n+4).is-active {
  color: #15d880;
  border-color: #15d880;
  box-shadow: 0 0 0.75rem -0.125rem #15d880;
}
.Normal .k .r:nth-child(1) i:nth-last-child(-n+4), .Normal .k .r:nth-child(1) i:nth-child(-n+4), .Normal .k .r:nth-child(2) i:nth-last-child(-n+4), .Normal .k .r:nth-child(2) i:nth-child(-n+4) {
  color: #b3b3bb;
}
.Normal .k .r:nth-child(1) i:nth-last-child(-n+4):hover, .Normal .k .r:nth-child(1) i:nth-child(-n+4):hover, .Normal .k .r:nth-child(2) i:nth-last-child(-n+4):hover, .Normal .k .r:nth-child(2) i:nth-child(-n+4):hover {
  color: #15d880;
  border-color: #15d880;
}
.Normal .k .r:nth-child(1) i:nth-last-child(-n+4):active, .Normal .k .r:nth-child(1) i:nth-last-child(-n+4).is-active, .Normal .k .r:nth-child(1) i:nth-child(-n+4):active, .Normal .k .r:nth-child(1) i:nth-child(-n+4).is-active, .Normal .k .r:nth-child(2) i:nth-last-child(-n+4):active, .Normal .k .r:nth-child(2) i:nth-last-child(-n+4).is-active, .Normal .k .r:nth-child(2) i:nth-child(-n+4):active, .Normal .k .r:nth-child(2) i:nth-child(-n+4).is-active {
  color: #15d880;
  border-color: #15d880;
  box-shadow: 0 0 0.75rem -0.125rem #15d880;
}
.High .k .r:nth-child(1) i:nth-last-child(-n+4), .High .k .r:nth-child(1) i:nth-child(-n+4), .High .k .r:nth-child(2) i:nth-last-child(-n+4), .High .k .r:nth-child(2) i:nth-child(-n+4) {
  color: #b3b3bb;
}
.High .k .r:nth-child(1) i:nth-last-child(-n+4):hover, .High .k .r:nth-child(1) i:nth-child(-n+4):hover, .High .k .r:nth-child(2) i:nth-last-child(-n+4):hover, .High .k .r:nth-child(2) i:nth-child(-n+4):hover {
  color: #d43f57;
  border-color: #d43f57;
}
.High .k .r:nth-child(1) i:nth-last-child(-n+4):active, .High .k .r:nth-child(1) i:nth-last-child(-n+4).is-active, .High .k .r:nth-child(1) i:nth-child(-n+4):active, .High .k .r:nth-child(1) i:nth-child(-n+4).is-active, .High .k .r:nth-child(2) i:nth-last-child(-n+4):active, .High .k .r:nth-child(2) i:nth-last-child(-n+4).is-active, .High .k .r:nth-child(2) i:nth-child(-n+4):active, .High .k .r:nth-child(2) i:nth-child(-n+4).is-active {
  color: #d43f57;
  border-color: #d43f57;
  box-shadow: 0 0 0.75rem -0.125rem #d43f57;
}
.Low .k .r:nth-child(1) i:nth-child(-n+4), .Low .k .r:nth-child(2) i:nth-child(-n+4) {
  color: #404048;
}
.Low .k .r:nth-child(1) i:nth-child(-n+4):hover, .Low .k .r:nth-child(2) i:nth-child(-n+4):hover {
  color: #70707e;
  border-color: #70707e;
}
.Low .k .r:nth-child(1) i:nth-child(-n+4):active, .Low .k .r:nth-child(1) i:nth-child(-n+4).is-active, .Low .k .r:nth-child(2) i:nth-child(-n+4):active, .Low .k .r:nth-child(2) i:nth-child(-n+4).is-active {
  color: #70707e;
  border-color: #70707e;
  box-shadow: 0 0 0.75rem -0.125rem #70707e;
}
.Low .k .r:nth-child(1) i:nth-last-child(-n+4), .Low .k .r:nth-child(2) i:nth-last-child(-n+4) {
  color: #b3b3bb;
}
.Low .k .r:nth-child(1) i:nth-last-child(-n+4):hover, .Low .k .r:nth-child(2) i:nth-last-child(-n+4):hover {
  color: #dfba69;
  border-color: #dfba69;
}
.Low .k .r:nth-child(1) i:nth-last-child(-n+4):active, .Low .k .r:nth-child(1) i:nth-last-child(-n+4).is-active, .Low .k .r:nth-child(2) i:nth-last-child(-n+4):active, .Low .k .r:nth-child(2) i:nth-last-child(-n+4).is-active {
  color: #dfba69;
  border-color: #dfba69;
  box-shadow: 0 0 0.75rem -0.125rem #dfba69;
}
.k .r:nth-child(2) {
  -webkit-transform: translateX(2.5%);
  transform: translateX(2.5%);
}
.k .r:nth-child(3) {
  margin-left: 8.5%;
  margin-right: 14%;
}
.Normal .k .r:nth-child(3) i:nth-child(1) {
  color: #15d880;
  border-color: #15d880;
  box-shadow: 0 0 0.75rem -0.125rem #15d880;
}
.Normal .k .r:nth-child(3) i:nth-child(1) b {
  background: #15d880;
}
.High .k .r:nth-child(3) i:nth-child(2) {
  color: #d43f57;
  border-color: #d43f57;
  box-shadow: 0 0 0.75rem -0.125rem #d43f57;
}
.High .k .r:nth-child(3) i:nth-child(2) b {
  background: #d43f57;
}
.Low .k .r:nth-child(3) i:nth-last-child(3) {
  color: #dfba69;
  border-color: #dfba69;
  box-shadow: 0 0 0.75rem -0.125rem #dfba69;
}
.Low .k .r:nth-child(3) i:nth-last-child(3) b {
  background: #dfba69;
}
.k .r:nth-child(3) i {
  -webkit-box-orient: vertical;
  -webkit-box-direction: reverse;
          flex-direction: column-reverse;
}
.k .r:nth-child(3) i b {
  background: #404048;
  color: #101012;
  border-radius: 0.5rem;
  padding: 0 0.3125rem;
  line-height: 0;
  margin-top: 0.3125rem;
}
.k i, .k .space {
  display: -webkit-box;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
          flex-direction: column;
  -webkit-box-pack: center;
          justify-content: center;
  -webkit-box-align: center;
          align-items: center;
  color: #404048;
  border-radius: 0.375rem;
  height: 3.0625rem;
  font-size: 1rem;
  line-height: 0;
  border: 0.125rem solid #404048;
  position: relative;
  -webkit-transition: all 0.08s ease-in-out;
  transition: all 0.08s ease-in-out;
}
.k i:hover, .k .space:hover {
  border-color: #70707e;
  color: #70707e;
}
.k i:active, .k i.is-active, .k .space:active, .k .space.is-active {
  border-color: #70707e;
  color: #70707e;
  box-shadow: 0 0 0.5625rem -0.125rem #70707e;
  -webkit-transform: translateY(0.0625rem);
  transform: translateY(0.0625rem);
}
.k i {
  font-style: normal;
  width: 3.0625rem;
}
.k i span, .k i b {
  -webkit-box-flex: 2;
          flex: 2;
  display: -webkit-box;
  display: flex;
  -webkit-box-align: center;
          align-items: center;
}
.k i span {
  text-transform: uppercase;
  font-family: "Varela Round";
}
.k i b {
  font-size: 0.5625rem;
  -webkit-box-flex: 1;
          flex: 1;
}
.k .space {
  -webkit-box-flex: 1;
          flex: 1;
  max-width: 48.5%;
  margin-left: 27.5%;
  -webkit-box-align: stretch;
          align-items: stretch;
  -webkit-box-pack: center;
          justify-content: center;
  position: static;
}

.credits {
  font-size: 0.8125rem;
  display: -webkit-box;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
          flex-direction: column;
  -webkit-box-flex: 1;
          flex: 1;
  -webkit-box-pack: center;
          justify-content: center;
}
.credits p {
  text-align: center;
}
.credits .links {
  margin: 0.3125rem 0;
}
.credits .links li {
  display: inline-block;
  padding: 0 0.625rem;
  border-right: 0.0625rem solid rgba(64, 64, 72, 0.35);
}
.credits .links li:last-child {
  border: 0;
}

.fa {
  color: #15d880;
}
.fa + a {
  color: #15d880;
}
.fa + a:hover {
  color: #15d880;
}

.fa-heart {
  color: #d43f57;
}

.jp-audio {
  color: #ffffff;
}

.modal {
  display: -webkit-box;
  display: flex;
  background: none;
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  -webkit-box-align: center;
          align-items: center;
  -webkit-box-pack: center;
          justify-content: center;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
          flex-direction: column;
}
.modal .daft-punk-logo {
  margin: 1.25rem 0 1.875rem;
}
.modal .btn {
  color: #ffffff;
  border: 0.00125rem solid #ffffff;
  padding: 0.625rem 1.25rem;
  border-radius: 3.125rem;
  -webkit-transition: margin 0.3s ease;
  transition: margin 0.3s ease;
}
.modal .btn:hover {
  color: #ffffff;
  border-color: #ffffff;
  box-shadow: 0 0 0.75rem -0.00125rem #ffffff;
  text-shadow: 0 0 0.25rem rgba(12, 123, 73, 0.8);
}
.modal h1 {
  font-size: 2.5rem;
  font-weight: 100;
  margin: 0 0 1.875rem 0;
}
.modal h2 {
  font-size: 1.25rem;
  font-weight: 200;
  margin: 0 0 1.875rem 0;
}
.modal h2 a {
  color: #15d880;
}
.modal h2 a:hover {
  text-shadow: 0 0 0.1875rem rgba(21, 216, 128, 0.8);
}
.modal ul {
  display: -webkit-box;
  display: flex;
}
.modal ul li {
  margin: 1.25rem;
}
.modal .fa {
  color: #15d880;
}
.modal .fa + a {
  color: #ffffff;
}
.modal .fa + a:hover {
  color: #15d880;
}
.modal .credit {
  margin: 1.25rem 0 0 0;
}

.jp-audio {
  position: relative;
}
.jp-audio .jp-controls {
  position: absolute;
}
.jp-audio .jp-controls button {
  background: transparent;
  border: 0;
  color: #70707e;
  text-transform: capitalize;
  font-size: 0.5625rem;
}
.jp-audio .jp-controls .jp-play:before {
  content: "";
  height: 0.3125rem;
  width: 0.3125rem;
  border-radius: 3.125rem;
  background: #70707e;
  display: inline-block;
  margin: 0.0625rem 0.1875rem;
}
.jp-audio.jp-state-playing .jp-controls .jp-play {
  color: #15d880;
  text-shadow: 0 0 0.125rem rgba(21, 216, 128, 0.8);
}
.jp-audio.jp-state-playing .jp-controls .jp-play:before {
  background: #15d880;
  box-shadow: 0 0 0.1875rem rgba(21, 216, 128, 0.8);
}
.High .jp-audio.jp-state-playing .jp-controls .jp-play {
  color: #d43f57;
  text-shadow: 0 0 0.125rem rgba(212, 63, 87, 0.8);
}
.High .jp-audio.jp-state-playing .jp-controls .jp-play:before {
  background: #d43f57;
  box-shadow: 0 0 0.1875rem rgba(212, 63, 87, 0.8);
}
.Low .jp-audio.jp-state-playing .jp-controls .jp-play {
  color: #dfba69;
  text-shadow: 0 0 0.125rem rgba(223, 186, 105, 0.8);
}
.Low .jp-audio.jp-state-playing .jp-controls .jp-play:before {
  background: #dfba69;
  box-shadow: 0 0 0.1875rem rgba(223, 186, 105, 0.8);
}
.jp-audio .jp-progress {
  height: 3.0625rem;
}
.jp-audio .jp-progress .jp-seek-bar {
  width: 100%;
  height: 100%;
}
.jp-audio .jp-progress .jp-seek-bar .jp-play-bar {
  background: rgba(64, 64, 72, 0.2);
  height: 100%;
}

.msg {
  background: #DF2828;
  color: white;
  padding: 0.625rem 0.9375rem;
  border-radius: 0.25rem;
  margin-bottom: 1.25rem;
}

del {
  text-decoration: line-through;
}