/* Mobile first: these defaults apply to screen widths up to 1000px.*/
*,
*:before,
*:after {
  	-webkit-box-sizing: border-box;
       -moz-box-sizing: border-box;
            box-sizing: border-box;
}

body {
  	background: black;
  	-webkit-font-smoothing: antialiased;
}

p {
    color: white;
    font-family: 'Hind Madurai',arial, sans-serif;
    font-size: 25pt;
    margin: 5%;
}

em {
    font-style: italic;
    font-weight: bolder;
    margin-right: 0.4em;
}

.container {
    margin: 0 auto;
    width: 90%;
    height: 80%;
    padding: 20px;
    text-align: center;
}

#trademark {
	padding: .5em 0;
}

#trademark-img {
    height: 6.5em;
}

.instrument {
    width: 6em;
}

#panel {
    height: 44em;
    padding: 5%;
}

/* Desktop Design: This applies to screens wider than 1000px */
@media (min-width: 1000px) {
    p {
        font-size: 170%;
    }

    .container {
    	display: grid;
    	grid-template-columns: 50% 50%;
    }

    #info {
    	grid-column: 1/2;
    	grid-row: 1/2;
    	display: grid;
    	grid-template-rows: 12em 14em 10em;
    }

	#trademark {
	    grid-column: 1/2;
		grid-row: 1/2;
	    height: 6.5em;
	    align-self: center;
	}

	#description {
		grid-column: 1/2;
		grid-row: 2/3;
	}

	#sound-samples {
		grid-column: 1/2;
		grid-row: 3/4;
	}

	#panel {
		grid-column: 2/3;
		grid-row: 1/2;
		align-items: center;
		margin: 0 auto;
	    height: 37em;
	    padding: 5%;
	}
}