@import url("https://fonts.googleapis.com/css2?family=Alegreya:ital,wght@0,400;0,500;0,600;0,700;0,800;0,900;1,400;1,500;1,600;1,700;1,800;1,900&display=swap");

* {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

.instagram-media {
  margin: 15px auto !important;
}

body {
  background-color: #dac2d0;
  color: #100610;
  font-family: "Alegreya", serif;
  font-size: 20px;
  margin: 0;
}

a {
  color: #4a0045;
  text-decoration: underline;
}

html,
body {
  height: 100%;
}

.wrapper {
  display: flex;
  flex-direction: column;
  height: 100%;
}

.content {
  flex: 1 0 auto;
}

.footer {
  flex: 0 0 auto;
}

.grid-two {
  display: grid;
  grid-template-columns: auto auto;
}

.grid-item-two {
  text-align: center;
  background-image: url("../pictures/volchara.png");
  background-repeat: no-repeat;
  background-size: cover;
}

.brighten {
  filter: drop-shadow(3px 3px 4px #fd85c9) contrast(120%) saturate(2);
  transition: 0.1s;
}

.quote {
  font-style: italic;
  font-size: 21px;
  padding: 1% 2% 1% 2%;
  font-weight: 500;
}

.romance {
  font-weight: 700;
  color: #820b04;
}

.bolat_cards_3 {
  display: flex;
  flex-direction: row;
  flex-wrap: nowrap;
  justify-content: space-between;
}

.bolat_card {
  align-self: center;
  background-color: #deb4ccba;
  width: 30%;
  height: 500px;
  border: 2px solid;
  border-color: #4a0045;
  box-shadow: 3px 3px 5px rgba(0, 0, 0, 0.3);
  text-align: center;
}

.bolat_card p {
  margin-left: 6px;
  margin-right: 6px;
}

.bolat_card:hover {
  box-shadow: 5px 6px 7px rgba(0, 0, 0, 0.5);
}

.card_image {
  width: 100%;
}

.card_link {
  text-decoration: none;
  color: #100610;
}

#champions {
  height: auto;
  width: 90%;
}

#pazanskaya {
  font-style: italic;
  font-size: 30px;
  font-weight: 500;
  text-shadow: 0 0 3px #deb4cc;
}

#eheader {
  width: 1200px;
  margin: auto;
  background-color: #deb4cc;
  padding-bottom: 7px;
}

#header-left {
  display: flex;
  align-items: center;
}

#eheader a {
  text-decoration: none;
  color: #100610;
}

#efooter {
  width: 1200px;
  margin: auto;
  background-color: #deb4cc;
  padding: 7px 5px;
  display: flex;
  justify-content: space-between;
  font-weight: 500;
}

#foot1 {
  margin-left: 10px;
}

#foot1 a {
  color: #100610;
  text-decoration: none;
}

#foot1 a:hover {
  color: #9a6899;
}

#foot2 {
  color: #4a0045;
  font-weight: 400;
  font-style: italic;
  padding: 0 10px 0 10px;
  border: 3px dotted #dac2d0;
}

#foot3 {
  margin-right: 10px;
}

.blurry {
  filter: blur(5px) grayscale(30%);
}

#hamburger {
  display: none;
  justify-content: space-between;
}

.menu-btn {
  display: inline-block;
  margin: 20px;
  width: 40px;
  height: 40px;
  position: relative;
  z-index: 2;
  overflow: hidden;
}

.menu-btn span {
  width: 36px;
  height: 2px;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  background-color: #4a0045;
  transition: 0.25s ease-in-out;
}

.menu-btn span:nth-of-type(2) {
  top: calc(50% - 5px);
}

.menu-btn span:nth-of-type(3) {
  top: calc(50% + 5px);
}

.menu-btn.active span:nth-of-type(1) {
  display: none;
}

.menu-btn.active span:nth-of-type(2) {
  top: 50%;
  transform: translate(-50%, 0%) rotate(45deg);
}

.menu-btn.active span:nth-of-type(3) {
  top: 50%;
  transform: translate(-50%, 0%) rotate(-45deg);
}

.mobile-menu {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 50vh;
  padding: 15px;
  background: #deb4cc;
  transform: translateY(-100%);
  transition: transform 0.5s;
}

.mobile-menu.active {
  transform: translateY(0);
}

.mobile-menu ul {
  margin-top: 35px;
  text-align: center;
}

.mobile-menu li {
  list-style-type: none;
  margin-bottom: 4px;
}

.mobile-menu li a {
  color: #100610;
  font-weight: 500;
  text-decoration: none;
}

#mobile-main-title {
  display: inline-block;
  margin: 10px 0 10px 20px;
  font-size: 40px;
  font-weight: 600;
}

.pstryk {
  border-bottom: 2px solid #4a0045;
  border-right: 2px solid #4a0045;
  content: "";
  display: inline-block;
  height: 6px;
  width: 6px;
  margin-left: 3px;
  pointer-events: none;
  transform: rotate(-45deg);
  transform-origin: 66% 66%;
  vertical-align: middle;
}

#main-title {
  display: inline-block;
  margin: 20px;
  font-size: 50px;
  font-weight: 600;
}

#emenu {
  list-style: none;
  margin: 0;
  padding-left: 0;
  overflow: hidden;
}

#emenu li {
  float: left;
  margin-left: 10px;
  padding: 10px;
  border: 3px solid #dac2d0;
}

#emenu li:hover {
  background-color: #ead0df;
}

#emenu a {
  color: #100610;
  font-weight: 500;
  text-decoration: none;
}

#emenu a:hover {
  color: #710971;
}

section {
  width: 1200px;
  margin: auto;
  margin-top: 20px;
  margin-bottom: 20px;
  padding-left: 15px;
  padding-right: 15px;
}

.left-column {
  float: left;
  width: 40%;
}

.left-column-2 {
  float: left;
  width: 60%;
}

.right-column {
  float: left;
  width: 60%;
  padding-left: 20px;
}

.right-column-2 {
  float: left;
  width: 40%;
  padding-left: 20px;
}

.left-column-x {
  float: left;
  width: 60%;
}

.right-column-x {
  float: left;
  width: 40%;
  padding-left: 20px;
}

.cal {
  text-align: center;
}

.news-item {
  display: flex;
  flex-direction: row;
  width: 1100px;
  background: #b9d9c9;
  border: 1px solid #100610;
  padding-bottom: 20px;
}

.news-picture {
  margin-top: 10px;
  display: flex;
  align-items: center;
}

.news-text {
  margin: 10px;
}

.newsphoto {
  width: 100%;
}

.bookmedia {
  width: 100%;
  padding: 10px 10px 10px 10px;
}

.time-date {
  font-style: italic;
}

.pagin {
  text-align: center;
  font-size: 22px;
}

.byear {
  font-size: 34px;
  font-weight: 700;
  padding: 7px;
  background: rgba(255, 255, 255, 0.4);
  border-radius: 30%;
  color: #4a0045;
}

.byear a {
  text-decoration: none;
  color: #9a6899;
}

.byear a:visited {
  text-decoration: none;
  color: #9a6899;
}

.byear a:focus {
  text-decoration: underline;
  color: #4a0045;
}

.byear a:hover {
  text-decoration: underline;
  color: #4a0045;
}

.books-item {
  display: flex;
  flex-direction: row;
  width: 1100px;
  background: #d8dac2;
  border: 1px solid #100610;
  padding-bottom: 10px;
}

.books-media {
  float: left;
  width: 50%;
  display: flex;
  align-items: center;
}

.books-text {
  float: right;
  width: 50%;
  padding-left: 10px;
}

.books-intro-text {
  margin-top: 40%;
  margin-left: 15%;
  border-radius: 35px;
  background: rgba(216, 218, 194, 0.8);
  background-blend-mode: overlay;
  padding: 20px;
}

#grenouille {
  background-image: url("../pictures/arrogant.png");
}

#rudalle {
  display: block;
  width: 50%;
  margin: auto;
}

#tshirt,
#mozbol {
  display: block;
  margin: auto;
}

.video1 {
  display: block;
  margin: auto;
  width: 80%;
}

.video2 {
  display: block;
  margin: auto;
  width: 55%;
}

.video3 {
  display: block;
  margin: auto;
  width: 55%;
}

.books-intro {
  display: flex;
  flex-direction: row;
  margin-bottom: 40px;
}

#mzgbbrst {
  padding: 20px;
  background: #4a0045;
  color: #fff;
}

#teide,
#drezden {
  display: block;
  margin: auto;
  width: 70%;
}

.eighty {
  display: block;
  margin: auto;
  width: 80%;
}

#nice_plage {
  display: block;
  margin: auto;
  width: 100%;
}

#tlsp,
#drezden16 {
  display: block;
  margin: auto;
  width: 90%;
}

#mzgbbttn {
  font-family: "Alegreya", serif;
  font-size: 24px;
  font-weight: 700;
  background: #fff;
  color: #4a0045;
  padding: 10px 20px;
  margin-top: 30px;
  margin-bottom: 30px;
  border: 1px solid #4a0045;
}

#mzgbbttn:hover {
  background: #dac2d0;
  color: #100610;
  cursor: pointer;
}

.btn-news {
  font-family: "Alegreya", serif;
  font-size: 24px;
  font-weight: 700;
  background: #dac2d0;
  color: #100610;
  padding: 10px 20px;
  margin-top: 30px;
  margin-bottom: 30px;
  border: 1px solid #4a0045;
  border-radius: 5px;
}

.btn-news:hover {
  background: #deb4cc;
  cursor: pointer;
}

.btn-books {
  font-family: "Alegreya", serif;
  font-size: 24px;
  font-weight: 700;
  background: #c2dada;
  color: #100610;
  padding: 10px 20px;
  margin-top: 30px;
  margin-bottom: 30px;
  border: 1px solid #4a0045;
  border-radius: 5px;
}

.btn-books:hover {
  background: #c2d0da;
  cursor: pointer;
}

#telega {
  text-align: center;
}

#tgic {
  vertical-align: middle;
  padding: 10px;
}

#tgic:hover {
  cursor: pointer;
  opacity: 0.8;
}

#naverh {
  display: none;
  /* Hidden by default */
  position: fixed;
  /* Fixed/sticky position */
  bottom: 30px;
  /* Place the button at the bottom of the page */
  right: 10vw;
  /* Place the button 30px from the right */
  z-index: 99;
  /* Make sure it does not overlap */
  opacity: 0.8;
  border: none;
  /* Remove borders */
  outline: none;
  /* Remove outline */
  background-color: #b56794;
  /* Set a background color */
  color: #fff;
  /* Text color */
  cursor: pointer;
  /* Add a mouse pointer on hover */
  padding: 15px;
  /* Some padding */
  border-radius: 8px;
  /* Rounded corners */
  font-family: "Alegreya", serif;
  font-size: 18px;
  /* Increase font size */
}

#naverh:hover {
  background-color: #8b4c70;
  /* Add a darker background on hover */
}

#gallery {
  display: flex;
  flex-wrap: wrap;
}

.text-input {
  background-color: #b56794;
  color: #fff;
  font-size: 18px;
  width: 50%;
  padding: 10px;
  margin: 5px;
  border: none;
  border-radius: 4px;
  outline: none;
  font-family: "Alegreya", serif;
}

.text-input::placeholder {
  color: #fff;
}

.text-input:focus {
  background-color: #b56794;
  color: #fff;
}

#submitCal {
  border: none;
  /* Remove borders */
  outline: none;
  /* Remove outline */
  background-color: #b56794;
  /* Set a background color */
  color: #fff;
  /* Text color */
  cursor: pointer;
  /* Add a mouse pointer on hover */
  padding: 15px;
  /* Some padding */
  border-radius: 8px;
  /* Rounded corners */
  font-family: "Alegreya", serif;
  font-size: 20px;
  /* Increase font size */
  margin: 20px;
}

#submitCal:hover {
  background-color: #4a0045;
}

.lipic {
  height: 40vh;
  flex-grow: 1;
  list-style-type: none;
}

.impic {
  max-height: 100%;
  min-width: 100%;
  object-fit: cover;
  vertical-align: bottom;
}

#countries {
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  justify-content: space-around;
}

.strana {
  list-style-type: none;
  flex-basis: 33%;
  padding: 25px;
}

.strana a {
  color: #100610;
  text-decoration: none;
}

.strana a:hover {
  font-weight: 600;
  color: #602043;
}

.strana img {
  float: left;
  height: 60px;
}

#czterysta {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  flex-wrap: wrap;
}

#czterysta1 {
  font-size: 60px;
  font-weight: 600;
}

#lagente {
  width: 50%;
  height: auto;
}

#setka {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  row-gap: 100px;
}

.youTubeVideo {
  flex-basis: 45%;
  flex-grow: 1;
  padding: 10px;
  margin: 15px;
  border: 1px solid #dfd7dc;
}

.youTubeCaption {
  margin-top: 10px;
  margin-bottom: 10px;
}

#anthem {
  background: #deb4cc;
  color: #4a0045;;
  border-radius: 19%;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 16px;
  padding: 20px;
}

#anthem audio {
  width: 100%;
  max-width: 500px;
}

#anthem span {
  text-align: center;
  line-height: 1.5;
}

@media only screen and (max-width: 1200px) {

  #eheader,
  #efooter,
  section {
    max-width: 100%;
  }

  #emenu li {
    margin-top: 10px;
  }
}

@media only screen and (max-width: 990px) {
  #lagente {
    width: 70%;
    height: auto;
  }

  #setka {
    flex-direction: column;
    row-gap: 5px;
  }

  .youTubeVideo {
    flex-basis: 95%;
    margin: 20px;
  }

  .books-intro-text {
    margin: auto;
  }

  .bolat_cards_3 {
    flex-direction: column;
    flex-wrap: wrap;
  }

  .bolat_card {
    width: 100%;
    margin: 10px 2px 10px 2px;
    height: 750px;
  }
}

@media only screen and (max-width: 670px) {

  #rudalle,
  #tshirt,
  #mozbol,
  .video1,
  #teide,
  #drezden,
  #porches,
  #tlsp,
  #drezden16 {
    width: 90%;
  }

  #eheader {
    display: none;
  }

  #hamburger {
    display: flex;
    background-color: #deb4cc;
  }
}

@media only screen and (max-width: 670px) {

  .left-column,
  .right-column,
  .left-column-x,
  .right-column-x,
  .left-column-2,
  .right-column-2 {
    width: 100%;
    padding: 0px;
  }

  .eighty {
    display: block;
    margin: auto;
    width: 100%;
  }

  #champions {
    margin-bottom: 15px;
    width: 100%;
  }

  .grid-two {
    display: flex;
    flex-direction: column;
  }

  #efooter {
    flex-direction: column;
  }

  #foot1,
  #foot2,
  #foot3 {
    margin: auto;
  }

  .books-item {
    flex-direction: column;
  }

  .books-media {
    width: 100%;
  }

  .books-text {
    width: 100%;
    padding-left: none;
  }

  .video2 {
    width: 75%;
    padding-top: 30px;
  }

  .video3 {
    width: 75%;
    padding-bottom: 30px;
  }

  .books-intro {
    flex-direction: column;
  }

  .bolat_card {
    width: 100%;
    margin: 10px 2px 10px 2px;
    height: 550px;
  }
}

@media only screen and (max-width: 450px) {
  .news-item {
    flex-direction: column;
  }

  #czterysta1 {
    font-size: 45px;
  }
}

@media (max-aspect-ratio: 1/1) {
  .lipic {
    height: 30vh;
  }
}

@media (max-height: 480px) {
  .lipic {
    height: 80vh;
  }
}

@media (max-aspect-ratio: 1/1) and (max-width: 480px) {
  #gallery {
    flex-direction: row;
  }

  .lipic {
    height: auto;
    width: 100%;
  }

  .impic {
    width: 100%;
    max-height: 75vh;
    min-width: 0;
  }

  .strana {
    list-style-type: none;
    flex-basis: 45%;
    padding: 20px;
  }

  .text-input {
    width: 100%;
  }
}