:root {
  --darkgray-color:darkslategrey;
  --bigtext:2rem;
  --smalltext:0.7rem;

}

body {
  margin:0px;
  font-size:100%;
  background-color: blanchedalmond;
  font-family:'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
  color:var(--darkgray-color);
}

header {
  min-height:200px;
  text-align:center;
  font-size:var(--bigtext);
  padding:0.2rem;
}

section.wrapper {
  display:flex;
  justify-content: space-around;
  flex-wrap: wrap;
  width:100%;
  row-gap:var(--bigtext);
}

section.wrapper article {
  min-height: 450px;
  min-width:400px;
  background-color:rgb(238, 238, 238);
  border:1px var(--darkgray-color) solid;
  font-size:1rem;
  border-radius: 5px;
  transition: all 0.5s;
}

section.wrapper article:hover {
  background-color: white;
  transition: all 1s;
}

article .image {
  background-image:url("../img/tshirt.jpeg");
  background-size:cover;
  height:55%;
  display:grid;
}

.tshirt-text {
  font-family: 'Press Start 2P', cursive;
  font-size:var(--smalltext);
  color:rgb(151, 79, 79);
  margin: auto;
  max-width:30%;
  line-height:1rem;
  text-align:center;
}

article footer {
  padding:var(--smalltext);
  display:grid;
  grid-template-columns: 33% 67%;
  grid-auto-rows: 1.2rem;
  font-size:var(--smalltext)
}

footer label {
  font-weight:700;
  color:var(--darkgray-color);
}

img.avatar {
  height:var(--smalltext);
}


h1 {
  font-family:-apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif;
  color:white;
  text-shadow: var(--darkgray-color) 0px 0px 2px;
  font-size: 3rem;
  
}

input {
  font-size: var(--smalltext);
  width:var(--bigtext);
}