h1{color:#0234a7;
    font-size: 4em;
/*  font-family: fantasy; */
    font-family: 'Berkshire Swash', cursive;
    text-shadow: -6px -3px 10px black,
                 5px 3px 10px white;}

h2{color: rgb(0, 52, 114);
    font-size: 28px;
    font-family: 'Lobster', cursive;
        font-family: 'Berkshire Swash', cursive;
    /*
    text-shadow: 1px 2px 0px darkred;
    */
    }

h3{color: RGB(12, 75, 150);
    font-size: 18px;
    font-family: 'Lobster', cursive;}

.def{font-family: 'Source Sans Pro', sans-serif;
    color: black;
    font-size: 24px;
    font-weight: 700;}

.wrapper {
    background-image: url(../images/music_sheet.png);
    background-repeat: repeat-y;
    background-size: 100%;}

header nav{background-image: url(../images/background.png);}

body{background: linear-gradient(rgba(255, 223, 255, 0.1),
    rgba(219, 123, 153, 1));}

p{color: black;}

.links {color: darkred;}
a:hover {color: red;}
/*#content {color: black;}*/
.links2 {font-size: 120%;}
.interval {font-size: 130%;}
.imgsize {width: 100%;}
.imgsize2 {width: 100%}
.mustitle{text-align: center;
    width: 100%;}
.musimg{width:70%;}

h1{font-weight: bold;
/*  font-family: 'Indie Flower', cursive; */
    color:#145BFF;
    text-align: center;}

p{font-size: 1em;}
h1{padding: 0px;}
/* nav{padding: 20px;} */
main{padding: 20px;}
footer{padding: 20px;}

aside{width: 25%;}

.wrapper {
    box-sizing: border-box; 
    border: .3em solid rgb(139,0,255);
    margin: 1em auto; 
    padding: .8em;    
    border-radius: 40px 40px 0 0;
}

.container {
    display: flex;
    flex-direction: row;
}

nav {
    border-top: .1em solid rgb(139,0,255);
    border-bottom: .1em solid rgb(139,0,255);
    margin: 1em;
    padding: .8em;
    text-align: center;
}

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

nav ul li{
    display: inline;
}

nav ul li a{
    background-color: peachpuff;
    color: white;
    padding: 5px 40px;
    font-size: 140%;
    text-decoration: none;
    border-radius: 10px;    
}

nav ul li a:hover {
    background-color: cornflowerblue;
    color: white;
    padding: 5px 40px;
    font-size: 140%;
    text-decoration: none;
    border-radius: 10px;
}


nav a:hover {font-size: 100%;
            opacity: .7;}

main {opacity: 1;}

main {flex: 8;}

aside {width: 25%;
    border: .3em solid rgb(139,0,255);
    margin: .8em;
    padding: .9em;
    flex: 2;
    border-radius: 20px 20px 0 0;
}

aside img {width: 100%}

/* tablet size */
@media only screen and (max-width: 1024px) {
    .wrapper{
        padding:0;
        width: 100%;
    }

}
/* phone size */
@media only screen and (max-width: 768px) {

    nav {
        padding: 20px 0;
        font-size: 1.75em;
    }
    
    nav a {
        display: block;
        margin: 10px 0;
        margin-top: 10px;
        padding: 20px 0;
    }
 
    
.container {
    display: flex;
    flex-direction: column;
    width: 89%;
    margin: 0;
    text-align: center;}
    
    main {font-size: 150%;
        width: 100%;}
    aside {font-size: 150%;
        width: 95%;
        margin: 3%;}   
}