/*
Theme Name: JK Theme
Theme URI: https://johanneskroening.de
Description: Template von Johannes
Author: Johannes Kroening
Author URI: https://johanneskroening.de
Tags: blog, theme, jk
Version: 0.1

*/
:root {
  --primary-color: #484848;
  --bg-color: #ffffff;
  --primary-color-1: rgba(255, 153, 0, 1);
  --bg-color-1: rgba(255, 153, 0, 0.1);
  --primary-color-2: rgba(128, 0, 255, 1);
  --bg-color-2: rgba(128, 0, 255, 0.1);
  --primary-color-3: rgba(255, 0, 153, 1);
  --bg-color-3: rgba(255, 0, 153, 0.1);
  --primary-color-4: rgba(0, 117, 255, 1);
  --bg-color-4: rgba(0, 117, 255, 0.1);
  --primary-color-5: rgba(0, 212, 34, 1);
  --bg-color-5: rgba(0, 212, 34, 0.1);
}

body {
  margin: 0px;
  padding: 0px;
  color: var(--primary-color);
  background: var(--bg-color);
  font-family: 'Roboto Slab', serif;
  font-size: 1.1em;
  min-height: 90vh;
  min-width: 780px;
  width: 100%;
}
a {
  color: var(--primary-color);
  text-decoration: none;
  font-weight: bold;
}
a:hover {
  color: #000;
}
p {
  margin: 25px 0px;
  line-height: 1.75;
}
.wp-block-embed__wrapper {
	overflow: hidden;
	position: relative;
	max-width: 100%;
	height: auto;
	padding-bottom: 56.25%;
}

.wp-block-embed__wrapper iframe,
.wp-block-embed__wrapper object,
.wp-block-embed__wrapper embed {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
}
h1 {
 text-align: left !important;
}
h2 {
  font-size: 1.5em;
  text-decoration: none;
  width: 100% + 40px;
  border-left: 5px solid var(--primary-color);
  background-color: #f1f1f1;
  padding: 10px 20px;
  margin: 50px -20px 10px -20px;
}
h3 {
  font-size: 1.2em;
}
#wrapper {
  min-width: 780px;
  max-width: 1400px;
  margin: auto;
  padding: 0 50px 0 50px;
  background: var(--bg-color);
  /*text-align: justify;*/
}
#header {
  height: 160px;
  padding: 20px;
  border-bottom: 1px solid #ccc;
}
#main {
  margin: 50px 0px 0px 0px;
}
.main_0 a { box-shadow: inset 0 -0.20em 0 #ccc; transition: box-shadow .5s ease; }
.main_0 a:hover { box-shadow: inset 0 -2.85em 0 #f6f6f6; color: var(--primary-color) }
.main_1 a {box-shadow: inset 0 -0.20em 0 var(--primary-color-1); transition: box-shadow .5s ease; border-color: var(--primary-color-1); }
.main_1 a:hover {box-shadow: inset 0 -2.85em 0 var(--bg-color-1); color: var(--primary-color-1); border-color: var(--primary-color-1); color: var(--primary-color-1) !important; }
.main_2 a {box-shadow: inset 0 -0.20em 0 var(--primary-color-2); transition: box-shadow .5s ease; border-color: var(--primary-color-2); }
.main_2 a:hover {box-shadow: inset 0 -2.85em 0 var(--bg-color-2); color: var(--primary-color-2); border-color: var(--primary-color-2); color: var(--primary-color-2) !important; }
.main_3 a {box-shadow: inset 0 -0.20em 0 var(--primary-color-3); transition: box-shadow .5s ease; border-color: var(--primary-color-3); }
.main_3 a:hover {box-shadow: inset 0 -2.85em 0 var(--bg-color-3); color: var(--primary-color-3); border-color: var(--primary-color-3); color: var(--primary-color-3) !important; }
.main_4 a {box-shadow: inset 0 -0.20em 0 var(--primary-color-4); transition: box-shadow .5s ease; border-color: var(--primary-color-4); }
.main_4 a:hover {box-shadow: inset 0 -2.85em 0 var(--bg-color-4); color: var(--primary-color-4); border-color: var(--primary-color-4); color: var(--primary-color-4) !important; }
.main_5 a {box-shadow: inset 0 -0.20em 0 var(--primary-color-5); transition: box-shadow .5s ease; border-color: var(--primary-color-5); }
.main_5 a:hover {box-shadow: inset 0 -2.85em 0 var(--bg-color-5); color: var(--primary-color-5); border-color: var(--primary-color-5); color: var(--primary-color-5) !important; }
.main_55 a:hover {box-shadow: inset 0 0 0 var(--bg-color-5); color: var(--primary-color-5); border-color: var(--primary-color-5); color: var(--primary-color-5) !important; }

.material-symbols-outlined span {
  font-size: 120px !important;
}

#footer {
  clear: both;
  height: 100px;
  padding: 175px 0 100px 0;
}
.parent_footer {
  display: grid;
  width: 100%;
  grid-template-columns: 95px 110px 110px auto 200px;
  grid-template-rows: repeat(3, 1fr);
  grid-column-gap: 0px;
  grid-row-gap: 0px;
}
.parent_footer a {
  font-weight: normal;
  text-decoration: none;
}
.div1 { grid-area: 1 / 1 / 3 / 2; max-width: 90px;  width: 90px; height: 90px; border-radius: 70px; }
.div2 { grid-area: 1 / 2 / 2 / 4; font-size: 1.50rem; text-align: justify; display: flex; align-items: flex-end; justify-content: center; font-weight: bold; }
.div3 { grid-area: 2 / 2 / 3 / 3; text-align: left; padding: 5px; }
.div4 { grid-area: 2 / 3 / 3 / 4; text-align: right; padding: 5px; }
.div5 { grid-area: 1 / 4 / 3 / 5; width: auto; }
.div6 { grid-area: 1 / 5 / 2 / 6; text-align: right; display: flex; align-items: flex-end; justify-content: flex-end; }
.div7 { grid-area: 2 / 5 / 3 / 6; text-align: right; }

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
  outline: none;
}
.center {
  display: block;
  margin-left: auto;
  margin-right: auto;
  width: 50%;
}
.mobile {
  display: none;
}
.logo {
  width: 72px;
  height: 72px;
}
.logo-mobile {
  margin: 25px auto 25px auto;
  width: 100px;
  height: 100px;
}
.pagetitle {
  font-weight: bold;
  font-size: 1.1em;
  text-align: center;
  padding: 10px;
  width: 100%;
  min-width: 780px;
  background-color: #f6f6f6;
  align-items: center;
  display: flex;
  justify-content: center;
}
.pagetitle_1 { background-color: var(--bg-color-1);
}
.pagetitle_1, .pagetitle_1 i, .pagetitle_1 span { color: var(--primary-color-1) !important; }
.pagetitle_2 { background-color: var(--bg-color-2); }
.pagetitle_2, .pagetitle_2 i, .pagetitle_2 span { color: var(--primary-color-2) !important; }
.pagetitle_3 { background-color: var(--bg-color-3); }
.pagetitle_3, .pagetitle_3 i, .pagetitle_3 span { color: var(--primary-color-3) !important; }
.pagetitle_4 { background-color: var(--bg-color-4); }
.pagetitle_4, .pagetitle_4 i, .pagetitle_4 span { color: var(--primary-color-4) !important; }
.pagetitle_5 { background-color: var(--bg-color-5); }
.pagetitle_5, .pagetitle_5 i, .pagetitle_5 span { color: var(--primary-color-5) !important;
}
nav.desktop {
  width: 100%;
  padding: 40px 0px 40px 0px;
  background: var(--bg-color);
}
nav.desktop .container {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 0px;
}
nav.desktop .container .logo {
  color: #000;
  font-size: 1.7em;
}
nav.desktop .container ul {
  display: flex;
  list-style: none;
}
nav.desktop .container ul li {
  margin-left: 25px;
}
nav.desktop .container ul li a {
  /*color: #000;*/
  font-weight: bold;
  text-decoration: none;
  font-size: 1.3em;
}
nav.desktop .container ul li a:hover {
  /*color: var(--primary-color);*/
  font-weight: bold;
}
nav.mobile {
  position: fixed;
  bottom: 0;
  min-width: 100%;
  width: 100%;
  height: 150px;
  background: #f6f6f6;
  padding: 5px;
  z-index: 2;
}
nav.mobile ul {
  position: sticky;
  list-style: none;
  display: flex;
  justify-content: space-between;
  align-items: center;
  height: 100%;
  width: 100%;
}
nav.mobile ul li {
  min-width: 20%;
  width: 20%;
  font-size: 1.6em;
}
nav.mobile ul li a {
  font-weight: normal;
  display: flex;
  flex-direction: column;
  align-items: center;
  color: var(--primary-color);
  font-size: 1em !important;
  text-decoration: none;
}
nav.mobile ul li a:hover {
  /*background-color: var(--bg-color);*/
}
nav.mobile ul li a span {
  color: var(--primary-color);
  font-size: 0.55em;
  margin: 4px 0px 0px 0px;
  display: block;
  padding: 13px;
}
nav.mobile i {
  margin-top: 10px;
  font-size: 72px;
}
.logo.mobile {
}
.logo.desktop {
  display: none;
}

main {
}
main .container {
  font-size: 2rem;
  display: flex;
  justify-content: center;
  align-items: center;
}
main .container h1 {
  font-size: 3rem;
  text-align: center;
}
.post {
  margin: 0 0 60px 0;
}
.posttitle {
  margin: 0 0 20px 0;
  width: 100%;
}
.thumbnail {
  border-radius: 20px;
  width: 100%;
  max-height: 400px;
  overflow: hidden;
  justify-content: center;
  vertical-align: middle;
}
.thumbnail img {
  border-radius: 20px;
  width: 100%;
  height: auto;
  display: block;
  top: 25%;
  transform: translateY(-25%);
}
.meta {
  text-align: center;
  font-size: 0.9rem;
  margin: 10px 0px;
}
.entry {
  /*text-align: justify;*/
  margin-top: 20px;
  width: 100%;
}
.entry img {
  display: block;
  margin-left: auto;
  margin-right: auto;
}
.wp-block-quote {
  width:90%;
  margin:50px auto;
  font-style:italic;
  color: var(--primary-color);
  padding:1.2em 30px 1.2em 75px;
  border-left: 2px solid var(--primary-color) ;
  line-height:1.6;
  position: relative;
  background:#f1f1f1;
}
.wp-block-quote::before{
  content: "\201C";
  color:#484848;
  font-size:4em;
  position: absolute;
  left: 10px;
  top:-10px;
}
.wp-block-quote::after{
  content: '';
}
.wp-block-quote cite{
  display:block;
  color:#484848;
  font-style: normal;
  font-weight: bold;
  margin-top:1em;
  text-align: right;
}

/* Kommentare */
.heading {
  font-size: 1.8rem;
  margin-top: 50px;
}
.commentlist {
  list-style-type: none;
}
.comment {
  margin: 10px 0px;
  background-color: var(--bg-color-1);
  padding: 20px;
  border-radius: 20px;
}
.comment-meta {
  font-size: 0.9rem;
  margin-bottom: 20px;
}
.comment-author, .fn {
  font-size: 1.2rem;
  display: flex;
  align-items: center;
  font-style: normal !important;
}
.fn {
  font-size: 1.3em;
  margin-left: 5px;
}
.children {
  margin: 5px 5px 5px 5px;
  list-style-type: none;
  border-radius: 20px;
}
.reply {
  margin: 20px;
  text-align: right;
}
.says {
  visibility: hidden;
}
.comment-respond {
  margin: 10px 0px;
  background-color: #f6f6f6;
  padding: 20px;
  border-radius: 20px;
}
.comment-form-cookies-consent, .comment-notes {
  margin: 10px 0px;
  font-size: 0.9rem;
}
.comment-form-comment,
.comment-form-author,
.comment-form-email,
.comment-form-url {
  margin: 10px 0px;
}
.comment-form-comment textarea {
  min-width: 100%;
  min-height: 11em;
  width: 100%;
  border: solid 2px;
  border-color: var(--primary-color);
  touch-action: none;
}
.submit {
  width: 100%;
  padding: 20px;
  background-color: var(--primary-color) !important;
  color: #fff;
  border-radius: 15px;
  font-weight: 700;
	transition: opacity .15s ease-in-out 0s;
}
.form-submit {
  border-radius: 15px;
}
.form-submit:hover, .submit:hover {
  background-color: var(--primary-color-1) !important;
  color: #000;
}
label {
	display: block;
}
.comment-form-cookies-consent {
  display: inline-flex;
  line-height: 1.5;
  vertical-align: middle;
}
.comment-form-cookies-consent label {
  margin: 5px;
}
select,
textarea,
input {
  touch-action: none;
  min-height: 2em;
	max-width: 100%;
	padding: 0;
	margin: 0;
	font-family: inherit;
	font-weight: inherit;
	font-size: inherit;
	color: inherit;
  border: solid 2px;
  border-color: var(--primary-color);
}
input[type=submit] {
	border: none;
	cursor: pointer;
}
input[type=checkbox] + label {
  display: block;
  margin: 0.2em;
  cursor: pointer;
  padding: 0.2em;
}
input[type=checkbox] {
  display: none;
}
input[type=checkbox] + label:before {
  content: "\2714";
  border: 0.1em solid var(--primary-color);
  border-radius: 0.2em;
  display: inline-block;
  width: 1em;
  height: 1em;
  padding-left: 0.2em;
  padding-bottom: 0.3em;
  margin-right: 0.2em;
  vertical-align: bottom;
  color: transparent;
  transition: .2s;
}
input[type=checkbox] + label:active:before {
  transform: scale(0);
}
input[type=checkbox]:checked + label:before {
  background-color: var(--primary-color-1);
  border-color: var(--primary-color-1);
  color: #fff;
}
input[type=checkbox]:disabled + label:before {
  transform: scale(1);
  border-color: #aaa;
}
input[type=checkbox]:checked:disabled + label:before {
  transform: scale(1);
  background-color: var(--bg-color-1);
  border-color: var(--bg-color-1);
}

.wp-block-media-text.has-media-on-the-right .wp-block-media-text__content {
    padding-left: 0px;
}
.wp-block-media-text.has-media-on-the-left .wp-block-media-text__content {
    padding-right: 0px;
}
.wp-block-columns {
  padding: 0px;
}

nav.pagination {
  display: block;
  text-align: center;
}
nav.pagination a {
  text-align: center;
  padding: 10px 15px;
}
nav.pagination span {
  color: var(--primary-color-1);
  font-family: 'Roboto Slab', serif;
  font-weight: bold;
  text-align: center;
  padding: 10px 15px;
  background-color: var(--bg-color-1);
}

/*
  CSS MacBook Retina Mockup
*/
.css-mb {
  max-width: 650px; /* Set the desired maximum width of the macbook */
  min-width: 50px; /* Set the desired minimum width of the macbook */
  margin: 0px auto 0; /* Align mockup to center */
}

.css-mb div {
  box-sizing: border-box !important; /* Just in case */
}

/* Center the display */
.css-mb .mb-display-position {
  width: 80%;
  margin: 0 auto;
}

/* The display */
.css-mb .mb-display {
  position: relative;
  width: 100%;
  height: 0;
  padding-bottom: 65.9442%;
  background: #373435;

  -webkit-border-top-left-radius:  3.5% 5.3075%;
      -moz-border-radius-topleft:  3.5% 5.3075%;
          border-top-left-radius:  3.5% 5.3075%;

  -webkit-border-top-right-radius: 3.5% 5.3075%;
      -moz-border-radius-toptight: 3.5% 5.3075%;
          border-top-right-radius: 3.5% 5.3075%;
}

/* Webcam */
/* Browser may not render a perfect circle */
.css-mb .mb-display:before {
  content: '';
  display: block;
  position: absolute;
  top: 3%;
  left: 50%;
  width: 1%;
  height: 1.5164%;
  margin-left: -0.5%;
  border-radius: 50%;
  background: #525252;
}

/* Glare */
/* Browser may not render the top and right offset evenly */
.css-mb .mb-display:after {
  content: '';
  display: none;
  position: absolute;
  right: 0.4%;
  top: 0.64%;
  width: 62.5%;
  height: 100%;

  background: none; /* Hide the gradient on older browsers */
  background:    -moz-linear-gradient(55deg, rgba(0,0,0,0) 61%, rgba(255,255,255,0.05) 61%); /* FF3.6+ */
  background: -webkit-linear-gradient(36deg, rgba(0,0,0,0) 61%, rgba(255,255,255,0.05) 61%); /* Chrome10+ and Safari5.1+ compute the degree differently */
  background:      -o-linear-gradient(55deg, rgba(0,0,0,0) 61%, rgba(255,255,255,0.05) 61%); /* Opera 11.10+ */
  background:     -ms-linear-gradient(55deg, rgba(0,0,0,0) 61%, rgba(255,255,255,0.05) 61%); /* IE10+ */
  background:         linear-gradient(55deg, rgba(0,0,0,0) 61%, rgba(255,255,255,0.05) 61%);

  -webkit-border-top-right-radius: 5.3075%;
      -moz-border-radius-toptight: 5.3075%;
          border-top-right-radius: 5.3075%;
}

/* Only show glare, if the class is applied */
.css-mb.with-glare .mb-display:after { display: block; }

/* Position the screen and give make it the right size, ratio 16:10 */
.css-mb .mb-screen-position {
  position: absolute;
  top: 6.5%;
  width: 93.2%;
  left: 3.4%;
  height: 0;
  margin: 0;
  padding-bottom: 58.25%; /* Ratio */
}

/* Give parent (this element) a "height", so that child elements can use height: 100%;*/
.css-mb .mb-screen {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  overflow: hidden;
  background: #4b4b4d; /* bg color if content is not big enough, or rendering is off */
}

/* Image on the screen */
.css-mb .mb-screen img {
  max-width: 100%;
  height: auto;
}

/* Iframe on the screen */
.css-mb .mb-screen iframe {
  width: 100%;
  height: 100%;
  border: 0;
}

/* Macbook body */
.css-mb .mb-body {
  position: relative;
  width: 100%;
  height: 0;
  padding-bottom: 2.3%;
  background: #e6e7e8;
}

/* The groove */
.css-mb .mb-body:before {
  content: '';
  display: block;
  position: absolute;
  top: 0;
  left: 50%;
  width: 14.0740%;
  height: 0;
  padding-bottom: 1.4814%;
  margin-left: -7.037%;
  background: #a9abae;

  -webkit-border-bottom-left-radius:  7.0370% 50%;
      -moz-border-radius-bottomleft:  7.0370% 50%;
          border-bottom-left-radius:  7.0370% 50%;

  -webkit-border-bottom-right-radius: 7.0370% 50%;
      -moz-border-radius-bottomtight: 7.0370% 50%;
          border-bottom-right-radius: 7.0370% 50%;
}

/* Macbook bottom */
.css-mb .mb-bottom-cover {
  width: 100%;
  height: 0;
  padding-bottom: 0.7407%;
  background: #a9abae;

  -webkit-border-bottom-left-radius:  12% 600%;
      -moz-border-radius-bottomleft:  12% 600%;
          border-bottom-left-radius:  12% 600%;

  -webkit-border-bottom-right-radius: 12% 600%;
      -moz-border-radius-bottomtight: 12% 600%;
          border-bottom-right-radius: 12% 600%;
}
@media only screen and (max-width: 1300px) {
  #wrapper {
    width: 100%;
    min-width: 100%;
    max-width: 100%;
  }
}
@media only screen
and (orientation: portrait)
and (max-device-width : 812px)
{
  body {
    font-size: 1.9em;
  }
  h3 {
    font-size: 1.4em;
  }
  figure,
  video,
  iframe,
  wp-block-embed__wrapper {
    min-height: 383px;
    border-radius: 20px;
   }
  #wrapper {
    width: 100%;
    min-width: 100%;
    max-width: 100%;
    padding: 0px 50px 0px 50px;
  }
  #footer {
    margin-bottom: 175px;
  }
  input {
  	min-width: 100%;
  }
  .parent_footer {
    display: grid;
    grid-template-columns: repeat(2, 50%);
    grid-template-rows: repeat(8, 0.4fr);
    grid-column-gap: 0px;
    grid-row-gap: 0px;
  }
  .div1 { grid-area: 1 / 1 / 2 / 3; max-width: 300px; width: 300px; height: 300px; border-radius: 300px; display: inline-block; vertical-align: middle; margin-left: auto; margin-right: auto; text-align: center; justify-content: center; text-align: center; }
  .div2 { grid-area: 2 / 1 / 3 / 3; font-size: 2.88rem; text-align: center; }
  .div3 { grid-area: 3 / 1 / 4 / 2; font-size: 2.5rem; text-align: right; padding-right: 10px; }
  .div4 { grid-area: 3 / 2 / 4 / 3; font-size: 2.5rem; text-align: left; padding-left: 10px; }
  .div5 { grid-area: 4 / 1 / 5 / 3; height: 0px; margin: 0px; padding: 0px;}
  .div6 { grid-area: 5 / 1 / 6 / 3; font-size: 2.5rem; text-align: center; justify-content: center;  }
  .div7 { grid-area: 6 / 1 / 7 / 3; font-size: 2.5rem; text-align: center; }

  .mobile {
    display: block;
  }
  .desktop {
    display: none;
  }
}