/* ################
# Stylesheet used for Proejct 13by62 
# composed by M Tartaglia 2024
#
# Stylesheet utilizes fonts sourced from dafont.com
# and/or Google fonts
#
################### */

@import url('https://fonts.googleapis.com/css2?family=Overpass:ital,wght@0,100..900;1,100..900&display=swap');

:root {
  --ny_beige: #ffffe7cd;
  --ny_blue: #114D65;
  --ny_orange: #F27200;
  --ny_gray: #DCDCDC;
  --ny_dark: #B0B0B0;
  --ny_green: #008000;
  --ny_brown: #8D4710;
 }
::selection {
  background: #8D4710;
  color: white;
 }
 .blue {color: var(--blue);}
 .orange {color: var(--ny_orange);}
 .gray {color: var(--ny_gray);}
 .light {color: #EEEEEE;}
 .darkgray {color: var(--ny_dark);}
 .label {font-weight: bold;}
 .label:hover {text-shadow: -1px 0 white, 0 1px white, 1px 0 white, 0 -1px white, 0 0 3px black;
 }
 
 
body {
 font-family: "Overpass","Helvetica Neue","Helvetica", sans-serif;
 overflow-x: hidden;
 background-image: url("texture_bg.jpg");
 background-repeat: no-repeat;
 background-attachment: fixed;
 background-color: var(--ny_beige);
 }
 
a {
 color: var(--ny_orange);
 text-decoration: none;
 }
a:hover {
 background: linear-gradient(to top, var(--ny_brown) 20%, transparent 20%);
 }
 
main, footer {
 max-width: 60rem;
 margin: auto;
 width: 75%;
 padding: 10px;
 border-radius: 5px;
 }
 
details {z-index: 3;}
svg {z-index: 5;}
 
.completed {
 fill: var(--ny_dark);
 opacity: .80;
 stroke: black;
 stroke-width: 1.5px;
 }
.completed:hover {
  fill: var(--ny_green);
  stroke: white;
  stroke-dasharray: 1350px;
  stroke-dashoffset: 0px;
  cursor: pointer;
  transition: all .125s;
  animation: drawme 1s alternate;
 }
 @keyframes drawme {
	from {
		stroke-dashoffset: 1350px;	}
	to {
		stroke-dashoffset: 0px;	}
 }
 
.incomplete {
  fill: #ffffffaa;
  opacity: 0.85;
  stroke: var(--ny_dark);
  stroke-width: 1px;
 }
.incomplete:hover {
 stroke: black;
 stroke-width: 1px;
 fill: var(--ny_beige);
 cursor: arrow;
 stroke-dasharray: 10px;
 stroke-dashoffset: 10px;
 animation: dash 1s linear infinite;
 transition: all .125s;
 }
 @keyframes dash {
 	from {
 		stroke-dashoffset: 20px;
 	}
 	to {
 		stroke-dashoffset: 0px;
 	}
 }
 
#tooltip {
 background-color: var(--ny_brown);
 border: 1px solid black;
 border-radius: 3px;
 border: 2px solid white;
 color: white;
 box-shadow: 0px 0px 2px black, 5px 5px 10px var(--ny_gray);
 padding: 4px 6px 2px 6px;
 font-size: 12pt;
 font-weight: 700;
 letter-spacing: -1px;
 font-family: "Overpass","Helvetica Neue","Helvetica",sans-serif;
 }

#heading {
 /*position: sticky;*/
 top: 0;
 background: var(--ny_beige);
 font-family: "Overpass","Helvetica Neue","Helvetica",sans-serif;
 letter-spacing: -1px;
 display: block;
 text-align: center;
 margin-bottom: 10px;
 border: 15px solid white;
 color: white;
 border-radius: 15px;
 background: var(--ny_brown);
 box-shadow: 0px 0px 2px black, 5px 5px 10px var(--ny_gray); }
#donate, #donate2 {
 text-align: center;
 border-radius: 10px;
 padding: 8px 6px 6px 6px;
 color: white;
 font-size: 24pt;
 background: var(--ny_green);
 border: 15px solid white;
 box-shadow: 0px 0px 2px black, 5px 5px 10px var(--ny_gray);
 cursor: pointer;
}
#donate2 {
 font-size: 10pt;
 border: 8px solid white;
 margin-top: 10px;
}

#donate:hover {
 background: var(--ny_brown);
 color: white;
 transition: all .250s;
 cursor: pointer;
}

h1, h2 {
 margin: 0px;
}
h1 {
 font-size: 54pt;
 font-weight: 900;
 line-height: 52pt;
 padding: 25px 15px 15px 15px;
}
h2 {
 font-size: 24pt;
 font-weight: 400;
 line-height: 20pt;
 padding: 15px 8px 8px 8px;
 border-top: 5px solid white;
}
 
#instructions {
 position: absolute;
 display: block;
 margin: 20px 10px 10px 10px;
}
#instructions p {
 background: var(--ny_green);
 border: 3px solid white;
 border-radius: 8px;
 text-align: center;
 color: white;
 padding: 5px 5px 2px 5px;
 margin: auto;
 box-shadow: 0px 0px 2px black, 5px 5px 10px var(--ny_gray);
}

#mapCanvas {
 border-radius: 20px;
 margin: 10px auto 10px auto;
 background: rgba(255,255,255,0.33);
}

#county_run_info {
 position: sticky;
 background-color: #008000f0;
 border: 5px solid white;
 border-radius: 12px;
 padding: 10px;
 width: 280px;
 box-shadow: 0px 0px 2px black, 5px 5px 10px var(--ny_gray);
 margin-top: 15px;
 margin-left: 5px;
 font-family: "Overpass","Helvetica Neue","Helvetica",sans-serif;
 }
.county_name {
 width: 100%;
 display: block;
 font-size: 18pt;
 padding-bottom: 8px;
 color: white;
 font-family: "Overpass","Helvetica Neue","Helvetica",sans-serif;
 font-weight: 700;
 letter-spacing: -1px;
 text-align: center;
 text-transform: uppercase;
 }
.close_info {
 line-height: 8pt;
 padding: 3px;
 border: 1px solid black;
 border-radius: 10px;
 position: absolute;
 top: 5px;
 right: 5px;
 text-decoration: none;
 overflow: hidden;
 width:10px;
 height:10px;
 display: flex;
 justify-content: center;
 vertical-align: center;
 font-weight: 100;
 font-size: 18pt;
 line-height: 12pt;
 background-color: black;
 color: white;
 cursor: pointer;
 }
#county_run_info table {
 float:left;
 width: 70%;
 }
#county_run_info th {
 vertical-align: top;
 width: 80px;
 font-size: 12pt;
 text-align: right;
 font-weight: 500;
 }
#county_run_info td  {
 vertical-align: top;
 text-align: left;
 font-size: 12pt;
 font-weight: 400;
 color: white;
 }
 #county_run_info .countyNum {
 width: 50px; height: 48px;
 display: flex;
 justify-content: center;
 color: black;
 font-size: 32pt;
 line-height: 42pt;
 font-weight: 600;
 letter-spacing: -3px;
 font-family: "Overpass","Helvetica Neue","Helvetica",sans-serif;
 padding: 5px 5px 5px 3px;
 background-image: url('ny_highway.png');
 background-size: cover;
 position: absolute;
 right: 35px;
 top: calc(18pt + 12px + 12pt);
 }
#county_run_info a {
 color: white;
 font-weight: 700;
 text-decoration: none;
 text-transform: uppercase;
 border: 2px solid white;
 border-radius: 3px;
 position: relative;
 padding: 2px 2px 0px 2px;
 font-size: 10pt;
 line-height: 20pt;
 margin-bottom: 5px;
 }
#county_run_info a:hover {
 background: var(--ny_brown);
 border-radius: 3px;
 border: 2px solid white;
 box-shadow: 0px 0px 3px var(--ny_gray);
}

#faq summary {
 width: calc(100%-10px);
 color: white;
 background: var(--ny_green);
 border: 3px solid white;
 border-radius: 8px;
 margin-bottom: 8px;
 padding: 4pt;
display: flex;
 cursor: pointer;
 font-size: 14pt;
 font-weight: 700;
 font-family: "Overpass","Helvetica Neue",sans-serif;
 box-shadow: 0px 0px 2px black, 5px 5px 10px var(--ny_gray);
 }
#faq details[open] {
 border-radius: 8px;
 background: white;
 margin-bottom: 20px;
 padding-bottom: 10px;
 box-shadow: 0px 0px 2px black, 5px 5px 10px var(--ny_gray);
 }
#faq p {
 padding: 10px 22px 0px 22px;
 }
\details > summary {
 list-style-type: none;
 list-style: none;
  	display: contents;
 }
details > summary::-webkit-details-marker {
 display: none;
 }
details > summary::before {
 content: '+';
 width: 15px;
 color: white;
 padding-left: 2px;
 }
details[open] > summary::before {
 content: '–';
 width: 15px;
 color: var(--ny_gray);
 padding-left: 2px;
 }
 
.emph {
 font-weight: 600;
 color: var(--ny_blue);
}

table a:hover {
 border: 0px solid white;
 background: unset;
 border: unset;
 box-shadow: unset;
 border-radius: unset;
 transition: unset;
}

footer {
 font-size: 10pt;
 color: var(--ny_brown);
 margin-top: 10px;
 /* padding: 20px 0px 80px 0px; */
 /* border-top: 10px solid black; */
 text-align: right;
 position: relative;
 }