/* Tom Johnson Music School main stylesheet */

body {
  background:white;
  color: #333;
  font-family: 'Muli';
  font-weight: normal;
  font-style: normal;
  width:66%;
  max-width:60em;
  min-width:420px;
  margin:auto;
}

a {
    text-decoration:none;
    color:#67a7b0;
}

a:hover {
    text-decoration:underline;
}

h1 {
    font-family: 'Cormorant';
    font-weight:bold;
    font-size: 42px;
}

h2 {
    font-family: 'Cormorant Upright';
    font-weight:500;
    font-size: 33px;
}

h3 {
    font-family: 'Cormorant Upright';
    font-weight:normal;
    font-size: 22px;
}

nav {
    float:left;
    border-right: 1px solid #67a7b0;
    padding-right: 1em;
    margin-right: 1em;
}

nav ul {
    list-style-type:none;
    padding:0;
}

header {
    display:block;
    position:relative;
    height:200px;
    background:no-repeat left bottom/20% url('images/Tom_Johnson.webp');
    background-size:contain;
    margin-bottom:41px;
}

header > * { position:absolute; }

header svg {
    top:60px;
    left:150px;
}

header svg path {
    fill:#67a7b0;
}

header h1 {
    opacity:.5;
    top:28px;
    left:200px;
    letter-spacing: -2px;
    word-spacing: 2px;
}

header h2 {
    opacity:.5;
    top:62px;
    left:200px;
    letter-spacing: 4px;
    word-spacing: 0px;
}

header h3 {
    top:100px;
    left:150px;
}

header nav {
    float:none;
    top:0;
    right:0;
    border-left: 1px solid #67a7b0;
    border-right:none;
    padding-left: 1em;
    margin-left: 1em;
    padding-right:0;
    margin-right:0;
}

header:after {
    content: '';
    display: block;
    border-bottom: 1px solid #67a7b0;
    position:relative;
    top:220px;
    margin:20px 33% 20px;
}

.active {
    font-weight: bold;
}

article {
    text-align:justify;
}

section article img:not(.lightbox-image) {
    float:left;
    width:20%;
    min-width:200px;
    margin: 1em 1em 1em 0;
}
article {
    margin:1em;
    clear:both;
    padding: 1em 2em;
}
section article li {
    clear:both;
}

@keyframes open {
    0%    {opacity: 0; transform: translateX(-10px)}
    100%  {opacity: 1; transform: translateX(0)}
}
details[open] summary ~ * {
    animation: open .5s ease-in-out;
}

#home .feed-title {display:none;}
.feed p div:last-child {display:none;}
p.backhome { text-align:center; }

footer .arrow {
    float: right;
    margin: -4em 0em 0 0;
    font-size: calc(.5em + 1vw);
    background:#0004;
    padding:.5em 1em;
    transition:background 1s;
}
footer .arrow:hover {
    background:#0008;
    transition:background .5s;
}
footer .arrow a {
    text-decoration:none;
    color:white;
}