* {
    box-sizing: border-box;
}
body {
    margin:0;
    padding:0;
    background-color: #001233;
}
body > div {
    padding:20px;
}
img {
    max-width:100%;
    height:auto;
}
#back2Top {
    width:45px; /* width of button */
    height:45px; /* height of button */
    line-height:39px;
    overflow:hidden;
    z-index:999;
    display:none; /* initially not displayed */
    cursor:pointer;
    transform:rotate(270deg); /* turns right arrow 270 degrees */
    position:fixed; /* fixed at bottom corner */
    bottom:30px; /* distance from bottom */
    right:40px; /* distance from right */
    padding:4px 4px 13px 4px; /* padding around arrow */
    border-radius:2px;
    background:rgba(92, 103, 125, 0.7);
    color:#eee; /* color of arrow */
    text-align:center;
    font-size:27px; /* size of the arrow */
    text-decoration:none;
    }
#back2Top:link {
    background:rgba(92, 103, 125, 0.7);
    color:#eee;
    }
#back2Top:visited {
    background:rgba(92, 103, 125, 0.7);
    color:#eee;
    }
#back2Top:hover {
    background:rgba(245, 243, 244, 0.4);
    color:#ccc;
    }
#back2Top:active {
    background:rgba(92, 103, 125, 0.7);
    color:#eee;
 }
h2 {
    font-family: 'Raleway', sans-serif;
    font-weight: 400;
    font-size: 1.6rem;
    text-align: center;
}
.panel2 p, .panel3 p, .panel4 p, .panel5 p, .panel6 p {
    font-family: 'Open Sans', sans-serif;
    font-weight: 300;
    text-align: center;
}
h3 {
    font-family: 'Raleway', sans-serif;
    text-align: center;
    color: #E0E0E0;
}

/*Panel 1*/
.panel1 {
    display: grid;
    grid-template-columns: 1fr;
    background-image: url(images/portrait.jpeg);
    background-repeat: no-repeat;
    background-attachment: fixed;
    background-position: center top;
    background-size: cover;
    background-color: rgba(0,0,0,0.25);
    background-blend-mode: darken;
    height:100vh;
    padding:40px;
    
}
nav {
    grid-column: 1/2;
    color: #F5F3F4;
    font-family: 'Raleway', sans-serif;
    font-weight: 200;
    font-size: 1.1rem;
    display:flex;
    justify-content: space-around;
    align-items: center;
    height: 20%;
}
nav a:link {
    color: #F5F3F4;
    text-decoration: none;
}
nav a:visited {
    color: #F5F3F4;
    text-decoration: none;
}
nav a:hover {
    color: #B1A7A6;
    text-decoration: underline;
}
nav a:visited {
    color: #F5F3F4;
    text-decoration: none;
}

.pagehead {
    grid-column: 1/2;
    color: #F5F3F4;
    text-align: center;
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
    align-items: center;
    height: auto;
}
h1 {
    text-transform: uppercase;
    padding: 20px;
    font-family: 'Questrial', sans-serif;
    font-size: 2.7rem;
    
}
.subheading {
    text-transform: uppercase;
    padding: 20px;
    font-family: 'Questrial', sans-serif;
    font-size: 1.2rem;
    line-height: 0.1rem;
}



/*Panel 2*/
.panel2 {
    display: grid;
    grid-template-columns: 1fr 1fr;
    background-color: #002855;
    color: #F5F3F4;
}
.panel2 h2 {
    grid-column: 1/3;
    text-align: center;
}
.panel2-box1 {
    grid-column: 1/3;
    padding-bottom: 10px;
}
.panel2-box2 {
    grid-column: 1/3;
    padding: 10px 0px;
}
.panel2-box3 {
    grid-column: 1/3;
    padding: 10px 0px;
}

/*Panel 3*/
.panel3 {
    display: grid;
    grid-template-columns: 1fr 1fr 1fr;
    background-image: url(images/singing.jpeg);
    background-repeat: no-repeat;
    background-attachment: fixed;
    background-position: center bottom;
    background-size: cover;
    color: #eee;
    background-color: rgba(0,0,0,0.5);
    background-blend-mode: darken;
}
iframe {
    border: none;
}
.panel3 h2 {
    grid-column: 1/4;
    text-align: center;
}
.panel3-box1 {
    grid-column: 1/4;
    padding-bottom: 10px;
}
.panel3-box2 {
    grid-column: 1/4;
    display: flex;
    justify-content: flex-start;
    align-items: center;
    flex-direction: column;
    padding: 10px 0px;
}
.panel3-box3 {
    grid-column: 1/4;
    padding: 10px 0px;
}


/*Panel 4*/
.panel4 {
    display: grid;
    grid-template-columns: 1fr 1fr 1fr;
    background-color: #001845;
    color: #F5F3F4;
}
.panel4 h2 {
    grid-column: 1/4;
    text-align: center;
}
.panel4-box1 {
    grid-column: 1/4;
    padding-bottom: 10px;
}
.panel4-box2 {
    grid-column: 1/4;
    padding: 10px 0px;
}
.panel4-box3 {
    grid-column: 1/4;
    padding: 10px 0px;
}
.panel4-box4 {
    grid-column: 1/4;
    padding: 10px 0px;
}

/*Panel 5*/
.panel5 {
    display: grid;
    grid-template-columns: 1fr 1fr;
    background-image: url(images/acme.jpg);
    background-repeat: no-repeat;
    background-attachment: fixed;
    background-position: left top;
    background-size: cover;
    color: #eee;
    grid-gap: 10px;
    background-color: rgba(0,0,0,0.45);
    background-blend-mode: darken;
}
.panel5 h2 {
    grid-column: 1/3;
    text-align: center;
}
.panel5 a:link {
    color: white;
    text-decoration: underline;
}
.panel5 a:visited {
    color: white;
    text-decoration: underline;
}
.panel5 a:hover {
    color: #B1A7A6;
    text-decoration: none;
}
.panel5 a:visited {
    color: white;
    text-decoration: underline;
}
.panel5-box1 {
    grid-column: 1/3;
}
.panel5-box2 {
    grid-column: 1/3;
}

/*Panel 6*/
.panel6 {
    display: grid;
    grid-template-columns: 1fr 1fr;
    background-color: #001233;
    color: #F5F3F4;
}
.contact {
    grid-column: 1/2;
}
.contact h2, .contact p {
    text-align: left;
}
.contact p{
    line-height: 0.9rem;
    padding-left: 10px;
}
.social {
    grid-column: 2/3;
}
.social h2 {
    text-align: right;
}
.icons {
    display: flex;
    justify-content: flex-end;
    align-content: center;
}
.tw, .fb, .ig {
    font-size: 1.3rem;
    padding: 10px;
}
.panel6 a:link {
    color: #F5F3F4;
    text-decoration: underline;
}
.panel6 a:visited {
    color: #F5F3F4;
    text-decoration: underline;
}
.panel6 a:hover {
    color: #B1A7A6;
    text-decoration: none;
}
.panel6 a:visited {
    color: #F5F3F4;
    text-decoration: underline;
}

@media only screen and (min-width:650px) {
    h1 {
        font-size: 3.8rem;
    }
    nav {
        font-size: 1.4rem;
    }
}


@media only screen and (min-width:720px) {
    /*General*/
    h2 {
        font-size: 2rem;
    }
    
    /*Panel 1*/
    h1 {
        font-size: 4.3rem;
    }
    .panel1 {
        background-position: center center;
    }
    .subheading {
    font-size: 2rem;
    }
    
    /*Panel 2*/
    .panel2-box1 {
        grid-column: 1/3;
    }
    .panel2 p {
        max-width: 900px;
        margin: auto;
    }
    .panel2 h3 {
        text-align: left;
    }
    .panel2-box2 {
        grid-column:1/2;
        padding: 10px 10px 0px 0px;
    }
    .panel2-box2 p, .panel2-box3 p {
        text-align: left
    }
    .panel2-box3 {
        grid-column:2/3;
        padding: 10px 0px 0px 10px;
    }
    
    /*Panel 3*/
    .panel3 h3 {
        text-align: left;
    }
    .panel3-box1 p, .panel3-box2 p, .panel3-box3 p {
        text-align: left;
    }
    .panel3-box1 {
        grid-column:1/2;
        padding: 0px 10px 0px 0px;
    }
    .panel3-box2 {
        grid-column:2/3;
        padding: 10px 10px;
    }
    .panel3-box3 {
        grid-column:3/4;
        padding-left: 10px;
    }
    iframe {
        width: 100%;
    }
    
    /*Panel 4*/
    .panel4 p {
        max-width: 900px;
        margin: auto;
    }
    .panel4 h3 {
        text-align: left;
    }
    .panel4-box2 p, .panel4-box3 p, .panel4-box4 p {
        text-align: left;
    }
    .panel4-box1 {
        grid-column:1/4;
    }
    .panel4-box2 {
        grid-column:1/2;
        padding: 10px 10px 0px 0px;
    }
    .panel4-box3 {
        grid-column:2/3;
        padding: 10px 10px 0px 10px;
    }
    .panel4-box4 {
        grid-column:3/4;
        padding: 10px 0px 0px 10px;

    }
    
    /*Panel 5*/
    .panel5 {
    grid-auto-rows: minmax(250px, auto);
    }
    .panel5-box1 p, .panel5-box2 p {
        text-align: left;
    }
    .panel5-box1 {
        grid-column:1/2;
        padding-right: 10px;
    }
    .panel5-box2 {
        grid-column:2/3;
        padding-left: 10px;
    }
    }

@media (prefers-reduced-motion: reduce) {
    * { 
    transition-property: none !important;
    transform: none !important;
    animation: none !important;
    background-attachment: scroll !important;
    }
}