Vintage Test Card CSS Grid #CodepenChallenge

/*Downloaded from https://www.codeseek.co/jennifer-elyse/vintage-test-card-css-grid-codepenchallenge-bKgvwQ */
    @charset 'utf-8';
@import 'compass';
$bg-color: #333;

* {
  box-sizing: border-box;
  position: relative;
  padding: 0px;
  margin: 0px;
}

body {
  background: $bg-color;
}

.tv-container {
  position: relative;
  margin: auto;
  display: block;
  margin-top: 5%;
	width: 600px;
	height: 450px;
	@media only screen and (max-width: 600px) {
		width: 300px;
		height: 225px;
	}
}

.tv {
	position: absolute;
	height: 100%;
	width: 100%;
}

.tv-border {
	position: absolute;
	height: 90%;
	width: 90%;
	top: 5%;
	left: 5%;
	border-radius: 30px;
	box-shadow: inset 2px 2px 6px #000,
		inset -2px -2px 6px #000;
	background-image:
	 linear-gradient(-45deg, rgba(255, 255, 255, 0.6), rgba(0, 0, 0, 0.4));
}

.tv-edge {
	position: absolute;
	height: 96%;
	width: 97%;
	top: 2%;
	left: 1.5%;
	border-radius: 30px;
	box-shadow: 
		inset 3px 3px 4px rgba(0,0,0,0.5), 
		inset -3px -3px 4px rgba(0,0,0,0.5);
background-image:
 radial-gradient(circle at 40% 100%, rgba(255, 255, 255, 0.6), rgba(0, 0, 0, 0.75));
}

.tv-screen-container {
	position: absolute;
	height: 100%;
	width: 100%;
}

.tv-screen {
	position: absolute;
	height: 90%;
	width: 90%;
	top: 5%;
	left: 5%;
	border-radius: 60px 60px 60px 60px / 35px 35px 35px 35px;
	box-shadow: 
		0 0 0 2px #333;
background-image:
 radial-gradient(circle at 50% 5%, rgba(255, 255, 255, 0.3) 8%, rgba(0,0,0,0.3) 100%), linear-gradient(to bottom, rgba(0,0,0,0) 0%,rgba(0,0,0,0.15) 100%),
	radial-gradient(ellipse at center, rgba(0,0,0,0) 0%,rgba(0,0,0,0.25) 100%);;
	overflow: hidden;
}

.test-card {
	position: absolute;
	height: 90%;
	width: 90%;
	top: 5%;
	left: 5%;
	border-radius: 60px 60px 60px 60px / 35px 35px 35px 35px;
	overflow: hidden;
}

.grid-1 {
  position: absolute;
  margin: auto;
	width: 100%;
	height: 80%;
	display: grid;
  grid-template-columns: repeat(7, 1fr);
  grid-auto-rows: 10%;
  grid-gap: 0;
  grid-template-areas: 
    "a b c d e f g"
    "a b c d e f g"
    "a b c d e f g"
    "a b c d e f g"
    "a b c d e f g"
    "a b c d e f g"
    "a b c d e f g"
    "a b c d e f g"
    "a b c d e f g"
    "h i j k l m n"
		"o o o o o o o";
}

.grid-2 {
	height: 300%;
	width: 100%;
	grid-area: o;
	display: grid;
  grid-template-columns: repeat(6, 1fr);
  grid-auto-rows: 100%;
  grid-gap: 0;
  grid-template-areas: 
    "p q r s t u";
}

.item-1 {
	grid-area: a;
}

.item-2 {
	grid-area: b;
}

.item-3 {
	grid-area: c;
}

.item-4 {
	grid-area: d;
}

.item-5 {
	grid-area: e;
}

.item-6 {
	grid-area: f;
}

.item-7 {
	grid-area: g;
}

.black {
	background-color: #000;
}

.white {
	background-color: #fff;
}

.yellow {
	background-color: #ff0;
}

.cyan {
	background-color: #0ff;
}

.green {
	background-color: #0f0;
}

.magenta {
	background-color: #f0f;
}

.red {
	background-color: #f00;
}

.blue {
	background-color: #00f;
}

.grey {
	background-color: #b4b4b4;
}

.navy {
	background-color: #010080;
}

.off-air-container {
	display: grid;
	grid-template-columns: 1;
  grid-auto-rows: 100%;
	position: absolute;
	height: 100%;
	width: 100%;
}

.off-air-box {
	display: grid;
	grid-template-columns: 1;
  grid-auto-rows: 100%;
	margin-top: 18%;
  justify-self: center;
	height: 20%;
	width: 60%;
	background-color: #000;
}

.off-air {
  align-self: center;
  justify-self: center;
	font-family: 'Roboto', sans-serif;
	font-size: 4em;
	
	@media only screen and (max-width: 600px) {
		font-size: 2em;
	}
	color: #fff;
	text-align: center;
}

/*Downloaded from https://www.codeseek.co/jennifer-elyse/vintage-test-card-css-grid-codepenchallenge-bKgvwQ */
    console.clear();

const audioContext = new (window.AudioContext || window.webkitAudioContext);
const sine = audioContext.createOscillator();
sine.frequency.value = 520;
sine.connect(audioContext.destination);

let hasInteracted = false;

window.addEventListener('click', () => {
	if (audioContext.state === 'running') {
		audioContext.suspend();
	} else {
		audioContext.resume();
	}
	if (!hasInteracted) {
		hasInteracted = true;
		sine.start();
	}
});