:root{
    --primary-color: rgba(248, 248, 248, 0.836);
    --secondary-color: #b6b7d5;
    --text-color: #000;
    --darkmode-toggle: rgb(255, 166, 0);
    --primary-accent-color: #4E9F3D;
    --secondary-accent-color: #303F9F;
    --tertiary-accent-color: #D32F2F;
}
/* General */
* { 
    -moz-box-sizing: border-box; 
    -webkit-box-sizing: border-box; 
     box-sizing: border-box; 
}
html,
body{
    height: 100%;
}
body{
    margin: 0;
    font-family: 'Montserrat', sans-serif;
    color: var(--text-color);
    background: var(--secondary-color);
    line-height: 1.6;
}
img{
    width: 100%;
}
/* Typography */
h1,
h2,
p,
ul,
li{
    margin: 0;
    padding: 0;
}
h1, h2{
    font-weight: 300;
    text-align: center;
    font-size: 1.3rem;
}
.section-style h2{
    margin-bottom: .5em;
}
.hero-title{
    margin-bottom: 0.9em;
}
a{
    text-decoration: none;
}
.darkmode-info{
    font-size: .7rem;
    color: gray;
}
/* Nav */
#site-title{
    order: -1;
}
#ui-controls{
    order: 2;
    margin-top: 0.3em;
}
#nav-container{
    order: 1;
}
@media (orientation: landscape){
    #site-title{
        order: -1;
    }
    #ui-controls{
        order: 1;
        margin-top: 0.3em;
    }
    #nav-container{
        order: 2;
    }
}
.nav-header{
    background-color: var(--primary-color);
    color: var(--text-color);
    border-bottom: solid 1px var(--text-color);
}
.nav-container{
    display: flex;
    justify-content: space-between;
    align-items: center;
    flex-direction: column;
    text-align: center;
}
nav li{
    list-style: none;
    margin-bottom: 0.3em;
}
nav ul{
    flex-direction: column;
    margin: 0;
}
nav a{
    text-decoration: none;
    color: var(--text-color);
}
nav a:visited{
    color: inherit;
}
nav a:hover,
nav a:focus{
    color: var(--primary-accent-color);
    outline: none;
}
.current-page{
    border-bottom: 1px solid var(--primary-accent-color);
    color: var(--primary-accent-color);
}
.current-page:visited{
    color: var(--primary-accent-color);
}
/* NavBar dropdown */
@media (orientation: landscape) {
    .nav-container{
        flex-direction: row;
    }
    nav li{
        margin-left: 1em;
    }
    nav ul{
        flex-direction: row;
    }
    .nav-links{
        display: flex;
    }
    #toggle-navbar{
        display: none;
    }
    #nav-links-container{
        display: flex;
    }
}
/* Layout */
.width-container{
    max-width: 85%;
    margin: 0 auto;
}
@media (orientation: landscape){
    .width-container{
        max-width: 65%;
        margin: 0 auto;
    }
}
.section-style{
    display: flex;
    flex-direction: column;
    align-items: center;

    border: solid 1px var(--text-color);
    padding: 0.5em;
    margin-top: 1em;
    border-radius: 7px;
}
.calc-elements{
    text-align: center;
}
@media (orientation: landscape) {
    .calc-elements{
        display: flex;
    }
    .margin-elements{
        margin: 0 0.6em;
    }
}
.hero{
    display: flex;
    flex-direction: column;
    justify-content: center;
    height: 100%;
}
.hero-content{
    display: flex;
    flex-direction: column;
    padding: 1em 0;
}
.hero-info{
    text-align: center;
}
.hero-btn-section{
    margin: 0.9em 0;
}
.hero-img-section{
    display: flex;
    justify-content: center;
}
.calc-hero-img{
    max-width: 50%;
}
@media (orientation: landscape) {
    .hero-content{
        flex-direction: row;
    }
    .hero-info{
        display: flex;
        flex-direction: column;
        justify-content: space-between;
        font-size: 1.7rem;
        width: 70%;
    }
    .hero-btn-section{
        display: flex;
        justify-content: space-evenly;
        margin: 0.6em 0;
    }
    .hero-img-section{
        justify-content: flex-end;
        width: 30%;
    }
    .calc-hero-img{
        max-width: 75%;
    }
}

.material-icons{
    cursor: pointer;
}
.btn,
.input{
    border: none;
    font-size: 1.0rem;
}
.btn{
    display: inline-block;
    margin: 0;
    padding: 0.6em 1.2em;
    border-radius: 7px;
    outline: 0;
    cursor: pointer;
}
.ui-nav-buttons{
    margin: 0 0.5em;
}
.input{
    padding: 0.6em 1em;
    margin-bottom: 0.6em;
    text-align: center;
    width: 100%;
}
.input::-webkit-outer-spin-button,
.input::-webkit-inner-spin-button {
    -webkit-appearance: none;
    margin: 0;
}
.result-box{
    margin-top: 1em;
    border-radius: 6px;
    font-size: 0.9em;
    padding: 0.3em 0.7em;
    min-width: 85%;

    display: flex;
    flex-direction: column;
}
@media (orientation: landscape) {
    .result-box{
        min-width: 45%;
    }
}
.result-section{
    display: flex;
    align-items: center;
}
.total-earned-section{
    margin-bottom: 0.6em;
}
.darkmode-container{
    display: flex;
    align-items: center;
}
/* Modals - Layout */
#disclaimer-box{
    position: fixed;
    top: 0;
    left: 0;
    bottom: 0;
    right: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.762); /* Black w/ opacity */
}
#disclaimer-content {
    display: flex;
    flex-direction: column;
    
    background-color: var(--primary-color);
    color: var(--text-color);
    margin: 15% auto; /* 15% from the top and centered */
    padding: 1.3em;
    border: 2px solid var(--text-color);
    border-radius: 7px;
    width: 95%; /* Could be more or less, depending on screen size */
    align-items: center;
}
@media (orientation: landscape) {
    #disclaimer-content{
        width: 45%;
    }
}
#disclaimer-box .btn {
    width: 40%;
    margin: 2% auto;
}
.email-box{
    margin-top: 1em;
    padding: 0.6em;
    background-color: var(--primary-color);
    color: var(--text-color);
    
    text-align: center;
    border-radius: 5px;
    border: solid 2px var(--text-color)
}
/* Colors General */
.homepage-bg{
    background-image: linear-gradient(to right bottom, #d16ba5, #c777b9, #ba83ca, #aa8fd8, #9a9ae1, #8aa7ec, #79b3f4, #69bff8, #52cffe, #41dfff, #46eefa, #5ffbf1);
    color: #fff;
}
.app-info-section{
    background-color: var(--secondary-accent-color);
}
.gray-text{
    color: gray;
}
.text-accent{
    font-weight: 800;
}
.text-accent,
.text-accent2{
    color: var(--primary-accent-color);
}
.btn:hover,
.btn:focus{
    background-color: rgb(86, 67, 204);
    color: #fff;
    outline: none;
    box-shadow: rgb(80 63 205 / 50%) 0px 1px 35px;
}
.input:focus,
.input:active{
    outline: none;
    border-bottom: solid var(--primary-accent-color) 1.5px;
    color: var(--text-color);
}
.result-box{
    background: var(--primary-color);
    border: 2px var(--text-color) solid;
    color: var(--text-color);
}
.result-number{
    
    font-size: 1.2rem;
    margin-left: 0.4em;
}
#total-earned-el{
    color: var(--primary-accent-color);
}
#total-not-worked-el{
    color: var(--tertiary-accent-color);
}
#total-paid-el{
    
}
.primary-color{
    background-color: var(--primary-color);
    color: var(--text-color);
}
.secondary-color{
    background-color: var(--secondary-color);
    color: var(--text-color);
}
.input-color{
    border-bottom: solid var(--text-color) 1.5px;
    background: none;
    color: var(--text-color);
}
.primary-btn{
    text-shadow: rgb(0 0 0 / 12%) 0px 3px 8px;
    background: var(--text-color);
    color: var(--primary-color);
    border: 2px solid var(--text-color);
}
.alt-primary-btn{
    color: var(--text-color);
    background-color: none;
    border: 2px solid;
}
.hero-btn{
    border-radius: 15px;
    text-shadow: rgb(0 0 0 / 12%) 0px 3px 8px;
    color: #fff;
    border: 2px solid #fff;
}
.hero-btn:visited{
    color: #fff;
}
.darkmode-toggle{
    color: var(--darkmode-toggle);
}
.hero{
    background-color: rgba(0, 0, 0, 0.068);
}