:root {
  --font-family: "Grandstander";
  --white: #ffffff;
  --white-transparent: #ffffff2a;
  --box-shadow: rgba(0, 0, 0, 0.3) 2px 1px 10px 1px;
  --green-darker: #0f5b01;
  --green-dark: #27ae60;
  --green-light: #2ecc71;
  --green-dark-transparent: #27ae5f6d;
  --yellow-darker: #df7a0e;
  --yellow-dark-transparent: #f39d1258;
  --yellow-dark: #f39c12;
  --yellow-light: #f1c40f;
}

/* SIDENAV from https://www.codeur.com/tuto/css/menu-burger-html-css/#:~:text=Cr%C3%A9er%20un%20burger%20menu%20en,page%2C%20de%20haut%20en%20bas.*/
/* Sidenav menu */

#openBtn {
  position: absolute;
  top: 10px;
  right: 10px;
}

#openBtnInfo {
  position: absolute;
  top: 10px;
  left: 10px;
}

.btnInfo {
  width: 40px;
}

.sidenav,
.sideinfo {
  height: 100%;
  width: 250px;
  position: fixed;
  z-index: 1;
  top: 0;
  right: -250px;
  background-color: var(--green-dark);
  padding-top: 60px;
  transition: right 0.5s ease;
  box-shadow: var(--box-shadow);
}

.sideinfo {
  width: 500px;
  left: -500px;
  padding: 30px;
  padding-top: 60px;
  transition: left 0.5s ease;
  overflow-y: scroll;
}

/* Sidenav menu links */
.sidenav a {
  padding: 8px 8px 8px 32px;
  text-decoration: none;
  font-size: 25px;
  color: var(--white);
  display: block;
  transition: 0.3s;
}

.sideinfo a {
  text-decoration: none;
  font-size: 25px;
  color: var(--white);
  transition: 0.3s;
}

.sidenav a:hover {
  color: var(--green-darker);
}

.sidenav p {
  display: block;
  position: absolute;
  color: var(--white);
  font-size: 20px;
  padding: 8px 8px 8px 32px;
  bottom: 10px;
}

.sidenav ul {
  list-style-type: none;
  padding: 0;
  margin: 0;
}

/* Active class */
.sidenav.active {
  right: 0;
}

.sideinfo.active {
  left: 0;
}

/* Close btn */
.sidenav .close {
  position: absolute;
  top: 0;
  font-size: 36px;
}

.sideinfo .close {
  position: absolute;
  top: 0;
  right: 15px;
  font-size: 36px;
}

/* Icône burger */
.burger-icon span {
  display: block;
  width: 35px;
  height: 5px;
  background-color: var(--white);
  margin: 6px 0;
  border-radius: 5px;
}

@media screen and (max-width: 500px) {
  .sideinfo {
    width: 100%;
    left: -100%;
  }

  .welcomeText>h2 {
    text-align: center;
  }
}