body {
    display: flex;
    justify-content: center;
    align-items: center;
    background: url(/terminal/bg.png);
    background-size: cover;
    background-position: center;
}

.outer{
  display: flex;
  position: fixed;
  width: 97%;
  height: 95%;
  justify-items: center;
  text-align: center;
  justify-content: center;
  align-items: center;
  border-radius: 10px 10px 0px 0px;
  border-radius: 5px;
  z-index: 1;
}

.wind {
  display: flex;
  position: fixed;
  font-family: 'Sofia Sans', sans-serif;
  top: 2.5%;
  width:96.9%;
  height: 3%;
  background-color: #30353A;
  border-radius: 10px 10px 0px 0px;
  z-index: 3;
}

.blurred {
  display: flex;
  position: absolute;
  width: 100%;
  height: 100%;
  background: url(/terminal/bg.png);
  background-size: cover;
  background-position: center;
  border-radius: 10px 10px 0px 0px;
  filter: blur(10px);
  filter: brightness(0.5);
  align-items: center;
  align-content: center;
  justify-items: center;
  justify-content: center;
  text-align: center;
  z-index: 2;
}

.clear {
  display: flex;
  position: fixed;
  font-family: 'Sofia Sans', sans-serif;
  top: 5.5%;
  left: 2%;
  width: 100%;
  height: 100%;
  margin: 1%;
  color: white;
  font-size: 1em;
  z-index: 4;
}

.dot {
  display: flex;
  margin: 0rem 1% 0 0;
  left: 94%;
  position: relative;
  aspect-ratio : 1 / 1;
  height: 55%;
  border-radius: 50%;
  align-self: center;
  justify-self: right;
}

.term-title {
  display: inline-block;
  color: #fff;  
  align-self: center;
  position: absolute;
  left: 48%;
}

i {
  color: #3BB662;
}

.red {
  background-color: #E75448;
}

.yellow {
  background-color: #E5C30F;
}

.green {
  background-color: #3BB662;
}