:root {
   --blue: #4b7190;
   --red: #aa485f;
   --bluehover: #3c5a72;
   --redhover: #951d38;
   --darkgrey: #666;
   --lightgrey: #aaa;
   --yellow: #DB9D47;
   --exception: #592252;
   --white: #F7F7F9;
   --error: #D67AB1;
}

body {
   color: var(--darkgrey);
   font-family: system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif;
   margin: 16px;
   font-weight: 400;
}

h1 {
   text-align: center;
   font-size: 1.25rem;
   font-weight: 600;
}

h2 {
   margin: 0;
   font-size: 1.1rem;
   font-weight: 500;
}

strong {
   text-transform: uppercase;
   text-decoration: underline;
}

h1 {
   padding: 0 2em;
}

@media only screen and (min-width: 600px) {
   h1 {
      font-size: 1.5rem;
   }
   h2 {
      font-size: 1.35rem;
   }
}

@media only screen and (min-width: 1200px) {
   h1 {
      font-size: 1.6rem;
   }
   h2 {
      font-size: 1.4rem;
   }
}

/* Winner */

.winner {
   display: none;
   text-align: center;
}

.winner h2 {
   margin-bottom: 1em;
}

.winner h3 {
   margin-bottom: 0;
}

.current-state {
   font-style: italic;
   margin-bottom: 1em;
}

/* Maine and Nebraska input boxes */

.maine,
.nebraska {
   height: 0;
   overflow: hidden;
   -webkit-transform: height 0.2s ease;
       -ms-transform: height 0.2s ease;
           transform: height 0.2s ease;
}

.maine.active,
.nebraska.active {
   border: 3px solid var(--darkgrey);
   border-radius: 3px;
   padding: 1em;
   margin: 1em 0;
   height: auto;
}

.exception-state h3 {
   display: -webkit-box;
   display: -ms-flexbox; 
   display: flex;
   -webkit-box-align: center;
       -ms-flex-align: center;
           align-items: center;
   -webkit-box-pack: justify;
       -ms-flex-pack: justify;
           justify-content: space-between;
}

h3 {
   margin-top: 0;
}

/* Progress Bar */

.hurdle {
   width: 100%;
   height: 20px;
   display: -ms-grid;
   display: grid;
   -ms-grid-columns: 1fr 1fr;
   grid-template-columns: 1fr 1fr;
}

.hurdle-dem {
   position: relative;
   border: 2px solid var(--blue);
   border-radius: 3px 0 0 3px;
}

.bar-dem {
   position: absolute;
   top: 0;
   left: 0;
   height: 100%;
   background-color: var(--blue);
}

.hurdle-rep {
   position: relative;
   border: 2px solid var(--red);
   border-radius: 0 3px 3px 0;
}

.bar-rep {
   position: absolute;
   top: 0;
   right: 0;
   height: 100%;
   background-color: var(--red);
}

.flag {
   padding-top: 5px;
   text-align: center;
   font-weight: 700;
}


/* Candidate Info */

.tables-wrapper {
   display: -ms-grid;
   display: grid;
   -ms-grid-columns: 1fr;
   grid-template-columns: 1fr;
   grid-gap: 26px;
}

@media screen and (min-width: 600px) {
   .tables-wrapper {
      -ms-grid-columns: 1fr 16px 1fr;
      grid-template-columns: 1fr 1fr;
      grid-gap: 16px;
   }
}

@media screen and (min-width: 1200px) {
   .tables-wrapper {
      -ms-grid-columns: 1fr;
      grid-template-columns: 1fr;
      grid-gap: 16px;
   }
}

.table-wrapper {
   padding: 1em;
   border-radius: 3px;
}

.table-wrapper .candidate {
   display: -webkit-box;
   display: -ms-flexbox; 
   display: flex;
   -webkit-box-align: center;
       -ms-flex-align: center;
           align-items: center;
}

.table-wrapper .votes {
   width: 50%;
   -webkit-box-flex: 0;
       -ms-flex: 0 0 auto;
           flex: 0 0 auto;
}

.table-wrapper .elect {
   width: calc(50% - 32px);
}

.table-wrapper .candidate h2:last-child {
   text-align: right;
   margin-left: auto;
}

.elect {
   display: -webkit-box;
   display: -ms-flexbox; 
   display: flex;
   -webkit-box-align: center;
       -ms-flex-align: center;
           align-items: center;
}

.show-table-btn,
.close-state-btn {
   position: relative;
   width: 32px;
   height: 32px;
   margin-right: 8px;
   background: none;
   border: 2px solid var(--darkgrey);
   border-radius: 3px;
   -webkit-box-flex: 0;
       -ms-flex: 0 0 auto;
           flex: 0 0 auto;
   text-align: center;
   display: -webkit-box;
   display: -ms-flexbox; 
   display: flex;
   -webkit-box-align: center;
       -ms-flex-align: center;
           align-items: center;
   -webkit-box-pack: center;
       -ms-flex-pack: center;
           justify-content: center;
}

.show-table-btn:hover,
.show-table-btn:focus,
.close-state-btn:hover,
.close-state-btn:focus,
.close-winner-btn:hover,
.close-winner-btn:focus {
   background: var(--darkgrey);
   color: #fff;
   cursor: pointer;
}


.close-state-btn {
   margin-right: 0;
}

.show-table-btn::after {
   content: "\002B";
   position: absolute;
   top: 3px;
   font-size: 1.2rem;
   left: 50%;
   margin-left: -5.5px;
}

.show-table-btn[aria-expanded="true"]::after {
   content: "\2212";
}

.table-wrapper-rep {
   border: 3px solid var(--red);
}

.table-wrapper-dem {
   border: 3px solid var(--blue);
}

.table {
   overflow: hidden;
   display: flex;
   flex-direction: column;
   gap: 2px;
   font-weight: 500;
}

.table[aria-expanded="true"] {
   height: auto;
}

.table[aria-expanded="true"]:has(.table-row) {
   margin-top: 8px;
}

.table[aria-expanded="false"] {
   height: 0;
}

.map-totals {
   width: 100%;
}

.map {
   position: relative;
}

@media screen and (min-width: 1200px) {
   .map-totals {
      display: -webkit-box;
      display: -ms-flexbox; 
      display: flex;
      -webkit-box-align: start;
          -ms-flex-align: start;
              align-items: flex-start;
   }
   .map {
      width: 75%;
   }
   .candidates {
      width: 25%;
   }
}

.table-row {
   display: -webkit-box;
   display: -ms-flexbox; 
   display: flex;
   -webkit-box-pack: justify;
       -ms-flex-pack: justify;
           justify-content: space-between;
}


/* Map and state colors */

.map svg {
   width: 75%;
}

.map svg a:hover path,
.map svg a:focus path {
   fill: var(--lightgrey) !important;
}

.state[data-candidate=""] path {
   fill: var(--darkgrey) !important;
}

.map .state[data-candidate="rep"] path {
   fill: var(--red) !important;
}
.map .state[data-candidate="rep"] path:hover {
   fill: var(--redhover) !important;
}

.map .state[data-candidate="dem"] path {
   fill: var(--blue) !important;
}
.map .state[data-candidate="dem"] path:hover {
   fill: var(--bluehover) !important;
}

/* Washington DC square */
#doc {
   position: absolute;
   bottom: 35%;
   right: 0;
}
@media only screen and (min-width: 600px) {
   #doc {
      right: 15%;
   }
}
.square-state {
   background-color: var(--darkgrey);
   border: 0;
   padding: .5em 1em;
   color: #fff;
   font-size: .9rem;
   border-radius: 3px;
}
.square-state:hover,
.square-state:focus {
   cursor: pointer;
   background-color: var(--lightgrey);
   color: var(--darkgrey);
}
.square-state[data-candidate="rep"] {
   background-color: var(--red);
   color: #fff;
}
.square-state[data-candidate="rep"]:hover {
   background-color: var(--redhover);
}
.square-state[data-candidate="dem"] {
   background-color: var(--blue);
   color: #fff;
}
.square-state[data-candidate="dem"]:hover {
   background-color: var(--bluehover);
}

.exception-buttons {
   display: -ms-grid;
   display: grid;
   -ms-grid-columns: 1fr 0.5em 1fr;
   grid-template-columns: 1fr 1fr;
   grid-gap: 0.5em;
   margin-bottom: 8px;
}

.input-group {
   display: -ms-grid;
   display: grid;
   -ms-grid-columns: 1fr 1fr;
   grid-template-columns: 1fr 1fr;
   margin-bottom: 8px;
}

button.update {
   background-color: var(--darkgrey);
   border: 0;
   color: #fff;
   padding: 8px 16px;
   display: block;
   width: 100%;
}

button.update:hover,
button.update:focus {
   background-color: var(--exception);
}

.error {
   color: var(--error);
   font-weight: 700;
   margin-bottom: 8px;
}

footer {
   margin-top: 10px;
   text-align: center;
}

.logo {
   height: 36px;
}