body {
	background-color: blue;
   	font-family: Futura;
   	font-weight: bold;
}

article {
font-size: 13pt;
margin-left: 30%;
}

@font-face {
  font-family: Gotham Medium Italic;
  src: url(../webfontkit/gothammediumitalic-webfont.woff);
}

@font-face {
  font-family: Gotham Medium;
  src: url(../webfontkit/gothammedium-webfont.woff);
}

@font-face {
  font-family: Gotham Bold;
  src: url(../webfontkit/gothambold-webfont.woff);
}


.background {
  background-image: url(../img/form-and-code-background.png);
  background-size: cover;
  width: 100vw;
  height: 200vh;
}

.song-titles {
	font-size: 9.5pt;
	margin-top: -1%;
	margin-left: -4%;
	position: absolute;

}

li {
	margin: 3em 0;
  color: whitesmoke;
}

a {
            font-family: Gotham Medium;
            font-weight: normal;
            font-size: 10pt;

        }

        a:link { 
            color:  white;
         }

        a:visited {
            color:  #9b026b;
         }

        a:hover {
            color: black;
        }

  #sidebar {
  height: 170vh;
  width: 20vw;
  background-color: black;
  margin-top: -12%;
  margin-left: -1%;
  animation: fade-in 5s, 1;
}

.sidebar-icons {
  margin-top: 90%;
  height: 10vh;
  width: 1.8vw;
  animation: fade-in 5s, 1;
}

.home {
  position: absolute;
  margin-top: -6.5%;
  margin-left: 4%;
  font-family: Gotham Medium;
  font-size: 11pt;
  color: whitesmoke;
  animation: fade-in 5s, 1;
}

.search {
  position: absolute;
  margin-top: -4%;
  margin-left: 4%;
  font-family: Gotham Medium;
  font-size: 11pt;
  color: whitesmoke;
  animation: fade-in 5s, 1;
}

.your-library {
  position: absolute;
  margin-top: -1.5%;
  margin-left: 4%;
  font-family: Gotham Medium;
  font-size: 11pt;
  color: whitesmoke;
  animation: fade-in 5s, 1;
}

.pink-mode-text {
  position: absolute;
  margin-top: -1.5%;
  margin-left: 4%;
  font-family: Gotham Medium;
  font-size: 11pt;
  color: whitesmoke;
  animation: fade-in 5s, 1;
}

.fall-21 {
  position: absolute;
  margin-top: 10%;
  font-family: Gotham Medium;
  font-size: 11pt;
  color: whitesmoke;
  animation: fade-in 5s, 1;
}

.spring-21-22 {
  position: absolute;
  margin-top: 12.5%;
  font-family: Gotham Medium;
  font-size: 11pt;
  color: whitesmoke;
  animation: fade-in 5s, 1;
}

.fall-22 {
  position: absolute;
  margin-top: 15%;
  font-family: Gotham Medium;
  font-size: 11pt;
  color: whitesmoke;
  animation: fade-in 5s, 1;
}

.graphic-design {
  position: absolute;
  margin-top: 17.5%;
  font-family: Gotham Medium;
  font-size: 11pt;
  color: whitesmoke;
  animation: fade-in 5s, 1;
}

.interaction-design {
  position: absolute;
  margin-top: 20%;
  font-family: Gotham Medium;
  font-size: 11pt;
  color: whitesmoke;
  animation: fade-in 5s, 1;
}

.illustration {
  position: absolute;
  margin-top: 22.5%;
  font-family: Gotham Medium;
  font-size: 11pt;
  color: whitesmoke;
  animation: fade-in 5s, 1;
}

.motion-design {
  position: absolute;
  margin-top: 25%;
  font-family: Gotham Medium;
  font-size: 11pt;
  color: whitesmoke;
  animation: fade-in 5s, 1;
}

.top-section {
  width: 76vw;
  height: 55vh;
  margin-top: -95%;
  margin-left: 20%;
}

.go-back-button {
  width: 2.5vw;
  height: 3.5vh;
}

.go-forward-button {
  width: 2.5vw;
  height: 3.5vh;
  margin-left: 1%;
}

.f-and-c-cover {
  width: 18vw;
  height: 26vh;
  background-color: #3F90DC;
  border-radius: 5px;
  margin-left: 8%;
}

.f-and-c-text {
  position: absolute;
  font-family: Futura;
  font-size: 70pt;
  margin-left: 2.2%;
  margin-top: 4%;
  color: black;
}

.form-and-code-big-title {
  position: absolute;
  font-family: Gotham Bold;
  font-size: 50pt;
  margin-left: 26%;
  margin-top: -10%;
  color: whitesmoke;
}

.playlist-info {
  position: absolute;
  font-family: Gotham Medium;
  font-size: 11pt;
  margin-left: 26%;
  margin-top: -2.5%;
  color: whitesmoke;
}

.play-button {
  position: absolute;
  width: 4.5vw;
  height: 6vh;
  margin-left: 6%;
  margin-top: 4%;
}

.green-heart-filled {
  position: absolute;
  width: 2.5vw;
  height: 3.5vh;
  margin-left: 13%;
  margin-top: 5%;
}

.hashtag {
  position: absolute;
  font-family: Gotham Medium;
  font-size: 11pt;
  margin-left: 8%;
  margin-top: 10%;
  color: whitesmoke;
}

.title {
  position: absolute;
  font-family: Gotham Medium;
  font-size: 11pt;
  margin-left: 10%;
  margin-top: 10%;
  color: whitesmoke;
}

.plays {
  position: absolute;
  font-family: Gotham Medium;
  font-size: 11pt;
  margin-left: 49%;
  margin-top: 10%;
  color: whitesmoke;
}

.tiny-clock {
  position: absolute;
  width: 1.5vw;
  height: 2vh;
  margin-top: 10%;
  margin-left: 71%;
}

.line {
  position: absolute;
  width: 71vw;
  height: .1vh;
  background-color: black;
  margin-top: 12%;
}

.play-numbers {
  font-family: Gotham Medium;
  font-size: 9.5pt;
  margin-top: -1%;
  margin-left: 35%;
  position: absolute;
  list-style: none;
}

.song-length {
  font-family: Gotham Medium;
  font-size: 9.5pt;
  margin-top: -1%;
  margin-left: 58%;
  position: absolute;
  list-style: none;
}

/* HERE IS MY BREAKPOINT FOR TABLETS */

@media screen and (max-width: 1200px) {

.background {
  background-image: url(../img/form-and-code-background.png);
  background-size: cover;
  width: 100vw;
  height: 230vh;
}

#sidebar {
  height: 170vh;
  width: 20vw;
  background-color: black;
  margin-top: -12%;
  margin-left: -1%;
  animation: fade-in 5s, 1;
}

.f-and-c-text {
  position: absolute;
  font-family: Futura;
  font-size: 60pt;
  margin-left: 2.2%;
  margin-top: 4%;
  color: black;
}


/* HERE IS MY BREAKPOINT FOR SMART PHONES */

@media screen and (max-width: 600px) {

.background {
  background-image: url(../img/form-and-code-background.png);
  background-size: cover;
  width: 100vw;
  height: 280vh;
}

#sidebar {
display: none;
}

.song-titles {
  font-size: 9.5pt;
  margin-top: 105%;
  margin-left: -25%;
  position: absolute;

}

.play-numbers {
 display: none;
}

.song-length {
 display: none;
}

.go-back-button {
  width: 5vw;
  height: 3vh;
  margin-top: 130%;
  margin-left: -20%;
}

.go-forward-button {
  width: 5vw;
  height: 3vh;
  margin-left: 1%;
}

.f-and-c-cover {
  width: 60vw;
  height: 35vh;
  background-color: #3F90DC;
  border-radius: 5px;
  margin-left: 0%;
  margin-top: 2%;
}

.f-and-c-text {
  position: absolute;
  font-family: Futura;
  font-size: 70pt;
  margin-left: 10%;
  margin-top: 15%;
  color: black;
}

.form-and-code-big-title {
  position: absolute;
  font-family: Gotham Bold;
  font-size: 20pt;
  margin-left: -10%;
  margin-top: 2%;
  color: whitesmoke;
}

.playlist-info {
  position: absolute;
  font-family: Gotham Medium;
  font-size: 11pt;
  margin-left: -10%;
  margin-top: 9%;
  color: whitesmoke;
}

.play-button {
  position: absolute;
  width: 10vw;
  height: 6vh;
  margin-left: 65%;
  margin-top: 13%;
}

.green-heart-filled {
  position: absolute;
  width: 6vw;
  height: 3.5vh;
  margin-left: 50%;
  margin-top: 15%;
}

.hashtag {
 display: none;
}

.title {
  display: none;
}

.plays {
display: none;
}

.tiny-clock {
  display: none;
}

.line {
  display: none;
}