@font-face {
  font-family: 'Anonymous Pro', monospace;
}
/* colors*/
:root {
  --blue-color:rgba(0,0,170,1);
  --white-color:#FFFFFF;
  --grey-color: rgba(196,196,196,1);
  --darkGrey-color :#818181;
}
[data-theme="dark"]{
  --blue-color:#000088;
  --white-color:#FFFFFF;
  --grey-color: #393E40;
  --darkGrey-color :#5F676B;
}
* {
  font-size: 16px;
  font-family: 'ibmfont';
  list-style-type: none;
  padding: 0%;
  margin: 0%;
  -webkit-touch-callout: none; /* iOS Safari */
  -webkit-user-select: none; /* Safari */
  -khtml-user-select: none; /* Konqueror HTML */
  -moz-user-select: none; /* Old versions of Firefox */
  -ms-user-select: none; /* Internet Explorer/Edge */
  user-select: none; /* Non-prefixed version, currently
                                  supported by Chrome, Edge, Opera and Firefox */
}
span:first-child:not(footer>span){
  position: absolute;
  top: 0;
  right: 10%;
  font-size: 45px;
  display: none;
}
span:first-child , #closeNavBar{
  cursor:pointer;
  color: var(--white-color);
  position: fixed;
  z-index: 13;
}
header{
  grid-area: hd;
  height: 50%;
  width: 50%;
  position: fixed;
  z-index: 1;
  top: 50%;
  left: 50%;
  transform: translate(-50%,-50%);
  background-color: var(--blue-color);
  overflow-x: hidden;
  transition: 0.5s;
  text-align: center;
  box-shadow: 20px 20px black;
}
header > section{
  position: fixed;
  top: 50%;
  left: 50%;
  width: 98%;
  height: 98%;
  transform: translate(-50%,-50%);
}
nav{
  position: relative;
  width: 99%;
  text-align: center;
  margin-top: 30px;
}
nav > a{
  padding: 8px;
  text-decoration: none;
  font-size: 16px;
  color: var(--darkGrey-color);
  display: block;
  transition: 0.3s;
}
#closeNavBar{
  position: absolute;
  top: 0;
  right: 10%;
  font-size: 45px;
}
footer{
  display: none;
}
@media screen and (min-width:768px) {
  header > section{
    height: 100%;
  }
  header{
    overflow-x: visible;
    grid-area: hd;
    color: var(--white-color);
    background: var(--blue-color);
    text-align: center;
    position: relative;
    display: grid;
    transition: 0s;
    box-shadow: none;
    width: 100%;
    height: 100%;
    bottom: 0;
  }

  header > section > nav{
    position: inherit;
    align-self: end;
    justify-self: start;
    width: 100%;
    text-align: left;
    margin: 0;
    bottom: 0;
  }

  nav > a{
    text-decoration: none;
    list-style-type: none;
    color: var(--white-color);
    padding: 0 0.5%;
    font-size: 16px;
    display: inline-block;
    bottom: 0;
  }
  span:first-child , #closeNavBar{
    display: none;
  }
  footer{
    grid-area: ft;
    color: var(--white-color);
    background-color: var(--blue-color);
    width: 100%;
  }
  main{
    grid-template-rows: 0.4fr 9.3fr 0.3fr;
  }
  footer{
    display: block;
  }
}

body{
  background: var(--blue-color);
}
main{
  grid-template-areas:
      "hd"
      "main"
      "ft";
  height: 100vh;
  width: 100vw;
  display: grid;
  grid-template-rows: 0.8fr 8.5fr 0.5fr;
  background: var(--blue-color);
}

.redirectLinkActive { 
  background-color: var(--grey-color);
} 

main section:nth-child(2){
  grid-area: main;
  border:none;
  position: relative;
  background: var(--grey-color);
  overflow-y: scroll;
}
section > ul {
  position: relative;
  width: 99%;
  height:98%;
  opacity: 1;
  top: 1%;
  left: 0.5%;
  border: 1px solid var(--blue-color);
  overflow-y: scroll;
}

.selectableActive{
  color:var(--white-color);
}
.readableActive{
  background-color: var(--blue-color);
  color:var(--white-color);
}
.overlayActive{
  opacity: 1;
}
main section:nth-child(4){
  box-shadow: 20px 20px black;
  position: fixed;
  left:50%;
  top: 50%;
  transform: translate(-50%,-50%);
  width: 50vw;
  height: 50vh;
  background-color: var(--blue-color);
  opacity: 0;
  overflow: hidden;
}

main section:nth-child(3){
  display: none;
  box-shadow: 20px 20px black;
  position: fixed;
  left:50%;
  top: 50%;
  transform: translate(-50%,-50%);
  width: 50vw;
  height: 50vh;
  background-color: var(--blue-color);
  overflow: hidden;
}
section > div{
  position: fixed;
  left:50%;
  top: 50%;
  transform: translate(-50%,-50%);
  width: 96%;
  height: 96%;
  border: 1px solid var(--grey-color);
  color: var(--white-color);
}

div > p:first-child{
  position: fixed;
  left: 50%;
  top:-2%;
  transform: translateX(-50%);
  background-color: var(--blue-color);
  padding: 1%;
}
div > *:last-child{
  position: relative;
  margin: 2%;
  top:10%;
}
div > ul>p{
  padding-bottom: 3%;
}


.popupSelectable{
  color: var(--white-color);
  cursor:pointer;
}

.selectableActivePopup{
  color: var(--white-color);
  background-color: var(--darkGrey-color);
}