@font-face {
    font-family: ModernSansLight;
    src: url("ModernSans-Light.otf") format("opentype");
}


:root {
    --main-radius: 0px;
    --gap : 0px;
    --border : 5px;
    --nav-height: 70px;
  }
  
  body {
    font-family: "Inter", sans-serif;
    height: calc(100vh - 2*var(--gap));
    margin: 0;
    padding: 0;
  }
  
  .container {
    display: grid;
    height: calc(100% - var(--nav-height));
    grid-template-columns: 0.7fr 0.5fr 0.5fr 0.5fr 0.5fr;
    grid-template-rows: 1.2fr 1fr 1fr;
    grid-template-areas:
      "sidebar main main main main"
      "sidebar border1 border1 border2 border2"
      "sidebar border3 border4 border5 border6";
    grid-gap: var(--gap);
    font-weight: 800;
    text-transform: uppercase;
    font-size: 12px;
    color: #EFEFEF;
    text-align: center;
  }
  
  main {
    grid-area: main;
    border-radius: var(--main-radius);
  }
  
  #sidebar {
    grid-area: sidebar;
    border-radius: var(--main-radius);
    width: 100%;
    height: 100%;
  }

.border:hover{
    background-color: transparent;
}

#border1 {
    grid-area: border1;
}

#border2 {
    grid-area: border2;
}

#border3 {
    grid-area: border3;
}

#border4 {
    grid-area: border4;
}

#border5 {
    grid-area: border5;
}

#border6 {
  grid-area: border6;
}

#nav {
    text-align: center;
    display: table;
    width: 100%;
    vertical-align: middle;
    font-family: ModernSansLight;
    font-size: 30px;
    margin: 0;
    padding: 0;
    background-color: #101010;
    height: var(--nav-height);
    line-height: var(--nav-height);
    color: #fff;
}

#github-logo {
  position:absolute;
   right: 20px;
   top:25px;
   margin-left:-10px;
   margin-top:-10px;
   height: calc(var(--nav-height) - 30px);
}

#github-logo img {
   height: calc(var(--nav-height) - 30px);
}

.border {
    background-color: #000000;
    vertical-align: middle;
    place-items: center;
    display: table-cell;
    transition: 1s;
}

.content {
    background-color: #252525;
    display:table;
    position: relative;
    top: 50%;
    transform: translateY(-50%);
    width: calc(100% - var(--border));
    height: calc(100% - var(--border));
    margin: auto;
    vertical-align: middle;
}

a:not(#github-logo) {
    display: table-cell;
    width: 100%;
    height: 100%;
    vertical-align: middle;
    position: relative;
    color: #efefef;
    text-decoration: none;
    font-family: ModernSansLight;
    text-transform: none;
    font-size: 30pt;
    cursor: pointer;
}

#descr{
    font-family: ModernSansLight;
    font-size: 15pt;
    text-transform: none;
    text-align: left;
    padding: 15px;
    line-height: 130%;
    background-color: #252525;
    display:table;
    position: relative;
    margin: auto;
    top: 50%;
    transform: translateY(-50%);
    width: calc(100% - 30px);
    height: calc(100% - 30px);
}

#descr h2{
    text-align: center;
    margin: 0 0 40px 0;
    padding: 0;
    font-size: 30pt;
}

  /* RAINBOW _________________________________________________________ */

  .wrapper { 
    height: 100%;
    width: 100%;
    left:0;
    right: 0;
    top: 0;
    bottom: 0;
    position: absolute;
  background: linear-gradient(120deg, #ff2400, #e81d1d, #e8b71d, #e3e81d, #1de840, #1ddde8, #2b1de8, #dd00f3, #dd00f3, #ff2400);
  background-size: 500% 500%;
  
  -webkit-animation: rainbow 7s ease infinite;
  -z-animation: rainbow 7s ease infinite;
  -o-animation: rainbow 7s ease infinite;
    animation: rainbow 7s ease infinite;}
  
  @-webkit-keyframes rainbow {
      0%{background-position:0% 82%}
      50%{background-position:100% 19%}
      100%{background-position:0% 82%}
  }
  @-moz-keyframes rainbow {
      0%{background-position:0% 82%}
      50%{background-position:100% 19%}
      100%{background-position:0% 82%}
  }
  @-o-keyframes rainbow {
      0%{background-position:0% 82%}
      50%{background-position:100% 19%}
      100%{background-position:0% 82%}
  }
  @keyframes rainbow { 
      0%{background-position:0% 82%}
      50%{background-position:100% 19%}
      100%{background-position:0% 82%}
  }


  @media (orientation: portrait) {
    .container {
      grid-template-columns: 1fr;
      grid-template-rows: 2fr 1fr 1fr 1fr 0.7fr 0.7fr 0.7fr;
      grid-template-areas:
        "main"
        "border1"
        "border2"
        "border3"
        "border4"
        "border5"
        "border6";
    }
    #descr{
        display: none;
    }
  }