@import "~bulma/sass/utilities/_all.sass";
@import "~bulma/sass/base/_all.sass";
@import "~bulma/sass/layout/hero.sass";
@import "~bulma/sass/grid/columns.sass";
@import "~bulma/sass/elements/title.sass";
@import "~bulma/sass/elements/button.sass";

body {
  font-family: "Roboto", sans-serif;
}

h1.title {
  font-family: Gafata, sans-serif;
  font-weight: 500;
}

.green-highlight {
  box-shadow: inset 0 -6px 0 rgba(53, 196, 84, 0.4);
}

.red-highlight {
  box-shadow: inset 0 -6px 0 rgba(255, 71, 71, 0.3);
}

#video {
  display: flex;
  flex-direction: column;
  box-shadow: 0px 10px 22px 4px rgba(0, 0, 0, 0.75);
  border-radius: 5px 5px 0px 0px;
  overflow: hidden;
  border: 1px solid #777;

  .browser {
    position: relative;
    display: block;
    height: 41px;
    width: 100%;
    background: #222;
    line-height: 45px;
    padding-left: 15px;

    .circle {
      width: 15px;
      height: 15px;
      display: inline-block;
      border-radius: 50%;
      margin-right: 4px;

      &.red {
        background-color: rgb(255, 71, 71);
      }

      &.yellow {
        background-color: #d3c437;
      }

      &.green {
        background-color: rgb(53, 196, 84);
      }
    }
  }
}