/* General */

@font-face { font-family: "FaktPro"; src: url("/font/faktpro-medium.otf") format("opentype"); }
::selection {color: white; background: #f7afaf;}
*{box-sizing:border-box;font-family:FaktPro, sans-serif;scroll-behavior:smooth;transition:0.2s;}
body{margin:0;padding:0;}
a{text-decoration:none;}
h2{color:#f7afaf;margin:2em;}

/* Header */

header{width:100%;color:#f7afaf;display:flex;justify-content:space-between;align-items:center;position:fixed;top:0;left:0;padding:20px 50px;z-index:999;background:white;}
#logo{height:50px;transition:1s;  transition-timing-function: ease;}
#logo:hover{transform:rotate(360deg);}
.logo{transition:1s;transition-timing-function: ease;}
.logo:hover{transform:rotate(360deg);}
header span{color:#f7afaf;position:relative;cursor:pointer;}
.link:after{content: '';position: absolute;width: 10px;transform: scaleX(0);height: 5px;bottom: -4px;left: 1px;background-color: #f7afaf;transform-origin: bottom right;border-radius:25%;transition: transform 0.2s cubic-bezier(0.22, 1, 0.36, 1);}
.link:hover:after {transform: scaleX(1);transform-origin: bottom left;}

/* Mobile Menu Header &  Navigation */

#mobilenav{width:100%;position:fixed;top:0px;left:0px;display:none;justify-content:space-between;align-content:center;box-sizing:border-box;flex-direction:row;z-index:998;padding:10px;color:#f7afaf;}
#mobilenav span,#mobilenav div{cursor:pointer;}

#mobilemenu{display:none;width:100vw;height:100vh;top:0px;left:0px;background:white;text-align:center;line-height:2em;position:fixed;transition:0.5s;flex-direction:column;align-items:center;padding:50px;z-index:999;}
#mobilemenu img{width:30%;margin-bottom:50px;}
#mobilemenu span{color:#f7afaf;position:relative;font-size:24px;display:block;margin-bottom:25px;cursor:pointer;}


/* Clouds */

#felho {height: 150vh;display: block;padding:0!important;background: #e6ecef;}
.moving-div {width:100%;position:fixed;top:0px;left:0;padding:0!important;transition:1.5s;transition-timing-function:ease;}
.moving-div2 {width:100%;position:fixed;top:0px;right:0;padding:0!important;transition:1.5s;transition-timing-function:ease;}
#felho-mobile{display:none;}

/* Bio */

#bio{width:100%;min-height:100vh;background:#e6ecef;display:flex;align-items:center;flex-direction:column;justify-content:center;}
.bio-inner{display:flex;flex-wrap:nowrap;width:55%;margin:0 auto 0 auto;}
.bio-txt{width:50%;align-self:flex-end;padding-bottom:100px;text-align:left;}
.bio-img{width:50%;text-align:right;}
#bio h1{font-size:48px;margin:0;color:#f7afaf;line-height:40px;}
#bio h3{color:white;font-weight:normal;}
#bio p{color:#9e7777;}

/* Flipcards */

#segithetek{width:80%;min-height:100vh;margin:0 auto 0 auto;text-align:center;padding:50px;}
.flip-card-container{display:flex;flex-direction:row;flex-wrap:wrap;gap:15px;align-items:center;justify-content:center;}
.flip-card {background-color: transparent;width:23%;aspect-ratio:1/1!important; perspective: 1000px;}
.flip-card-inner {position: relative;width: 100%;  height: 100%;  background:#e6ecef;border-radius:25px;box-shadow:0px 2px 2px #e6ecef;padding:15px;text-align:center; aspect-ratio:1/1!important; color:#9e7777;display:flex;align-items:center; flex-direction:column;justify-content:center;margin:auto;  transition: transform 0.8s;transform-style: preserve-3d;}
.flip-card:hover .flip-card-inner {transform: rotateY(180deg);}
.flip-card-front, .flip-card-back { position: absolute; width: 100%; height: 100%;-webkit-backface-visibility: hidden;backface-visibility: hidden;}
.flip-card-front {background:#e6ecef;border-radius:25px;box-shadow:0px 2px 2px #e6ecef;padding:15px;text-align:center; aspect-ratio:1/1!important; color:#9e7777;display:flex;align-items:center; flex-direction:column;justify-content:center;margin:auto;}
.flip-card-back {background:#e6ecef;border-radius:25px;box-shadow:0px 2px 2px #e6ecef;padding:15px;text-align:center; aspect-ratio:1/1!important; color:#9e7777;display:flex;align-items:center; flex-direction:column;justify-content:center;margin:auto;transform: rotateY(180deg); line-height:1.5em;  padding:25px;} 
.flip-card img{max-height:60%;max-width:100%;}
.flip-card p{margin:0;margin-top:1em;}

/* Folyamat */

#folyamat{width:80%;min-height:100vh;margin:50px auto;text-align:center;padding-top:50px;}
#folyamat p{margin:2em;line-height:1.5em;color:white;color:#9e7777;}
.folyamat-inner{width:100%;padding:50px;background:#dfd8d6;border-radius:25px;text-align:center;}
.gomolyag{width:80%;}

/* About */

#rolam{width:100%;min-height:180vh;background:#e6ecef;margin:100px auto;background:url(img/labirintushatter.webp) no-repeat;background-size:100%;background-position:top 250px right 0px;}
.rolam-inner{width:80%;margin:0 auto;display:flex;flex-direction:row;flex-wrap:nowrap;padding-top:100px;}
.rolam-txt{width:70%;padding-right:100px;color:#7d9db3;}
.rolam-img{width:30%;}
.rolamimg-desktop{display:block;width:80%;filter:drop-shadow(0px 0px 10px black);}
.rolamimg-mobile{display:none;}
#rolam h2{margin:0;}
#spacer{height:200px;display:block;}

/* Árak & Elérhetőség & Credit */

#arak{margin-top:100px;scroll-margin-top:150px;}
.arak,#elerhetoseg{display:flex;flex-direction:row;flex-wrap:nowrap;width:50%;margin:0 auto;justify-content:space-between;align-items:center;text-align:center;color:#f7afaf;margin:50px auto;}
#elerhetoseg a{color:#f7afaf;}
#credit{width:60%;margin:150px auto;border-radius:10px;background:blue;display:flex;flex-direction:row;justify-content:space-between;padding:25px 50px;background:#dfd8d6;color:white;}
#credit a{color:white;}

/* Mobile */

@media only screen and (max-width: 1200px) {
#felho{display:none!important;}
header{padding:10px;}
#segithetek{width:100%;padding:10px;}
.flip-card{width:45%;}
.flip-card-front{font-size:12px;}
.flip-card-back{font-size:10px;}
#bio{padding:150px 10px 50px 10px;}
.bio-inner{width:100%;flex-wrap:wrap;}
.bio-txt{width:100%;padding-bottom:50px;}
.bio-img{width:100%;margin-bottom:50px;text-align:center;}
.bio-img img{width:80%;height:auto;}
#folyamat{width:100%;padding:10px;}
.folyamat-inner{padding:20px;}
#folyamat p{margin: 1em 0em;}
.gomolyag{width:100%;}
.arak,#elerhetoseg{flex-wrap:wrap;margin:0 auto;align-items:center;justify-content:center;}
.arak p,#elerhetoseg p{width:100%;}
.arak img,#elerhetoseg img{margin:1em;}
#credit{width:80%;margin:50px auto;flex-wrap:wrap;padding:25px 25px;}
#credit span{width:100%;}
#rolam{margin:0;background:url(img/labirintushatter.webp) no-repeat #e6ecef;background-position:unset;background-size:auto 100%;}
.rolam-inner{width:100%;padding:10px;flex-wrap:wrap;justify-content:right;}
.rolam-txt{width:100%;padding:10px;order:2;}
.rolam-img{width:50%;text-align:right;padding:10px;order:1;}
.rolamimg-desktop{display:none;}
.rolamimg-mobile{display:inline-block;filter:drop-shadow(0px 0px 10px black);float:right;width:40%;margin-left:1em;margin-bottom:1em;}
#spacer{display:none;}
#navigation{display:none;}
#mobilenav{display:flex;align-items:center;background:white;}
#rolam,#segithetek,#folyamat,#bio{scroll-margin-top:50px;}
#felho-mobile{display:block;height:100vh;background:url(img/bg_u.webp);background-size:cover;background-position:center;}
}

.reveal {
  position: relative;
  transform: translateY(50px);
  opacity: 0;
  transition: 1s all ease;
  scroll-margin-top:0px;
}

.reveal.active {
  transform: translateY(0px);
  opacity: 1;
}

.rolam-img img:hover, .bio-img img:hover{transform:scale(0.95);}