@import url("https://fonts.googleapis.com/css?family=Nunito+Sans");
:root {
  --blue: #0e0620;
  --white: #fff;
  --green: #2ccf6d;
}
.banner {
    display:none
}

.container404 button {
    font-family: "Nunito Sans";
}

.container404 ul {
    list-style-type: none;
    -webkit-padding-start: 35px;
    padding-inline-start: 35px;
}

.container404 svg {
    width: 100%;
    visibility: hidden;
}

.container404 h1 {
    font-size: 7.5em;
    margin: 15px 0px;
    font-weight: bold;
}

.container404 h2 {
    font-weight: bold;
}
 
nav {
  position: absolute;
  height: 100%;
  top: 0;
  left: 0;
  background: var(--green);
  color: var(--blue);
  width: 300px;
  z-index: 1;
  padding-top: 80px;
  -webkit-transform: translateX(-100%);
          transform: translateX(-100%);
  -webkit-transition: 0.24s cubic-bezier(0.52, 0.01, 0.8, 1);
  transition: 0.24s cubic-bezier(0.52, 0.01, 0.8, 1);
}
nav li {
  -webkit-transform: translateX(-5px);
          transform: translateX(-5px);
  -webkit-transition: 0.16s cubic-bezier(0.44, 0.09, 0.46, 0.84);
  transition: 0.16s cubic-bezier(0.44, 0.09, 0.46, 0.84);
  opacity: 0;
}
nav a {
  display: block;
  font-size: 1.75em;
  font-weight: bold;
  text-decoration: none;
  color: inherit;
  -webkit-transition: 0.24s ease-in-out;
  transition: 0.24s ease-in-out;
}
nav a:hover {
  text-decoration: none;
  color: var(--white);
}
nav[data-state="open"] {
  -webkit-transform: translateX(0%);
          transform: translateX(0%);
}
nav[data-state="open"] ul li:nth-child(1) {
  -webkit-transition-delay: 0.16s;
          transition-delay: 0.16s;
  -webkit-transform: translateX(0px);
          transform: translateX(0px);
  opacity: 1;
}
nav[data-state="open"] ul li:nth-child(2) {
  -webkit-transition-delay: 0.32s;
          transition-delay: 0.32s;
  -webkit-transform: translateX(0px);
          transform: translateX(0px);
  opacity: 1;
}
nav[data-state="open"] ul li:nth-child(3) {
  -webkit-transition-delay: 0.48s;
          transition-delay: 0.48s;
  -webkit-transform: translateX(0px);
          transform: translateX(0px);
  opacity: 1;
}
nav[data-state="open"] ul li:nth-child(4) {
  -webkit-transition-delay: 0.64s;
          transition-delay: 0.64s;
  -webkit-transform: translateX(0px);
          transform: translateX(0px);
  opacity: 1;
}

.btn {
  z-index: 1;
  overflow: hidden;
  background: transparent;
  position: relative;
  padding: 8px 50px;
  border-radius: 30px;
  cursor: pointer;
  font-size: 1em;
  letter-spacing: 2px;
  -webkit-transition: 0.2s ease;
  transition: 0.2s ease;
  font-weight: bold;
  margin: 5px 0px;
}
    .btn.green {
        border: 4px solid #383838;
        color: var(--blue);
    }
.btn.green:before {
  content: "";
  position: absolute;
  left: 0;
  top: 0;
  width: 0%;
  height: 100%;
  background: #383838;
  z-index: -1;
  -webkit-transition: 0.2s ease;
  transition: 0.2s ease;
}
.btn.green:hover {
  color: var(--white);
  background: #383838;
  -webkit-transition: 0.2s ease;
  transition: 0.2s ease;
}
.btn.green:hover:before {
  width: 100%;
}

@media screen and (max-width: 768px) {

    .container404 {
        margin-top: 70px;
        margin-bottom: 70px;
        text-align: center;
    }
}