body {
    background-image: url("https://i.pinimg.com/736x/fd/29/cb/fd29cbb8ee48c019d7b729fc3578df78.jpg");
    background-repeat: no-repeat;
    background-size: cover;
    opacity: 0.9;
    display: flex;
    justify-content: center;
    align-items: center;
    min-height: 100vh;
  }
  
.container {
    width: 70rem;
    height: 82rem;
    background-color: rgb(57,61,124);
    border: 9px groove lightgrey;
    display: grid;
    grid-template-areas:
        "header header header header"
        "nav about about about"
        "nav about placeholder1 todo-list"
        "placeholder2 placeholder3 medialist calendar"
        "comments comments medialist ad"
        "footer footer footer footer";
    grid-template-columns: 1fr 1fr 1fr 1fr;
    grid-template-rows: 1.4fr 1.8fr 1.6fr 0.8fr 1fr 0.5fr;
    gap: 10px;
    padding: 10px;
    margin-top: 6px;
}

.header {
    grid-area: header;
    position: relative;
    overflow: hidden;
    border-radius: 5px;
    border: 3px solid lightslategray;
}

.header img { 
    width: 100%;
    height: 100%;
}

.nav {
    grid-area: nav;
    border: 5px groove lightslategray;
    border-image: "./border-img1.jpg" 20 round;
    color: black;
    background-image: url(https://i.pinimg.com/736x/4c/ae/20/4cae201c1773889a52fc225c091e9090.jpg);
}


.link { 
    width: 90%;
    margin: 10px;
    margin-top: 30px;
    margin-left: 25px;
    border-radius: 4px;
    background: linear-gradient(180deg, white 45%, grey 47%, grey 60%, lightgrey 100%);
    filter: drop-shadow(0 0.5px 0 gray) drop-shadow(0 0.5px 0 gray) drop-shadow(0 0.5px 0.5px gray) drop-shadow(0.5px 0.5px 1px gray) drop-shadow(-0.5px 0.5px 0 black) drop-shadow(0 0.5px 0 black) drop-shadow(0 0.5px 0 black);
    padding-left: 5px;
    border: solid 2px gray;
    color: black;
    font-size: 16px;
    font-weight: bold;
}









    object-fit: cover;
}