@font-face {
  font-family: "blue-screen-font";
  src: url("fonts/blue-screen-font/BlueScreenPersonalUseRegular-0W1M9.ttf") format("truetype");
}

@font-face {
  font-family: "alfena-pixel";
  src: url("fonts/alfena-pixel/AlfenaPixel-Regular_demo.otf") format("opentype");
}

@font-face {
  font-family: "pixel-game";
  src: url("fonts/pixel-game/Pixel\ Game.otf")
}

body {
  background-image: url("images/istockphoto-1064140298-612x612.jpg");
  background-size: cover;
  font-family: 'alfena-pixel', serif;
}

header {
  font-family: "blue-screen-font";
  color:rgb(185, 176, 176);
  font-size:xx-large;

}

h2 {
  font-family: "pixel-game";
  font-size: 40px;
}

h3 {
  text-decoration: underline;
  padding: 3px;
  margin: 3px;
}

p {
  font-family:"alfena-pixel", serif;

}

ul {
  margin-left: 0px;
  padding-left:0px;
  list-style-type: none;
}

li {
  margin-left: 0px
}

a:link {
  color: #eba9c4;
  background-color: transparent;
  text-decoration: underline;
}

a:visited {
  color: #f883b2;
  background-color: transparent;
  text-decoration: none;
}

a:hover {
  color: #fcd0ea;
  background-color: transparent;
  text-decoration: underline;
}

a:active {
  color: rgb(255, 0, 132);
  background-color: transparent;
  text-decoration: underline;
}


/* GRID ELEMENT IDS */

#wrapper {
  display: grid;
  width: 60%;
  height: auto;
  grid-template-areas:
    "head head head"
    "intro intro nav"
    "soundcloud soundcloud soundcloud"
    ". currently .";
  grid-template-rows: auto auto auto;
  grid-template-columns: 1fr 2fr 1fr;
  gap: 30px
}

#header {
  grid-area: head;
  background-image: url("images/cloud_background.png");
  background-position:center bottom;
  background-repeat: repeat;
  background-size: contain;
  background-color: #474040;
  border-color:rgb(99, 95, 95);
  color:rgb(43, 39, 39);
  display:flex;
}

#navigation {
  grid-area: nav;
  background-color: #af9a94;
  border-color:#484342;
  color:#51483f;
}

#intro {
  grid-area: intro;
  background-color: #ebd1d9;
  border-color:#7e7474;
  color:#2b2a29;
}

#soundcloud {
  grid-area: soundcloud;
  background-color: #c6b4ab;
  border-color:#7a7369;
  color:#2b2a29;
}

#currently {
  grid-area: currently;
  background-color: #f4e6df;
  border-color:#7a7369;
  color:#524f4d;
}



.box {
  display: block;
  width:100%;
  height:100%;
  margin: 2px;
  border-style: solid;
  border-width: 2px;
  border-radius: 8px;
  padding: 10px;

}