@import url(https://fonts.googleapis.com/css2?family=Montserrat:wght@900&display=swap);
:root {
  /*=====
    Fonts
    =====*/
  --font-primary: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen,
    Ubuntu, Cantarell, "Open Sans", "Helvetica Neue", sans-serif;
  --font-titles: "Montserrat", sans-serif;
  /*============
    Main colours
    ============*/
  --color-primary: hsl(0, 0%, 100%);
  --color-secondary: hsl(208, 100%, 61%);
  --color-tertiary: hsl(0, 0%, 0%);

  /*===============
    Type tag colors
    ===============*/
  --color-busywork: hsl(174, 34%, 71%);
  --color-charity: hsl(22, 87%, 67%);
  --color-cooking: hsl(259, 25%, 48%);
  --color-diy: hsl(6, 60%, 50%);
  --color-education: hsl(39, 93%, 70%);
  --color-music: hsl(19, 46%, 56%);
  --color-recreational: hsl(3, 75%, 65%);
  --color-relaxation: hsl(263, 29%, 63%);
  --color-social: hsl(344, 76%, 65%);
}

*,
*::after,
*::before {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
  overflow: hidden;
}

body,
html {
  font-family: var(--font-titles);
  background: linear-gradient(
      rgba(255, 255, 255, 0.5),
      rgba(255, 255, 255, 0.8)
    ),
    url(041658c333fc26be45c4.svg);
}

.container,
.turn-portrait {
  display: block;
  width: 100%;
  min-height: 100vh;
}

.turn-portrait {
  display: none;
  opacity: 0;
}

.primary-layout-entering {
  animation: 2s fadeInPrimaryLayout;
}

.primary-layout-leaving {
  animation: 2s fadeOutPrimaryLayout;
}

@keyframes fadeOutPrimaryLayout {
  0% {
    transform: translateY(0%);
  }

  10% {
    transform: translateY(5%);
  }

  100% {
    transform: translateY(-120%);
  }
}

@keyframes fadeInPrimaryLayout {
  0% {
    transform: translateY(100%);
  }

  10% {
    transform: translateY(95%);
  }

  100% {
    transform: translateY(0%);
  }
}

@keyframes fixToScreen {
  from {
    overflow: hidden;
  }
  to {
    overflow: hidden;
  }
}

/*Landscape orientation prevent*/
@media only screen and (max-width: 480px) and (orientation: landscape) {
  .container {
    display: none;
  }
  .turn-portrait {
    display: flex;
    justify-content: center;
    align-items: center;
    animation: 3s blinkText infinite;
  }

  @keyframes blinkText {
    0% {
      opacity: 10%;
    }
    50% {
      opacity: 90%;
    }
    100% {
      opacity: 10%;
    }
  }
}


/*# sourceMappingURL=main.css.map*/