:root {
    --nb-dark-1: #272739;
    --nb-dark-1-rgb: 39, 39, 57;
    --nb-dark-2: #455f76;
    --nb-dark-2-rgb: 69, 95, 118;
    --nb-dark-3: #45a17d;
    --nb-dark-3-rgb: 69, 161, 125;
    --nb-light-1: #96cdcc;
    --nb-light-1-rgb: 150, 205, 204;
    --nb-light-2: #efccb9;
    --nb-light-2-rgb: 239, 204, 185;
    --nb-accent-1: #ed8a5f;
    --nb-accent-1-rgb: 237, 138, 95;
    --nb-accent-2: #f3bf5e;
    --nb-accent-2-rgb: 243, 191, 94;

    --nb-title-font-family: "Cooper Black", "Arial Black", sans-serif;
    --nb-heading-font-family: "Century Gothic", Arial, sans-serif;
    --nb-copy-font-family: Georgia, "Times New Roman", "Bitstream Charter", Times, serif
}
* {
    box-sizing: border-box;
}

body {
    font-family: var(--nb-copy-font-family);
    color: var(--nb-dark-1);
    background-size: cover;
    background-position: center center;
    background-repeat: no-repeat;
}

input, select, textarea  {
    font-family: var(--nb-heading-font-family);
    color: var(--nb-dark-1);
    font-size: inherit;
}

h1 {
    font-family: var(--nb-title-font-family);
    color: var(--nb-dark-2);
}
h2, h3, h4, h5, h6, th {
    font-family: var(--nb-heading-font-family);
}

select, textarea, input[type=text],input[type^=date],input[type=email],input[type=file],input[type=month],input[type=number],input[type=password],input[type=search],input[type=tel],input[type=time],input[type=url] {
    border: 1px solid var(--nb-dark-1);
    border-radius: 100px;
    padding-left: 5px;
    padding-right: 5px;
    margin: 2px 0;
}
textarea {
    border-radius: 7px;
}

.nb-button,
.nb-button-dark,
button,
input[type=submit],
input[type=button] {
    display: inline-block;
    text-align: center;
    text-decoration: none;
    border: 0;
    padding: 7px 14px;
    border-radius: 100px;
    background-color: var(--nb-light-2);
    color: var(--nb-dark-1);
    cursor: pointer;
    transition: all 200ms;
    margin: 2px 4px 2px 0;
}
.nb-button:hover,
.nb-button-dark:hover,
button:hover,
input[type=submit]:hover,
input[type=button]:hover {
    background-color: rgba(var(--nb-light-2-rgb), 0.8);
}

.nb-button-dark,
input.nb-button-dark {
    background-color: var(--nb-dark-2);
    color: #fff;
}
.nb-button-dark:hover,
input.nb-button-dark:hover {
    background-color: rgba(var(--nb-dark-2-rgb), 0.8);
}




body {
    background-color: #777;
    margin: 0;
    padding: 0;
    font-size: 4vh;
}

#app {
    background-color: #fff;
    width: 100vw;
    height: 100vh;
    max-width: 67vh;
    max-height: 1000px;
}
#app > div > div {

}

#destinator {
    height: 50%;
}
#destinator > div {
    height: 33%;
}
#action {
    padding: 4vh 2% 0;
}
#action button {
    width: 100%;
    font-size: 4vh;
    padding-top: 2vh;
    padding-bottom: 2vh;
}

#destination-region {
    padding: 0;
}
#destination-region select {
    border: none;
    border-radius: 0;
    width: 100%;
    height: 100%;
    background-color: var(--nb-light-1);
    display: block;
    text-align: center;
    padding: 0 1vh;
}

#destination-city {

}
#destination-city .text {
    width: 100%;
    height: 100%;
    line-height: 16.5vh;
    background-color: var(--nb-light-1);
    text-align: center;
    display: none;
}
#destination-city button {
    width: 96%;
    font-size: 4vh;
    margin: 4vh 2% 0;
    display: none;
    padding-top: 2vh;
    padding-bottom: 2vh;
}


#payoff-chart {
    height: 50%;
}
#payoff-chart > div {
    height: 33%;
}
#payoff-chart .header {
    background-color: var(--nb-dark-1);
    color: #fff;
    height: 5vh;
    line-height: 5vh;
    font-size: 3vh;
    text-align: center;

}
#payoff-chart select {
    border: none;
    border-radius: 0;
    width: 100%;
    height: 11.5vh;
    background-color: #ccc;
    display: block;
    text-align: center;
    padding: 0 1vh;
    margin: 0;
}
#payoff-amount {
    background-color: var(--nb-light-1);
    width: 100%;
    height: 100%;
    line-height: 16.5vh;
    text-align: center;
}