/*font import*/
@import url('https://fonts.googleapis.com/css2?family=Bitter:ital,wght@0,100..900;1,100..900&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Raleway:ital,wght@0,100..900;1,100..900&display=swap');

/*Fonts*/
body, input, select, textarea {
	font-family: "Bitter";
	font-size: 18px;
}

h1, h2, h3, h4, .navlist li button {
    font-family: "Raleway";
    font-weight: 600;
	font-size: 32px;
}

h3, h4, .navlist li button {
    font-weight: 500;
}

#bitterfontdemo {
    font-family: "Bitter";
}

#ralewayfontdemo {
    font-family: "Raleway";
}

/*Font styling*/
header a {
	text-decoration: none;
}

h1, h2, .navlist button {
	text-transform: uppercase;
}

/*Font sizes*/
h1 {
	font-size: 48px;
    margin: 0px;
}

h4 {
    font-size: 18px;
    font-weight: 600;
}

#bitterfontdemo, #ralewayfontdemo {
	font-size: 24px;
}

/*Font colors*/
body, a {
    color: rgb(11 27 4);
}

a p, p a {
    color: hsl(1, 53%, 51%);
}

h1, h2, footer, footer a, .projectSubtitle {
    color: hsl(30, 5%, 90%);
}


/*layout*/
body {
	background-image: url("../image/garden2.jpg");
	background-repeat: no-repeat;
	background-position: 0px -400px;
	
	display: flex;
	justify-content: center;

    margin: 0px;
}

#projectPage {
	background-image: url("../image/garden6.jpg");
    background-position: 0px -650px;
}

.center {
    width: 80%;
    min-width: 600px;
	max-width: 1000px;
	margin: 0% 5%;

	background-color: hsla(30, 5%, 90%, 0.75);
	
	border-style: solid;
	border-width: 0px;
	
	display: flex;
	flex-direction: column;
}

/*layout page section headers & footer*/
h2, footer, .projectSubtitle {
	text-align: center;
	
	margin: 0px;
	
    background-color: hsl(115, 27%, 32%);
}

h2, footer p {
    padding: 32px;
    margin: 0px;
}

.projectSubtitle {
    padding-bottom: 32px;
}

body {
    background-color: rgb(11 27 4);
}

/*header and footer color*/
header, footer {
    background-color: rgb(12, 18, 25)
}

/*layout content*/
h3, h4, p {
	margin: 24px 24px;
}

li img {
	vertical-align:middle;
	
	padding: 4px;
	
	overflow: hidden;
    width: auto;
	height: 128px;
	border-radius: 5%;
}

.centeredbox {
    display:flex;
    justify-content: center;

    iframe {
        width: 600px;
        height: 380px;
    }
}

/*button styling*/
button {
    border-width: 0px;
    border-radius: 7%;
    box-shadow: -5px 5px rgb(0, 0, 0);
}

button:active {
    box-shadow: -2px 4px rgb(0, 0, 0);
}

.circle {
    border-radius: 50%;
}

.instrumentDecorations {
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    align-items: flex-start;  

    margin: 0px;
    padding: 0px;

    li {
        list-style-type: none;

        padding:10px;

        img {
            padding:0px;
            width: 100px;
            height: 100px;

            border-radius: 0%;
        }
    }

    /*give the top header slightly more left padding*/
    li:nth-child(1) {
        padding-left: 40px;
        padding-top: 24px;
    }
    /*colored blocks for decorative "instrument" bits on header*/
    li:nth-child(2) {
        color: hsla(30, 5%, 90%, 70%);
        background-color: hsla(1, 53%, 51%, 50%);
    }
    li:nth-child(3) {
        color: rgba(11 27 4 .7);
        background-color: hsla(30, 5%, 90%, 50%);
    }
    li:nth-child(4) {
        color: hsla(30, 5%, 90%, 70%);
        background-color: hsla(115, 27%, 32%, 50%);
    }
    /*puts the speaker image in the top right corner*/
    li:nth-child(5) {
        padding:8px;
    }
}

/*pad-like buttons for each link, equally spaced with
flexible number of columns. Make grid-template-columns
the same width (2nd value) as width of buttons.*/
.navlist {
    display:grid;
    grid-template-columns: repeat(auto-fill, 180px);
    justify-content: center;
    justify-items: center;

	list-style-type: none;
	
    gap: 32px;
    padding: 32px;
    margin:0px;

    button {
        padding: 0px;
        width: 180px;
        height: 180px;
    }
}

/*colors for 'pad' buttons in navlist*/
.navOrange {
    background-color: hsl(30, 100%, 87%)
}
.navOrange:hover {
    background-color: hsl(28, 90%, 80%);
}
.navOrange:active {
    background-color: hsl(26, 80%, 73%);
}

.navBlue {
    background-color: hsl(209, 100%, 87%)
}
.navBlue:hover {
    background-color: hsl(207, 90%, 80%)
}
.navBlue:active {
    background-color: hsl(205, 80%, 73%);
}

.navGreen {
    background-color: hsl(123, 100%, 87%);
}
.navGreen:hover {
    background-color: hsl(121, 90%, 80%);
}
.navGreen:active {
    background-color: hsl(119, 80%, 73%);
}

.navPurple {
    background-color: hsl(336, 100%, 87%);
}
.navPurple:hover {
    background-color: hsl(334, 80%, 80%);
}
.navPurple:active {
    background-color: hsl(332, 70%, 73%);
}

/*double grid*/
.doublegrid {
	display: grid;
	grid-template-columns: 50% 50%;
    overflow: hidden;

    /*center text in a box w/ equal padding,
    some padding after h3 */
    article, section, .gridtext {
        align-self: center;
        justify-self: center;

        padding: 64px;

        h3, h4, ul, p {
            margin: 0px;
            padding: 0px;
        }

        h3 {
            padding-bottom: 24px;
        }
    }

    /*center media and overflow edges*/
    .media {
        display: flex;
        justify-content: center;
        align-items: center;
        overflow: hidden;       
        height: auto;

        min-height: 400px;
        max-height: 500px;

        img {
            min-height: 400px;
            max-height: 500px;
        }

        iframe {
            width: 100%;
            height: 100%;
        }
    }
}