@import url('https://fonts.googleapis.com/css2?family=Pixelify+Sans&family=Quicksand:wght@300..700&display=swap');
 
.pixelify-sans-fonties> {
  font-family: "Pixelify Sans", sans-serif;
  font-optical-sizing: auto;
  font-weight: 400; /*400-700*/
  font-style: normal;
}

.quicksand-fonties> {
  font-family: "Quicksand", sans-serif;
  font-optical-sizing: auto;
  font-weight: 400; /*300-700*/
  font-style: normal;
}

body {
 background-image: url("pl8.png");
 background-size: cover;
 font-family: "Pixelify Sans", serif;
 cursor: url('https://64.media.tumblr.com/b1276635f5b5c2bf1a2ac2137d7754e7/afc334a35b004ee8-30/s75x75_c1/3d06004d1324650a3a97ae27c6273f2526231968.png'), auto;
}

.container {
  display: grid;
  grid-template-areas:
    "header header header"
    "nav-bar nav-bar nav-bar"
    "gap gap gap"
    "dollcard content ramblings";
  grid-template-columns: 1fr 3fr 1fr;
  margin: 25px 100px;
}

.container > div.nav-bar { /* NAVIGATION BAR*/
  grid-area: nav-bar;
  /*background: #1C0B10;*/
  background: linear-gradient(359deg, rgba(71,38,48, 1) 0%, rgba(130, 51, 74, 1) 100%);
  padding: 10px;
  border-radius: 7px;
  
}

.nav-bar > a{
  padding: 10px;
  display:inline;  
  align-items: stretch;
  color: rgb(255, 255, 255);
}

.nav-bar > a:hover{
  color: aqua;
}
.gap{
  grid-area:gap;
  margin-top: 8px;
}
.container > div.dollcard {  /* DOLLCARD (&PROFILE) left section*/
  grid-area: dollcard;
  margin-right: 12px;
  /* background-color: blue;*/
  color: white;
  border-radius: 7px;
}

.dollcard > div.profile-title { /* DOLLCARD - first section */
  background-color: #472630;
  text-align: center;
  display:flow-root;
  align-items: center;
  justify-content: center;
  color: white;
  border-radius: 7px 7px 0px 0px;
}

.doll-container{ /* DOLLCARD - middle section */
  background-color: rgba(70, 38, 48, 0.7);
  border-radius: 0px 0px 7px 7px;
}

.doll-container img { 
  display:flex;
  margin: auto;

}

.dollcard > div.profile-details{  /* DOLLCARD - last section */
 text-align: center; 
}

.profile-details p{
  text-align: center;
  font-size: small;
  background-color: #472630;
  padding: 8px 7px;
  margin: 0;
}

.profile-details p.cornering-first{
  border-radius: 7px 7px 0px 0px;
}

.profile-details p.cornering-last{
  border-radius: 0px 0px 7px 7px;
}
.profile-details p:hover{
  color: aqua;
}

.profile-details img{
  width: 16px;
  vertical-align: middle;
}

.container > div.content{  /* CONTENT*/
  grid-area: content;
  margin-right: 12px; /*spacing between content and ramblings*/
  /*background-color: aqua;  this should be no colour*/
}

.posts {
  color: #030505;
  border-radius: 7px;
  text-align: left;
  padding: 8px;
  margin-bottom: 16px;
  background:rgba(104,40,59,0.7);
  color: white;

}

.posts img{
  display:block;
}

.posts .title{
  background:rgba(104,40,59,1);
  font-weight: 700;
  display: flex;
  margin: auto;
  padding: 10px 10px;
  border-radius: 5px;

}

.author{
  background:rgba(104,40,59,1);
  display: flex;
  justify-content: flex-start;
  align-items: center;
  padding-left: 8px;
    border-radius: 5px;
}

.author img{
  height: 40px;
  width: 40px;
}

.author p{
  margin-left: 8px;
}

.essay{
 text-align: left;
 padding: inherit;
 margin: inherit;
}

.ramblings{
  grid-area:ramblings;
  background-color: #763649;
  padding: 8px;
  border-radius: 7px;
  color: white;
  height: auto;
}

.title {
  font-weight: 700;
  margin: auto;
  padding: 10px 10px;
}

.blinkies-container{
  margin: auto;
  border-radius: 7px;
  background-color: #642d3d;
  padding: 10px 10px;
}

.tooltip {
  position: relative;
  display: inline-block;
}

.tooltip .tooltiptext {
  visibility: hidden;
  width: 120px;
  background-color: #797979;
  color: #fff;
  text-align: center;
  border-radius: 6px;
  padding: 5px 0;
  position: absolute;
  z-index: 1;
  bottom: 30%;
  left: 80%;
  margin-left: -60px;
  opacity: 0;
  transition: opacity 0.3s;
}

.tooltip .tooltiptext::after {
  content: "";
  position: absolute;
}

.tooltip:hover .tooltiptext {
  visibility: visible;
  opacity: 1;
}