:root {
  --pico-font-size: 1em;
}

html, body {
  width: 100%;
  height: 100%;
}

body {
  min-height: 100%;
  display: grid;
  grid-template-rows: auto 1fr auto;
  grid-template-columns: 100%;
}

main {
  display: grid;
  grid-gap: 1em;
  grid-template-columns: 0.25fr 1.75fr;
}

h1 {
  text-align: center;

}
#side-menu {
  border-right: 1px solid lightgrey;
}

.rouge{
  color: red;
}
.vert{
  color: green;
}

.rq{
  background-color: whitesmoke;
  border: 1px solid grey;
  padding: 5px;
}

.bulle{
  border: 2px solid grey;
  border-radius: 5px;
  padding: 5px;
  box-shadow: 10px 5px 5px grey;
  margin-left: 15px;
  margin-right: 15px;
  background-image: url(https://cdn-icons-png.flaticon.com/512/3625/3625060.png);
  background-repeat: no-repeat;
  background-size: 50px;
  padding-left: 50px;
  min-height: 75px;

}

.prop{
  border: 2px solid blue;
  border-radius: 5px;
  padding: 5px;
  box-shadow: 5px 5px 5px blue;
}

.def{
  border: 2px solid rgba(0,195,0);
  border-radius: 5px;
  padding: 5px;
  box-shadow: 5px 5px 5px green;
}

.demo{
  border: 2px solid red;
  border-radius: 5px;
  padding: 5px;
  box-shadow: 5px 5px 5px red;
}