// CONVENIENCE
.clear {
  display: block;
  clear: both;
}

.light-text {
  color: white;
}

.right {
  float: right;
}

.left {
  float: left;
}

.center {
  text-align: center;
}

//mixins
@mixin fullScreen {
  position: fixed;
  top: 0;
  left: 0;
  width: 100vw;
  height: 100vh;
}

@mixin pureCenter($left: 50%, $top: 50%) {
  position: absolute;
  top: $top;
  left: $left;
  transform: translate(-50%, -50%);
}

@mixin maintain-aspect-ratio(
  $width-factor: 16,
  $height-factor: 9,
  $target-width: 80vw,
  $target-height: 80vh
) {
  width: $target-width;
  height: $target-width * ($height-factor / $width-factor);
  max-width: $target-height * ($width-factor / $height-factor);
  max-height: $target-height;
}