:root{
  --aegean:#2896af; --sun:#ffd873; --lightgray:white; --darkblue:#135c6d;
}

*{box-sizing:border-box}
body{margin:0;font-family:system-ui,-apple-system,"Segoe UI",Roboto,sans-serif;color:var(--lightgray);line-height:1.5;
  background: linear-gradient(in oklch 120deg, #FFE484, var(--aegean), var(--aegean),  var(--darkblue));
  /*background-image: linear-gradient(to bottom right, rgba(255, 216, 115, 0.35), rgba(40, 150, 175, 1.00));*/
  background-color: var(--aegean);
}

.background-container {
	background-image: url('background-icons-color.svg');
	/*background-color: var(--aegean);*/
}

.header-container {
	position: relative;
	width: 100%;
	overflow: hidden;
	text-align: center;
	margin:0;

}


.header-container::before {
	content: "";
	position: absolute;
	top: 0;
	left: 0;
	width: 200%;
	height: 100%;
	background-image: url('background-lines-new.svg');
	background-repeat: repeat-x;
	background-size: contain;
	z-index: 0;

  	animation: shiftBackground 50s linear infinite;
}

@keyframes shiftBackground {
  0% {
    transform: translateX(0);
  }
  100% {
    transform: translateX(-50%);
  }
}

.header-text-box {
	position: relative;
	z-index: 1;
}


header h1{font-family:"Cascadia Mono","Cascadia Code",Consolas,"Courier New",monospace; margin:0; font-size:clamp(2.6em, 22vw, 6em); letter-spacing: 10%; font-weight: 700; line-height: 1.3;
  animation: Text-Glow 2s linear 4 forwards;
  padding: clamp(14px, 6vw, 50px);
}

@keyframes Text-Glow {
  0% {
    -webkit-text-fill-color: var(--darkblue);
	-webkit-text-stroke-width: 0px;
	-webkit-text-stroke-color: black;
	text-shadow:
		-5px -5px rgba(232, 185, 74, 0.25),
		5px 5px white;
  }
  50% {
    -webkit-text-fill-color: var(--darkblue);
	-webkit-text-stroke-width: 0px;
	-webkit-text-stroke-color: black;
	text-shadow:
		-5px -5px rgba(232, 185, 74, 1.0),
		5px 5px white;
  }
  100% {
    -webkit-text-fill-color: var(--darkblue);
	-webkit-text-stroke-width: 0px;
	-webkit-text-stroke-color: black;
	text-shadow:
		-5px -5px rgba(232, 185, 74, 1.0),
		5px 5px white;
  }
}

.subheader {
	background-color:transparent;
	color:var(--lightgray);
	text-align:center;
	margin:0;
	font-family:"Cascadia Mono","Cascadia Code",Consolas,"Courier New",monospace; font-size:26px; letter-spacing: 5%; font-weight: 400;
}

.subheader p {
	margin:0;
	padding: 10px;
	padding-top: 50px;
}


main{
	max-width:760px;
	margin:0 auto;
	padding:24px 16px 60px;

}

.maps-roulette-wrap {
	padding: 0px!important;
}

.maps-roulette {
	background-color:transparent!important;
}


.card{
	background-color:transparent;
	border-radius:16px;
	padding:20px 22px;
	margin-bottom: 36px;
	
	text-align: center;
}

.param h2{
	font-family:"Cascadia Mono","Cascadia Code",Consolas,"Courier New",monospace; letter-spacing: 5%; font-weight: 700;

	margin:0 0 12px;
	font-size: 16px;
	color:var(--lightgray);
	margin-top: 50px;
}

.labels{
	font-family:"Cascadia Mono","Cascadia Code",Consolas,"Courier New",monospace; letter-spacing: 5%; font-weight: 500;
	display:flex;justify-content:space-between;font-size:16px;color:var(--lightgray);margin-top:14px;


}
.labels span:first-child{text-align:left}.labels span:last-child{text-align:right}
.slider-wrap{position:relative;padding:6px 0;}
input[type=range]{-webkit-appearance:none;appearance:none;width:100%;height:32px;background:transparent;margin:0;cursor:pointer}
input[type=range]::-webkit-slider-runnable-track{height:6px;border-radius:0px;background:gray}
input[type=range]::-moz-range-track{height:6px;border-radius:3px;background-color:gray;}
input[type=range]::-webkit-slider-thumb{-webkit-appearance:none;width:28px;height:28px;border-radius:50%;background-color:var(--sun);border:3px solid var(--aegean);box-shadow:0 1px 6px rgba(0,0,0,.3);margin-top:11px}
input[type=range]::-moz-range-thumb{width:22px;height:22px;border-radius:50%;background:var(--sun);border:3px solid #fff;box-shadow:0 1px 6px rgba(0,0,0,.3)}
.ticks{position:relative;height:24px;padding:0px;margin-top:5px;font-size:16px;color:#e8b94a}
.ticks span{position:absolute;top:0;transform:translateX(-50%);white-space:nowrap}
.ticks span:nth-child(1){left:0%}
.ticks span:nth-child(2){left:16.6667%}
.ticks span:nth-child(3){left:33.3333%}
.ticks span:nth-child(4){left:50%}
.ticks span:nth-child(5){left:66.6667%}
.ticks span:nth-child(6){left:83.3333%}
.ticks span:nth-child(7){left:100%}
.go-wrap{text-align:center;margin:28px 0}
button#go{font:inherit;font-size:18px;font-weight:700;letter-spacing:2px;background:white;color:var(--aegean);border:0;border-radius:999px;margin-bottom:50px;padding:14px 64px;cursor:pointer;box-shadow:none;transition:transform .1s}
button#go:hover{background:var(--sun);}

.wave {
	padding-left:2px!important;
	padding-right:2px!important;
}

.wavy-thumb {
	background-color:#e8b94a!important;
	width:28px!important;
	height:28px!important;
	border: 2.5px solid var(--lightgray)!important;
}



#results{display:none;}
.match{background-color:transparent; border: 3px solid var(--sun);}
.match .tag{font-size:13px;text-transform:uppercase;letter-spacing:1.5px;color:var(--lightgray);font-weight:700}
.match h3{ font-family:"Cascadia Mono","Cascadia Code",Consolas,"Courier New",monospace; margin:5px;font-size:clamp(30px,6vw,42px);color:var(--sun); margin-bottom: 30px;}
.pct{float:center;font-size:clamp(30px,6vw,44px);font-weight:800;color:var(--lightgray)}
/* Flexbox inside .pct that shows the matched island's map, when we have one. */
.pct-map-wrap{display:flex;justify-content:center;align-items:center;margin-top:10px;}
.pct-map{width:84px;height:84px;background-repeat:no-repeat;background-position:center;background-size:contain;}
.compare{margin-top:16px; color:var(--lightgray)}
.row{display:grid;grid-template-columns:110px 1fr;gap:10px;align-items:center;margin:6px 0;font-size:14px}
.row span {text-align: right;}
.bar{position:relative;height:2px;background:var(--lightgray);border-radius:4px}
.dot{position:absolute;top:50%;width:14px;height:14px;border-radius:50%;transform:translate(-50%,-50%);border:2px solid var(--aegean)}
.dot.you{background:var(--lightgray);z-index:2}.dot.isl{background:var(--sun);}
.legend{font-size:13px;color:var(--lightgray);margin-top:8px}
.legend i{display:inline-block;width:10px;height:10px;border-radius:50%;margin:0 4px 0 10px;vertical-align:middle;border:1px solid var(--aegean);}
.legend i:nth-child(2){}
.card {margin-bottom: 3px;}
.runner{display:flex;justify-content:space-between;align-items:center;gap:3px;text-align:left;padding:0px; margin-top:20px; padding-bottom: 10px; border-bottom: 1px solid var(--lightgray); border-radius: 0px;}
.runner h4{margin:0;font-size:20px;color:var(--sun)}
.runner .rp{font-size:24px;font-weight:700;color:var(--lightgray)}
h2.sec{color:var(--lightgray);margin-top: 50px; margin-bottom: 10px;}
.again{background:none;border:2px solid var(--sun);color:var(--lightgray);border-radius:999px;padding:8px 22px;font:inherit;cursor:pointer;margin-top:50px}
.again:hover{background-color:white; color:var(--aegean);}
footer{text-align:center;color:var(--lightgray);font-size:13px;padding-bottom:30px}
.map-display{color:var(--sun);}


.footer-link:link{
	color: white;
	text-decoration: none;
}

.footer-link:active{
	color: white;
	text-decoration: none;
}

.footer-link:visited{
	color: white;
	text-decoration: none;
}