body,p {
font-family: 'Roboto Mono', monospace;
font-weight: lighter;
font-size: 15pt;
}
@media screen and (orientation: portrait)  {
  body,p {
    font-size: 25pt;
  }
}


* {
box-sizing: border-box;
}
body {
  position: relative;
  min-height: 100vh;
  background-color: hsla(0,0%,97%,1);
  max-width: 1200px;
  margin:auto;
  padding-bottom: 90px;
}
html {
  background-color: hsla(0,0%,70%,0.3);
}
img {max-height: 800px;}

.footer {
  position: absolute;
  bottom: 0;
  width: 100%;
  height: 2.5rem;
  padding: 4rem 0;
}
.footer_home {
  float: left;
  width: 50%;
  height: 90px;
  background-color: hsla(0,20%,86%);
  color:transparent;
}
.footer_home:hover {color: red;}

.footer_up {
  float: right;
  width: 50%;
  height: 90px;
  background-color: hsla(120,20%,86%);
  color: transparent;
}
.footer_up:hover {color: red;}

.header {
  background-color: hsla(0, 20%,70%,0.3);
  height: 90px;
  color:transparent;
}
.header:hover {color: red;}

.hidden {
  background-color: inherit;
  color: white;
  text-align: right;
}
.hidden:hover {
  background-color: gray;
}

.mbgallery img {
  max-width: 80%;
  max-height: 80vh;
  margin: 0 0;
  /* margin: 10px 0 30px 0; */
}
.mbgallery {
  text-align: center;
}
.middle_text {
  margin: auto 20% auto 20%;
  text-align: left;
}
.nav a:link{
  text-decoration: none;
  padding: 1px 10px 2px 10px;
}
.nav a:hover {
  color: red;
  background-color: pink;
  transition: all 1.1s ease;
}
.nav {
  list-style-type: none;
  color:black;
  min-height: 600px;
  padding: 0px;
  position: relative;
  background: ;
  line-height: 1.7em;
  margin: 3rem 1rem;
}

.ozzy {
  display:inline-block;
}
.ozzy img {
  width: 300px;
}

.page_imgs {
  text-align: center;
}
.page_imgs p {
  margin-top: 50px;
  margin-bottom: 10px;
}
.page_imgs img {
  max-width: 80%;
  max-height: 80vh;
  margin: 50px 0;
  /* margin: 10px 0 30px 0; */
}

.rightmost {
  text-align: right;
  float:right;
}
.shadow img {
  box-shadow: 10px 10px 10px #888888;


}
.twopages {
  padding: 5%;
  background-color: 	#eeddee;
  padding-left: 20%
}



/* archive for espo.html */

.absolute {
    position: absolute;
    width: 99%;
    box-sizing: border-box;
    height: 17em;
    border: 0px solid red;
    clip: rect(0, auto, auto, 0);  /* весь периметр родителя */
    clip-path: polygon(0 0, 0 100%, 100% 100%, 100% 0);  /* весь периметр родителя */
  }
.fixed {  /* одинаковое положение для обоих элементов */
    position: fixed;
    top: 21em;
    left: 5%;
  }
.fixed.red {
    background: red;
  }
.fixed.lightpink {
  background: rgb(219, 219, 189, 0.77);
  padding-left: 15%;
  }

.wrapper {
  position: relative;
  overflow: auto;
  overflow-y: scroll;
  overflow-x: hidden;
}
:root {
  --hue1: 720;
  --hue2: calc(var(--hue1) + 150);
  --hue3: calc(var(--hue2) + 200);

  --c1: hsl(var(--hue1), 95%, 60%);
  --c2: hsl(var(--hue2), 80%, 70%);
  --c3: hsl(var(--hue3), 100%, 70%);

  --body-color: rgb(250, 250, 250);
  --h: 300px;
  --width: 33%;
}
.container {
  width: 100%;
  background-color: var(--body-color);
  font-size: 0;

}
.blk {
  font-size: 20px;
  width: var(--width);
  height: var(--h);
  position: relative;
  display: inline-block;
}
.blk:hover {
    background-color: var(--c1);
    transition-duration: 1s;
}
.block1 {
  background-color: var(--c1) ;
  height: calc(var(--h) / 2);

}
.block2 {
  background-color: var(--c2);
}
.block3 {
  background-color: var(--c3);
}

/* .footer {
  position: absolute;
  bottom: 0;
  width: 100%;
  height: 2.5rem;
  padding: 4rem 0;
  background-color: hsla(0,0%,70%,0.3);
} */
.postal::after {content: "@gmail.com"}
.fb::before {content: "https://www.facebook.com/"}