@import url('https://fonts.cdnfonts.com/css/operator-mono');
::selection {
    background-color: #ae6910;
  }
body {
    font-family: 'Operator Mono', monospace;
    background: #272822;
    font-size: 18px;
    color:azure;
    font-weight:300;
    line-height:26px;
    margin:0 auto;
    width:960px;
}

h1 {
    font-weight:300;
    font-size:32px;
    margin: 0 auto;
}
h2 {
    color:#c9c26c;
    font-size:18px;
    font-weight:300;
    margin-top:5%;
}
h2:first-of-type{
    margin-top:0;
}
ul.tech {
    column-count:1;
}
ul.tools {
    column-count:1;
}
ul.academics {
    column-count:1;
}
ul {
    list-style: none;
    padding:0px;
  }
li:before {
    content: '►';
    color:coral;
    font-size: 18px;
    margin-right: 10px;
  }
li.completed:before {
    content: '▨';
    color:coral;
    font-size: 18px;
    margin-right: 10px;
  }
li.pending:before {
    content: '□';
    color:coral;
    font-size: 18px;
    margin-right: 10px;
  }
li.progress:before {
    content: '◩';
    color:coral;
    font-size: 18px;
    margin-right: 10px;
  }

a {
    color:#AE81FF;
}
.grabber {
    font-size:12px;
    line-height:16px;
}

.shortcut {
    position: relative;
    display: inline-block;
    background:#fff;
    color:#272822;
    font-weight:300;
    padding:0px 4px;
    cursor:pointer;
  }
  .tooltip {
    position: relative;
    display: inline-block;
    color:#74eaff;
    font-weight:300;
    padding:0;
    cursor:help;
  }
  .tooltip:hover::after {
    content: attr(title);
    min-width:200px;
    border:3px double #74eaff;
    background-color: black;
    color: #fff;
    padding: 5px;
    position: absolute;
    z-index: 1;
    bottom: 125%;
    left: 50%;
    transform: translateX(-50%);
    opacity: 1;
    transition: opacity 0.3s;
  }
.bottom-menu{
    position:fixed;
    bottom:0;
    background:#272822;
    width:100%;
}
.menu {
    margin:0 auto;
    padding:20px 0;
}
.menu li{
    display:inline-block;
    position:relative;
    margin-right:15px;
}
.menu li:before {
    content:"";
    margin:0;
}
.info {
    background:#9d1641;
    color:#bfbfbf;
    padding:0 5px;
}
.login {margin-bottom:4%;}
hr{
    margin-bottom:10%;
    border:0;
}
.legend {
    color:#bfbfbf;
}
.container {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 10px;
  }

  @media (max-width: 768px) {
    body {
        margin:0 auto;
        width:90vw;
    }
    .grabber {
        font-size:7px;
        line-height:9px;
    }
    .container {
        display:block;
    }
    hr {
        margin-bottom:25%;
    }
  }