@import url('https://fonts.googleapis.com/css2?family=Lato:wght@400;700&display=swap');

* {margin: 0; padding: 0; box-sizing: border-box; font-family: 'Lato', sans-serif;}

body {background-image: linear-gradient(to right, #243949 0%, #517fa4 100%); background-repeat: no-repeat; background-attachment: fixed; background-size: cover;}

.main {display: flex; justify-content: center; align-items: center; padding: 10px;}

h1 {font-size: 1.2em;}
h2 {font-size: 1.1em;}
h3 {font-size: 0.9em;}

.container {display: flex; flex-direction: column; width: 100%; height: 100%; padding: 0; border-radius: 10px; background: #fff; box-shadow: rgba(0, 0, 0, 0.35) 0px 5px 15px; overflow: hidden;}

.map-container {width: 100%; height: 60vh; border: 1px solid black;}
.map {width: 100%; height: 100%;}

.marker-container {width: 100%; padding: 10px; background: #f9f9f9;}
.marker-container > h1 {text-align: center; margin: 5px;}

/* Rögzít */
.marker {display: flex; flex-direction: column; align-items: center; margin: 5px; height: 100%;}
.marker > button {width: 85%; padding: 5px; font-size: 16px; margin: 5px; cursor: pointer; border-radius: 5px; box-shadow: 0px 2px 8px 0px blue; background: white;}
.marker > button:hover {background-color: lightblue;}

.input-group {display: flex; flex-direction: column; width: 80%; margin: 3px;}
.input-group > input {padding: 5px 0; outline: none; font-size: 14px; width: 100%;}

.marked {padding: 10px 5px;}
.marked > h1 {text-align: center; margin: 5px;}

#markedLocations {overflow-y: auto; height: auto; list-style: none; font-size: 12px;}
#markedLocations > li {display: flex; justify-content: center; align-items: center;}

#markedLocations > li div {display: flex; justify-content: space-between; background-color: rgba(255, 255, 255, 0.5); width: 92%; margin: 5px 0;}
#markedLocations > li div button {font-size: 12px; color: rgb(0, 0, 255); text-decoration: underline; background-color: transparent; border: none; cursor: pointer;}
#markedLocations > li div button:hover {color: rgb(88, 88, 255); text-decoration: none;}

#markedLocations > li > button {background-color: transparent; border: none; outline: none; margin: 0 10px; color: rgb(220, 20, 20); cursor: pointer;}
#markedLocations > li > button:hover {background-color: rgb(220, 200, 200); color: rgb(240, 10, 10);}

/* Tablet és nagyobb kijelzők */
@media (min-width: 980px) {
	.container {flex-direction: row; justify-content: space-between;}
	.map-container {width: 60%; height: 92vh;}
	.marker-container {width: 30%; height: 92vh;}
}

/* Nagy képernyők */
@media (min-width: 1200px) {
	.map-container {width: 56%;}
	.marker-container {width: 24%;}
}