* {
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

html {
  box-sizing: border-box;
}

*, *:before, *:after {
  box-sizing: inherit;
}

body {margin: 20px; padding: 0;}

body, button, input, select, textarea {
    font-family: 'Noto Sans', sans-serif;
    font-size: .9rem;
    font-weight: 400;
}

input[type=text] {
    border: 1px solid #ccc;
    padding: 4px;
}

body {
    background-color: #fefefe;
    color: #222;
}

h1 {font-size: 140%; margin-bottom: 0;}

a, a:visited, a:active {
    color: #222;
    text-decoration: underline;
}

a:hover {color: #E30642;}

div {line-height: 2rem;}

a.button,
input[type=submit],
button {
    background-color: #eee;
    border: 1px solid #ccc;
    border-radius: 4px;
    color: #222;
    cursor: pointer;
    font-weight: 600;
    padding: 4px 10px;
}

a.button:hover,
input[type=submit]:hover,
button:hover {
    background-color: #222;
    border: 1px solid #222;
    border-radius: 4px;
    color: #eee;
}

a.button {
    -webkit-appearance: button;
    -moz-appearance: button;
    appearance: button;
    color: initial;
    text-decoration: none;
    line-height: initial;
    padding: 5px 10px;
}

label {font-weight: 600;}

.error {color: #E30642;}
.hidden {display: none !important;}
.stronger {font-weight: 500;}
.strong {font-weight: 600;}

/* === SPINNER === */
.spinner {display: block;}

.spinner.inline {
    display: inline-block;
    margin: 0;
    vertical-align: middle;
}

.spinner:after {
    content: '';
    display: block;
    clear: both;
}
.spinner img,
.spinner span {
    float: left;
    font-weight: 600;
}
.spinner img {height: 32px;}
.spinner span {
    font-weight: 500;
    line-height: 32px;
    margin-left: 4px;
}
/* ========================= */

div.buttons input,
div.buttons a.button,
div.buttons button {
    margin-right: 6px;
}

div.video-container {
    margin: 20px 0;
}

video#video-player {margin-top: 20px;}

input#video-url {
    max-width: 500px;
    width: 100%;
}