<div class="wrapper">
  <div class="terminal">
    <div class="terminal__banner">
      <span class="terminal__circle red"></span>
      <span class="terminal__circle yellow"></span>
      <span class="terminal__circle green"></span>
    </div>
    <div class="terminal__body">
      <span class="terminal__text"> Antonijas-MacBook-Air ~ $</span>
      <span class="terminal__cursor"></span>
    </div>
  </div>
</div>

@import url("https://fonts.googleapis.com/css?family=Roboto+Mono&display=swap");

* {
  box-sizing: border-box;
}

body {
  background-color: #517eb9;
}

.wrapper {
  max-width: 650px;
  margin: 50px auto;
}

.terminal {
  &__banner {
    background-color: #dbdbdb;
    border-top-left-radius: 10px;
    border-top-right-radius: 10px;
    padding: 7px 10px;
  }

  &__circle {
    border-radius: 100%;
    height: 15px;
    width: 15px;
    display: inline-block;
    margin-right: 5px;
    align-self: center;
    position: relative;
    cursor: pointer;
    text-align: center;
    &::after {
      position: absolute;
      left: 0;
      right: 0;
      margin: 0 auto;
      display: block;
      top: -1px;
      font-size: 90%;
    }

    &.red {
      background-color: #ee5f5b;
      text-align: center;

      &:hover {
        &::after {
          content: "\00D7";
        }
      }
    }

    &.yellow {
      background-color: #f8be45;

      &:hover {
        &::after {
          content: "\2212";
        }
      }
    }

    &.green {
      background-color: #5dc94c;
      text-align: center;
      &::before {
        position: absolute;
        left: 0;
        right: 0;
        margin: 0 auto;
        display: block;
        font-size: 70%;
      }

      &:hover {
        &::before {
          content: "\22A0";
        }
      }
    }
  }

  &__body {
    height: 350px;
    background-color: #000;
    padding-top: 7px;
  }
  &__text {
    padding-left: 10px;
    color: #fff;
    font-family: "Roboto Mono", monospace;
    vertical-align: middle;
    display: inline-block;
    user-select: none;
  }

  &__cursor {
    vertical-align: middle;
    display: inline-block;
    height: 20px;
    width: 10px;
    background-color: rgba(225, 225, 225, 0.7);
    animation: cursor 0.5s forwards infinite ease-in-out alternate;
  }
}

@keyframes cursor {
  from {
    opacity: 0;
  }

  to {
    opacity: 1;
  }
}