@import url(//fonts.googleapis.com/css2?family=Raleway:wght@300;500;900);

html, body, main { height: 100%; }
html { font-size: 62.5%; }
body { font-family: Raleway, Verdana, Geneva, sans-serif; font-size: 1.6rem; font-weight: 500; line-height: normal; color: white; background-color: #3aa600; cursor: default; scroll-behavior: smooth; }
main { min-width: 36rem; }
section, footer { padding: 4rem; }
a { text-decoration: none; color: inherit; transition: 0.25s linear; }
ul { margin-left: 2rem; padding: 0; list-style: square; }
li { margin-bottom: 0.5rem; }
table { empty-cells: show; }
td { text-align: left; padding: 0.5rem 2rem 0.5rem 0; border: 0; }
form { max-width: 36rem; }
fieldset { margin: 0; padding: 0; border: 0; }
label { display: inline-block; vertical-align: top; width: 10rem; margin: 1rem 0; }
input, select, textarea { width: 24rem; margin-bottom: 0.5rem; padding: 1rem; color: #3aa600; background-color: white; border: 0; border-radius: 0; outline: 0; box-sizing: border-box; }
input[type="submit"] { font-weight: 900; width: auto; margin: 1.5rem 0 0; transition: 0.25s linear; }
input[type="submit"]:hover { background-color: black; }
textarea { vertical-align: top; overflow: auto; resize: none; }
ul, table, h1, h2, h3, h4, h5, h6, p { margin-top: 0; margin-bottom: 2rem; }
h1, h2, h3, h4, h5, h6, strong { font-weight: 900; }
h1 { font-size: 4rem; text-transform: uppercase; margin-right: 4rem; position: relative; }
h2, h5, h6 { font-size: 2rem; }
h3 { font-size: 3rem; display: inline-block; margin: 6rem 0 4rem; padding-bottom: 1.5rem; color: black; border-bottom: 0.25rem dotted black; }
h4 { font-size: 2rem; display: inline-block; margin: 3rem 0; padding-bottom: 1rem; border-bottom: 0.5rem dotted rgba(255, 255, 255, 0.5); }
p, li { line-height: 1.5; }
.space { height: 2rem; }
::selection { color: black; background-color: white; }
* { -webkit-tap-highlight-color: transparent; }

/* common styles */
.flex { display: flex; flex-wrap: wrap; justify-content: center; gap: 4rem; max-width: 120rem; margin: 0 auto; list-style: none; }
.flex > * { flex-grow: 1; min-width: 28rem; }
.half > * { width: calc(50% - 2rem); }
.third > * { width: calc(33.33% - 2.67rem); }
.quarter > * { width: calc(25% - 3rem); }
.square { display: inline-block; width: 1rem; height: 1rem; margin: 0 1.5rem; background-color: #3aa600; }
.alert { margin-bottom: 3rem; padding: 0.75rem 0 0.75rem 9rem; background: url(../images/upozorneni.svg) no-repeat left center; }
.alert strong { font-size: 2rem; }
.event { margin-bottom: 1rem; }
.event span { min-width: 16rem; }
.event span, .event a { display: inline-block; vertical-align: middle; margin: 0 2rem 1rem 0; }
.event strong { font-size: 2rem; display: block; margin-bottom: 0.25rem; }
.event img { width: 3.5rem; }
.event .button { margin-right: 0; background-color: black; }
.event .button::before { background-color: white; }
.event .button:hover { color: black; }
.background { background-position: right; background-size: auto 100%; background-repeat: no-repeat; background-attachment: fixed; }

/* form elements */
.button { font-weight: 900; display: inline-block; padding: 1.5rem 3rem; color: white; background-color: #3aa600; position: relative; transform: perspective(0) translateZ(0); }
.button::before { content: ""; position: absolute; top: 0; right: 0; bottom: 0; left: 0; z-index: -1; background-color: black; transform: scaleY(0); transform-origin: 50% 0; transition: 0.25s ease-out; }
.button:hover { color: white; }
.button:hover::before { transform: scaleY(1); }
.checkbox { display: block; width: auto; position: relative; user-select: none; }
.checkbox input { width: auto; position: absolute; z-index: -1; opacity: 0; }
.checkbox span { width: 2rem; height: 2rem; background-color: white; position: absolute; cursor: pointer; }
.checkbox span:after { content: ""; display: none; width: 0.5rem; height: 1rem; border: solid black; border-width: 0 4px 4px 0; position: absolute; top: 1px; left: 5px; transform: rotate(45deg); }
.checkbox input:checked ~ span:after { display: block; }
.checkbox small { text-align: left; display: inline-block; margin-left: 3rem; }
.discount { background-color: rgba(255, 255, 255, 0.5); margin-bottom: 1rem; }
.vacant { display: none; }

/* home page */
#nature { min-height: 100%; text-align: center; display: flex; flex-direction: column; justify-content: center; background: #3aa600 url(../images/pozadi.jpg) no-repeat fixed center bottom/cover; box-sizing: border-box; }
#nature h1 { font-weight: 500; text-transform: lowercase; margin: 0; padding-top: 18rem; color: white; background: url(../images/logo.svg) no-repeat center top/28rem auto; }
#trips { text-align: center; padding-top: 6rem; padding-bottom: 6rem; }
#trips p:first-child { font-size: 2rem; font-weight: 300; max-width: 80rem; margin-left: auto; margin-right: auto; }
#trips li { min-width: 18rem; max-width: 36rem; margin-bottom: 0; }
#trips li::before { display: inline-block; width: 8rem; }
#trips li:nth-child(1)::before { content: url(../images/vypravy-1.svg); }
#trips li:nth-child(2)::before { content: url(../images/vypravy-2.svg); }
#trips li:nth-child(3)::before { content: url(../images/vypravy-3.svg); }
#trips li:nth-child(4)::before { content: url(../images/vypravy-4.svg); }
#trips li h5 { width: 18rem; margin: 1.5rem auto; }
#trips article p { text-align: justify; }
.trip { color: white !important; background-color: #3aa600; background-repeat: no-repeat; background-size: contain; }
.trip:hover { transform: scale(1.05); }
.trip[href="#"] { cursor: default; }
.trip::before { content: ""; display: block; padding-top: 56.25%; }
.trip h2 { margin: 0; padding: 1.5rem 2rem 0.5rem; }
.trip p { margin: 0; padding: 0 2rem 1.5rem; }
#profile { text-align: justify; color: white; background-color: black; }
.scanner { min-height: 36rem; background: url(../images/pruvodce.jpg) center no-repeat; background-size: cover; }
.network { margin-top: 2rem; }
.network img { width: 5rem; margin-right: 0.5rem; }
footer p { margin: 0; }
.legal { font-size: 1rem; font-weight: 300; margin-top: 2rem; }
.iframe { margin-bottom: 2rem; padding-top: 56.25%; position: relative; }
.iframe iframe { width: 100%; height: 100%; border: 0; position: absolute; top: 0; left: 0; }

/* admin */
.admin h5 { font-size: 3rem; }
.admin td { padding: 0.5rem 1rem; border: 1px solid black; }

@media (max-width: 600px) {
  h1 { font-size: 3.2rem; }
  #nature h1 { font-size: 3.8rem; }
}