frontend/src/components/TopBar/index.scss

.top-bar {
  background-color: #ffdc61;
  height: 80px;
  padding: 5px;
  font-family: comic sans MS;
  font-size: 24px;
  font-weight: bold;
  display: flex;
  justify-content: space-between;

  &__logo {
    display: flex;
    align-items: center;
    flex-grow: 0.5;
    justify-content: flex-start;

    &-image {
      width: 80px;
      height: 80px;
    }
  }

  &__input {
    &-div {
      width: 70%;
      display: flex;
      flex-grow: 3;
    }

    &-field {
      width: 96%;
      margin-top: 10px;
    }

    &-icon {
      width: 35px;
    }
  }

  &__icon {
    width: 50px;
    cursor: pointer;
    &-box {
      display: flex;
      align-items: center;
      justify-content: space-around;
      flex-grow: 1.5;
    }
  }
  &__menu{
margin-top: 25px;
  }
}
@media only screen and (max-width: 670px) {
  .top-bar {
    &__tekst {
      display: none;
    }
    &__icon {
      width: 35px;
    }
    &__logo-image {
      width: 60px;
      height: 60px;
    }

    &__input-icon {
      width: 25px;
    }
  }
}