/* CSS is how you can add style to your website, such as colors, fonts, and positioning of your
   HTML content. To learn how to do something, just try searching Google for questions like
   "how to change link color." */
::-webkit-scrollbar {
    display: none;
}


body {
  background-image: url("data:image/svg+xml,<svg id='patternId' width='100%' height='100%' xmlns='http://www.w3.org/2000/svg'><defs><pattern id='a' patternUnits='userSpaceOnUse' width='40' height='40' patternTransform='scale(1) rotate(0)'><rect x='0' y='0' width='100%' height='100%' fill='%236f473aff'/><path d='M40 45a5 5 0 110-10 5 5 0 010 10zM0 45a5 5 0 110-10 5 5 0 010 10zM0 5A5 5 0 110-5 5 5 0 010 5zm40 0a5 5 0 110-10 5 5 0 010 10z'  stroke-width='1' stroke='none' fill='%23754d40ff'/><path d='M20 25a5 5 0 110-10 5 5 0 010 10z'  stroke-width='1' stroke='none' fill='%23754d40ff'/></pattern></defs><rect width='800%' height='800%' transform='translate(0,-3)' fill='url(%23a)'/></svg>");
  color: #6f473a;
  font-family: domine;
}
.are-you-serious-regular {
  font-family: "Are You Serious", cursive;
  font-weight: 200;
  font-style: normal;
  }
  
.name {
  -webkit-text-stroke: 0.1px #6f473a;
  margin: 7px;
}
  
/*header start*/
.header{
  grid-area: header;
  background-color: #fec3c4;
  padding: 10px;
  border-radius: 10px;
  border: 5px solid #acd378;
  height: 40px;
  }
/*header end*/  
  
  
  
/*main div start*/
.block {
  display: grid;
  grid-template-areas: "header header header"
                        "profile content sidebar";
  justify-content: center;
  gap: 10px; 
  grid-template-columns: 200px 600px 150px;
  }
  
  
.block1 {
  grid-area: profile;
  background-image: url("data:image/svg+xml,<svg id='patternId' width='100%' height='100%' xmlns='http://www.w3.org/2000/svg'><defs><pattern id='a' patternUnits='userSpaceOnUse' width='20' height='40' patternTransform='scale(1) rotate(90)'><rect x='0' y='0' width='100%' height='100%' fill='%23fec3c4ff'/><path d='M0 10h20z'   stroke-width='7.5' stroke='%23ffececff' fill='none'/><path d='M0 30h20z'   stroke-width='7.5' stroke='%23f4999cff' fill='none'/></pattern></defs><rect width='800%' height='800%' transform='translate(0,0)' fill='url(%23a)'/></svg>");
  padding: 6px;
  border-radius: 10px;
  border: 5px solid #acd378;
  height: 200px;
  position: relative;
  }
  
  .banner{
  border: 3px solid white;
  border-radius: 10px;
    }
    
  .pfp {
  position: absolute;
  bottom: 20%;
  right: 30%;
  border: 4px solid white;
  border-radius: 50%;
  }
  
.block2 {
  grid-area: content;
  background-color: #fec3c4;
  padding: 10px;
  border-radius: 10px;
  border: 5px solid #acd378;
  }
.block3{
  grid-area: sidebar;
  background-color: #fec3c4;
  padding: 10px;
  border-radius: 10px;
  border: 5px solid #acd378;
  }
/*main div end*/