portal.css

.portal {
  min-height: 100vh;
}

.logo {
  margin: 10vh;
  margin-left: 40%;
}



.logo__image {
  max-width: 100%;
  width: 20vw;
  height: 20vw;
  object-fit: contain;
  transform: scale(1);
  animation: 3s zinzout infinite;
  animation-direction: alternate;
}

@keyframes zinzout {
  from {
    transform: scale(.9);
  }

  to {
    transform: scale(1);
  }
}

.info {
  text-align: center;
}

.infoc1 {
  --color: #ffa260;
  --hover: #e5ff60;
}

.infoc2 {
  --color: rgba(255, 0, 0, 0.7);
  --hover: rgba(255, 100, 20, 0.5);
}

.infoc3 {
  --color: hsla(120, 100%, 50%, 0.5);
  --hover: hsla(120, 100%, 50%, 1);
}

.info__inner {
  padding: 0px;
  border: 2px solid;
  border-top-left-radius: 2rem;
  border-bottom-right-radius: 2rem;
  border-bottom-left-radius: 0.5rem;
  border-top-right-radius: 0.5rem;
  background: bisque;
  color: var(--color);
  transition: 0.30s;
}

.info__inner:hover,
.info__inner:focus {
  border-color: var(--hover);
  -webkit-border-color: var(--hover);
  color: #fff;
  background: var(--color);
  -webkit-background: var(--color);
}

.info__inner--offline {
  background: #cc4d55;
}

.info__inner--offline:hover,
.info__inner--offline:focus {
  border-color: var(--hover);
  -webkit-border-color: var(--hover);
  color: #fff;
  background: var(--color);
  -webkit-background: var(--color);
}

.info__inner--online {
  background: white;
}

.info__inner--online:hover,
.info__inner--online:focus {
  border-color: var(--hover);
  -webkit-border-color: var(--hover);
  color: #fff;
  background: var(--color);
  -webkit-background: var(--color);
}

.info__h1 {
  font-size: 2vw;
}

.info__h2 {
  font-size: 1.75vw;
  margin-top: 10px;
}

@media screen and (max-width: 48em) {
  .info__h1 {
    font-size: 2vw;
  }

  .info__h2 {
    font-size: 1.75vw;
  }
}

@media screen and (max-width: 35.5em) {
  .info__h1 {
    font-size: 3vw;
  }

  .info__h2 {
    font-size: 2.75vw;
  }
}

.items {
  position: absolute;
  bottom: 0;
  left: 0;
}

.items__item {
  background: darken(#4a4e51, 15%);
  text-align: center;
  font-size: 2vw;
  padding: 4vh 0;
  transition: .25s ease-in-out;
  text-decoration: none;
  color: var(--color);
  --color: white;
  --hover: #ffdc7f;



}

.items__item:hover,
.items__item:active,
.items__item:focus {
  border-color: var(--hover);
  -webkit-border-color: var(--hover);
  color: var(--hover);
  box-shadow: 0 0.5em 0em -0.4em var(--hover);
  transform: translateY(-0.25em);
}

@media screen and (max-width: 48em) {
  .items__item {
    font-size: 3vw;
  }
}

@media screen and (max-width: 35.5em) {
  .items__item {
    font-size: 3.5vw;
  }
}

.items__item--disabled {
  pointer-events: none;
  color: #4a4e51;
  background: darken(#4a4e51, 15%);
}

.items__item--disabled:hover,
.items__item--disabled:focus,
.items__item--disabled:active {
  color: #4a4e51;
}