/* Universal */
body, html {
    font-family: "DM Mono", monospace;
  font-weight: 500;
  font-style: normal;
  -webkit-text-size-adjust: 100%;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  color: #000;
}

body {
  line-height: 1.5svw;
  font-size: 1.25svw;
  background: #fff;
  transition: all 0.1s ease;
  text-wrap:balance;
  display:flex;
}
img {
    background: url(../img/img.bg.png)
}

/* Layout */

section#introduction {
    width:19svw;
    padding: 2svw;
    position:fixed;
}
section#content {
    width:73svw;
    padding: 2svw 0 2svw 25svw;
    display:flex;
    flex-direction: column;
    gap: 4svw;
}
div.workpiece {
    display:flex;
}
div.primary {
    width:25svw;
    padding-right:2svw;
}
.secondary img {
    width:47svw;
    height:26.4375svw;
}

/* Text */

h1, h2, h3, p, ul {
    padding-bottom:1.5svw;
}

h1, h2, h3 {
   text-transform: uppercase;
}
h1 a {
    background-image: url(../img/coverlymanor.tortoise.svg);
    background-repeat: no-repeat;
    background-size: 3svw auto;
    background-position: center left;
    padding-left: 3.5svw;
    
}
em {
    font-style: italic;
}
h3 em {
    text-transform: none;
}
a {
    color:#000;
}
a:hover {
    color:#cc1e1e;
}


/* Mobile */

@media only screen and (orientation:portrait) {
    
    body, div.workpiece {
          line-height: 3svw;
  font-size: 2.5svw;
  display:block;
}
   section#introduction, section#content  {
    width:95svw;
    padding: 2svw 0 0 2svw;
    position:relative;
} 
    div.primary, .secondary img {
        width:95svw;
        height:auto;
        padding-right:0;
    }
    div.workpiece {
    padding-bottom:6svw;
}
h1 a {
    background-size: 6svw auto;
    padding-left: 7svw;
    
}
}