/* Define colours for dark mode */
    :root {
      --accent: #226997;
      --main: #333;
      --light: #005596;
      --lighter: #f3f3f3;
      --border: #e6e6e6;
      --bg: #ffffff;
      --hover: #c64121;
    }
@media (prefers-color-scheme: dark) {
  :root {
    --accent: #3493d1;
    --main: #f3f3f3;
    --light: #005596;
    --lighter: #666;
    --border: #e6e6e6;
    --bg: #333333;
    --hover: #e5969a;
  }
}
/* general styles */

body {
  font-family: 'Helvetica Neue',Arial,Helvetica,sans-serif;
  background-color: var(--bg);
}


/* column styles */

.column__list {
  display: grid;
   
  grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
    grid-gap: 2.8rem;
  align-items: start;
 
      
  
}

.column__item {
  border-radius: .2rem;
  background-color: var(--bg);
  padding: 0 .5rem .5rem .5rem;
 
}

.column__title--wrapper {
  display: grid;
 
  /*grid-template-columns: repeat(2, 1fr);
 padding: .25rem;*/
  align-items: center;
}

.column__title--wrapper h2 {
  color: var(--light);
  font-weight: 600;
  font-size: 1.1rem;
}

.column__title--wrapper i {
  text-align: right;
  color: #798d99;
}

.column__item--cta {
  padding: .25rem;
  display: flex;
  color: #798d99;
}

.column__item--cta i {
  margin-right: .25rem;
}



/* card styles */

.card__list {
  display: grid;
  grid-template-rows: auto;
/*  grid-gap: .1rem;
  margin: 0;*/
}

.card__item {
  background-color: var(--bg);
  border-radius: .25rem;
/*  box-shadow: 0 1px 0 rgba(9,45,66,.25);
  padding: .5rem;*/
}

.card__tag {
  font-size: .75rem;
  padding: .5rem 0 0 .2rem;
  border-radius: .25rem;
  font-weight: 700;
  color: white;
  margin: .2rem 0 .2rem .4rem;
  display: inline-block;
  height: 5.1rem;
  width: 5.1rem;

}

.card__image {
  width: 100%;
  margin-bottom: .25rem;
}

/* sticker colors */

.card__tag--staff {
  background-color: #005596;
}

.card__tag--student {
  background-color: #54bceb;
}

.card__tag--shared {
  background-color: #860038;
}