<!-- views/partials/head.ejs -->
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta charset="UTF-8">
<title>VSoRC</title>
<!-- CSS (load bootstrap from a CDN) -->
<!-- <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous"> -->
<link rel="stylesheet" type="text/css" href="/styles/main.css" />
<script src="https://cdn.plot.ly/plotly-latest.min.js"></script>
<style>
  body {
    padding-bottom: 50px;
  }
 /* de aca para abajo es para el hamburguer*/
  a {
    text-decoration: none;
    color: #232323;

    transition: color 0.3s ease;
  }

  a:hover {
    color: tomato;
  }

  #menuToggle {
    display: block;
    position: relative;
    top: 5px;
    left: 15px;

    z-index: 1;

    -webkit-user-select: none;
    user-select: none;
  }

  #menuToggle input {
    display: block;
    width: 40px;
    height: 32px;
    position: absolute;
    top: -7px;
    left: -5px;

    cursor: pointer;

    opacity: 0;
    /* hide this */
    z-index: 2;
    /* and place it over the hamburger */

    -webkit-touch-callout: none;
  }

  /*
 * Just a quick hamburger
 */
  #menuToggle span {
    display: block;
    width: 33px;
    height: 4px;
    margin-bottom: 5px;
    position: relative;

    background: #cdcdcd;
    border-radius: 3px;

    z-index: 1;

    transform-origin: 4px 0px;

    transition: transform 0.5s cubic-bezier(0.77, 0.2, 0.05, 1.0),
      background 1s cubic-bezier(0.77, 0.2, 0.05, 1.0),
      opacity 0.55s ease;
  }

  #menuToggle span:first-child {
    transform-origin: 0% 0%;
  }

  #menuToggle span:nth-last-child(2) {
    transform-origin: 0% 100%;
  }

  /*
 * Transform all the slices of hamburger
 * into a crossmark.
 */
  #menuToggle input:checked~span:nth-last-child(4) {
    transform: translate(-6px, 8px) rotate(-45deg) scale(0.4, 0.8);
    background: #ffcdcd;
  }

  /*
 * But let's hide the middle one.
 */
  #menuToggle input:checked~span:nth-last-child(3) {
    transform: translate(-5px, 0px) rotate(0deg) scale(0.7, 0.7);
    background: #ffcdcd;
  }

  /*
 * Ohyeah and the last one should go the other direction
 */
   #menuToggle input:checked~span:nth-last-child(2) {
    transform: translate(-4px, -11px) rotate(45deg) scale(0.4, 0.8);
    background: #ffcdcd;
  }

  /*
 * Make this absolute positioned
 * at the top left of the screen
 */
  #menu {
    position: absolute;
    width: 300px;
    margin: -100px 0 0 -50px;
    padding: 50px;
    padding-top: 125px;
    height:120vh;
    background: #343a40;
    list-style-type: none;
    -webkit-font-smoothing: antialiased;
    /* to stop flickering of text in safari */

    transform-origin: 0% 0%;
    transform: translate(-100%, 0);

    transition: transform 0.5s cubic-bezier(0.77, 0.2, 0.05, 1.0);
  }

  #menu li {
    padding: 0.5rem 0;
    font-size: 1.5rem;
    color: white;
  }

  /*
 * And let's slide it in from the left
 */
  #menuToggle input:checked~ul {
    transform: none;
  }
</style>
