/*Fontes: EB Garamond, Cantata One*/

/*font-family:"Cantata One", Arial, Helvetica, sans-serif;*/
/*font-family:"EB Garamond", serif*/

body{
  background-image: url("../assets/backgrounds/chat_background.jpg");
  background-repeat: no-repeat;
  width: 100%;
  height: 100%;
}

header{
  top: -32px;
}

section p{
  font-family: 'SinaNovaReg', Courier, monospace;
}

.main-container{
  display: grid;
  column-gap: 20px;
  grid-template-areas: 
  "chattable spotify"
  "spotify2 spotify2";
}

.spotify-container2{
  display: none;
}

div img.article-image{
  position: absolute;
  left: 1rem; 
  top: 1rem; 
  width: 2em;
}

figure.coffee-mug figcaption{
  align-self: end;
  width: max-content;
}

figure.coffee-mug{
  display: flex;
  font-family: 'Trebuchet MS', 'Lucida Sans Unicode', 'Lucida Grande', 'Lucida Sans', Arial, sans-serif;
  position: absolute;
  bottom: 50px;
  right: 50px;
  margin: -3rem;
}

figure.coffee-mug img{
  image-rendering: pixelated;
  width: 108px;
  height: 108px;
}

.chattable-container{
  border-radius: 12px;
  display: block;
  width: 100%;
  margin: 10px 0px 10px 0px;
  height: 400px;
}

#chattable{
  border-radius: 12px;
  display: block;
  grid-area: chattable;
  width: 100%; 
  height: 800px;
  margin: 0 1em 0 1em;
}

.spotify-container1{
  margin: 10px 0px 10px 0px;
  height: 800px;
  border-radius: 12px;
  grid-area: spotify;
  background-color: rgb(32,28,28);
}

#spotify{
  height: 800px;
  margin: 0px;
}

@media screen and (max-width: 1400px){
  /*changing the bottom padding of the main-container so that it comports the spotify ribbon*/
  
  .main-container{
    grid-template-areas: 
    "chat"
    "spotify2";
    padding-bottom: 1px;
  }
  .spotify-container1{
    display: none;
  }
  .spotify-container2{
    display: block;
  }
  .coffee-mug{
    display: none;
  }
  .chattable-container{
    width: auto;
    height: 400px;
  }
  #chattable{
    height: 400px;
    margin:auto;
  }
  .spotify-ribbon{
    height: 400px;
  }
  #spotify{
    height: 400px;
    position: absolute;
    top: 300px;
    border-radius:0px; 
    display: block;
    width: 300px; 
    margin: 0px;
  }

}