@font-face {
    font-family: 'Kotta One';
    src: url('fonts/KottaOne-Regular.woff2') format('woff2'),
        url('fonts/KottaOne-Regular.woff') format('woff');
    font-weight: normal;
    font-style: normal;
    font-display: swap;
}
* {
    box-sizing: border-box;
}
body {
    background-color:#fdfcf5;
    margin:0;
    padding:20px;
    display: flex;
    align-content: center;
    justify-content: center;
    align-items: center;
    min-height:100vh;
    background-image:url('img/klavierunterricht-moabit.png');
    font-family: 'Kotta One';
    overflow-x: hidden;
    line-height:1.5em;
   color:#AAAA9E;
}
h1,h2,h3,h4 {
color:#AAAA9E;
}
h1 {
    font-size: 14px;
}
h2 {
    font-size:14px;
}
main {
    width:800px;
    min-height:568px;
    border: dashed 1px #e97f67;
    background: #fdfcf5;
    display:flex;
}
.img-ani {
    max-width: fit-content;
    width: 100%;


}
@media only screen and (max-width: 800px) {
    main {
        _width:initial;
        min-height: initial;
        width:100%;
    }
}
nav {
    margin-top: 30px;   
    padding: 0 20px;
    color:#e97f67;
}
nav ul {
    padding: 0;
}
nav li {
    list-style: none;  
    margin-bottom:8px;
}
nav li a {
    text-decoration: none;
 color:#e97f67;
    font-size:16px; 
}

nav li a:hover
{
    color:#703825;
    font-family: 'Kotta One', serif;
}
nav li:nth-child(1) a{
      color:#e97f67;
} 
nav li:nth-child(2) {
    margin-top:20px;
    margin-bottom:30px;
} 
nav li:nth-child(6) {
    margin-bottom:30px;
} 
aside {
    flex-basis: 40%;

}
article {
    padding: 20px;
    width:60%;
    flex-basis: 60%;
    line-height:1.5em;

    font-size:14px;
    padding-top: 25px;
}
@media only screen and (max-width: 700px) { 
    main { 
        flex-direction: column;
    }
    article {
        width:100%;
    }
    nav li a {
        color:#703825!important;  
    }
    nav li {
        background: #e97f67; 
        padding: 5px 10px;
        color: #fff; 
        margin: 0 5px 5px !important;
    }
    nav li:first-child {
        background: transparent;

    }
    nav li:first-child a{ 
        color:#703825 !important;
    }

    .cur   {
        color:#fff !important;
    }
}
.sophie-westarp {
    float: left;
    padding-right:20px;
    padding-bottom:5px;
}
article a  {
    color: #e97f67; 
}
.cur {
    color:#703825;
}
a[href^="mailto:"],a[href^="tel:"] {
  text-decoration: none;  
}