:root {
  /*
  Spacing system (px)
  2 / 4 / 8 / 12 / 16 / 24 / 32 / 48 / 64 / 80 / 96 / 128
  */

  /* 
  font sizes (px)
  10 / 12 / 14 / 16 / 18 / 20 / 24 / 30 / 36 / 44 / 52 / 62 / 74 / 86 / 98
  */

  /* font weights */
  --fw-default: 300;
  --fw-semibold: 350;
  --fw-bold: 400;
  --fw-extrabold: 450;

  /* Line heights */
  --lh-normal: 1;
  --lh-bigger: 1.2;
  --lh-default: 1.3;
  --lh-big: 1.5;

  /* Letter spacing */
  --ls-small: -0.5px;
  --ls-header: 0.75px;
  --ls-default: 1.1px;

  /* Paragraph */
  --pa-default: 1.6;
  --pa-large: 1.8;

  /* BORDER-RADIUS */

  --br-default: 5px;
  --br-medium: 10px;

  /* COLORS */

  --co-background: #fdfdfd;
  --co-white: #fff;

  /* grays */
  --co-gray-default: rgb(60, 60, 60);
  --co-gray-dark: #333;
  --co-gray-medium: #666;
  --co-gray-light: #999;
  --co-gray-very-light: #ccc;
  --co-week_nr: #ddd;

  /* primary */
  --co-primary: #73127c;
  --co-shade2: #73127c;
  --co-tint1: #fafbfc;
  --co-tint2: #fae5d3;
  --co-footer-text: #b4b4b4;
  --co-tint3: #eb984e;
  --co-head3-decor: #73127c;

  /* Shades */

  --co-section-light: #fdfdfd;
  --co-section-dark: #f9f9f9;
}

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

html {
  /* font-size: 10px; */
  /* 10px / 16px = 0.625 = 62.5% */
  /* Percentage of user's browser font-size setting */
  font-size: 62.5%;
  overflow-x: hidden;
  scroll-behavior: smooth;
}

h1 {
  margin-top: 0px;
}

body {
  color: var(--co-gray-default);
  background-color: var(--co-background);

  font-family: "Open Sans", sans-serif;
  font-size: 2rem;
  font-weight: var(--fw-default);
  line-height: var(--lh-default);
  letter-spacing: var(--ls-default);

  /* Only works if there is nothing absolutely positioned in relation to body */
  overflow-x: hidden;
  text-rendering: optimizeLegibility;
}

p {
  font-size: 2rem;
  font-weight: var(--fw-default);
  line-height: var(--lh-default);
  letter-spacing: var(--ls-default);
  color: var(--co-gray-default);
  margin-bottom: 1.6rem;
  text-wrap: pretty;
}

strong {
  font-weight: 400;
}

img {
  max-width: 100%;
}

/**************************/
/* GENRAL REUSABLE COMPONENTS */
/**************************/

.section {
  padding-top: 6.4rem;
  padding-bottom: 6.4rem;
}

.section-light {
  background-color: var(--co-section-light);
}

.section-dark {
  background-color: var(--co-section-dark);
}

.container {
  /* 1100px */
  max-width: 110rem;
  padding: 0 3.2rem;
  margin: 0 auto;
}

.prose {
  /* 750px - ez egy jó kiindulási érték */
  max-width: 75rem;
  /* Középre igazítja saját magát a .container-en belül */
  margin-left: auto;
  margin-right: auto;
}

/*** HEADINGS ***/

.head-1,
.head-2,
.head-3,
.head-3d,
.head-4 {
  font-weight: var(--fw-semibold);
  color: var(--co-gray-dark);
  letter-spacing: var(--ls-header);
  line-height: var(--lh-bigger);
  text-wrap: balance;
}
/*
  font sizes (px)
  10 / 12 / 14 / 16 / 18 / 20 / 24 / 30 / 36 / 44 / 52 / 62 / 74 / 86 / 98
*/

.head-1 {
  font-size: 5.2rem;
  font-weight: var(--fw-extrabold);
  line-height: var(--lh-big);
  margin: 4.8rem 0 2.4rem 0;
}

.page-head {
  color: var(--co-primary);
}

.head-2 {
  font-size: 4.4rem;
  font-weight: var(--fw-extrabold);
  margin: 4rem 0 2rem 0;
}

.head-3 {
  font-size: 3.2rem;
  font-weight: var(--fw-bold);
  margin: 3.2rem 0 1.6rem 0;
}

.head-3d {
  border-left: 5px solid var(--co-head3-decor);
  padding-left: 1rem;
}

.head-4 {
  font-size: 3rem;
  font-weight: var(--fw-semibold);
  margin: 2.4rem 0 1.2rem 0;
}

/* HERO TEXT  */

.big-title {
  position: absolute;
  max-width: 110rem;
  top: 40%;
  left: 40%;
  transform: translate(-50%, -50%);
}

.firstline {
  font-size: 10.2rem;
  line-height: 8srem;
  color: var(--co-gray-default);
  font-family: "Shadows Into Light", cursive;
  font-weight: 800;
  font-style: normal;
  color: var(--co-primary);
}
.secondline {
  font-size: 8.2rem;
  color: var(--co-gray-default);
  font-family: "Shadows Into Light", cursive;
  font-weight: 400;
  font-style: normal;
  color: var(--co-primary);
}

.hero-text {
  font-size: 3rem;
  color: var(--co-gray-default);
  font-weight: var(--fw-default);
}

.section-text {
  font-size: 6.2rem;
  font-weight: var(--fw-extrabold);
  margin: 4rem 0 2rem 0;
  /* color: var(--co-gray-default); */
  color: var(--co-primary);
}

/* TEXT  */

.important-text {
  font-weight: var(--fw-bold);
  font-style: italic;
}

.italic-text {
  font-style: italic;
}

.bold-text {
  font-weight: var(--fw-bold);
}

.idented-text {
  margin-left: 3rem;
}

.small-text {
  font-size: 1.4rem;
  font-weight: var(--fw-default);
  line-height: var(--lh-big);
  color: var(--co-gray-default);
  margin-bottom: 1rem;
}

.white-text-color {
  color: var(--co-background);
}

.center-text {
  text-align: center;
  /* margin: 0 auto;*/
}

.mediumbold-text {
  font-weight: var(--fw-semibold);
}

/* Opcionális: Ha az idézeten belül is van <p> tag */
blockquote p {
  margin-bottom: 0; /* Eltávolítja az extra térközt az idézeten belül */
}

/*  IMAGE  */

.normal-image-div {
  display: flex;
  align-items: center;
  justify-content: center;
}

.image-100 {
  max-width: 100%;
  height: auto;
}

.image-80 {
  max-width: 80%;
  height: auto;
}

.image-50 {
  max-width: 50%;
  height: auto;
}

.image-off {
  display: none;
}

.image-shadow {
  border-radius: var(--br-default);
  box-shadow: 2px 2px 2px 2px rgba(20, 20, 20, 0.2);
}

.image-rounded {
  border-radius: 50%;
}

.auto-margins {
  margin-left: auto;
  margin-right: auto;
}

/* ------------------------------------------------- */
/*  HEADER
/* ------------------------------------------------- */
.mainheader {
  background-image: url(img/background.webp);
  background-size: cover;
  background-position: center;
  height: 100vh;
  background-attachment: scroll;
  background-position-x: 70%;
  height: 100vh;
  font-weight: var(--fw-bold);
  position: relative; /* ÚJ - Létrehozza a réteget */
  z-index: 1; /* ÚJ - Alulra helyezi */
}

.header {
  height: 5vh;
  font-weight: var(--fw-bold);
  position: relative; /* ÚJ - Létrehozza a réteget */
  z-index: 1; /* ÚJ - Alulra helyezi */
}

.mmm-logo {
  height: 5rem;
  width: auto;
  float: left;
  margin-top: 2rem;
}

/*--------------------------------------------------*/
/*     NAVIGATION                                   */
/*--------------------------------------------------*/

/* Main navi */
.main-nav {
  float: right;
  list-style: none;
  margin-top: 3rem;
}

.main-nav li {
  margin: 0 1.6rem;
  padding: 0;
  display: inline-block;
  vertical-align: middle;
}

.main-nav li a:link,
.main-nav li a:visited {
  padding: 0.8rem 0;
  color: rgb(61, 61, 61);
  text-decoration: none;
  text-transform: uppercase;
  font-size: 100%;
  border-bottom: 0.3rem solid transparent;
  transition: border-bottom 0.2s;
}

.main-nav li a:hover,
.main-nav li a:active {
  border-bottom: 0.3rem solid var(--co-primary);
}

/* mobile navi */
.mobile-nav-icon {
  float: right;
  margin-top: 1.5rem;
  cursor: pointer;
  display: none;
}

.mobile-navimage {
  font-size: 200%;
  color: rgb(61, 61, 61);
  margin-top: 1.5rem;
}

/* STICKY NAVI */
.sticky {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  background-color: rgba(230, 230, 230, 0.85);
  box-shadow: 0 0.2rem 0.2rem #efefef;
  z-index: 9999;
}

.sticky .main-nav li a:link,
.sticky .main-nav li a:visited {
  color: rgb(61, 61, 61);
}

.sticky .main-nav {
  margin-top: 3rem;
}

.sticky .mmm-logo {
  height: 5rem;
  width: auto;
  float: left;
  margin: 2rem 0;
}

/*** BUTTONS ***************************************/

.btn,
.btn:link,
.btn:visited {
  display: inline-block;

  text-decoration: none;
  font-size: 2rem;
  font-weight: var(--fw-semibold);
  padding: 1.6rem 3.2rem;
  border-radius: var(--br-default);

  /* Only necessary for .btn */
  border: none;
  cursor: pointer;
  font-family: inherit;

  /* Put transition on original "state" */
  /* transition: background-color 0.3s; */
  transition: all 0.3s;
}

.btn--full:link,
.btn--full:visited {
  background-color: var(--co-primary);
  color: var(--co-white);
}

.btn--full:hover,
.btn--full:active {
  background-color: var(--co-shade1);
}

.btn--outline:link,
.btn--outline:visited {
  background-color: var(--co-tint2);
  color: var(--co-gray-default);
  box-shadow: inset 0 0 0 1px var(--co-primary);
}

.btn--outline:hover,
.btn--outline:active {
  background-color: var(--co-shade1);
  color: var(--co-white);

  /* border: 3px solid #fff; */
  /* Trick to add border inside */
  /* box-shadow: inset 0 0 0 3px #fff; */
}

.btn--center {
  text-align: center;
}

.btn--form {
  background-color: var(--co-shade2);
  color: var(--co-tint1);
  align-self: end;
  padding: 1.2rem;
}

.btn--form:hover {
  background-color: var(--co-white);
  color: var(--co-gray-default);
}

/*** LINK ********************************************/

.link:link,
.link:visited {
  display: inline-block;
  color: var(--co-primary);
  text-decoration: none;
  border-bottom: 1px solid currentColor;
  padding-bottom: 2px;
  transition: all 0.3s;
}

.link:hover,
.link:active {
  color: var(--co-shade1);
  border-bottom: 1px solid transparent;
}

.invisible-link:link,
.invisible-link:visited {
  display: inline-block;
  color: var(--co-footer-text);
  color: var(--co-gray-dark);
  text-decoration: none;
  border-bottom: 1px solid transparent;
  line-height: var(--lh-big);
}

.invisible-link:hover,
.invisible-link:active {
  border-bottom: 1px solid transparent;
}

.nf-link:link,
.nf-link:visited {
  display: inline-block;
  color: #fff;
  text-decoration: none;
  border-bottom: 1px solid transparent;
  line-height: var(--lh-big);
  padding-bottom: 0.5rem;
}

.social-links {
  list-style: none;
  float: left;
}

.social-links li {
  display: inline-block;
  margin-right: 20px;
}

.social-links li:last-child {
  margin-right: 0px;
}

.social-links li a:link,
.social-links li a:visited {
  text-decoration: none;
  border: 0;
  color: rgb(180, 180, 180);
  transition: color 0.2s;
}

.social-links li a:link,
.social-links li a:visited {
  font-size: 160%;
}

.email-link:link,
.email-link:visited {
  display: inline-block;
  color: var(--co-gray-default);
  text-decoration: none;
  line-height: var(--lh-big);
}

.footer-link:link,
.footer-link:visited {
  display: inline-block;
  color: var(--co-);
  text-decoration: none;
  line-height: var(--lh-big);
}

/* ------------------------------------------------- */
/*  LISTS
/* ------------------------------------------------- */

.list {
  font-size: 2rem;
  font-weight: var(--fw-default);
  line-height: var(--lh-default);
  letter-spacing: var(--ls-default);
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: 1.1rem;
  margin-top: 1rem;
  margin-left: 4rem;
  margin-bottom: 1.6rem;
}

.list-circle {
  list-style: disc;
}
.list-circle:not(:last-child) {
  margin-bottom: 3.2rem;
}
.list-without-margin {
  margin-left: 0;
}

.list-numbered {
  list-style: decimal;
}

.list-numbered:not(:last-child) {
  margin-bottom: 3.2rem;
}

.list-item {
  font-weight: var(--fw-default);
  align-items: center;
  gap: 1.2rem;
}

.list-bold-item {
  font-weight: var(--fw-bold);
  align-items: center;
  gap: 1.2rem;
}

.list-circle-item2 {
  font-size: 1.5rem;
}

/* ------------------------------------------------- */
/*  GRIDS
/* ------------------------------------------------- */

.grid {
  display: grid;
  column-gap: 6.4rem;
  row-gap: 4.6rem;
}

.grid:last-child {
  margin-bottom: 0rem;
}

.grid:not(:last-child) {
  margin-bottom: 4.8rem;
}

.grid--2-cols {
  grid-template-columns: repeat(2, 1fr);
}

.grid--2-cols-1-3 {
  grid-template-columns: 1fr 3fr;
}

.grid--2-cols-3-1 {
  grid-template-columns: 3fr 1fr;
}

.grid--2-cols-1-4 {
  grid-template-columns: 1fr 4fr;
}

.grid--2-cols-4-1 {
  grid-template-columns: 4fr 1fr;
}

.grid--2-cols-1-5 {
  grid-template-columns: 1fr 5fr;
}

.grid--2-cols-5-1 {
  grid-template-columns: 5fr 1fr;
}

.grid--3-cols {
  grid-template-columns: repeat(3, 1fr);
}

.grid--3-cols-1-2-1 {
  grid-template-columns: 1fr 2fr 1fr;
}

.grid--3-cols-1-2-2 {
  grid-template-columns: 1fr 2fr 2fr;
}

.grid--3-cols-1-4-1 {
  grid-template-columns: 1fr 4fr 1fr;
}

.grid--4-cols {
  grid-template-columns: repeat(4, 1fr);
}

.grid--center-v {
  align-items: center;
}

.grid--top-v {
  align-items: flex-start;
}

/*  GO FULL WIDTH AT LESS THAN 480 PIXELS */

@media only screen and (max-width: 580px) {
  .grid--2-cols,
  .grid--2-cols-1-3,
  .grid--2-cols-3-1,
  .grid--2-cols-1-4,
  .grid--2-cols-4-1,
  .grid--2-cols-1-5,
  .grid--2-cols-5-1,
  .grid--3-cols,
  .grid--3-cols-1-2-1,
  .grid--3-cols-1-2-2,
  .grid--3-cols-1-4-1,
  .grid--4-cols {
    grid-template-columns: 1fr;
  }
}

/*** ROWS ***/

.row_small {
  padding-top: var(--whitespace-100);
  padding-bottom: var(--whitespace-100);
}

.row_medium {
  padding-top: var(--whitespace-300);
  padding-bottom: var(--whitespace-300);
}

.row_large {
  padding-top: var(--whitespace-600);
  padding-bottom: var(--whitespace-600);
}

.paragraph {
  margin-bottom: 4.8rem;
}

/* ------------------------------------------------- */
/*  ABOUT ME
/* ------------------------------------------------- */

.grid-aboutme {
  display: grid;
  column-gap: 1.2rem;
  row-gap: 3.2rem;
  grid-template-columns: 1fr 10fr;
}

.event-year {
  font-size: 2.4rem;
  font-weight: 400;
}

.about-me-image {
  max-width: 25rem;
  height: auto;
}

/* ------------------------------------------------- */
/*  FOOTER
/* ------------------------------------------------- */
/*** FOOTER ***/
footer {
  background-color: var(--co-gray-dark);
  padding: 40px;
}

footer p {
  color: var(--co-footer-text);
  text-align: left;
  line-height: var(--lh-default);
  font-size: 1.4rem;
}

.footer-list {
  color: var(--co-footer-text);
  font-size: 1.4rem;
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: 1.2rem;
  align-items: left;
  justify-content: center;
}

.footer-list-item {
  font-weight: var(--fw-default);
  align-items: center;
  gap: 1rem;
}

.logo-facebook:hover {
  color: #3b5998;
}

.logo-twitter:hover {
  color: #00aced;
}

.logo-google:hover {
  color: #dd4b39;
}

.logo-instagram:hover {
  color: #517fa4;
}

.logo-youtube:hover {
  color: #ff0000;
}

.logo-facebook,
.logo-twitter,
.logo-google,
.logo-instagram,
.logo-youtube {
  transition: color 0.8s;
}

.center-social-links {
  display: flex;
  justify-content: center;
}

.connection-info-head {
  font-weight: var(--fw-semibold);
  margin-bottom: 1rem;
}
.connection-info {
  font-size: 1.4rem;
  font-weight: var(--fw-default);
  margin-bottom: 0.5rem;
}

.auto-margins {
  margin-left: auto;
  margin-right: auto;
}

.divider-line {
  border-bottom: 1px solid var(--co-gray-very-light);
  margin-top: 3rem;
  margin-bottom: 3rem;
}

.section-head {
  font-size: 6.2rem;
  color: var(--co-gray-default);
  font-family: "Shadows Into Light", cursive;
  font-weight: 400;
  font-style: normal;
}

.section-testimonials {
  background-image: linear-gradient(rgba(40, 40, 40, 0.7), rgba(0, 0, 0, 0.2)), url(img/testimonials-back.webp);
  background-size: cover;
  color: #fff;
  background-attachment: fixed;
}

blockquote {
  padding: 2%;
  font-style: italic;
  line-height: 145%;
  position: relative;
  margin-top: 4rem;
}

blockquote:before {
  content: "\201C";
  font-size: 500%;
  display: block;
  position: absolute;
  top: -0.5rem;
  left: -0.5rem;
}

.section-testimonials cite {
  display: block; /* Hogy működjön a text-align */
  text-align: right;
  font-weight: var(--fw-semibold);
  font-style: normal;
  margin-top: 10px; /* Egy kis térköz a név és az idézet között */
}

.divider-line {
  border-bottom: 1px solid var(--co-gray-very-light);
  margin-top: 3rem;
  margin-bottom: 3rem;
}