body
{
background: white;
}
html, body, p, li, button, input, textarea, select,
h1, h2, h3, h4, h5, h6, summary,
a, a:visited
{
color: rgb(50,50,50);
}

main
{
max-width: 512px;
margin: auto;
padding: 5vmin;
animation: apparition 2s;
}
@keyframes apparition {
	0% {clip-path: polygon(0% 0%, 100% 0%, 100% 0%, 0% 0%);}
	100% {clip-path: polygon(0% 0%, 100% 0%, 100% 100%, 0% 150%);}
}
main > a:first-of-type
{
display: block;
padding: 0.25em;
font-size: 2em;
font-weight: 800;
text-align: center;
transition: transform 0.25s;
}
main > a:hover {transform: translateY(-0.15em);}
main h1
{
margin-bottom: 0.5em;
padding: 0 0.15em;
background: linear-gradient(transparent 29%, black 29%, black 31%, transparent 31%, transparent 39%, black 39%, black 41%, transparent 41%, transparent 49%, black 49%, black 51%, transparent 51%, transparent 59%, black 59%, black 61%, transparent 61%, transparent 69%, black 69%, black 71%, transparent 71%);
font-size: 3em;
text-align: left;
white-space: nowrap;
-webkit-text-stroke: 6px white;
}
main h1:before
{
content: '𝄞';
padding-right: 0.5em;
}
main h1 + h1
{
position: absolute;
margin-top: -2.05em;
background: transparent;
-webkit-text-stroke: initial;
}
main h2
{
margin-bottom: 0.25em;
font-size: 2em;
text-align: center;
}
main p {text-align: justify;}
main article
{
margin: 2em 0;
padding: 1em;
background: white;
box-shadow: 0 0.2em 1em rgba(0,0,0,0.5);
border: 2px solid black;
border-radius: 8px;
text-align: center;
}
main article.court
{
display: inline-block;
box-sizing: border-box;
width: 44%;
margin-left: 0.5em;
margin-right: 0.5em;
}
main article h3
{
font-family: 'Lato', Sans-Serif;
font-size: 1.15em;
font-weight: 600;
}
main article h3 em
{
display: block;
font-size: 0.75em;
}
main article em {display: block;}
main article hr
{
margin-top: 0.75em;
margin-bottom: 0.75em;
}
main .floral
{
display: block;
height: 2em;
margin: 2em auto 0 auto;
}

/* Piano */
main#piano {}

/* Prof */
main#prof {}
main#prof p img:first-of-type
{
float: left;
width: 50%;
margin-right: 1em;
clip-path: circle(50%);
shape-outside: circle(50%);
}

/* Cours */
main#cours {}
main#cours p img:first-of-type
{
width: 100%;
margin-bottom: 1em;
}

/* Tarifs */
main#tarifs {}
main#tarifs p {text-align: center;}
main#tarifs strong
{
display: block;
font-size: 2em;
transform: rotate(-5deg);
}
main#tarifs aside i
{
display: inline-block;
margin-right: 0.5em;
font-weight: 800;
font-style: normal;
transform: rotate(-10deg) scale(1.5);
}
main#tarifs #paiements img
{
display: inline-block;
height: 2em;
margin: 0.5em;
}
main#tarifs #paiements em
{
display: block;
font-size: 0.9em;
}

/* Suppléments */
main#supplements {text-align: center;}
main#supplements p {text-align: center;}
main#supplements #affiches {}
main#supplements #affiches a
{
display: inline-block;
cursor: zoom-in;
transition: filter 0.25s;
}
main#supplements #affiches a:hover {filter: brightness(1.5);}
main#supplements #affiches a img {height: 10em;}
main#supplements strong
{
display: block;
margin: 0.5em 0;
font-size: 0.9em;
}
main#supplements ul
{
list-style: none;
text-align: left;
}
main#supplements ul li
{
position: relative;
padding: 0.25em 0 0.25em 2em;
}
main#supplements ul li i
{
display: flex;
position: absolute;
left: 0;
top: 0;
height: 100%;
align-items: center;
font-style: normal;
}

/* Pied */
footer
{
opacity: 0.5;
padding-bottom: 0.5em;
font-size: 0.8em;
font-style: italic;
text-align: center;
}
footer img {filter: invert(100%) hue-rotate(200deg);}