@import url('https://fonts.googleapis.com/css2?family=Source+Sans+3:ital,wght@0,400;0,700;1,400;1,700&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Arvo&display=swap');
html{
    height:100%;
}
body{
    margin:0px;
    height:100%;
    display:flex;
    flex-direction:column;
    background-color:#f6f3eb;
    font-family: 'Source Sans 3', sans-serif;
}
#indexWrapper{
    height:80%;
    display:flex;
    flex-direction:column;
    justify-content:space-between;
    align-items:center;
}
#indexLogo{
    width:75%;
}
#indexCenter{
    display:flex;
    flex-direction:column;
    align-items:center;
    justify-content:center;
    height:67%;
}
#indexCenterText{
    font-family: 'Arvo', serif;
    font-size:36px;
    margin:10px;
}
#indexButtons{
    height:33%;
    margin:10px 20px;
    text-align:center;
    font-size:20px;
    font-weight:normal; 
    width:100%;
    display:flex;
    flex-direction:column;
    justify-content:end;
}
.indexButton{
    margin:10px 20px;
    padding:7px;
    border-radius:3px;
}
#logIn{
    background-color:white;
}
#signUp{
    background-color:rgb(158, 84, 84)
}
#loginWrapper{
    height:100%;
    display:flex;
    flex-direction:column;
    justify-content:space-between;
    align-items:stretch;
}
#loginHeader{
    background-color:#3c3b6e;
    height:10%;
    display:flex;
    flex-direction:row;
    align-items:end;
    justify-content:space-between;
}
#loginHeader h3{
    margin:10px;
    font-size:20px;
    font-weight:normal;
    color:white;
}
#loginHeader a{
    margin:5px 10px;
    font-size:24px;
    font-weight:normal;
    color:white;
    text-decoration:none;
}
#loginMiddle{
    display:flex;
    flex-direction:column;
    height:80%;
    justify-content:space-between;
}
#loginFields{
    display:flex;
    flex-direction:column;
    margin:20px 20px;
}
#loginFields input{
    font-size:16px;
    background-color:rgba(0,0,0,0);
    border:none;
    margin:20px 0px;
    padding:10px 0px;
    border-bottom: 2px solid rgb(110, 110, 110);
}
#loginFields input:focus{
    outline:none;
    border-bottom: 2px solid #6968be;
}
#loginFields a{
    text-decoration:none;
}
#loginFields a:hover{
    text-decoration:underline;
}
#forgot{
    font-weight:bold;
    color:#6968be;
    font-size:18px;
    margin:5px 0px;
}
#forgot:hover{
    text-decoration:underline;
}
#need{
    color:black;
}
#loginFields h2{
    font-size:16px;
    color:rgb(82, 155, 82);
    font-weight:normal;
}
#errorLabel{
    margin:5px 0px;
    font-size:18px;
    font-weight:normal;
    color:red;
}

#googleLoginBox{
    display:flex;
    flex-direction:row;
    align-items:stretch;
    border:solid black 1px;
    border-radius:3px;
    margin:20px 20px;
    justify-content:center;
    padding:10px;
}
#googleLoginBox h2{
    margin:0px;
    font-weight:normal;
    font-size:18px;
}
#googleLoginBox img{
    width:25px;
    margin:0px 5px;
}
#loginFooter{
    background-color:#3c3b6e;
    height:10%;
    display:flex;
    flex-direction:row;
    align-items:center;
    justify-content:space-evenly;
    width:100%;
}
#loginFooter h3{
    margin:0px;
    font-size:20px;
    font-weight:normal;
    color:white;
}
.navCol{
    display:flex;
    height:100%;
    flex-direction:column;
    align-items:center;
    justify-content:center;
    width:20%;
}
.navTitle{
    color:#b1afa7;
    font-size:12px;
    text-align:center;
    margin:5px 0px;
}
.navTitleA{
    color:#f6f3eb;
    font-size:12px;
    text-align:center;
    margin:5px 0px;
}
.navItem{
    height:50%;
    margin:5px 0px 0px 0px;
}
.navIcon{
    height:100%;
}
#profileWrapper{
    height:80%;
    display:flex;
    flex-direction:column;
    justify-content:start;
    align-items:stretch;
    overflow:auto;
    background: url('https://www.tripsavvy.com/thmb/YDUcaboLp0PTUnaiJgfGMeGrfSA=/1500x0/filters:no_upscale():max_bytes(150000):strip_icc()/capitol-panoramic-56a236e95f9b58b7d0c7f838-7a8a87c96de14a159dc801890a28d81e.jpg');
    background-size:cover;
    background-position:center;
}
#profileBox{
    display:flex;
    flex-direction:column;
    margin:20px;
    border-radius:10px;
    border:solid 3px  rgb(157, 74, 74);
    background-color: #f6f3ebc6;
    box-shadow:0px 3px 10px;
}
#quizBox{
    display:flex;
    flex-direction:column;
    margin:20px;
    border-radius:10px;
    border:solid 3px  rgb(157, 74, 74);
    background-color: #f6f3ebc6;
    box-shadow:0px 3px 10px;
}
#quizHeader{
    margin:10px 20px 5px 20px;
    font-weight:bold;
    font-size:28px;
}
#quizSub{
    margin:5px 20px;
    font-weight:normal;
    font-size:20px;
    color:rgb(71, 71, 71)
}
#question-container{
    font-size:18px;
    margin: 5px 0px;
}
#explanation{
    font-size:20px;
    margin:10px 0px;
}
#youScore{
    font-size:22px;
    font-weight:bold;
    margin: 20px 30px;
    color: rgb(204, 173, 0);
}
#options-container{
    margin:5px 0px;
}
#quizRow{
    margin:5px 0px;
    display:flex;
    flex-direction:row;
    justify-content:space-between;
    width:100%;
}
#check-button{
    font-size:18px;
    font-weight:bold;
    padding:5px 10px;
    border-radius:3px;
    background-color:rgb(132, 185, 189);
}
#next-button{
    font-size:18px;
    font-weight:bold;
    padding:5px 10px;
    border-radius:3px;
    background-color:rgb(236, 220, 75);
}
#quiz{
    margin:5px 20px 20px 20px;
    display:flex;
    flex-direction:column;
    justify-content:start;
    align-items:start;
}
#quizLine{
    width:90%;
    border:solid gray 1px;
    margin:0px;
    align-self:center; 
}
label {
    display: flex;
    margin: 10px 0;
    flex-direction:row;
}
#results {
    display: none;
}
#checklistWrapper{
    height:80%;
    display:flex;
    flex-direction:column;
    justify-content:start;
    align-items:stretch;
    overflow:auto;
    background: url('https://www.tripsavvy.com/thmb/YDUcaboLp0PTUnaiJgfGMeGrfSA=/1500x0/filters:no_upscale():max_bytes(150000):strip_icc()/capitol-panoramic-56a236e95f9b58b7d0c7f838-7a8a87c96de14a159dc801890a28d81e.jpg');
    background-size:cover;
    background-position:center;
}
.checkLabel{
    font-weight:normal;
    margin:10px 25px;
    font-size:18px;
}
.checkLabel a{
    font-weight:normal;
    text-decoration:underline;
    font-size:18px;
    color:rgb(204, 173, 0);
}
#profileHeader{
    display:flex;
    flex-direction:row;
    justify-content:space-between;
    align-items:center;
    margin: 20px;
    font-size:24px;
}
#checklistHeader{
    display:flex;
    flex-direction:row;
    justify-content:space-between;
    align-items:center;
    margin: 20px;
    font-size:20px;
}
#profileHeader p{
    margin:0px;
}
#profileHeader img{
    width:35px;
    padding:5px;
}
#checklistHeader img{
    width:35px;
    padding:5px;
}
.checklistItem{
    display:flex;
    flex-direction:column;
    align-items:start;
    margin:10px 20px;
    font-size:16px;
}
.checklistRow{
    display:flex;
    flex-direction:row;
    align-items:center;
    justify-content:start;
    font-weight:bold;
}
.checklistRow p{
    margin:0px 5px;
}
.profileLabel{
    font-weight:bold;
    margin:10px 20px;
    font-size:16px;
}
.infoLabel{
    font-weight:normal;
    margin:10px 20px;
    font-size:18px;
}
#guest{
    background-color:rgb(90, 104, 155)
}
#guestWrapper{
    height:80%;
    display:none;
    flex-direction:column;
    justify-content:space-between;
    align-items:center;
}
#guestWrapper h4{
    font-size:24px;
    text-align:center;
    margin:0px 5px;
}
#guestWrapper a{
    text-decoration:none;
    color:rgb(40, 168, 210);
}
#logout1{
    align-self:center;
    font-size:18px;
    font-weight:bold;
    color:#2c2c2c;
    background-color:#b03030;
    border-radius:3px;
    margin: 20px 0px;
    padding:5px 10px;
}
#logout2{
    align-self:center;
    font-size:18px;
    font-weight:bold;
    color:#2c2c2c;
    background-color:#b03030;
    border-radius:3px;
    margin: 20px 0px;
    padding:5px 10px;
}
#setupWrapper{
    display:flex;
    height:80%;
    flex-direction:column;
    justify-content:start;
    align-items:stretch;
}
#setupWrapper h4{
    margin:10px 20px;
    font-size:22px;
}
#setupWrapper h5{
    margin:0px 20px;
    font-size:18px;
    font-weight:normal;
}
.setupInput{
    margin:10px 20px;
    font-size:14px;
    padding:10px 5px;
    border:solid 1px rgba(0, 0, 0, 0.394);
    border-radius:3px;
}
#birthInput{
    padding:10px 5px;
    margin: 0px 20px 5px 20px;
}
#continue{
    align-self:center;
    font-size:18px;
    font-weight:bold;
    color:#2c2c2c;
    background-color:#6fb75c;
    border-radius:3px;
    margin: 10px 0px;
    padding:5px 10px;
}
#mapWrapper{
    border: 2px solid #000000; 
    overflow: hidden; 
    margin: 15px auto;
    width:90%;
    max-width:440px;
    max-height:670px;
}
#map{
    border: none;
    margin:10px;
    width:100%;
}
#pollTitle{
    text-align:center;
    font-size:20px;
    font-weight:bold;
    margin: 5px 10px;
}
#pollDesc{
    margin:5px 20px;
    text-align:center;
}
#repMiddle{
    display:flex;
    flex-direction:column;
    height:80%;
    justify-content:start;
    overflow:auto;
}
#repTitle{
    font-weight:bold;
    font-size:24px;
    margin:10px 10px;
}
#repDescription{
    margin:10px 10px;
    font-size:18px;
}
.repDesc{
    display:none;
}
.repContact{
    display:none;
}
.dataInput{
    margin:5px 15px;
    font-size:14px;
    padding:5px 5px;
    border:solid 1px rgba(0, 0, 0, 0.394);
    border-radius:3px;
}
#dataInputWrapper{
    display:flex;
    flex-direction:column;
    justify-content:center;
    align-items:center;
}
#dataInputLabels{
    display:flex;
    flex-direction:row;
    align-items:center;
    justify-content:space-between;
    width:100%;
}
#dataInputLabels p{
    margin: 10px;
}
#searchInput{
    font-size:20px;
    box-shadow: 0px 2px 5px;
    background-color: #7dc06c;
    border:solid 1px rgba(0, 0, 0, 0.394); 
    border-radius:3px;
    margin:10px 10px;
    width:60%;
    align-self:center;
    justify-content:center;
}
#outputDataWrapper{
    display:flex;
    flex-direction:column;
    justify-content:start;
    align-items:center;
}
#federalRepText{
    align-self:start;
    margin:5px 20px;
    font-size:20px;
}
#stateRepsText{
    align-self:start;
    margin:5px 20px;
    font-size:20px;
}
#stateRepsMore{
    align-self:start;
    margin:5px 20px;
    font-size:16px;
    color:rgb(96, 93, 107);
}
#federalRepMore{
    align-self:start;
    margin:5px 20px;
    font-size:16px;
    color:rgb(96, 93, 107);
}
#federalLevelRep{
    display:flex;
    flex-direction:row;
    width:90%;
    overflow-x:auto;
    justify-content:start;
}
#stateLevelRep{
    display:flex;
    flex-direction:row;
    width:90%;
    overflow-x:auto;
    justify-content:start;
}
.rep{
    display:flex;
    flex-direction:column;
    min-width:fit-content;
    align-items:center;
    border:double 5px;
    border-radius: 5px 5px 0px 0px;
    margin:10px;
    box-shadow:0px 3px 5px;
}
.rep p img{
    object-fit: contain;
    height: 200px;
    width:100%;
}
.repLabel{
    font-style:italic;
}
.rep p{
    margin:0px 0px;
}
#repPopup{
    display:none;
    flex-direction:column;
    height:80%;
    background-image: url("images/bluebg.png");
    background-size:cover;
    background-attachment:local;
    overflow:auto;
    background-color: #f6f3eb;
}
#repPopupTop{
    display:flex;
    flex-direction:row;
    align-items:center;
}
#repPopupTopLeft{
    display:flex;
    flex-direction:column;
    justify-content:center;
    align-items:center;
    min-width:fit-content;
    margin:50px 0px 5px 35px;
}
#repPopupName{
    text-align:center;
    margin:5px 0px 0px 0px;
    font-weight:bold;
    font-size:20px;
}
#repPopupTitle{
    text-align:center;
    margin:0px;
    font-style:italic;
    font-size:20px;
}
#hLine{
    width:90%;
    border: solid gray 1px;
}
#popupLine{
    width:90%;
    border: solid #3c3b6e 3px;
    margin:10px 35px;
}
#repPopupCloseButton{
    margin:20px 10px;
    color:#6361b1;
    font-weight:bold;
    font-size:24px;
    text-align:center;
}
#repPopupDesc{
    margin:10px 20px;
}
#repPopupContact{
    margin:10px 10px;
}
#repPopupContact a{
    text-decoration:underline;
    color:rgb(204, 173, 0);
}
#repPopupImage{
    height:250px;
    border:double 5px;
}
#repPopupImage img{
    object-fit: contain;
    height: 250px;
    width:100%;
}
#repPopupTopRight{
    display:flex;
    flex-direction:column;
    height:250px;
    justify-content:center;
    align-items:center;
    width:100%;
}
#repPopupBottom{
    display:flex;
    flex-direction:column;
    align-items:center;
    justify-content:center;
}
.hidden{
    opacity:0;
}
#homeWrapper{
    height:80%;
    display:flex;
    flex-direction:column;
    justify-content:start;
    align-items:stretch;
    overflow:auto;
    background: url('https://www.tripsavvy.com/thmb/YDUcaboLp0PTUnaiJgfGMeGrfSA=/1500x0/filters:no_upscale():max_bytes(150000):strip_icc()/capitol-panoramic-56a236e95f9b58b7d0c7f838-7a8a87c96de14a159dc801890a28d81e.jpg');
    background-size:cover;
    background-position:center;
}
#bgImage{
   height:100%;
    
}
#noBirthdate{
    display:flex;
    flex-direction:column;
    align-items:center;
    width:100%;
}
#all{
    backdrop-filter:blur(5px);
    height:100%;
}
#hall{
    backdrop-filter:blur(5px);
}
#birthdate{
    display:flex;
    flex-direction:column;
    align-items:center;
    width:100%;
}
#homeBottom{
    display:flex;
    flex-direction:column;
    align-items:center;
    width:100%;
}
.electionBoxHeader{
    margin:20px 0px 0px 0px;
    font-size:20px;
}
.electionBoxSubHeader{
    margin:0px;
    font-size:18px;
    color:gray;
}
.electionBoxHeaderB{
    margin:20px 0px 0px 0px;
    font-size:26px;
}
.electionBoxLine{
    width:95%;
    border: solid 1px gray;
    margin:5px 0px;
}
.electionDate{
    font-weight:bold;
    margin:10px 10px 20px 10px;
    font-size:24px;
}
.electionDateB{
    font-weight:bold;
    margin:10px 10px 20px 10px;
    font-size:28px;
}
.generalElectionBox{
    display:flex;
    flex-direction:column;
    align-items:center;
    width:90%;
    border:double 10px rgb(74, 92, 157);
    margin:20px;
    border-radius:20px 20px 20px 20px;
    align-self:center;
    background-color:#ffffffc6;
    box-shadow:0px 3px 10px;
}
.generalElectionBoxB{
    display:flex;
    flex-direction:column;
    align-items:center;
    width:90%;
    border:double 10px rgb(157, 74, 74);
    margin:20px;
    border-radius:20px 20px 0px 0px;
    align-self:center;
    background-color:#ffffffc6;
    box-shadow:0px 3px 10px;
}
.yourElectionBox{
    display:flex;
    flex-direction:column;
    align-items:center;
    width:90%;
    border:double 10px rgb(157, 74, 74);
    margin:20px;
    border-radius:20px 20px 0px 0px;
    align-self:center;
    background-color:#ffffffc6;
    box-shadow:0px 3px 10px;
}
.presidentElectionBox{
    display:flex;
    flex-direction:column;
    align-items:center;
    width:90%;
    border:double 10px rgb(74, 92, 157);
    margin:20px;
    border-radius:0px 0px 20px 20px;
    align-self:center;
    background-color:#ffffffc6;
    box-shadow:0px 3px 10px;
}
.whyVoteBox{
    display:flex;
    flex-direction:column;
    align-items:center;
    width:90%;
    border:solid 3px rgb(157, 74, 74);
    margin:20px;
    border-radius:10px 10px 10px 10px;
    align-self:center;
    background-color:#f6f3ebc6;
    box-shadow:0px 3px 10px;
}
#whyList{
    margin: 10px;
}
#whyList li{
    margin:7px 0px;
}
#whyVoteHeader{
    margin:10px;
    font-size:22px;
    font-weight:bold;
}
.whyVoteSub{
    margin: 5px;
    font-size:18px;
    font-weight:bold;
}
.whyVoteDesc{
    margin: 5px 20px;
    font-size:16px;
}
#whyVoteLine{
    width:90%;
    border:solid gray 1px;
    margin:0px;
}
#whyVoteQuizPrompt{
    margin: 5px 20px 20px 20px;
    font-size:18px;
}
.whyVoteBox a{
    text-decoration:underline;
    color:rgb(184, 156, 0);
}
.disabled{
    display:none;
}