.container {
  width: 100%;
  height: 100vh;
  top: 0px;
  right: 0;
  background-color: rgb(26, 92, 92);
  position: fixed;
  z-index: 9999;
  padding: 1.4em;
  transition: 500ms;
  overflow: hidden;
  transform: translateX(100%);
  animation: entry 0.7s forwards;
  // will-change: transform;

  .icon {
    filter: invert(100%);
    width: 40px;
    float: right;
    right: 1.5em;
    position:absolute; 
    cursor: pointer;
  }

  .ul {
    margin-top: 5em;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    
    .li {
      text-decoration: none;
      list-style: none;
      margin: 1em;
      display: block;
      clear: both;
      margin-left: auto;
      margin-right: auto;
      text-align: center;
      
      a {
        text-decoration: none;
        color: white;
        font-size: 1.4rem;
        margin: 1em;
      }
    }

    .login {
      border: 2px solid #fff;
      border-radius: 30px;
      display: block;
      clear: both;
      padding: 0.4em 2em;
      color: #fff;
      text-decoration: none;
      color: white;
      font-size: 1.4rem;
      margin: 1em;
    }
  }

  .logo {
    color: #fff;
    font-size: 2rem;
    font-weight: bold;
    letter-spacing: 1px;
    position: fixed;
    left: 50%;
    bottom: 20px;
    transform: translate(-50%, -50%);
    margin: 0 auto;
  }
}

.enter {
  transform:translateX(-100%);
}

.notactive {
  display: none;
}

@keyframes entry {
  from {transform: translateX(100%);}
  to {transform: translateX(-0%)}
}

@media only screen and (min-width: 600px) {
  .container {
    width: 35%;
  }
}