@import url('https://fonts.googleapis.com/css?family=Kurale');

:root {
    --c_bg: #D9C692;
    --c_bg_light: #e3d6aa;
    --c_bg_dark: #C4AD6C;
    --c_text: #243332;
    
    --c_red: #c32c2c;
    --c_green: #38a71a;
}

body {
    font-size: calc(100vw / 18);
    font-family: Kurale, Serif;
    background-color: var(--c_bg);
    color: var(--c_text);
    margin: 0;
    padding: 0 0 2em;
    display: flex;
    flex-flow: column nowrap;
    align-items: center;
    justify-content: flex-start;
}

body * {
    -webkit-touch-callout: none;
    -webkit-user-select: none;
    -khtml-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
    -webkit-tap-highlight-color: rgba(255, 255, 255, 0);
    -webkit-tap-highlight-color: transparent;
    -webkit-focus-ring-color: rgba(255, 255, 255, 0) !important; 
    outline: none !important;
}

.money {
    width: calc(100% - 2em);
    padding: 0em 1em 1em;
    display: flex;
    flex-flow: row nowrap;
    align-items: center;
    justify-content: center;
}

.money>.coin {
    display: flex;
    flex-flow: column nowrap;
    align-items: center;
    justify-content: center;
}

.money>.coin>div {
    display: flex;
    flex-flow: row nowrap;
    align-items: center;
    justify-content: flex-start;
}
.money>.coin>div>span {
    font-size: 2em;
    text-align: right;
    width: 0.75em;
    margin: 0 0.25em 0;
    cursor: pointer;
}
.money>.coin#gold>div>span {
    width: 1.75em;
    margin-left: 0;
}
.money>.coin>div>img {
    width: 2em;
    height: 2em;
}
.money .button {
    font-size: 1.5em;
    border-radius: 50%;
    cursor: pointer;
}
.money #gold .button {
    margin-left: 1em;
}
.money .button:active {
    background-color: var(--c_bg_dark);
}

.counter {
    width: calc(100% - 2em);
    padding: 0em 1em;
    display: flex;
    flex-flow: row nowrap;
    align-items: center;
    justify-content: center;
    border-top: 1px solid rgba(0, 0, 0, 0.1);
}

.counter>img {
    width: 2em;
    height: 2em;
    margin-right: 2em;
}

.counter>.number {
    font-size: 2em;
    width: 2em;
    text-align: center;
    cursor: pointer;
}

.counter>.button {
    font-size: 1.5em;
    border-radius: 50%;
    cursor: pointer;
}
.counter>.button:active {
    background-color: var(--c_bg_dark);
}

.counter>.delete {
    font-size: 1em;
    margin-left: 3em;
    border-radius: 0.25em;
    cursor: pointer;
    background: var(--c_bg_dark);
    color: var(--c_bg);
}
.counter>.delete:active {
    background: var(--c_red);
}
.counter>.delete:not([onclick]) {
    color: rgba(0, 0, 0, 0);
    background: transparent;
    cursor: default;
}

body>.addCounter {
    font-size: 2em;
    width: calc(100% - 2em);
    margin-top: 1em;
    border-radius: 0.25em;
    text-align: center;
    background: var(--c_bg_dark);
    cursor: pointer;
}
body>.addCounter:active {
    background: var(--c_green);
}

body>p {
    margin: 1em;
}

.overlayWindow {
    position: fixed;
    width: calc(100% - 2em - 5%);
    max-height: calc(100% - 2em - 5%);
    top: 50%;
    transform: translateY(-50%);
    border-radius: 0.1em;
    background: var(--c_bg_light);
    overflow-y: scroll;
    overflow-y: auto;
    box-shadow: 0 0.25em 1em rgba(0, 0, 0, 0.4);
    padding: 2.5%;
}

#numberPad,
#iconSelection {
    display: flex;
    flex-flow: row wrap;
    align-items: flex-start;
    align-content: flex-start;
    justify-content: flex-start;
}

#iconSelection>button {
    width: 95%;
    margin: 0 2.5%;
    padding: 0;
    font-family: inherit;
    color: inherit;
    border: none;
    font-size: 2em;
    background: transparent;
    cursor: pointer;
    border-radius: 0.1em;
    text-align: center;
}
#iconSelection>button:active {
    background: var(--c_bg);
}

#iconSelection>img {
    width: 20%;
    background: transparent;
    margin: 2.5%;
    cursor: pointer;
    border-radius: 0.25em;
}
#iconSelection>img:active {
    background: var(--c_bg);
}

#numberPad>button {
    font-family: inherit;
    color: inherit;
    border: none;
    font-size: 2em;
    width: 30%;
    background: transparent;
    margin: 1.5%;
    cursor: pointer;
    border-radius: 0.1em;
    text-align: center;
}
#numberPad>button.doubleWide {
    width: 63%;
}
#numberPad>button:active {
    background: var(--c_bg);
}
#numberPad>span {
    font-size: 2em;
    width: 95%;
    background: transparent;
    border-bottom: solid 1px var(--c_bg_dark);
    margin: 2.5%;
    text-align: right;
}




@media (min-width: 32rem) {
    body {
        font-size: 2em;
    }
    
    body>.addCounter {
        max-width: 32rem;
    }
    
    .overlayWindow {
        width: 32rem;
    }
}