/* Styles */

/* Override some colors */

/* Dark mode */
@media only screen  {
  :root:not([data-theme]) {
    --pico-primary: #ffe9e9;
    --pico-text-color: #0e1534;
    --pico-footer-color: white;
    --pico-primary-underline: #f6a28d;
    --pico-primary-hover: #f29179;
    --pico-background-color: #240711;
    --pico-card-background-color: #f3cfa7;

    --pico-h1-color: rgb(244, 162, 162);
    --pico-h2-color: rgb(242, 191, 249);
  }
}

/* Light mode */
@media only screen and (prefers-color-scheme: light)  {
  :root:not([data-theme]) {
    --pico-primary: #210a51;
    --pico-text-color: #ffffff;
    --pico-primary-underline: #9232ac;
    --pico-primary-hover: #de2a93;
    --pico-background-color: rgb(248, 243, 228);
    --pico-card-background-color: #6f6082;
    
    --pico-h1-color: rgb(205, 18, 18);
    --pico-h2-color: rgb(161, 26, 179);
  }
}
/*#a85267ff*/

/* Override other Pico defaults */
:root {
  --pico-form-element-spacing-vertical: 0.25rem;
}

body {
  background-color: #f3e1bf;
  background-image: url('../img/bg.png');
  background-repeat: repeat-x;
}

.spacing {
  padding-top: 90px;
  padding-bottom: 40px;
}

.content {
  background-color: var(--pico-background-color);
  padding: var(--pico-spacing);
}

.grid {  
  display: grid;
  grid-template-columns: 1.3fr 0.7fr;
  grid-template-rows: 1fr;
  gap: 20px 25px;
  grid-auto-flow: row;
}

.card-grid {
  display: grid; 
  grid-template-columns: repeat(4, 1fr); 
  grid-template-rows: 1fr; 
  gap: 20px 25px; 
}

.card-grid-text {
  color: var(--pico-text-color)
}

footer {
  color: var(--pico-muted-color);
  border-top: 1px solid black;
}

.footer {
  padding: var(--pico-spacing);
  font-size: 15px;
  text-decoration: none;
  text-transform: uppercase;
}

p.footer {
  text-transform: none;
}

article {
  background-color: var(--pico-card-background-color)
}

h3 {
  color: var(--pico-primary);
  font-size: 28px;
}

p {
  margin: 0;
  color: var(--pico-primary)
}

ul {
  color: var(--pico-primary)
}

td {
  color: var(--pico-primary)
}

a {
  text-decoration: none;
}

span {
  color: var(--pico-primary-hover);
}

th {
  text-transform: uppercase;
  color: var(--pico-primary)
}

a.brand {
  text-decoration: none;
  text-transform: uppercase;
}

a.footer {
  color: #000000;
}

a.project-evidence {
  text-decoration: underline;
}

.date {
  font-size: 17px;
}

/* Manual responsive website settings */
@media screen and (max-width: 80em) {
  img {
    display: block;
    margin: auto;
  }

  .card-grid {
    grid-template-columns: 1fr 1fr;

  }
}

@media screen and (max-width: 70em) { 
  .grid {
    grid-template-columns: 1fr;
    grid-template-rows: 0.7fr 0.7fr;
  }
}

@media screen and (max-width: 45em) { 
  .card-grid {
    grid-template-columns: 1fr;

  }
}