* {
	box-sizing: border-box;
}

html {
	background-color: grey;
	background-image: linear-gradient(180deg, skyblue, grey 600px,grey);
	overflow-x: hidden;
	min-height: 90vh;
	min-width: 250px;
}
body {
	margin:0;
}
.suitable-visit g {
	fill:green;
}
.fleeting-visit g {
	fill:red;
}
.aerial-visit g {
	fill:orange;
}

.era-key {
	.era-other g {
		fill:grey;
	}
	.era-antiquity g {
		fill:#f00;
	}
	.era-iron-age g {
		fill:#d02;
	}
	.era-roman g {
		fill:#b04;
	}
	.era-early-mediaeval g {
		fill:#906;
	}
	.era-high-mediaeval g {
		fill:#708;
	}
	.era-late-mediaeval g {
		fill:#50a;
	}
	.era-early-modern g {
		fill:#30c;
	}
	.era-modern g {
		fill:#10e;
	}
}
.key {
	position: absolute;
	bottom: -50vh;
	width:100%;
	
	&>* {
		width:fit-content;
		margin: 4px auto;
	}
	
	.key-item {
		display: inline-block;
	}
	
	button {
		cursor:pointer;
		display:block;
	}
}
@media screen and (max-width: 750px) {
	.key {
		button {
			display:block;
		}
		.key-item {
			display:block;
		}
	}
}
.era-status {
	display:none;
}
.era-key + .key {
	.visit-status {
		display:none;
	}
	.era-status {
		display:block;
	}
}


.era-key .selected-marker, .selected-marker {
	g {
		fill:#fd0;
	}
	circle {
		fill:black;
	}
}
.castle {
	cursor:pointer;
	
	&.filtered-out {
		display:none;
	}
	
	&:has(.selected-marker) {
		z-index:50;
	}
}
.title {
	margin-bottom:150px;
	
	* {
		margin-right:auto;
		margin-left:auto;
	}
}
h1,h2,.photos {
	text-align:center;
	position: relative;
}
@media screen and (max-width: 750px) {
	h2 {
		margin:3px;
		padding: 0 50px;
	}
}

:root {
  --arrow-size: 35px;
}
.fore-button {
	clip-path: polygon(0 0, calc(100% - var(--arrow-size)) 0, 100% 50%, calc(100% - var(--arrow-size)) 100%, 0 100%, var(--arrow-size) 50%);
}
.back-button {
	clip-path: polygon(var(--arrow-size) 0%, 100% 0%, calc(100% - var(--arrow-size)) 50%, 100% 100%, var(--arrow-size) 100%, 0 50%);
}

.back-and-fore-buttons {
	width: fit-content;
}
.fore-button,
.back-button {
	margin: 10px;
	padding: 10px 50px;
    border: none;
    background: #434343;
    color: #fd0;
    font-weight: 700;
    cursor: pointer;
	
	&:hover,&:focus {
		background: #fd0;
		color:black;
	}
}

.photo-link,
.visit-date:not(:first-child) {
	background: #f3f2f155;
	@media screen and (max-width: 750px) {
		.visit-date {
			background: #f3f2f155;
		}
	}
}

.gallery-image {
	max-height: 400px;
	max-width: 80%;
	margin: 2px 10px;
	border: 5px outset brown;
}
#content {
	position: relative;
	display: flex;
    z-index: 1;
	justify-content: center;
}
#map {
	width: calc(60% - 10px);
	height: 80vh;
	float:right;
}
#infobox,
#searchbox {
	width: 20%;
	height: 80vh;
}
#searchbox {
	background-color:#f3f2f1dd;
}

@media screen and (max-width: 750px) {
	#map {
		width: 95%;
		height: 400px;
		top: 111px;
		position: absolute;
	}
}
@media screen and (max-width: 750px) {
	#infobox{
		width: 100%;
		height: 200px;
		position: absolute;
		top:511px;
	}
	#searchbox	{
		width: 100%;
		height: 111px;
		position: absolute;
	}
	
}
.filter, .random-castle {
	margin: 4px auto 40px;
	display:block;
	max-width: 98%;
	width: 200px;
	padding: 3px;
	border: solid black 2px;
}
.random-castle {
	padding: 5px;
	cursor: pointer;
}
@media screen and (max-width: 750px) {
	.search-controls {
		display:flex;
		justify-content: center;
		align-items:center;
	}
	.filters { /*not .filter*/
		max-width: 60%;
	}
	.filter, .random-castle {
		margin:4px auto;
	}
	.random-castle {
		width: 70px;
	}
}


.castle-info {
	padding: 5px;
	height: 80vh;
	display: none;
	text-align: center;
	background-color:#f3f2f1dd;
	
	&.selected {
		display:block;
	}
}
@media screen and (max-width: 750px) {
	.castle-info {
		height: auto;
	}
}
.castle-info-marker,
.castle-info-table {
	display:block;
	margin: 0 auto;
}
.castle-info-marker-small {
	display: none;
}
@media screen and (max-width: 750px) {
	.castle-info-marker {
		position: absolute;
	}
	.castle-info-table {
		display: inline-block;
		width:50%;
	}
	.castle-info-marker-small {
		display: inline;
		
	}
}
th,td {
	text-align: left;
	vertical-align: top;
	padding: 15px 3px;
}
@media screen and (max-width: 750px) {
	th,td {
		text-align: left;
		vertical-align: top;
		padding: 5px 3px;
	}
}
.castle-image, .photo-link {
	max-width: 100%;
	display: block;
	margin: 1px auto;
}
@media screen and (max-width: 750px) {
	.castle-image {
		max-width: 45%;
		max-height: 150px;
        display: inline-block;
		vertical-align: top;
	}
	.photo-link {
		position: absolute;
		top: 9px;
		right: 9px;
	}
}



@keyframes flutter-1 {
	0% {
		transform: skew(0deg,13deg) rotateY(-5deg);
		border-radius: 0 1px;
	}
	5% {
		transform: skew(0deg,15deg) rotateY(8deg);
		border-radius: 0 12px;
	}
	10% {
		transform: skew(0deg,12deg) rotateY(2deg);
		border-radius: 0 5px;
	}
	15% {
		transform: skew(0deg,16deg) rotateY(13deg);
		border-radius: 0 15px;
	}
	20% {
		transform: skew(0deg,13deg) rotateY(9deg);
		border-radius: 0 6px;
	}
	25% {
		transform: skew(0deg,15deg) rotateY(20deg);
		border-radius: 0 12px;
	}
	30% {
		transform: skew(0deg,14deg) rotateY(16deg);
		border-radius: 0 6px;
	}
	35% {
		transform: skew(0deg,17deg) rotateY(27deg);
		border-radius: 0 12px;
	}
	40% {
		transform: skew(0deg,15deg) rotateY(23deg);
		border-radius: 0 10px;
	}
	45% {
		transform: skew(0deg,18deg) rotateY(34deg);
		border-radius: 0 18px;
	}
	50% {
		transform: skew(0deg,14deg) rotateY(30deg);
		border-radius: 0 14px;
	}
	55% {
		transform: skew(0deg,16deg) rotateY(41deg);
		border-radius: 0 16px;
	}
	60% {
		transform: skew(0deg,13deg) rotateY(37deg);
		border-radius: 0 11px;
	}
	65% {
		transform: skew(0deg,15deg) rotateY(48deg);
		border-radius: 0 12px;
	}
	70% {
		transform: skew(0deg,13deg) rotateY(44deg);
		border-radius: 0 1px;
	}
	75% {
		transform: skew(0deg,18deg) rotateY(55deg);
		border-radius: 0 12px;
	}
	80% {
		transform: skew(0deg,13deg) rotateY(44deg);
		border-radius: 0 1px;
	}
	85% {
		transform: skew(0deg,15deg) rotateY(48deg);
		border-radius: 0 12px;
	}
	90% {
		transform: skew(0deg,18deg) rotateY(37deg);
		border-radius: 0 1px;
	}
	95% {
		transform: skew(0deg,10deg) rotateY(41deg);
		border-radius: 0 12px;
	}
	100% {
		transform: skew(0deg,8deg) rotateY(35deg);
		border-radius: 0 1px;
	}
}
@keyframes flutter-2 {
	0% {
		transform: skew(0deg,18deg) rotateY(-5deg);
		border-radius: 0 1px;
	}
	5% {
		transform: skew(0deg,15deg) rotateY(8deg);
		border-radius: 0 12px;
	}
	10% {
		transform: skew(0deg,18deg) rotateY(2deg);
		border-radius: 0 5px;
	}
	15% {
		transform: skew(0deg,15deg) rotateY(13deg);
		border-radius: 0 15px;
	}
	20% {
		transform: skew(0deg,13deg) rotateY(9deg);
		border-radius: 0 6px;
	}
	25% {
		transform: skew(0deg,20deg) rotateY(20deg);
		border-radius: 0 12px;
	}
	30% {
		transform: skew(0deg,18deg) rotateY(16deg);
		border-radius: 0 6px;
	}
	35% {
		transform: skew(0deg,25deg) rotateY(27deg);
		border-radius: 0 12px;
	}
	40% {
		transform: skew(0deg,23deg) rotateY(23deg);
		border-radius: 0 10px;
	}
	45% {
		transform: skew(0deg,25deg) rotateY(34deg);
		border-radius: 0 18px;
	}
	50% {
		transform: skew(0deg,18deg) rotateY(30deg);
		border-radius: 0 14px;
	}
	55% {
		transform: skew(0deg,20deg) rotateY(41deg);
		border-radius: 0 16px;
	}
	60% {
		transform: skew(0deg,15deg) rotateY(37deg);
		border-radius: 0 11px;
	}
	65% {
		transform: skew(0deg,18deg) rotateY(48deg);
		border-radius: 0 12px;
	}
	70% {
		transform: skew(0deg,15deg) rotateY(44deg);
		border-radius: 0 1px;
	}
	75% {
		transform: skew(0deg,20deg) rotateY(55deg);
		border-radius: 0 12px;
	}
	80% {
		transform: skew(0deg,18deg) rotateY(44deg);
		border-radius: 0 1px;
	}
	85% {
		transform: skew(0deg,23deg) rotateY(48deg);
		border-radius: 0 12px;
	}
	90% {
		transform: skew(0deg,20deg) rotateY(37deg);
		border-radius: 0 1px;
	}
	95% {
		transform: skew(0deg,23deg) rotateY(41deg);
		border-radius: 0 12px;
	}
	100% {
		transform: skew(0deg,18deg) rotateY(35deg);
		border-radius: 0 1px;
	}
}

@keyframes raise {
	from {top: 0px;}
	to {top: 1px;}
}

@keyframes lower {
	from {top: 0px;}
	to {top: 200px;}
}

.background {
	width: calc(100% - 20px);
	height: 100vh;
	position:absolute;
	margin: 0 10px;
	
	.tower {
		height: 100vh;
		width:0;
		border-style: inset;
		border-width: 40px 10px 0;
		border-color: transparent #854e1e;
		display:inline-block;
		margin-top: 160px;
		
		&.first {
			border-left:0;
		}
		&.last {
			border-right:0;
		}
	}
	
	.first-tower {
		float:left;
		
		.flagpole {
			left: 77px;
			
			.flag
		}
	}
	.flagpole {
		height: 500px;
		position: absolute;
		top: 50px;
		z-index: -11;

	}
	.pole {
		height: 500px;
		width: 6px;
		display: inline-block;
		background: grey;
		z-index: -11;
	}
	.flag {
		height:17px;
		background-color: transparent;
		position: absolute;
		top: 200px;
		left: 6px;
		background-image: url("flags/union-jack.png");
		background-repeat: no-repeat;
		transition: top 2s;
		background-position: right;
		width:52px;
		left:-20px;
		animation: flutter-1 10s infinite;
		animation-direction: alternate;
	}
	.last-tower .flag {
		animation: flutter-2 12s infinite;
		animation-direction: alternate;
		animation-delay: 0.5s;
		
	}
	.flag2 {
		display:none;
		width: 11px;
		left: 20px; /*flag1 width +6 is flush*/
		background-position: right;
		animation: flutter-y 0.5s infinite;
		animation-direction: alternate;
	}
	.other.flag {
		top:1px;
	}
	.england .england.flag,
	.scotland .scotland.flag,
	.ireland .ireland.flag,
	.wales .wales.flag,
	.red .red.flag,
	.blue .blue.flag,
	.malta .malta.flag,
	.france .france.flag,
	.brittany .brittany.flag,
	.mann .mann.flag,
	.transjordan .transjordan.flag,
	.iraq .iraq.flag,
	.netherlands .netherlands.flag {
		top:1px;
		
		~.flag.other {
			top:200px;
		}
	}
	
	
	.england.flag,
	.guernsey.flag {
		background-image: url("flags/england.png");
	}
	.scotland.flag {
		background-image: url("flags/scotland.png");
	}
	.ireland.flag,
	.jersey.flag {
		background-image: url("flags/ireland.png");
	}
	.wales.flag {
		background-image: url("flags/wales.png");
	}
	.red.flag {
		background-image: url("flags/red-ensign.png");
	}
	.blue.flag {
		background-image: url("flags/blue-ensign.png");
	}
	.malta.flag {
		background-image: url("flags/malta.png");
	}
	.france.flag {
		background-image: url("flags/france.png");
	}
	.brittany.flag {
		background-image: url("flags/brittany.png");
	}
	.mann.flag {
		background-image: url("flags/mann.png");
	}
	.iraq.flag {
		background-image: url("flags/iraq.png");
	}
	.transjordan.flag {
		background-image: url("flags/transjordan.png");
	}
	.netherlands.flag {
		background-image: url("flags/netherlands.png");
	}

	.middle-bit {
		width:100%;
		height: 100vh;
		background-color: #854e1e; /* For browsers that do not support gradients */
		background-image: repeating-linear-gradient(#391f0a 0px, #391f0a 10px, #734319 10px, #734319 20px);
		position: absolute;
		z-index: -10;
		margin-top: 350px;

	}
	.last-tower {
		
		@media screen and (max-width: 400px) {
			display: none;
		}
			
		float:right;
		
		.flagpole {
			right: 77px;
		}
	}
	.fog {
		width: 100vw;
		height: 100vh;
		position: absolute;
		left: -10px;
		top: 50vh;
		background-image: linear-gradient(180deg, transparent, #f3f2f1 50vh,grey)
	}
}