@font-face { font-family: Rubik; src: url('../media/fonts/Rubik-VariableFont_wght.tff'); }
@font-face { font-family: Delicious; font-weight: bold; src: url('../media/fonts/Rubik-Italic-VariableFont_wght.tff');}


html, body {
  width: 100%;
  height: 100%;
}

.parent{
  display:grid;
  min-height: 100%;
  color: seashell;
  justify-content: center;
  grid-template-columns: repeat(12, 1fr);
  grid-template-rows: 6rem 2.5rem 1fr 6rem;

}

/* Basic parts */

.header{
  grid-column: 1/-1;
  grid-row: 1;
  background-color: black;

}

.header img{
  display: block;
  width: 100%;
  height: 6rem;
  object-fit:contain;
}

.nav{
  grid-column: 1/-1;
  grid-row: 2;
  height: 2.6rem;
  background-color: dimgrey;
}

.nav table{
  max-height: 100%;
  height: 100%;
  margin-left: 6.25rem;

  border: none;
  vertical-align: center;
  padding: 0;
  text-align: center;
  margin-top: auto;
  margin-bottom: auto;
}


.nav td{

  border-right: solid 1px white;
  border-collapse: collapse;
  padding-top: 0;
  padding-bottom: 0;
  padding-left: 2.5rem;
  padding-right: 2.5rem;
  margin:0;
  overflow: hidden;
}


.nav li:last-child{
  border: none;
}


.nav a:hover {
  background-color: slategrey;
  color: limegreen;
  text-decoration: underline 1px limegreen;
  width: 100%;
}

.nav a {
  display: block;
  display: block;
  margin: -10em;
  padding: 10em;
  text-align: center;
  text-decoration: none;
}


.sidebar{
  grid-area: sidebar;
  background-color: cornflowerblue;

}

/*.main{
  grid-area: main;
  display: grid;
  grid-template-columns: repeat(12, 1fr);
  background-color: none;
  justify-content: center;
  margin-top: 5rem;
  margin-bottom: 5rem;
}*/



.footer{
    grid-column: 1/-1;
    grid-row: 4;
    background-color: dimgrey;
    place-content: center;
    align-content: flex-end;
    height: 6rem;
}

/* Textcontainer */

.textcontainer{
  grid-column: 3/11;
  grid-row: 3;
  grid-template-rows: auto auto auto;
  grid-template-columns: 3fr 18rem;
  background-color: rgba(105,105,105,0.8);
  display: grid;
  padding-left: 1rem;
  padding-right: 2rem;
  box-sizing: border-box;
  margin-left: auto;
  margin-right: auto;
  margin-top: 5rem;
  margin-bottom: 5rem;
}

.textcontainer h1{
  margin-top: 0;
}

.textcontainer hr{
  background-color: limegreen;
  margin-right: 0;
  height: 2px;
  padding: 0;
}

.textitle{
  grid-column: 1/-1;
  grid-row: 1;
  background-color: none;
  text-decoration: underline limegreen 5px;
  margin-left: 1rem;
  margin-top: 1rem;
}

.text1{
  text-align: justify;
  grid-template-column: 1fr;
  grid-template-row: 4;
  grid-column: 1;
  grid-row: 2;
  background-color: none;
  margin-top: 0;
  margin-left: 1rem;
  padding-top: 0;
  margin-right: 3rem;

}

.textmain{
  grid-column: 1;
  grid-row: 4;
  background-color: none;
  margin-top: 0;


}

.description{
  grid-column: 1;
  grid-row: 2;
  background-color: none;

}

.text2{
  grid-column: 1/-1;
  grid-row: 3;
  margin-left: 1rem;
  background-color: none;
  box-sizing:content-box;;
}

/* Hubboxes */

.hubparent{
  display:grid;
  min-height: 100vh;
  position:relative;
  grid-template-columns: repeat(12, 1fr);
  grid-template-rows: auto auto 1fr auto;
  grid-template-areas:
    'header header header header header header header header header header header header'
    'navbar navbar navbar navbar navbar navbar navbar navbar navbar navbar navbar navbar'
    'main main main main main main main main main main main main'
    'footer footer footer footer footer footer footer footer footer footer footer footer';
}


.hubmain{
  grid-area: main;
  display: grid;
  grid-template-columns: repeat(12, 1fr);
  background-color: pink;
  justify-content: center;
  margin-top: 5rem;
  margin-bottom: 5rem;
}

.hubhead{
  grid-column: 1/-1;
  grid-row: 1;
  background-color: coral;
}

.hubbox{
  grid-column: 3/11;
  grid-template-rows: 2rem 1fr 2rem;
  grid-template-columns: 1fr 1fr 1fr;
  background-color: rgba(105,105,105,0.8);
  display: grid;
}

.hubbox ul{
  list-style: none;
  margin-left: 0;
  padding-left: 0;
}

.hubbox li{
  padding-left: 1em;
  text-indent: -1em;
}

.hubbox li:before{
  content:"📁";
  padding-right: 5px;
}


.hidden {
      display: none;
    }

.content {
  padding: 0 18px;
  display: none;
  overflow: hidden;
  background-color: #f1f1f1;
}

.hubcard1{
  grid-column: 1;
  grid-row: 2;
  background-color: khaki;
}

.hubcard2{
  grid-column: 2;
  grid-row: 2;
  background-color: darkorchid;
}


.hubcard3{
  grid-column: 3;
  grid-row: 2;
  background-color: firebrick;
}

/* Quoteobox */

.quote{
  fon-family: "Consolas", sans-serif;
  grid-column: 1;
  grid-row: 1;
  background-color: black;
  border: outset 5px white;
  /*background-image: url("../media/img/terminal.png");
  background-size: 100% 100%;
  background-repeat: no-repeat; */
  width: -10rm;
  padding: 0.2rem 1rem;
  margin-right: 0.8rem;
}

.quoteroot{
  color: limegreen;
}

/* Infobox */

.infobox{
  background-color: #EEEEEE;
  grid-column: 2;
  grid-row: 2;
  background-color: rgba(105,105,105,0.0);
  width: 18rem;
  margin-right: 2em;
  box-sizing: border-box;
  overflow: hidden;
}

.infobox table{
  background-color:#000000;
  width:100%;
  min-width: 100%;
  table-layout: fixed;
  border-collapse:collapse;

}

.infosep{
  background-color: limegreen;
}

.infobox th{

  text-align: left;
  padding: 0.31rem;
  font-size: 5x;
  font-weight: normal;
  border-top: 1px solid #DDDDDD;
  border-bottom: 1px solid #DDDDDD;
}

.infobox td{
  background-color: #222222;
  border-left: 1px solid #DDDDDD;
  text-align: left;
  font-size: 13px;
  font-weight:normal;
  border-top: 1px solid #DDDDDD;
  border-bottom: 2x solid #DDDDDD;
  padding: 0.31rem;
}



#imagetd{
border: none;
border-collapse: collapse;
background-color: none;
padding: 0;
white-space: nowrap;
}

#infoportrait{
  display: block;
  width: 100%;
  height: 100%;
  object-fit: contain;
  border: none;
}

.infobox a{

    text-decoration:none;
}

.infobox a:hover{
  text-decoration: underline;
}

.infoflag {
    width:1.25rem;
    height:0.83rem;
    display: inline;
}

/* Tooltips */

.tooltip {
  position: relative;
  display: inline-block;
  border-bottom: 1px dotted white;
  vertical-align: center;
}

.tooltip .tooltiptext {
  visibility: hidden;
  width: auto;
  background-color: black;
  opacity: 0.8;
  color: #fff;
  vertical-align: center;
  text-align: center;
  padding: 1px 2px;
  border-radius: 6px;
  position: absolute;
  z-index: 1;
  white-space: nowrap;
  border: 1px solid white;
  top: 140%;
  margin-left: -50%;
}

.tooltip:hover .tooltiptext {
  visibility: visible;
}

.collapsbox{
  grid-template-columns: 1fr;
  grid-tamplate-rows: 2rem auto;
  grid-column: 1;
  grid-row: 3;
  background: aqua;
  width: 50%;
}


.collapsible {
  grid-row: 1;
  grid-column: 1;
  font-size: 15px;
  background-color: limegreen;
  cursor: pointer;
  padding: 0.5rem;
  width: 100%;
  border: none;
  text-align: left;
  outline: none;
  color: seashell;
}

.collapsible:after {
  content: '\2228';
  font-weight: bolder;
  color: seashell;
  float: right;
  margin-left: 5px;
}


.content {
  grid-row: 2;
  grid-column: 1;
  padding: 0;
  width: 100%;
  max-width: 100;
  display: none;
  overflow: hidden;
  background-color: black;
  box-sizing: border-box;
  border: solid 1px limegreen;
}

.active:after {
  content: "\2227";
}


.content li{
  padding: 0;
}