html, body {
    margin: 0;
    padding: 0;
}

input, button {
    outline: none;
}

button {
    cursor: pointer;
}

a {
    text-decoration: none;
}

// TODO: Explore removing these values
.clear {
    display: block;
    clear: both;
}

//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;
}