/*!
Theme Name: hirsch-und-maus
Theme URI: https://www.hirsch-und-maus.at/
Author: Martin Paschinger, Design- und Entwicklungsbüro
Author URI: https://www.martinpaschinger.com
Description: Description
Version: 1.0.0
Tested up to: 5.4
Requires PHP: 5.6
License: GNU General Public License v2 or later
License URI: LICENSE
Text Domain: hirsch-und-maus
Tags: custom-background, custom-logo, custom-menu, featured-images, threaded-comments, translation-ready

This theme, like WordPress, is licensed under the GPL.
Use it to make something cool, have fun, and share what you've learned.

hirsch-und-maus is based on Underscores https://underscores.me/, (C) 2012-2020 Automattic, Inc.
Underscores is distributed under the terms of the GNU GPL v2 or later.
*/

/*--------------------------------------------------------------
>>> TABLE OF CONTENTS:
----------------------------------------------------------------*/
@font-face {
  font-family: "Aether";
  src: url("./assets/fonts/Aether-A.woff2") format("woff2"),
    url("./assets/fonts/Aether-A.woff") format("woff");
  font-weight: normal;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: "Aether-Italic";
  src: url("./assets/fonts/Aether-AItalic.woff2") format("woff2"),
    url("./assets/fonts/Aether-AItalic.woff") format("woff");
  font-weight: normal;
  font-style: italic;
  font-display: swap;
}

@font-face {
  font-family: "Lato-Sans";
  src: url("./assets/fonts/Lato-Bold.ttf") format("truetype");
  font-weight: 600;
  font-style: normal;
  font-display: swap;
}


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

body {
  font-family: "Aether", serif;
  font-size: 1rem;
  line-height: 1;
  background-color: #b3d3ea;
}

em {
  font-family: "Aether-Italic", serif;
}

a {
  color: #000;
  text-decoration: none;
}

.site-header {
  width: 100%;
  position: fixed;
  top: 0;
  left: 0;
  display: flex;
  justify-content: center;
  align-items: center;
  padding-top: 60px;
}

.entry-content img {
  width: 50vw;
  height: 100svh;
  max-height: calc(100svh - 120px);
  display: block;
  padding-left: 8vw;
}

.entry-content {
  width: 100%;
  height: 100svh;
  display: grid;
  grid-template-columns: 1fr 1fr;
  overflow: hidden;
}

.entry-content > div {
  width: 100%;
  height: 100%;
}

.entry-content > div {
}

.entry-content > div:first-child {
  display: flex;
  justify-content: flex-end;
  align-items: flex-start;
}

.entry-content > div:last-child {
  display: flex;
  align-items: center;
}

.entry-content > div:last-child > div {
  transform: translateY(9.5vw);
}

.entry-content > div:last-child p:first-child {
  text-align: center;
  transform: translateX(9vw);
}

.entry-content > div:last-child p:last-child {
  transform: translateX(-6.6vw);
}

p {
  font-size: 2.65vw;
}

.site-info p {
  font-family: "Lato-Sans", sans-serif;
  font-weight: 500;
  font-size: 13px;
  text-transform: uppercase;
}

.site-info {
  width: 100%;
  position: fixed;
  bottom: 0;
  left: 0;
  display: flex;
  justify-content: space-between;
  align-items: flex-end;
  text-align: center;
  padding: 30px;
}

.footer-desc {
  max-width: 180px;
  text-align: center;
}

.entry-content-mobile {
  display: none;
}

.mobile-only {
  display: none;
}

.entry-content > div p:nth-child(2) {
	    text-align: center;
    width: 24vw;
}

@media (max-width: 1024px) {
	.site-header {
		padding-top: 30px;
	}
  .site-info svg,
  .site-branding svg {
    width: 50px;
    height: auto;
    display: block;
  }

  .site-info svg {
    margin-bottom: 20px;
  }

  .entry-content,
  .hide-on-mobile {
    display: none;
  }

  .mobile-only {
    display: block;
  }

  .entry-content-mobile {
    width: 100%;
    height: 100svh;
    display: flex;
    flex-direction: column;
    overflow: hidden;
  }

  .entry-content-mobile img {
    width: 100%;
            height: calc(100svh - 320px);
        max-height: 300px;
    display: block;
    padding: 0 50px 0 20px;
    transform: translateY(-30px);
  }

  .entry-content-mobile p {
    font-size: 20px;
  }

  .content-top p:nth-child(2),
  .content-top p:last-child,
  .content-bottom p:first-child {
    display: none;
  }

  .content-top p,
  .content-bottom p {
    text-align: center;
  }

      .content-top {
        display: flex;
        flex-direction: column;
        justify-content: flex-end;
        align-items: flex-start;
        padding-left: 20px;
        transform: translateY(-10px);
    }

  .content-bottom {
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
    align-items: flex-end;
    padding-right: 20px;
    text-align: center;
	  transform: translateY(-35px);
  }

  .site-info {
    flex-direction: column;
    align-items: center;
    gap: 0;
	  padding: 20px;
  }

  .entry-content-mobile > div {
    width: 100%;
    height: 100%;
  }

  .footer-desc {
    max-width: unset;
    text-align: center;
  }
}

@media (max-width: 375px) {
    .entry-content-mobile img {

        max-height: 220px;
    }
}