@font-face {
  font-family: 'Open Sans';
  src: url('../../przedszkole58/fonts/open-sans/OpenSans-Regular.ttf') format('truetype');
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: 'Baloo 2';
  src: url('../../przedszkole58/fonts/baloo-2/Baloo2-Bold.ttf') format('truetype');
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}

:root {
  --body-font-family: "Open Sans", sans-serif;
  --landing-background-color: #FEF8ED;
  --landing-header-color: #20518E;
  --landing-header-font-family: "Baloo 2", sans-serif;
  --landing-link-color: #20518E;
  --landing-link-color-hover: #EF0000;
}

* {
  box-sizing: border-box;
}

html,
body {
  background-color: var(--landing-background-color);
  margin: 0;
  font-family: var(--body-font-family);
  overflow: hidden;
}

.landing {
  align-items: center;
  background-color: var(--landing-background-color);
  display: flex;
  flex-direction: column;
  width: 100%;
  height: 100%;
  padding-top: 50px;
}

.landing__logo {
  width: 60%;
}

.landing__header {
  color: var(--landing-header-color);
  font-family: var(--landing-header-font-family);
  font-size: 48px;
}

@media (max-width: 650px) {
  .landing__header {
    font-size: 40px;
  }
}

.landing a {
  color: var(--landing-link-color);
  font-size: 16px;
}

.landing a:hover {
  color: var(--landing-link-color-hover);
}

.landing p {
  font-size: 16px;
  padding: 0 16px;
}