body{
  background:black;
  display:flex;
  align-items:center;
  justify-content:center;
  }
  .container{
    border:solid 2px blue;
    padding:20px;
    height:100vh;
    width:900px;
    display:grid;
    grid-template-columns:250px 1fr 250px;
    grid-gap:1em;}
    
    header,sidebar,sidebar2,main,footer{
      border:red solid 2px;
      }
    header{
     grid-row:1/2;
     grid-column:1/5;
     color:white;
     display:flex;
     align-items:center;
     padding:15px;
     justify-content:flex-start;
      }
     sidebar{
       grid-row:2/5;
     grid-column:1/2;
      display:flex;
      flex-direction:column;
      align-items:center;
      padding:10px;
      }
       .box{
        color:white;
        border:solid 2px white;
        font-size:25px;
        width:8em;
        height:5em;
         overflow:hidden;
        }
      a{
        width:7em;
       font-size:2em;
       text-align:center;
        }
       main{
        grid-row:2/5;
     grid-column:2/5;
     display:flex;
    flex-direction:column;
    align-items:center;
      padding:15px;
      gap:2em;
      }
      .hello-box{
        color:white;
        border:solid 2px white;
        font-size:25px;
        width:25em;
        height:6em;
      }
      iframe{
        position:relative;
        right:160px;
        --color: #444444;
  --radius: 10%;
  --elevation: 20px;
  --bevel: 2px;
  --angle: 49deg;
  --intensity: 70;
  --diffusion: 30;
  --sin: calc(sin(var(--angle)));
  --cos: calc(cos(var(--angle)));
  --x-displacement: calc(-1 * var(--cos) * (var(--elevation) + 1px));
  --y-displacement: calc(-1 * var(--sin) * (var(--elevation) + 1px));
  --edge-opacity: calc(var(--intensity) * 0.006 - var(--diffusion) * 0.002);
  --edge-blur: calc(var(--bevel) * 1.5);
  --surface-contrast: calc(var(--intensity) * 0.01 - var(--diffusion) * 0.005);
  border-radius: var(--radius);
  box-shadow: var(--x-displacement) var(--y-displacement) calc(var(--diffusion) * 0.3px + (var(--elevation))) calc(var(--elevation) / 2) rgba(0, 0, 0, calc(var(--intensity) * 0.006)),
    0px 0px calc(var(--diffusion) * 1.4px) rgba(255, 255, 255, calc(var(--intensity) * 0.004)),
    inset calc(var(--bevel) * -1) 0 var(--edge-blur) hsla(100, 0%, calc((var(--cos) + 1) * 50%), var(--edge-opacity)),
    inset 0 var(--bevel) var(--edge-blur) hsla(100, 0%, calc((-1 * var(--sin) + 1) * 50%), var(--edge-opacity)),
    inset var(--bevel) 0 var(--edge-blur) hsla(100, 0%, calc((-1 * var(--cos) + 1) * 50%), var(--edge-opacity)),
    inset 0 calc(var(--bevel) * -1) var(--edge-blur) hsla(100, 0%, calc((var(--sin) + 1) * 50%), var(--edge-opacity));
  background: linear-gradient(
    calc(var(--angle) + 90deg),
    rgba(0, 0, 0, var(--surface-contrast)),
    rgba(255, 255, 255, var(--surface-contrast))
    ),
    var(--color);
  background-blend-mode: soft-light;
}

        }
        .updates{
        color:white;
        border:solid 2px white;
        font-size:25px;
        width:25em;
        height:6em;
      }
      #heart {
-webkit-mask-image: url(https://i.imgur.com/bIX4M8u.png);
-webkit-mask-size: 70%;
-webkit-mask-repeat: no-repeat;
-webkit-mask-position: center;
}
.img {
width:70%;
position:relative;
left:40px;
}
      footer{
       grid-row:5/6;
     grid-column:1/5;
     height:7em;
      }