@import url('https://fonts.googleapis.com/css2?family=Courgette&display=swap');

* {box-sizing: border-box; transition: 0.5s ease-in-out;}
:root {
  --fekete: black;
  --feher: white;
}

.kozepre {text-align:center;}
.fekete {color: var(--fekete);}

html, body {background-color: #220200; height: 100%; overflow: hidden; font-family: 'Courgette', cursive;}
html h1, body h1 {font-size: 24px; font-weight: 200; color: var(--feher); margin-bottom: 8px;}
html h2, body h2 {font-size: 18px; color: var(--feher);}

#wrapper {opacity: 0; display: table; height: 100%; width: 100%;}
#wrapper.loaded {opacity: 1; transition: 2.5s ease-in-out;}
#wrapper #content {display: table-cell; vertical-align: middle; width: 100%;}

#card {height: 80%; width: 30%; margin: 0 auto; position: relative; z-index: 1;}
@media only screen and (max-width: 600px) {
  #card {height: 96%; width: 98%;}
}

#card #front, #card #back {border-radius: 10px; height: 100%; width: 100%; position: absolute; left: 0; top: 0; transform-style: preserve-3d; backface-visibility: hidden; box-shadow: 0 0 10px rgba(0, 0, 0, 0.2);}
#card #front {transform: rotateY(0deg); overflow: hidden; z-index: 1;}
#card #front #arrow { position: absolute; height: 50px; line-height: 50px; font-size: 30px; z-index: 10; bottom: 0; right: 50px; color: rgba(255, 255, 255, 0.5); animation: arrowWiggle 1s ease-in-out infinite;}
#card #front #top-pic {height: 50%; width: 100%; background-image: url(kepek/herbalife.png); background-size: cover;}
#card #front #avatar {width: 170px; height: 170px; top: 50%; left: 50%; margin: -100px 0 0 -80px; border-radius: 100%;
	box-shadow: 0 0 0 3px rgba(255, 255, 255, 0.8), 0 4px 5px rgba(107, 5, 0, 0.6), 0 0 50px 50px rgba(255, 255, 255, 0.25);
	background-image: url(kepek/orsi.jpg); background-size: contain; position: absolute; z-index: 1;}

#card #front #info-box {height: 50%; width: 100%; position: absolute; display: table; left: 0; bottom: 0; background: rgba(200, 38, 29, 0.7); padding: 40px;}

#card #front #social-bar {height: 80px; width: 100%; position: absolute; bottom: 0; left: 0; line-height: 80px; font-size: 28px; text-align: center;}
#card #front #social-bar a {display: inline-block; color: var(--feher);; text-decoration: none; padding: 5px; line-height: 18px; border-radius: 5px;}
#card #front #social-bar a:hover {color: green; background: rgba(255, 255, 255, 0.3); transition: 0.25s ease-in-out;}
#card #back {transform: rotateY(180deg); background-color: rgba(255, 255, 255, 0.6); display: table; z-index: 2; font-size: 13px; line-height: 20px; padding: 40px;}
@media only screen and (max-width: 600px) {
  #card #back {padding: 10px;}
}

#card #back .back-info {text-align: justify; text-justify: inter-word;}

#card #back #social-bar {height: 50px; width: 100%; position: absolute; bottom: 0; left: 0; line-height: 50px; font-size: 28px; text-align: center;}
#card #back #social-bar a {display: inline-block; line-height: 28px; color: var(--fekete); text-decoration: none; padding: 5px; border-radius: 5px;}
#card #back #social-bar a:hover {color: var(--feher); background: rgba(223, 74, 66, 0.5); transition: 0.25s ease-in-out;}
#card #back p {font-size: 18px; text-align: center;}

#card .info {display: table-cell; height: 100%; vertical-align: middle; text-align: center;}
#card.flip #front {transform: rotateY(180deg);}
#card.flip #back {transform: rotateY(360deg);}

#background {position: fixed; background-color: var(--fekete); top: 0; left: 0; height: 100%; width: 100%;}
#background #background-image {height: calc(100% + 60px); width: calc(100% + 60px); position: absolute; top: -30px; left: -30px; -webkit-filter: blur(10px);
	background-image: url(kepek/hatter.webp); background-size: cover;}
	
#photo {width: 70px; height: 70px; margin: 0 auto; border-radius: 100%;
	box-shadow: 0 0 0 3px rgba(255, 255, 255, 0.8), 0 4px 5px rgba(107, 5, 0, 0.6), 0 0 50px 50px rgba(255, 255, 255, 0.25);
	background-image: url(kepek/orsi.jpg); background-size: contain;}

@keyframes arrowWiggle {
	0% {right: 50px;}
	50% {right: 35px;}
	100% {right: 50px;}
}