/*
body {
    background: url(pictures/ps2.jpeg), url(pictures/cover_asset.jpg);
    background-size: contain;
    background-repeat: no-repeat;
    background-blend-mode: multiply;
    height: 190vw;
}


*/
@font-face {
  font-family: 'Bebas_Regular';
  src: url(fonts/Bebas\ Regular\ 400.ttf);
}
@font-face {
  font-family: 'Autography';
  src: url(fonts/Autography.otf);
}
@font-face {
  font-family: 'DIN Condensed Bold';
  src: url(fonts/din-condensed-bold.ttf);
}
@font-face {
  font-family: 'Bodoni MT Bold';
  src: url(fonts/bodoni-mt-bold.ttf);
}
@font-face {
  font-family: 'Bauer Bodoni D Demi Bold';
  src: url(fonts/Bauer\ Bodoni\ D\ Demi\ Bold.otf);
}

/*
@font-face {           gaty 
  font-family: 'Brocolatos';
  src: url(fonts/Brocolatos.ttf);
}

#t1 {
  font-family: 'Brocolatos';
}

#t3 {
    font-family: 'Bebas_Regular';
    font-weight: lighter;
    color: rgb(0, 0, 0);
    font-size: 22vw;
    opacity: 0.6;
    text-align: left;
    letter-spacing: 1px;          /*      1vw ?       *//*
    line-height: 0.87;
    margin-top: 92vw;
    margin-left: 3vw;
}


/*PC version background*//*
@media (min-width: 600px) {
  /*body {
    background: url(pictures/ps5.jpeg), url(pictures/cover_asset.jpg);
    background-size: contain;
    background-repeat: no-repeat;
    background-blend-mode: multiply;
  }
  .pc {
    opacity: 0;
  }
  .pctext{
    color: black;
    font-size: 200px;
    opacity: 1;
  }
}*/























































/*
html, body {
  margin: 0;
  padding: 0;
  height: 100%;
}
.hero {
  width: 100%;

  background-image:
    url("pictures/cover_asset.jpg"),
    url("pictures/ps2.jpeg");


  background-repeat: no-repeat, no-repeat;


  background-size: 100vw auto, 100vw auto;
  background-position: top center, top center;

  background-blend-mode: multiply;

  aspect-ratio: 2730 / 4096;
}
.below {
  width: 100%;

  background-image: url("pictures/asset5.png");
  
  background-repeat: no-repeat;

  
  background-size: 100vw auto;
  background-position: top center;

  aspect-ratio: 682 / 936;
}
*/


















































/*.pctext{
  opacity: 0;
  margin-top: -50%;
  z-index: 10;
}*/


.hero {
  position: relative;
  aspect-ratio: 2730 / 4096;
  overflow: visible;
}

.hero__blend {
  position: absolute;
  inset: 0;

  background:
    url(pictures/cover_asset.jpg),
    url(pictures/ps2.jpeg);

  background-size: 100% auto, 100% auto;
  background-position: top center, top center;
  background-repeat: no-repeat;
  background-blend-mode: multiply;
  
}

.hero__content {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: flex-start;
  padding-top: 12%;
  text-align: center;
}

.date {
  font-size: 9vw;
  font-family: 'Bauer Bodoni D Demi Bold';
  color: #6e5e44;
}

.save {
  font-size: 9vw;
  font-family: 'Autography';
  color: #6e5e44;
  font-weight: lighter;
  margin-top: -6%;
}

.youare {
  font-family: 'Bebas_Regular';
  font-weight: lighter;
  color: rgb(0, 0, 0);
  font-size: 22vw;
  opacity: 0.6;
  text-align: left;
  letter-spacing: 0.3vw;
  margin-top: 43vw;          
  line-height: 0.85;
  /*margin-left: 5vw;*/
  position: relative;
  left: 5vw;
  margin-left: 0;
}
.toour {
  font-family: 'Autography';
  font-weight: lighter;
  font-size: 16vw;
  color: white;
  margin-top: -28.5%;
  /*margin-left: -12%;*/

  position: relative;
  left: -5%;

  z-index: 6;
}

.tear {
  display: block;
  width: 100%;
  pointer-events: none;
  position: relative;
  z-index: 5;
}

.tear--top {
  width: 170%;
  height: 170%;
  margin-left: -31%;
  margin-top: -12%;
}


.invite {
  position: relative;
  aspect-ratio: 682 / 473; 
  
  background: url(pictures/asset5_crop.png) top center / 100% auto no-repeat;
  margin-top: -19%;

  position: relative;
  left: 50%;
  transform: translateX(-50%);
  width: 100vw;

}

.invite__text {
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  width: 80%;
}

.tear--bottom {
  width: 170%;
  height: 170%;
  margin-left: -31%;
  margin-top: -21%;
}

.szeretettel {
  position: absolute;
  margin-left: 16%;
  margin-top: 1%;
  width: 70%;
  z-index: 7; 
}

.janos {
  position: absolute;
  z-index: 7;
  margin-top: -8%;
  margin-left: 25.5%;
  width: 50%;
  filter: brightness(115%);
}

html, body {
  margin: 0;
  padding: 0;
  overflow-x: clip;
}

body {
  overflow-x: clip;
  position: relative;
}

*,
*::before,
*::after {
  box-sizing: border-box;
}

.page {
  position: relative;
  overflow-x: clip;
  width: 100%;
}

#olvassel {
  width: 100%;
  margin-top: -5%;
  display: block;
  position: relative;
  pointer-events: none;
}

.container {
  position: relative;
}

.qrc {
  position: absolute;
  width: 48%;
  bottom: 27.1%;
  left: 25%;
  opacity: 0;
}
.qrc:hover {
  opacity: 0.7;
}

.btn {
  border: none;
  background-color: #6e5e44;
  width: 12%;
  height: 1%;
  cursor: pointer;
  position: absolute;
  bottom: 97%;
  right: 3%;
  opacity: 0.7;
}

.hunbtn {
  background-image: url(pictures/Flag_of_Hungary.svg.png);
  background-size: cover;
  bottom: 95.7%;
}

.canbtn {
  background-image: url(pictures/Flag_of_Canada.svg.png);
  background-size: cover;
}

.btn:hover {
  background-color: #524737;
  opacity: 1;
}

.goofle {
  font-family: 'Autography';
  position: absolute;
  font-weight: lighter;
  color: white;
  font-size: 9vw;
  bottom: 23.1%;
  left: 32%;
  opacity: 0;
}
/*
.goofle:hover {
  opacity: 0.7;
}*/