/*color codes for reference 
 --lorange: #FFDCCD;
 --morange: #CC8C6F;
 --dorange: #98654D;
 --background: #0D0D0D;

 --coalm: #F03994;
 --coalp: #5F01B5;
 --coalb: #3287CF;
 --coalt: #01626B;
 --coalg: #49FF49;
 --coaly: #FFD900;
 
 --eziw: #E5F8FF;
 --eziLiBlu: #5EB4FF;
 --eziLiMeBlu: #0087FE;
 --eziMeDaBlu: #0065CE;
 --eziDaBlu: #004299;
 
 --taviLiGre: #358462;
 --taviDaGre: #006C5C;
 --taviLavi: #F0E1FF;
 --taviBlu: #00669B
*/

html {
  background-color: #0D0D0D
}

body {
  background-image: url("../img/background.png");
  background-repeat: no-repeat;
  background-attachment: fixed;
  margin: 0;
}

.center {
  display:flex;
  justify-content: center;
  align-items: center;
}

.grid {
 display: grid; 
 grid-template-areas:
 'logo friendbadge otherbadge'
 'nav dialogue dialogue'
 'nav content content'
 'about content content'
 'about content content';
  column-gap: 10px;
  grid-row-gap: 10px;
}

.logo {
  grid-area: logo;
}

.friendbadge {
  grid-area: friendbadge;
}

.otherbadge {
  grid-area: otherbadge;
}

.nav {
  grid-area: nav;
}

.dialogue {
  grid-area: dialogue;
}

.about {
  grid-area: about;
}

.content {
  grid-area: content;
}