
/* Font Imports */
@import url('https://fonts.googleapis.com/css?family=Raleway:300,400');



/* Style Reset */
html { box-sizing: border-box; }
*, *:before, *:after { box-sizing: inherit; }
ol, ul { list-style: none; }
a { color: inherit; text-decoration: none; }

body, h1, h2, h3, h4, h5, h6, p, ol, ul {
    margin: 0;
    padding: 0;
}




/* Generic Styles */

body {
    font-family: 'Raleway', sans-serif;
    font-weight: 300;
    font-size: 1.0vw;
    line-height: 1.5;
    color: #eee;
    text-shadow: 1px 1px 2px black;
}

h1 { font-size: 4.8vw; font-weight: 400; }
h2 { font-size: 1.8vw; }
h3 { font-size: 1.4vw; }
h4 { font-size: 1.1vw; }

p { margin-bottom: 2vw; }

svg { width: 1vw; height: 1vw; fill: #eee; }

a {
    border-bottom: 0.05vw solid #eee;
    padding-bottom: 0.2vw;
    display: flex;
    align-items: center;
    transition: 0.3s transform ease;
}

a:hover {
    transform: scale(1.1);
}

a svg { margin-right: 0.4vw; }





/* Specific Styles */

header {
    height: 35vw;
    background-image: linear-gradient(90deg, rgba(0, 0, 0, 0.2), rgba(0, 0, 0, 0.9)),
                      url(./header2.jpg);
    background-size: cover;
    background-position: center;

    display: flex;
    flex-direction: column;
    align-items: flex-end;
    justify-content: center;
}

header div {
    margin-right: 12vw;
    display: flex;
    flex-direction: column;
    align-items: center;
}

header div h1 { margin-bottom: 1vw; }
header div h2 { margin-bottom: 4vw; }

header div > a:first-of-type { margin-bottom: 1vw; }
header div > a:last-of-type { margin-bottom: 3vw; }

nav {
    display: flex;
}

nav a:not(:last-child) { margin-right: 2vw; }

.text h2, .composition h2 { margin-bottom: 1vw; }

.about {
    height: 45vw;
    background-image:  url(./score.jpg);
    background-size: cover;
    background-position: center;

    display: flex;
    align-items: center;
    justify-content: center;
}

.about .text {
    width: 40vw;
    margin-right: 10vw;
}

.about .portrait {
    width: 25vw;
    height: 30vw;
    border: 0.05vw solid #eee;
    border-radius: 12.5vw / 15vw;
    background: url(./portrait.jpg);
    background-size: cover;
    box-shadow: 0 0 15px 5px rgba(0,0,0,0.6);
}

.teaching {
    height: 35vw;
    display: flex;
    align-items: center;
    justify-content: center;
}

.teaching, .composition {
    background-color: #080808;
    background-image:
        radial-gradient(
            #111 9px,
            transparent 10px
        ),
        repeating-radial-gradient(
            #111 0,
            #111 4px,
            transparent 5px,
            transparent 20px,
            #111 21px,
            #111 25px,
            transparent 26px,
            transparent 50px
        );
    background-size: 30px 30px, 90px 90px;
    background-position: 0 0;
}

.teaching .text {
    width: 40vw;
    margin-left: 35vw;
}

.accompaniment {
    height: 35vw;
    display: flex;
    align-items: center;
    justify-content: center;
    background-image:
        linear-gradient(90deg, rgba(0, 0, 0, 0.8), rgba(0, 0, 0, 0.2)),
        url(accompaniment.jpg);
    background-size: cover;
    background-position: center;
}

.accompaniment .text {
    width: 40vw;
    margin-right: 35vw;
}

.composition {
    padding: 5vw 25vw;
}

.composition p { margin-bottom: 5vw; }

.soundcloud {
    display: flex;
    align-items: center;
    justify-content: center;
    padding-bottom: 2vw;

    background-size: cover;
    background-position: center;
}

.soundcloud iframe {
    box-shadow: 0 0 15px 5px rgba(0,0,0,0.3);
}

footer {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    background-color: #111;
    padding: 8vw 0;
    font-size: 150%;
}

footer span { margin-bottom: 1vw; }

.site-credit {
    font-size: 75%;
    padding: 0.5vw 1.5vw;
    display: flex;
    justify-content: flex-end;
    background-color: #222;
    border-top: 0.05vw solid #666;
}




/* Material Design Shadows */

.about, .teaching, .accompaniment, .composition, .soundcloud {
    box-shadow: inset 0 20px 25px -15px rgba(0,0,0,0.8);
}

.sc-one {
    box-shadow:
        inset 0 20px 25px -15px rgba(0,0,0,0.8),
        inset 20px 0 25px -15px rgba(0,0,0,0.8),
        inset -20px 0 25px -15px rgba(0,0,0,0.8);
}

.sc-two {
    box-shadow:
        inset 0 20px 25px -15px rgba(0,0,0,0.8),
        inset 25px 0 30px -15px rgba(0,0,0,0.8),
        inset -25px 0 30px -15px rgba(0,0,0,0.8),
        inset 0 -20px 25px -15px rgba(0,0,0,0.8);
}

.sc-three {
    box-shadow:
        inset 20px 0 25px -15px rgba(0,0,0,0.8),
        inset -20px 0 25px -15px rgba(0,0,0,0.8),
        inset 0 -20px 25px -15px rgba(0,0,0,0.8);
}

footer {
    box-shadow:
        inset 0 20px 25px -15px rgba(0,0,0,0.8),
        inset 0 -20px 25px -15px rgba(0,0,0,0.8);
}



/* Smaller screen styles */

@media (max-width: 1000px) {

    body { font-size: 2.0vw; }

    h1 { font-size: 9.6vw; }
    h2 { font-size: 3.6vw; }
    h3 { font-size: 2.8vw; }
    h4 { font-size: 2.2vw; }
    svg { width: 2vw; height: 2vw; }

    header { height: 60vw; }
    .about { height: 80vw; }
    .teaching { height: 80vw; }
    .accompaniment { height: 60vw; }

    .about .text {
        width: 40vw;
        margin-right: 5vw;
    }

    .about .portrait {
        width: 40vw;
        height: 50vw;
        border: 0.1vw solid #eee;
        border-radius: 20vw / 25vw;
    }

    .composition { padding: 12.5vw 10vw; }
    .composition p { margin-bottom: 10vw; }

    footer { padding: 20vw 0; font-size: 125%; }
    .site-credit { padding: 1vw 3vw; }

}

@media (max-width: 600px) {

    body { font-size: 4.0vw; }

    h1 { font-size: 14vw; }
    h2 { font-size: 7.2vw; }
    h3 { font-size: 5.6vw; }
    h4 { font-size: 4.4vw; }
    svg { width: 4vw; height: 4vw; }

    header { height: 120vw; }
    .about { height: 240vw; flex-direction: column-reverse; }
    .teaching { height: 140vw; }
    .accompaniment { height: 100vw; }

    .about .text {
        width: 80vw;
        margin-right: 0vw;
        margin-top: 10vw;
    }

    .about .portrait {
        width: 60vw;
        height: 80vw;
        border: 0.3vw solid #eee;
        border-radius: 30vw / 40vw;
    }

    .teaching .text {
        width: 80vw;
        margin-left: 0;
    }

    .accompaniment .text {
        width: 80vw;
        margin-right: 0;
    }

    .composition { padding: 25vw 10vw; }
    .composition p { margin-bottom: 10vw; }

    footer { padding: 30vw 0; font-size: 100%; }
    .site-credit { padding: 2vw 6vw; }

}
