:root {
  --primary-color: #000;
  --secondary-color: #FF5050;
  --background: #fff;
  --text: #000;
  --menu-text: #fff;
  --lite-mode: #fff;
--dark-mode: #000;
}

@media (prefers-color-scheme: dark) {
  :root {
      --primary-color: #fff;
      --background: #000;
      --text: #fff;
      --menu-text: #000;
      --lite-mode: #000;
      --dark-mode: #fff;
  }
}
*,
*::before,
*::after {
  box-sizing: inherit;
  padding: 0;
  margin: 0;
}
html {
  font-size: 20px;
  line-height: 1.7;
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen, Ubuntu, Cantarell, "Open Sans", "Helvetica Neue", sans-serif;
  height: 100%;
  font-weight: 400;
}

body {
  margin:0;padding:0;
  min-height: 100%;
  background: var(--background);
}
/* layout - fixed header and footer */
header, footer {z-index:10;
position: fixed;
width: 100%;
height:60px;
background: var(--primary-color);
}
header{top: 0;}
footer{bottom: 0;}

/* head */
.head { color:var(--menu-text);text-align: center;box-shadow: 0 2px 4px rgba(0, 0, 0, 0.5);} 
h1 { color:var(--text);text-align: center;}
article {max-width:768px; margin: 0 auto;}
/* mobile nav in footer */
.nav-footer {
  max-width: 769px;
  margin: 0 auto;
  display: flex;
  align-items: center;
  justify-content: space-between;
  color: var(--menu-text);
  font-size: 14px;
  z-index:10;
}

.nav-link {
  text-align:center; padding:12px 10px 16px 10px;
  text-decoration: none;
  display:block;
  margin: 0 auto;
}
.line {stroke:var(--lite-mode); stroke-width:2; fill: none;}
.find-line {stroke:var(--lite-mode);stroke-width:4}
.link-title {display:block; margin-top:-10px;color:var(--lite-mode);}
.icon {width: 24px; height: 24px;}
.select {fill:var(--lite-mode); color:var(--lite-mode);}
.lens {fill:var(--lite-mode);}
.selected {font-weight:bold;}
article {margin: 0 auto; padding: 4rem 1rem 0 1rem;}
.page1,.page2 {color:var(--text);}
.layout {display:grid;
grid-template-columns: 1fr;
max-width:1200px;
margin:0 auto;
}

.drop-cap::first-letter {
font: normal normal 400 3.3em/0.6 "Playfair Display","Georgia",serif;
float: left; margin-top: 0.23em; margin-right: 0.1em;
/*Safarie support*/-webkit-initial-letter: 2;initial-letter: 2;
}
@media only screen and (min-width: 768px) {
.layout {grid-template-columns: 1fr 1fr;}
.drop-cap::first-letter {
font: normal normal 400 5.75em/0.6 "Playfair Display","Georgia",serif;
float: left; margin-top: 0.17em; margin-right: 0.15em;
/*Safarie support*/-webkit-initial-letter: 3;initial-letter: 3;
}
}
.float-image {float: right; padding: 20px 0 10px 10px;}
.clearfix:after { 
content: "."; 
visibility: hidden; 
display: block; 
height: 0; 
clear: both;
}
.btn {text-decoration: none; border: 1px solid #333;padding: 2px 5px; border-radius: 6px;}
.modal-window {
position: fixed;
background-color: rgba(0, 0, 0, 0.5);
top: 0;
right: 0;
bottom: 0;
left: 0;
z-index: 999;
visibility: hidden;
opacity: 0;
pointer-events: none;
transition: all 0.3s;

}
.modal-window:target {
visibility: visible;
opacity: 1;
pointer-events: auto;
}
.modal-window > div {
width: 100%;
max-width: 500px;
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
padding: 0;
background: white;
}



.modal-close {
color: #fff;
background:black;
position: absolute;
right: 0;
text-align: center;
top: -10px;
padding: 0 12px;
border: 1px solid black;
border-radius: 50%;
text-decoration: none;
}
.modal-close:hover, .modal-close:focus {
color: red;
}
.text-center {text-align: center; padding: 0 1rem;}
.modal-img {height: auto;width:100%;max-width: 768px; padding: 0.5rem 0.5rem 0 0.5rem;}
.modal-text {font-size:0.8rem; line-height:1;padding:0.5rem;}
body {font-size: 1rem;/*older browsers*/
font-size: clamp(1rem, 20px, 1.2rem);}
h1 {font-size: 0.8rem; /*older browsers*/
font-size: clamp(1rem, 2vw, 1.4rem);}
a[target="_blank"]:after {
content: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAoAAAAKCAYAAACNMs+9AAAAQElEQVR42qXKwQkAIAxDUUdxtO6/RBQkQZvSi8I/pL4BoGw/XPkh4XigPmsUgh0626AjRsgxHTkUThsG2T/sIlzdTsp52kSS1wAAAABJRU5ErkJggg==);
margin: 0 3px 0 5px;
}
iframe { width: 100%;display:block; margin: 0 auto;}
.rt-icon {
display: flex;
justify-content: space-between;
align-items: center;
max-width: 768px;
margin: 0 auto;
color: #fff;
}
.rt-chevron {
width: 24px;
height: 24px; 
fill: #fff;
padding:12px;
cursor: pointer;
background:rgba(139, 123, 123, 0.5);
border: 1px solid #000;
border-radius: 50%;
margin: 6px 6px 0 0;
}
.rt-chevron:hover, .rt-chevron:focus {
border: 1px solid #fff;

}