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='120' height='80' patternTransform='scale(2) rotate(0)'><rect x='0' y='0' width='100%' height='100%' fill='%23463c5eff'/><path d='M-50.129 12.685C-33.346 12.358-16.786 4.918 0 5c16.787.082 43.213 10 60 10s43.213-9.918 60-10c16.786-.082 33.346 7.358 50.129 7.685'  stroke-width='1' stroke='%23ca60aeff' fill='none'/><path d='M-50.129 32.685C-33.346 32.358-16.786 24.918 0 25c16.787.082 43.213 10 60 10s43.213-9.918 60-10c16.786-.082 33.346 7.358 50.129 7.685'  stroke-width='1' stroke='%238dd894ff' fill='none'/><path d='M-50.129 52.685C-33.346 52.358-16.786 44.918 0 45c16.787.082 43.213 10 60 10s43.213-9.918 60-10c16.786-.082 33.346 7.358 50.129 7.685'  stroke-width='1' stroke='%23f3a787ff' fill='none'/><path d='M-50.129 72.685C-33.346 72.358-16.786 64.918 0 65c16.787.082 43.213 10 60 10s43.213-9.918 60-10c16.786-.082 33.346 7.358 50.129 7.685'  stroke-width='1' stroke='%235fc9e7ff' fill='none'/></pattern></defs><rect width='800%' height='800%' transform='translate(0,0)' fill='url(%23a)'/></svg>") }
  
ul {
  list-style-type: none;
  margin: 0;
  padding: 0;
  overflow: hidden;
  background-color: #ff5dcc;
}   

ul li {
  float: left;
}

li a {
  display: block;
  color: white;
  text-decoration: none;
  padding: 10px 14px;
}

li a:hover {
  background-color: #4593a5;
  color: white;
}

h2 {
     font-size: 30px; 
     font-family: "Chewy", sans-serif;}
     
hr {
    background: linear-gradient(90deg,rgba(255, 93, 204, 1) 0%, rgba(243, 167, 135, 1) 25%, rgba(253, 254, 137, 1) 50%, rgba(141, 216, 148, 1) 76%, rgba(95, 201, 231, 1) 100%);
    height: 3px;
    border: 0
}

ol {
  list-style-type: none; }
  
.container {
  display: grid;
  min-height: 100vh;
  padding: 5px;
  gap: 10px;
  grid-template-columns: 300px 870px;
  grid-template-rows: 150px 1fr 80px;
  grid-template-areas: 
    "hd hd"
    "sd-l main"
    "ft ft";
}

@media (max-width: 1500px) {
  .container {
    grid-template-columns: 1fr;
    grid-template-rows: auto;
    grid-template-areas: 
      "hd"
      "sd-l"
      "main"
      "ft";
  }
}

header { grid-area: hd; background: transparent; padding: 10px; }
main { grid-area: main; background: transparent; 
        border: 20px solid transparent;
        border-image: url(images/border.png) 10% round;}
.sidebar-l { grid-area: sd-l; background: transparent; }
footer { grid-area: ft; background: #4ab9a3; padding: 10px;}


.pinkbox {
  background: #ffffff;
  padding: 5px;
  border: 10px solid #5dc190;
}

.box {
  background: #ffffff;
  padding: 10px;
}
  
.profile {
   display: flex;
   flex-direction: row;
   justify-content: flex-end;
   width: 280px;
   border-style: none none none solid;
   border-color: #5f6ee7; }
   
.half {flex: 1 1 50%; text-align: left }
.twothird {flex: 1 1 66%; }
.third {flex: 1 1 33%; }
.fourth {flex: 1 1 25%; }

.bio {
   display: flex;
   flex-direction: row;
   flex-wrap: wrap;
   width: 810px;
   justify-content: space-between;
}

.persona {
  display: flex;
   flex-direction: row;
   flex-wrap: wrap;
   width: 810px;
   float: right;
}

.yume {
   display: flex;
   flex-direction: row;
   flex-wrap: wrap;
   width: 820px;}

.heartmask {
   -website-mask-image: url("images/heartmask.png");
   mask-image: url("images/heartmask.png");

 }
   
.mask {
    height: 200px;
    width: 200px;
    margin: 1em auto; }
    
.mask img {
   height: 100%;
   width: 100%;
   object-fit: cover;
   -webkit-mask-image: cover;
   mask-image: cover; }
   
.checked {
   color: #ca60ae; }
   
.checked2 {
  color: #f3a787; }
  
.checked3 {
  color: #8dd894; }

.checked4 {
  color: #5fc9e7; }
  
.font {
   font-size: 30px;
   font-family: "Chewy", sans-serif; }