@charset "utf-8";
@import "normalize.css";
@import url('https://fonts.googleapis.com/css?family=Quicksand:300,400,500,600,700&display=swap');

:root {
    --default-font: 'Quicksand', sans-serif;
    --input-padding: 0.5rem;
}

html {
    font-family: var(--default-font);
    font-size: 16px;
    font-weight: 300;
}

body {
    font-family: var(--default-font);
    margin: 0px;
    padding: 10px;
}

input, textarea, select {
    border: 1px solid;
    border-radius: 0;
    box-sizing: border-box;
    font-family: var(--default-font);
    font-size: 0.9rem;
    margin: 0px;
    padding: var(--input-padding);
    width: 100%;
}

button {
    border: none;
    border-radius: 25px;
    cursor: pointer;
    font-family: var(--default-font);
    font-size: 0.8rem;
    font-weight: 700;
    padding: 0.5rem 1rem;
    min-width: 100px;
}

nav.level {
    display: flex;
    justify-content: space-between;
}

div.control-container {
    display: flex;
    padding: 0.5rem 0px;
}

div.control-container > div.icon {
    margin: 0px;
    padding: var(--input-padding);
}

div.control {
    flex-grow: 1;
}

div.gifs {
    display: flex;
    flex-wrap: wrap;
}

div.gif {
    border: 2px solid;
    margin: 5px;
}

div.gif > img {
    height: 100px;
}

.gif.selected {
    border: 3px solid;
}