:root {
  --fs-10: calc(10 / 16 * 1rem);
  --fs-12: calc(12 / 16 * 1rem);
  --fs-16: calc(16 / 16 * 1rem);
  --fs-18: calc(18 / 16 * 1rem);
  --fs-20: calc(20 / 16 * 1rem);
  --fs-24: calc(24 / 16 * 1rem);
  --fs-26: calc(26 / 16 * 1rem);
  --fs-28: calc(28 / 16 * 1rem);
  --fs-42: calc(42 / 16 * 1rem);
  --fs-48: calc(48 / 16 * 1rem);
  --fs-72: calc(72 / 16 * 1rem);

  /*Mobiilis elementide teksti suurused siin määratud*/
  --font-size-topnav: var(--fs-10);
  --font-size-btn: var(--fs-16);
  --font-size-btn-small: var(--fs-12);
  --font-size-small: var(--fs-12);
  --font-size-h1: var(--fs-42);
  --font-size-h2: var(--fs-26);
  --font-size-h3: var(--fs-18);

  /*suuremal seadmel- arvuti, tablet, mille laius ületab 600px,teksti suurus teine-suurem*/
  @media (width >= calc(600/16*1rem)) {
    --font-size-topnav: var(--fs-18);
    --font-size-small: var(--fs-18);
    --font-size-btn-small: var(--fs-20);
    --font-size-btn: var(--fs-24);
    --font-size-h1: var(--fs-72);
    --font-size-h2: var(--fs-48);
    --font-size-h3: var(--fs-28);
  }
}
/*Style layout rules*/
*,
*::before,
*::after {
  box-sizing: border-box;
} /*piirid ei ületaks laiust pikkust*/
* {
  margin: 0;
} /* css reset type rule*/

/*Selectors Global styles*/
body {
  font-family: Verdana, Geneva, Tahoma, sans-serif;
  line-height: 1.3;
  /* background-color: rgb(130, 70, 60); */
}

h1,
h2,
h3 {
  line-height: 1.1; /* rea kõrgus-110% font size*/
}

h1 {
  /* font-size: var(--font-size-h1); */
  text-align: center;
}
h2 {
  color: beige;
  font-size: var(--font-size-h2);
  text-align: center;
}
h3 {
  color: beige;
  font-size: var(--font-size-h3);
  text-align: center;
}
p,
strong {
  font-size: var(--font-size-small);
}
a {
  text-decoration: none;
} /*(anchor tag-is)eemaldab linkidelt default underline*/
img,
picture,
svg {
  max-width: 100%; /*välistab full size image horizontal scrollimist, need ei lähe suuremaks kui parent*/
  height: auto;
  display: block; /*parem paigutus*/
}
.temporary__fog {
  opacity: 0.3;
  a {
    visibility: collapse;
  }
  .mail__kinnita {
    visibility: collapse;
  }
}

.wrapper {
  width: min(
    calc(100% - 39px),
    calc(1400 / 16 * 1rem)
  ); /*venitamisel 327px Mobile width ja 1200px-maximum PC width*/
  margin-inline: auto; /*tsentreerib, nii et mõlemalt poolt ühesugune kaugus max laiuseni */
}

.topnav {
  color: white;
  display: flex;
  align-items: center;
  justify-content: center;
  padding-block: 20px;
  @media (width >= calc(600/16*1rem)) {
    padding-block: 50px;
  }
  border: 2px solid darkgoldenrod;
  /* .topnav__wrapper:hover img {
    -webkit-filter: brightness(70%);
    transform: scale(1.1);
  } */
  background-color: rgb(120, 70, 60);
}
.topnav__logos {
  display: flex;
  flex-flow: column;
  align-items: center;
}
.topnav__logo {
  width: calc(10 / 16 * 1rem);
  @media (width >= calc(600/16*1rem)) {
    width: calc(30 / 16 * 1rem);
  }
}
.topnav__logo2 {
  width: calc(40 / 16 * 1rem);
  @media (width >= calc(600/16*1rem)) {
    width: calc(125 / 16 * 1rem);
  }
}
.topnav__links {
  display: flex;
  gap: 10px;
  list-style-type: none;
  padding: 0;

  @media (width >= calc(600/16*1rem)) {
    gap: 30px;
  }
}
.topnav__link {
  font-size: var(--font-size-topnav);
  font-weight: 700;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: white;
  &:hover {
    text-decoration: underline;
    text-underline-offset: 7px;
    text-decoration-thickness: 3px;
  }
}
.topnav__item a.active {
  border: 1px dashed lightgray;
}
.mainImg {
  display: flex;
  padding: 20px;
  justify-content: center;
  align-items: end;
  position: relative;
  border-style: outset;
  border-radius: 5cap;
  border-color: bisque;
  background: linear-gradient(315deg, #7e6111, #cc7b11);
  color: lightblue;
}
.mainImg img {
  border-radius: 5cap;
  vertical-align: middle;
}
.mainImg__text {
  position: absolute;
}
.meielood {
  display: flex;
  gap: 8px;
  color: lightblue;
  font-style: italic;
  border-bottom: 3px solid rgb(200, 140, 75);
  margin-bottom: 20px;
}
.lugu {
  padding: 1rem;
  p {
    margin-block-end: 0;
  }
}
.literature {
  display: flex;
  color: lightblue;
  font-style: italic;
  border-bottom: 3px solid rgb(200, 140, 75);
  margin-bottom: 20px;
  gap: 10px;
  @media (width >= calc(600/16*1rem)) {
    gap: 25px;
  }
}
.intro {
  width: 49%;
  padding-top: 10px;
  border: 1px solid rgb(200, 140, 75);
  display: flex;
  gap: 7px;
  flex-wrap: wrap;
  justify-content: center;
  align-content: center;
}
.intro a {
  background-color: aliceblue;
  opacity: 50%;
  padding: 5px;
  border: 2px groove lightgray;
  font-size: var(--font-size-btn);
  &:hover {
    opacity: 100%;
  }
}
.historyImg {
  width: 20%;
}
.galery {
  display: flex;
  justify-content: space-around;
  position: relative;
  color: beige;
  border: 2px outset bisque;
  border-radius: 5cap;
  background: linear-gradient(315deg, #7e6111, #cc7b11);
  margin-bottom: 20px;
  gap: 5px;
  @media (width >= calc(600/16*1rem)) {
    gap: 25px;
  }
}
.galery__head {
  position: absolute;
  border-bottom: 3px solid beige;
}
.galery__images {
  position: relative;
  padding-top: 80px;
  padding-bottom: 50px;
  text-align: center;
}
.galery__images img {
  margin-top: 14px;
  border-radius: 5cap;
}
.galery__images strong {
  text-decoration: underline;
  text-underline-offset: 4px;
  text-decoration-thickness: 2px;
}
.galery__images a {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translateX(-50%);
  background-color: aliceblue;
  opacity: 70%;
  padding: 20px;
  border: 2px groove lightgray;
  border-radius: 10px;
  font-size: var(--font-size-btn);
  &:hover {
    opacity: 100%;
  }
}
.events {
  display: flex;
  position: relative;
  margin-bottom: 20px;
}
.events__head {
  position: absolute;
  border: 2px outset bisque;
  border-radius: 5cap;
  background: linear-gradient(315deg, #7e6111, #cc7b11);
  width: 100%;
  padding-bottom: 30px;
  padding-top: 30px;
}
.events__content {
  color: beige;
  display: flex;
  margin-top: 130px;
  gap: 5px;
  @media (width >= calc(600/16*1rem)) {
    gap: 15px;
  }
}
.event {
  display: flex;
  flex-flow: column;
  align-items: center;
  flex: 1;
  text-align: center;
  background: linear-gradient(315deg, #7e6111, #cc7b11);
  border-radius: 5px;
  padding: 15px;
  gap: 5px;
  @media (width >= calc(600/16*1rem)) {
    gap: 20px;
  }
}
.event a {
  background-color: aliceblue;
  opacity: 70%;
  padding: 1px;
  width: 50%;
  border: 2px groove lightgray;
  border-radius: 10px;
  @media (width >= calc(600/16*1rem)) {
    padding: 7px;
  }
  font-size: var(--font-size-btn-small);
  &:hover {
    opacity: 100%;
  }
}
.f_container {
  color: white;
  display: flex;
  align-items: center;
  justify-content: space-around;
  padding-block: 20px;
  @media (width >= calc(600/16*1rem)) {
    padding-block: 50px;
  }
  border: 2px solid darkgoldenrod;
  background-color: rgb(120, 70, 60);
}
.f_container img {
  width: calc(10 / 16 * 1rem);
  @media (width >= calc(600/16*1rem)) {
    width: calc(30 / 16 * 1rem);
  }
  border-radius: 10px;
  border: 1px solid darkgoldenrod;
}
.f__nav a {
  color: white;
  font-size: var(--font-size-topnav);
  font-weight: 700;
  background-color: transparent;
  &:hover {
    background-color: #7e6111;
  }
}
/* *****************************************************
                   Kontakt
*****************************************************   */
.kontakt__maintext {
  color: antiquewhite;
  width: 100%;
  margin-bottom: 10px;
  padding: 50px;
  p {
    margin-top: 30px;
  }
}
.kontaktid {
  border: 2px solid darkgoldenrod;
  display: flex;
  flex-flow: column;
  @media (width >= calc(600/16*1rem)) {
    flex-flow: row;
  }
}
.kontaktandmed {
  flex: 1;
  background-color: #914d26;
  border: 2px solid darkgoldenrod;
  color: white;
  ul {
    height: 423px;
    margin-top: 40px;
    text-align: left;
    list-style-type: none;
  }
}
.kontakt__rida {
  line-height: 1.6;
}
.kontakt__rida__arveldus {
  margin-top: 20px;
}
.mailbox {
  flex: 1;
  padding: 10px;
}
input[type="text"],
textarea,
select {
  width: 100%;
  padding: 12px;
  border: 1px solid #ccc;
  border-radius: 5px;
  margin-top: 6px;
  margin-bottom: 12px;
  resize: vertical;
}
.mail__kinnita[type="submit"] {
  background-color: aliceblue;
  color: #551a8b;
  padding: 10px 10px;
  border: 2px groove lightgray;
  border-radius: 5px;
  cursor: pointer;
}
textarea {
  height: 160px;
}
/* *****************************************************
                   Akende restaureerimine
*****************************************************   */
.aknad__pealkiri {
  border-bottom: 6px groove goldenrod;
  padding: 20px;
}
.ajahammas {
  padding: 20px;
  background-color: #914d26;
  display: flex;
  align-items: flex-start;
  border-bottom: 2px solid goldenrod;
  h3 {
    flex: 1;
    padding: 20px;
  }
  img {
    flex: 1;
    padding: 20px;
    border-left: 2px solid goldenrod;
    width: 50%;
  }
}
.kursus {
  padding: 20px;
  h3 {
    border-bottom: 2px solid goldenrod;
    padding-bottom: 20px;
  }
}
.kursus__list {
  padding: 20px;
  background-color: #914d26;
  border-bottom: 2px solid goldenrod;
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  justify-content: center;
  gap: 15px;
}
.kursus__pilt {
  list-style-type: none;
  position: relative;
}
.kursus__pilt::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-color: rgba(255, 255, 255, 0);
}
.kursus__pilt:hover::before {
  background-color: rgba(255, 255, 255, 0.2);
}
.kurImg {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.uusaken {
  padding: 20px;
  h3 {
    border-bottom: 2px solid goldenrod;
    padding-bottom: 30px;
  }
}
.uuedaknapildid {
  background-color: #914d26;
  padding: 20px;
  display: flex;
  flex-flow: column;
  align-items: center;
}
.aknavideo {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 15px;
  margin-bottom: 25px;
  a {
    background-color: bisque;
    padding: 5px;
    border: 5px groove goldenrod;
    border-radius: 5px;
    transition: box-shadow 0.3s;
    &:hover {
      box-shadow: 10px 10px 10px rgba(218, 165, 32, 0.35);
    }
  }
}
/* *****************************************************
                   Galerii pildid
*****************************************************   */
.galerii__pealkiri {
  border-bottom: 6px groove goldenrod;
  padding: 20px;
}
.galerii__box {
  padding: 20px;
  h3 {
    border-bottom: 2px solid goldenrod;
    padding-bottom: 20px;
  }
}
.galerii__list {
  padding: 20px;
  background-color: #914d26;
  border-bottom: 2px solid goldenrod;
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  justify-content: center;
  gap: 15px;
}
.gPilt {
  list-style-type: none;
  width: 300px;
  height: 250px;
  cursor: pointer;
  position: relative;
}
.gPilt::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-color: rgba(255, 255, 255, 0);
}
.gPilt:hover::before {
  background-color: rgba(255, 255, 255, 0.2);
}
.galImg {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
#signature8 {
  background-color: #914d26;
  padding-bottom: 6px;
  color: beige;
  top: 10px;
  left: 10px;
  opacity: 0;
}

/* *****************************************************
                   Ajalugu
*****************************************************   */
.ajalugu__pealkiri {
  display: flex;
  flex-flow: column;
  align-items: center;
  gap: 10px;
  border-bottom: 6px groove goldenrod;
  padding: 20px;
  h2 {
    box-shadow: 10px 0px 10px rgba(0, 0, 0, 0.15);
  }
  img {
    border-radius: 15px;
    padding: 20px;
    box-shadow: 5px 5px 10px rgba(0, 0, 0, 0.15);
  }
  h3 {
    padding-top: 30px;
  }
  .comment {
    font-size: var(--font-size-topnav);
    line-height: 0.5;
  }
}
.ajalugu_box {
  color: rgb(245, 245, 209);
  padding: 10px;
  background-color: rgb(131, 84, 59);
  border-left: 4px dotted goldenrod;
  border-right: 4px dotted goldenrod;
}
.ajalugu__paragraph {
  box-shadow: 5px 5px 10px rgba(0, 0, 0, 0.15);
  margin-bottom: 15px;
  padding: 15px 5px;
  strong {
    font-size: var(--font-size-btn);
    color: rgb(239, 243, 190);
  }
  .ital {
    font-style: italic;
  }
}
/* *****************************************************
                   Meist. Kes me oleme
*****************************************************   */
.meist__pealkiri {
  margin-top: 15px;
  margin-bottom: 15px;
  border-bottom: 6px groove goldenrod;
  padding: 20px;
  h2 {
    box-shadow: 10px 0px 10px rgba(0, 0, 0, 0.15);
  }
}
.meie {
  color: #f0e6e6;
  padding: 10px;
  background-color: rgb(131, 84, 59);
  border-left: 4px dotted goldenrod;
  border-right: 4px dotted goldenrod;
}
.meie__paragraph {
  box-shadow: 5px 5px 10px rgba(0, 0, 0, 0.15);
  padding-bottom: 15px;
  padding-top: 15px;
  margin-bottom: 50px;
  h3 {
    margin-bottom: 20px;
  }
}
/* *****************************************************
                   Mõõdunud üritused
*****************************************************   */
.pastevents__pealkiri {
  display: flex;
  flex-flow: column;
  align-items: center;
  gap: 10px;
  border-bottom: 6px groove goldenrod;
  padding: 20px;
  h2 {
    box-shadow: 10px 0px 10px rgba(0, 0, 0, 0.15);
  }
}
.pastevents {
  color: #e4dbdb;
  padding: 10px;
  background-color: rgb(131, 84, 59);
  border-left: 4px dotted goldenrod;
  border-right: 4px dotted goldenrod;
}
.pastevents__paragraph {
  box-shadow: 5px 5px 10px rgba(0, 0, 0, 0.15);
  margin-bottom: 25px;
}
.pastBorder {
  margin-top: 15px;
  margin-bottom: 15px;
  border-bottom: 1px dashed goldenrod;
}
.noBorder {
  border: none;
  margin-top: 5px;
  margin-bottom: 5px;
}
.right-side {
  display: flex;
  justify-self: end;
  margin-right: 10px;
}
.pastEventImages {
  margin-top: 15px;
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  justify-content: center;
  gap: 15px;
}
.pastEventImgCont {
  height: 200px;
  width: 300px;
  list-style-type: none;
  cursor: pointer;
  position: relative;
}
.pastEventImgCont::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-color: rgba(255, 255, 255, 0);
  transition: all 150ms ease-in-out;
}
.pastEventImgCont:hover::before {
  background-color: rgba(255, 255, 255, 0.2);
}
.pastEventImgCont img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* *****************************************************
                   Tulevad üritused
*****************************************************   */
.futureEvents__pealkiri {
  display: flex;
  flex-flow: column;
  align-items: center;
  gap: 10px;
  border-bottom: 6px groove goldenrod;
  padding: 20px;
  h2 {
    box-shadow: 10px 0px 10px rgba(0, 0, 0, 0.15);
  }
}
.futureEvents {
  color: #e4dbdb;
  padding: 10px;
  background-color: rgb(131, 84, 59);
  border-left: 4px dotted goldenrod;
  border-right: 4px dotted goldenrod;
}
.futureEvents__paragraph {
  box-shadow: 5px 5px 10px rgba(0, 0, 0, 0.15);
  margin-bottom: 25px;
  p {
    margin-top: 15px;
    margin-bottom: 15px;
    border-bottom: 1px dashed goldenrod;
  }
}

.imgFullSize {
  border: 7px solid rgb(116, 93, 36);
  z-index: 999;
  cursor: zoom-out;
  display: block;
  width: 800px;
  max-width: 800px;
  height: 550px;
  max-height: 550px;
  position: fixed;
  left: 20px;
  top: 70px;
}