@font-face {
  font-family: winkle;
  src: url(Winkle-Regular.ttf);
}

html {
  background-image: url(/loadback2.png);
  font-family: winkle;
background-repeat: repeat;
background-size: 1100px 1100px;
}
#title {
  grid-area: title;
  width: 600px;
  margin: auto;
}

#area {
  display: grid;
  margin: auto;
  background-image: url("/bgimg.png");
  background-size: contain;
  background-color: azure;
}
.box {
  padding: 15px;
  overflow-y: scroll;
  margin: auto;
text-align: center;
margin-top: 200px;
overflow: hidden;
}
#nav {
  height: 942px;
  width: 200px;
  grid-area: nav;
}
a {
  display: block;
  color: darkcyan;
}
#contain {
  display:flex;
  height: 250px;
   grid-template-areas: "back back windcloud";
}
#back {
  height: 550px;
  width: 520px;
  grid-area: back;
}
#windcloud {
  height: 450px;
  width: 250px;
  grid-area: back;
}
#updates {
  height: 225px;
  width: 200px;
  grid-area: updates;
}
#todo {
  height: 225px;
  width: 200px;
  grid-area: todo;
}
#status {
  height: 400px;
  width: 200px;
  grid-area: status;
}
#back2 {
  height: 600px;
  width: 800px;
  grid-area: back2;
background-image: url(welcomebac.png);
  background-repeat: no-repeat;
  background-size: auto;

}
#shinee {
  width: 400px;
  max-width: 100%;
  border: black 3px dashed;
}

h1 {
  color: darkcyan;
}
h2 {
  color: darkcyan;
}

p {
  color: #3e5b8a;
font-size: 20px;
}
#dibidibidis {
  font-weight: bold;
  color: darkcyan;
}
#cloudy {
  color: #9dd0eb;
}
#chimmy {
  color: #efdf8f;
}