:root {
	--blue: #1DAEEF;
	--textRed: #403144;
	--rock:#D0C8BD;
	--cream:#F9F5EA;

	--inter: 'Inter',sans-serif;
	--crimson: "Crimson Pro", serif;
}

* {
	box-sizing:border-box;
	font-family: var(--inter);
	color: var(--textRed);
}


html {
	margin: 0;
	padding: 0;
}

body {
	margin: 0;
	padding: 1rem;
	background: var(--cream);
	width:100%;
	height:100vh;
}


h1, h2, h3, h4, h5, h6 {
	font-family: var(--crimson)
}


img {
	width:100%;
}


nav {
	background: var(--rock);
	position:fixed;
	bottom:0;
	left:0;
	z-index: 9999999;
	width:100%;
	
	height:5.25rem;
	padding:1rem;

	display:flex;
	align-items:center;

	flex-direction:row;
	justify-content: space-between;
}

nav h3 {
	margin:0;
}

.material-icons:hover {
	cursor:pointer;
}

a.list-view-btn span {
	display:block;
	background: var(--cream);
	padding:1rem;
	border-radius:50%;
	position:fixed;
	right:1rem;
	bottom:6.5rem;
	z-index: 9999999;
	box-shadow: 0px 0px 10px 5px rgba(100,100,100,0.4);
	border:2px solid var(--rock);
}

a.list-view-btn  {
	text-decoration: none;
}

ul li {
	margin-bottom: 1rem;
}

ul.nav-list {
	list-style-type: none;
	padding: 0;
}

ul.nav-list li {
	margin-top: 1.25rem;
	text-transform: uppercase;
}

ul.nav-list li a {
	font-family: var(--crimson);
	font-size: 1.5rem;
	font-weight: bold;
	text-decoration: none;
	color:black;
	display:block;
}

.material-symbols-outlined {
	color:var(--textRed);
	border:0;
	font-size: 2rem;
}


#menuPanel {
	background: var(--cream);
	width:100%;
	position:fixed;
	top:0;
	left:0;
	height:calc(100vh - 84px);
	padding:1rem;

	display:flex;
	flex-direction: column;
	justify-content:flex-end;
	transform:translateX(100vw);
	transition:.4s;
}

#menuPanel.hide {
	transform:translateX(0);
}

.logos {
	display:flex;
	flex-direction:row;
	justify-content:space-between;

}
.logos img {
	width: 8rem;
}

button {
	background:var(--rock);
	border:0;
	padding:10px 60px;
	border-radius:40px;
}

button#menuToggle {
	background:none;
	border:0;
	padding:0;
}

button#menuToggle:hover {
	cursor:pointer;
}

div.logos ul {
	display:grid;
	gap: 1rem;
	grid-template-columns: repeat(2,1fr);
	align-items: center;
	padding: 0;
	margin: 0;
}

div.logos span {
	font-size: .75rem;
}

div.logos img.ancked-logo {
	width:100px;
}

div.logos img.sunu-logo {
	width:150px;
}

div.logos ul li {
	list-style: none;
}


div.home {
	display:flex;
	flex-direction: column;
	align-items: center;
	text-align: center;
	justify-content: space-around;
	padding:4rem 0;
}



div.home h1 span {
	font-family: var(--crimson);
	margin-bottom: .5rem;
	font-size: 1.25rem;
	display:block;
}

img.ancked-logo {
	width:8rem;
}

img.sunway-logo {
	width:10rem
}

input {
	text-align: center;
}

input[type="password"] {
	border:0;
	border-bottom:1px solid var(--textRed);
	padding:1rem 0;
	font-size: 2rem;
	background:none;
	width:60vw;
}

form {
	margin:3rem 0 6rem;	
}

form button {
	display:block;
	margin:auto;
	margin-top:1rem;
}

body.mapBody {
	padding:0;
}

#map {
	width:100%;
	height:calc(100vh - 84px);
}

.mapStats {
	position:fixed;
	top: 0;
	left: 0;
	z-index: 99999;
	font-size: .725rem;
}

.mapStats p {
	background:rgba(255,255,255,0.5);
	width:max-content;
}


.leaflet-popup-content-wrapper, .leaflet-popup-tip {
	background:var(--rock);
}

.leaflet-popup-content h3 {
	font-size: 24px;
}
.leaflet-popup-content {
	font-size: 16px;
}

.leaflet-container a {
	color:var(--textRed);
}

@keyframes blink {
	0% {
		background:rgba(0,0,0,0);
	}
	100% {
		background: var(--blue);
	}
}

div.my-loc-icon {
	height:20px !important;
	width:20px !important;
	margin-left: -10px !important;
	margin-top: -10px !important;
	background: var(--blue);
	border-radius:50%;
	border:2px solid white;
	box-shadow: 0 0px 10px 1px rgba(29, 174, 239, 0.2);

	animation: blink 1s infinite alternate-reverse;
}


body.timeline-page {
	padding:0;
}

div.timeline-img {
	padding-bottom:5rem;
}

div.timeline-img img {
	width:100%;
}

div.timeline-desc {
	margin-bottom: 3rem;
}
ul.timeline-list {
	list-style-type: none;
	border-left:1px solid var(--textRed);
	margin-left: 40px;
	padding:0;
	padding-bottom:7.5rem;
}

ul.timeline-list li {
	display:flex;
	flex-direction: row;
	transform:translateX(-1rem);
	margin-bottom: 3rem;
}

ul.timeline-list li h2 {
	margin-bottom: .75rem;
}

ul.timeline-list li p {
	margin:0;
}

ul.timeline-list li.kedah-tua {
	font-size: 1.25rem;
}
ul.timeline-list li.kedah-tua div.marker span {
	background:gold;
	margin-top:5px;
	border:2px solid var(--textRed);
}

ul.timeline-list li.kedah-tua div.event {
	background:var(--rock);
	padding:1.25rem;
	border-radius:1rem;
	border:2px solid var(--textRed);
}

div.marker span {
	background: var(--textRed);
	display: block;
	height:2rem;
	width:2rem;
	border-radius:40px;
}

div.event {
	margin-left: 1rem;
}
div.event h2 {
	margin-top:0;
}

body.siteBody{
	padding:0;
}

body.siteBody > div{
	padding:1rem;
}

div.site-backbar a {
	text-decoration: none;
	font-size: 1.75rem;
}

div.site-header {
	background-color:var(--rock);
	background-size: cover;
	height:60vw;
	display:flex;
	padding:2rem !important;
}


div.site-header.sb1k {
	background-image:url(img/sb1k-header.jpg);
}
div.site-header.sb1b {
	background-image:url(img/sb1b-header.jpg);
}

div.site-header.sb1g{
	background-image:url(img/sb1g-header.jpg);
}
div.site-header h1  {
	text-shadow:5px 5px 5px rgba(20,20,20,.8);
	align-self:flex-end;
	display:block;
	margin: 0;
	color:white;
	font-size: 2.5rem;
}

div.site-header h1 span {
	font-family: var(--crimson);
	font-size: 1.5rem;
	color:white;
	font-weight: normal;
}
div.site-article {
	padding-bottom:8rem !important;
}
div.site-details {
	display:grid;
	grid-template-columns: repeat(2,1fr);
	gap:1rem;
}
div.site-details > div {
	background: var(--rock);
	border-radius:1rem;
	padding:1rem;
}
div.site-details p {
	padding:0;
}

div.site-details h2 {
	margin:0;
}

div.site-article section {
	margin-bottom:4rem;
}

figure {
	margin:0;
	text-align: center;
	margin-bottom: 2rem;
}

figure img {
	max-width:480px;
	margin-bottom: 1rem;
	border-radius: 1rem;
}

figcaption,
figcaption i {
	font-size: 1rem;
	font-family: var(--crimson);
}
section.site-citations ul {
	list-style-type: none;
	margin: 0;
	padding-left:2rem;
}
section.site-citations ul li {
	margin-bottom: 1rem;
	text-indent:-2rem;
}
section.site-citations ul li i,
section.site-citations ul li {
	font-family: var(--crimson);
}

div.credit-desc {
	padding-bottom: 8rem;
}


div.credit-desc h2 {
	font-size: 1.25rem;
}

body.list-view {
	padding-bottom: 8rem;
}

ul.site-list {
	padding:0;
	padding-bottom:5rem;
}

ul.site-list li {
	list-style-type: none;
	background: var(--rock);
	border-radius:40px;
	display:flex;
	flex-direction: column;
	margin-bottom: 2rem;
}

ul.site-list li.site img {
	border-radius:40px
}

ul.site-list li.site div {
	padding: 1.5rem 1.5rem 2rem 1.5rem;
}

ul.site-list li.site div h1{
	margin: 1rem  0;
}

ul.site-list li.site div h3{
	margin: 0;
}


ul.site-list li a {
	display:block;
}