/* ===================================
   EVERYTHING
   =================================== */

* {
    font-family: var(--default-font);
    box-sizing: border-box;
    margin: 0;
    padding: 0;
    user-select: none;
}

:root {
    --h1-font-size: 2em;
    --h2-font-size: 1.45em;
    --h3-font-size: 1.15em;
    --h4-font-size: 0.8em;
    --button-radius:10px;
    --calc-button-color: #a84c2a;
    --calc-button-color-active: #79361e;
    --default-font: 'JetBrains Mono', monospace;
    --background-color: #161310;
    --container-color: #1e1914;
    --success-message-background: #1e3a20;
    --failure-message-background: #3a1a18;
    --success-message-text: #8fbe68;
    --failure-message-text: #c0392b;
    --font-color-main: #ddd0be;
    --font-color-secondary: #7a6a58;
    --border-color: #3d3028;
   }

body {
    background-color: var(--background-color);
}

body.light-mode{
    --calc-button-color: #a84c2a;
    --calc-button-color-active: #79361e;
    --background-color: #f0ece4;
    --container-color: #e4ddd2;
    --success-message-background: #d4e8c8;
    --failure-message-background: #f0d4d0;
    --success-message-text: #2a5018;
    --failure-message-text: #8b1a14;
    --font-color-main: #241a10;
    --font-color-secondary: #695f52;
    --border-color: #c8bfb0;
}

button,
a,
svg  {
    cursor: pointer;
}

/* ===================================
   MAIN WRAPPER
   =================================== */
.wrapper {
    background-color: var(--background-color);
    color: var(--font-color-main);
    height: 100dvh;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: space-between;
}

/* ===================================
   HEADER
   =================================== */
.header {
    display: flex;
    flex-wrap: wrap;
    width: 100vw;
    font-size: var(--h1-font-size);
    font-weight: bold;
    justify-content: center;
    align-items: center;
    padding: 15px;
}

.header .title {
    width: 80%;
    text-align: center;
}

.header .mode-toggle,
.header .spacer {
    display: flex;
    width: 10%;
    align-items: center;
    justify-content: right;
}

.title {
    padding:0px 5px;
}
.header svg {
    fill: var(--font-color-secondary);
    height: var(--h4-font-size);
}

/* ===================================
   COUNTERACT CONTAINER
   =================================== */
.counteract-container {
    display: flex;
    flex-direction: column;
    align-items: center;
}

/* ===================================
   INPUT CONTAINTER 
   =================================== */
.input-container {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
}

/* ===================================
   EFFECT AND TARGET CONTAINERS
   =================================== */
.effect-container,
.target-container {
    background-color: var(--container-color);
    display: flex;
    flex-direction: column;
    margin: 16px;
    padding: 25px;
    border-radius: 8px;
    border: solid 1px var(--border-color);
    min-width: 300px;
}

.source,
.rank,
.level,
.roll-input,
.target-dc,
.radio {
    display: flex;
    flex-direction: column;
    margin: 10px 0;
}

p,
label {
    color: var(--font-color-secondary);
    font-size: var(--h4-font-size);
}

fieldset {
    border: none;
}

input,
select {
    color: var(--font-color-main);
    background-color: var(--background-color);
    border: solid 1px var(--border-color);
    border-radius: 6px;
    padding: 5px 2px 5px 7px;
}

input[type=number]::-webkit-inner-spin-button, 
input[type=number]::-webkit-outer-spin-button { 
  -webkit-appearance: none; 
  margin: 0; 
}

input[type=number] {
  -moz-appearance: textfield;
}

hr {
    border: solid 1px var(--border-color);
}

.radio label {
    font-size: 1em;
}

.radio .roll-adjustment {
    padding-top: 4px;
    padding-bottom: 2px;
}

.radio-none,
.radio-one,
.radio-twenty {
    padding-top: 4px;
}

.hidden {
    display: none;
}

/* ===================================
   CALCULATE BUTTON
   =================================== */
.counteract-container button {
    width: 100%;
    color: var(--font-color-main);
    background-color: var(--calc-button-color);
    border-radius: var(--button-radius);
    border: solid 1px var(--border-color);
    padding: 10px 100px;
    margin: 5px 0px 15px 0px;
}

.counteract-container button:active {
    background-color: var(--calc-button-color-active);
}

/* ===================================
   RESULTS
   =================================== */
.result-container {
    display: flex;
    flex-direction: column;
    border: dashed 1px var(--border-color);
    border-radius: var(--button-radius);
    min-height: 125px; 
    width: 90%;
    max-width: 600px;
}

.result-container .label {
    padding: 10px 15px;
}

.result-placeholder {
    text-align: center;
    vertical-align: center;
    color: var(--font-color-secondary);
    width: 80%;
    background: none;
    padding: 10px 15px;
    border-radius: var(--button-radius);
    align-self: center;
}

.result-success {
    text-align: center;
    vertical-align: baseline;
    color: var(--font-color-secondary);
    width: 80%;
    background: var(--success-message-background);
    color: var(--success-message-text);
    padding: 10px 15px;
    border-radius: var(--button-radius);
    align-self: center;
}

.result-failure {
    text-align: center;
    vertical-align: center;
    color: var(--font-color-secondary);
    min-width: 80%;
    max-width: 90%;
    background: var(--failure-message-background);
    color: var(--failure-message-text);
    padding: 10px 15px;
    margin-bottom: 15px;
    border-radius: var(--button-radius);
    align-self: center;
}

/* ===================================
   FOOTER
   =================================== */
.github-icon{
    fill: var(--font-color-main);
    padding: 10px;
}