/*! normalize.css v8.0.1 | MIT License | github.com/necolas/normalize.css */button,hr,input{overflow:visible}progress,sub,sup{vertical-align:baseline}[type=checkbox],[type=radio],legend{box-sizing:border-box;padding:0}html{-webkit-text-size-adjust:100%;line-height:1.15}body{margin:0}details,main{display:block}h1{margin:.67em 0;font-size:2em}hr{box-sizing:content-box;height:0}code,kbd,pre,samp{font-family:monospace,monospace;font-size:1em}a{background-color:transparent}abbr[title]{border-bottom:none;text-decoration:underline;text-decoration:underline dotted}b,strong{font-weight:bolder}small{font-size:80%}sub,sup{position:relative;font-size:75%;line-height:0}sub{bottom:-.25em}sup{top:-.5em}img{border-style:none}button,input,optgroup,select,textarea{margin:0;font-family:inherit;font-size:100%;line-height:1.15}button,select{text-transform:none}[type=button],[type=reset],[type=submit],button{-webkit-appearance:button}[type=button]::-moz-focus-inner,[type=reset]::-moz-focus-inner,[type=submit]::-moz-focus-inner,button::-moz-focus-inner{padding:0;border-style:none}[type=button]:-moz-focusring,[type=reset]:-moz-focusring,[type=submit]:-moz-focusring,button:-moz-focusring{outline:ButtonText dotted 1px}fieldset{padding:.35em .75em .625em}legend{display:table;max-width:100%;color:inherit;white-space:normal}textarea{overflow:auto}[type=number]::-webkit-inner-spin-button,[type=number]::-webkit-outer-spin-button{height:auto}[type=search]{-webkit-appearance:textfield;outline-offset:-2px}[type=search]::-webkit-search-decoration{-webkit-appearance:none}::-webkit-file-upload-button{-webkit-appearance:button;font:inherit}summary{display:list-item}template{display:none}

html, body {
  font-family: Arial, sans-serif;
  margin: 0;
  padding: 0;
  height: 100%;
  background-color: black;
  color: #e6e6e6;
  box-sizing: border-box;
}

h1, h2 {
  text-transform: uppercase;
  font-style: normal;
  font-weight: normal;
}

h2, h3 {
  font-size: 1em;
}

h1 {
  font-size: 1.5vw;
  margin: 0.83em 0;
}

h3 {
  font-style: normal;
  font-weight: normal;
}

.green {
  color: springgreen;
}


.container {
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  width: 100%;
  height: 100%;
}

header, footer {
  padding: 0 20px;
  display: flex;
  flex-direction: row;
  justify-content: space-between;
}

footer {
    padding: 1.5em 20px;
    font-size: 0.7em;
    color: springgreen;
}

#nowPlaying:before {
	content: "now playing";
    font-size: 7px;
    font-weight: bold;
    letter-spacing: 3px;
    display: inline-block;
    padding: 0em 10px;
    vertical-align: middle;
    color: springgreen;
}

section {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  grid-template-rows: repeat(3, 1fr);
  grid-gap: 1px;
  width: 100%;
  height: 100%;
  /* background: midnightblue; */
}

/* HIDE RADIO */
[type=radio] {
  position: absolute;
  opacity: 0;
  width: 0;
  height: 0;
  cursor: pointer;

}

.item {
  position: relative;
  display: grid;
  /* flex-direction: column; */
  overflow: hidden;

  width: 100%;
  height: 100%;
  background-size: cover;
}

.item-infos {
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  color: springgreen;
  padding: 15px;
  margin: 4px;
  height: fit-content;
  z-index: 1;
  margin-top: auto;
}

.item img,
.item .item-infos {
  grid-column: 1/2;
  grid-row: 1/2;
}

/* .item-infos {
  bottom: 0;
  position: relative;
} */

.item-infos .title {
  font-weight: bold;
  text-transform: uppercase;
  margin-bottom: 5px;
}

.item-infos .description {
  color: white;
  font-size: 13px;
}

/* INFO STYLES */
[type=radio] ~ .item-infos {
  background: transparent;
}

[type=radio]:checked ~ .item-infos {
  background: black;
}



/* IMAGE STYLES */
[type=radio] + img {
  object-fit: cover;
  width: 100%;
  height: 100%;
  position: absolute;
  filter: saturate(0);
  opacity: 0.55;
  box-sizing: border-box;
  transition: all 100ms;
}

/* CHECKED STYLES */
[type=radio]:checked + img {
  border: 4px solid springgreen;
  filter: saturate(1);
  opacity: 1;
}


#messagelog {
  display: none;
}