/* CSS is how you can add style to your website, such as colors, fonts, and positioning of your
   HTML content. To learn how to do something, just try searching Google for questions like
   "how to change link color." */

body {

  background-image: url("https://jjnumwoodopinions.neocities.org/images/squarepattern.jpg");
  background-size: 150px 150px;
  background-repeat:repeat;
  background-color:rgba(225,225,225,0.65);


}
:-moz-selection {
  color: white; 
  background: #d6ccaf
}
:-webkit-selection{
  color: white; 
  background: #d6ccaf}
:selection {
  color: white; 
  background: #d6ccaf
}
a:link{ color: blue}
a:visited {color: brown}
  
h1{font-family:vibe;
text-align:center} /*HUH*/

@font-face{
  font-family:vibe;
  src:url("https://jjnumwoodopinions.neocities.org/fonts/GreatVibes-Regular%20(3).ttf");
  }

.main{
  background: conic-gradient(from 1.5turn, #ffe0b8 45deg,#e8e1a3 135deg,#f9cd8f 200deg, #fae99a 360deg);
  margin:auto;
  max-width:1000px;
  padding:10px;
  font-size:0.8rem;
  font-family:cursive;
  border-radius:1.5rem;
  border:0.25rem outset #f9cd8f;
}

.grid-container{
  display:grid;
  grid-template-columns:50px 50px 50px 50px 50px;
  grid-template-rows:50px 50px 50px 50px;
  grid-gap: 10px;
  padding: 20px;

  justify-content:center;
}
.grid-container> div {
  background:blue;
  padding:5px ;
  font-size:1rem;
  border-radius: 0.5rem;
  text-align:center;
}
.storage {
  grid-area:3/4/span 2/span 2;
}
.wadrobe{
  grid-area:3/2/span 2 / span 2 ;
}
.planningboard{
  grid-area:1/1/span 4/ span 1;
}
.workspace{
  grid-area:1/2/span 2/span 4;
}

.list{
  max-width:200px;
  float:left;
  background:#C04000;
  border: 0.2rem inset brown;
  border-radius: 1.5rem;
}


.firstline{
  background: rgb(246,215,164);
  max-width:200px;
  border:0.5rem;
  border-style:none double none double;
  border-color:#6f1c18;
  color:#6f1c18;
  margin:auto;
  font-size:0.7rem;
  padding:0.3rem;
  }