* {
padding: 0;
margin: 0;
box-sizing: border-box;
}

html, body {
  height: 100%;
  width: 100%;
}

main {
    height: auto;
    width: auto;
    background-color: #000;
    padding: 2px;
    margin: 2px;
    display: grid;
    gap: 10px;
    grid-template-columns: 280px 300px 1fr;
    grid-template-rows: 200px 220px 400px;

    grid-template-areas: "Hello Task Daniel"
                         "Emojee Calender Daniel"
                         "Mechanic Garden Craft";
}

#hello {
    grid-area: Hello;
    background-color: aqua;
    border-radius: 2px;
    background-image: url("https://images.unsplash.com/photo-1706696951051-51ff81883b61?ixlib=rb-4.1.0&ixid=M3wxMjA3fDB8MHxzZWFyY2h8Nnx8M2QlMjBpbWFnZXN8ZW58MHx8MHx8fDA%3D&auto=format&fit=crop&q=60&w=500");
    background-size: cover;
}

#task {
    grid-area: Task;
    background-color: blue;
    border-radius: 2px;
    background-image: url("https://plus.unsplash.com/premium_photo-1723313266206-4a04be416e09?ixlib=rb-4.1.0&ixid=M3wxMjA3fDB8MHxzZWFyY2h8MjF8fDNkJTIwaW1hZ2VzfGVufDB8fDB8fHww&auto=format&fit=crop&q=60&w=500");
    background-size: cover;
}

#daniel {
    grid-area: Daniel;
    background-color: bisque;
    border-radius: 2px;
    background-image: url("https://images.unsplash.com/photo-1653389523425-c1f572a4c3f0?ixlib=rb-4.1.0&ixid=M3wxMjA3fDB8MHxzZWFyY2h8Mzl8fDNkJTIwaW1hZ2VzfGVufDB8fDB8fHww&auto=format&fit=crop&q=60&w=500");
    background-size: cover;
}

#emojee {
    grid-area: Emojee;
    background-color: red;
    border-radius: 2px;
    background-image: url("https://images.unsplash.com/photo-1706694668159-42105c6c99c9?ixlib=rb-4.1.0&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&q=80&w=880");
    background-size: cover;

}

#calender {
    grid-area: Calender;
    background-color: yellow;
    border-radius: 2px;
    background-image: url("https://images.unsplash.com/photo-1706696950760-4ee1d997bb51?ixlib=rb-4.1.0&ixid=M3wxMjA3fDB8MHxzZWFyY2h8NDB8fDNkJTIwaW1hZ2VzfGVufDB8fDB8fHww&auto=format&fit=crop&q=60&w=500");
background-size: cover;
}

#mechanic {
    grid-area: Mechanic;
    background-color: yellowgreen;
    border-radius: 2px;
    background-image: url("https://images.unsplash.com/photo-1726629597644-d3a6c8528d98?ixlib=rb-4.1.0&ixid=M3wxMjA3fDB8MHxzZWFyY2h8Mjd8fDNkJTIwaW1hZ2VzfGVufDB8fDB8fHww&auto=format&fit=crop&q=60&w=500");
    background-size: cover;

}

#garden {
    grid-area: Garden;
    background-color: skyblue;
    border-radius: 2px;
    background-image: url("https://images.unsplash.com/photo-1726629597654-dd78cbe7dbe5?ixlib=rb-4.1.0&ixid=M3wxMjA3fDB8MHxzZWFyY2h8Mjh8fDNkJTIwaW1hZ2VzfGVufDB8fDB8fHww&auto=format&fit=crop&q=60&w=500");
    background-size: cover;
}

#craft {
    grid-area: Craft;
    background-color: rosybrown;
    border-radius: 2px;
    background-image: url("https://images.unsplash.com/photo-1637709569303-f7cda15a4d3a?ixlib=rb-4.1.0&ixid=M3wxMjA3fDB8MHxzZWFyY2h8NDV8fDNkJTIwaW1hZ2VzfGVufDB8fDB8fHww&auto=format&fit=crop&q=60&w=500");
    background-size: cover;
}