body{
    font-size: 1vw;
    margin: 0;
    padding: 0;
    background-color: #001407;
    background-image: url(images/gplay.png);
}
html{
    scroll-behavior: smooth ;
}
p,
h1,
h2,
h3,
h4{
    color: white;
    font-weight: 100;
}
h1{
    font-size: 7em;
    margin-top: 0;
    margin-bottom: 0;
    text-shadow: black .05em .05em;
}
h2{
    text-align: center;
    font-size: 3.5em;
    margin-top: 1.25em;
    margin-bottom: 1.25em;
}

header{
    width: 100%;
    height: 100vh;  
    background-image: url(images/image.jpg);
    background-repeat: no-repeat;
    background-size: cover;
    background-position: center;
    box-shadow: -2em -2em 1000px white ;
    border-bottom: solid black 2px;

}

section{
    border-radius: 40px;
}

header>div img{
    width: 6em;
}
header div{
    display: flex;
    flex-direction: column;
    justify-content: space-around;
    width: -moz-fit-content;
    width: fit-content;
    margin-left: auto;
    margin-right: auto;
    height: 100%;   
    margin-bottom: auto;
    margin-top: auto;
}
.logo{
    width: 18em;
    position: absolute;
}
header>div a{
    width: fit-content;
    width: -moz-fit-content;
    margin-left: auto;
    margin-right: auto;
    /* position: relative;
    animation-name: scroll-down;
    animation-duration: 4s; */
}
/* @keyframes scroll-down{                                          To animate the hero pointer up and down
    0% {up: 0; down: 0;}
    33% {up:20px; down: 0;}
    66%{up:0; down: 20px;}
    100%{up: 20px;down:0}
} */

.job-list{
    background-color: #667265;
}


.job-list div{
    width: 33%;
}

.job-list ul{
    list-style: none;
}
.job-list>div>ul>li a{
    font-family: 'Playfair Display', serif;
    color: white;
    font-weight: 100;
}
.job-list>div>ul>li a:hover{
    color: lime;
}
.job-list>div>ul>li a:focus{
    color:#667265;
    background-color: white;
}
section{
    display: flex;
    flex-wrap: wrap;
    width: 67%;
    margin-left: auto;
    margin-right: auto;
}


.pay-period{
    display: flex;
    flex-wrap: wrap;
    width: 100%;
    justify-content: space-around;
}
.pay-period h3{
    width: 100%;
    
}
.section-main-div{
    width: 100%;
    margin-bottom:2em ;
    background-color: #667265;
    border-radius: 25px;
}
.tax-name{
    width: 28.94%;
}
section p{
    font-size: 1.3em;
}
.pay-period,
.tax-name,
.tax-percent{
    font-family: 'Questrial', sans-serif;
}
.tax-percent{
    width:10.84%;
}
.end-deduction{
    width: 31.59%;
    text-align: center;
}
.end-deduction p{
    border-bottom: white 2px solid;
    color: lime;
    
}
.selected-job   {
    color:green;
    
}
.three-incomes{
    display: flex;
    width: 100%;
    justify-content: space-around;
}
.incomes{
    width: 25%;
    background-color: #667265;
    display: flex;
    flex-direction: column;
    border-radius: 40px;

}

h3{
    font-size: 2em;
}

.three-incomes h4{
    width: 100%;
    font-size: 1.5em;
    margin-left: 0;
    margin-right: 0;
    text-align: center;
    margin-top: .75em;
    text-decoration: underline white;
}

.incomes div{
    width: 100%;
    background-color: white;
    height: .1em;


}
.calculate-intro{
    display: flex;
    flex-wrap: wrap;
    justify-content: space-around;
}
.vertical-line{
    height: 100%;
    background-color: white;
    width: .1em;
}
.your-choice{
    width: 50%;
    font-size: 1.4em;
    display: flex;
    justify-content: space-around;
    height: fit-content;
    margin-top: auto;
    margin-bottom: auto;
}
.calculate-intro h3{
    width: 25%;
}
#job{
    color: lime;
    
}
#grossYear,
#grossMonth,
#netYear,
#netMonth,
#deductYear,
#deductMonth{
    color: lime;
}
.three-incomes p{
    font-size: 1.75em;
    margin-top: .5em;
    margin-bottom: .5em;
    text-align: center;
}
.house-calc{
    width: 100%;
    display: flex;
    flex-wrap: wrap;
    justify-content: space-around;
    background-color: #667265;
    margin-top: 2em;
    border-radius: 25px;
}
#houseRange{
    width: 25%;
    color: lime;
}
footer{
    background-color: #576356;
    margin-top: 10em;
}
footer img{
    width: 15em;

}
footer div{
    width: 50%;
    display: flex;
    flex-wrap: wrap;
    justify-content: space-around;
    margin-left: auto;
    margin-right: auto;
}
footer p{
    margin-top: auto;
    margin-bottom: auto;
}
input{
    margin: 0;
    width: 100%;
    text-align: center;
    font-family: 'Questrial', sans-serif;
    font-size: 1.25em;
    border: none;
    background-color: #667265;
    height: 100%;
}
.pay-period h3{
    width: 50%;
    text-align: center;
    margin-left: 25%;
    margin-right: 25%;
    border-bottom: solid .1em white;
}
.checkbook{
    background-color: #667265;
    display: flex;
    flex-wrap: wrap;
    padding: 2em;
}
.checkbook p{
    margin: 0;
}
.transaction{
    display: flex;
    flex-wrap: wrap;
    width: 100%;
    height: 2em;
    border-top: white solid .1em;
}
.transaction form{
    display: flex;
    flex-wrap: wrap;
    width: 70%;
    height: 100%;
}
option{
    height: 100%;
}
.date{
    width: 10%;
    border-right: white solid .1em;
}
.transactionDetails{
    width: 60%;
    border-right: white solid .1em;
}
.amountExchanged{
    width: 25%;
    border-right: white solid .1em;
}
.checkbook select{
    width:10%;
    font-size: 1em;
    background-color: #98C694;
    border: 0;
    border-right: white solid .1em;
}
.balance{
    width: 20%;
    background-color: #667265;
    text-align: center;
    
}
.checkbook-labels{
    display: flex;
    flex-wrap: wrap;
    width: 100%;
}

.cb-lbl-date{
    width: calc(72.11%/950.33*100);
    text-align: center;
}
.cb-lbl-details{
    width: calc(429.5%/1009.29*100);
    text-align: center;
}
.cb-lbl-w-d{
    width: calc(182.23%/1009.29*100);
    text-align: center;
    
}
.cb-lbl-emptyspace{
    width: 11.8%;

}

input{
    color: white;
}
.cb-lbl-balance{
    text-align: center;
    
}
.job-dropdown{
    display: none;
    border: solid 1px white;
    border-radius: 10px;
    height: 2em;
    padding: 0;
    width: 80%;
    margin: auto;
    background-color:#667265;
    margin-top: 1em;
    margin-bottom: 1em;
    color:white;
    font-size: 4em;
}
.job-dropdown:hover{
    background-color: #576356;
}

@media (max-width:870px){
    header>div>a>img{
        width: 20em;
    }
    header div{
        justify-content: space-evenly;
    }
    h1{
        font-size: 12em;
    }
    .logo{
        width: 38em;
    }
    h2{
        font-size: 8em;
        text-decoration: underline 2px;
        /* margin-bottom: 0; */
    }
    .job-list{
        flex-direction: column;
    }
    .joblist {
        display: none;
    }
    .job-list li{
        font-size: 4em;
        width: 100%;
        border-bottom: #001407 1px solid;
    }
    .job-list ul{
        width: 100%;
    }
    .job-list div{
        width: 100%;
    }
    .job-dropdown{
        display: inline-block;
    }
    .calculate-intro{
        flex-direction: column;
    }
    .calculate-intro h3{
        width: 100%;
        font-size: 5em;
        text-align: center;
    }
    .vertical-line{
        height: .2em;
        width: 100%;
    }
    .your-choice{
        width: 100%;
        font-size: 3em;
        text-align: center;
    }
    .pay-period{
        font-size: 2em;
    }
    .three-incomes{
        flex-direction: column;
    }
    .incomes{
        width: 100%;
        font-size: 2.5em;
        margin-top: 4em;
    }
    .house-calc{
        font-size: 2.5em;
        text-align: center;
    }
    .checkbook{
        font-size: 2em;
    }
    footer div{
        font-size: 3.5em;
    }
    footer{
        height: 50em;
    }
}