@charset "utf-8";

$purple: #8a4d76;
$pink: #fa7c91;

$beige-light: #d0d1cd;
$beige-lighter: #eff0eb;

$grey-light: $beige-light;
$primary: $purple;
$link: $pink;
$body-background-color: $beige-lighter;

@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.6);
}

.yellow-highlight {
  box-shadow: inset 0 -6px 0 rgba(211, 196, 5, 0.8);
}

#video {
  display: flex;
  flex-direction: column;
  box-shadow: 0px 6px 14px 5px rgba(0, 0, 0, 0.45);
  border-radius: 5px 5px 0px 0px;
  overflow: hidden;
  border: 1px solid #777;

  .browser {
    position: relative;
    display: block;
    height: 38px;
    width: 100%;
    background: #222;
    line-height: 42px;
    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: rgb(211, 196, 55);
      }

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

pre {
  box-shadow: 0 0 0 2px #ffdd57;
  border-radius: 3px;
}

.button.copy {
  background: 0 0;
  border: none;
  color: #4a4a4a;
  cursor: pointer;
  font-size: 0.625rem;
  outline: 0;
  padding-bottom: 0;
  padding-top: 0;
  &:hover {
    background-color: #ffdd57;
    color: rgba(0, 0, 0, 0.7);
  }
}