body, h1, h2, h4, div, p, label { margin: 0; }

body {
  color: #dddddd;
  font-family: "Roboto", 'Helvetica Neue', 'Helvetica', 'Arial', sans-serif;
  font-size: 1.6em;
  font-weight: 300;
  letter-spacing: .01em;
  line-height: 1.6;
  text-shadow:   1px 1px 1px rgb(33, 33, 33);
}

.container {
  position: relative;
}

a {
  color: #dddddd;
  text-decoration: none;
}

.overlay
{
  box-sizing: border-box;
  position: fixed;
  left: 0;
  top: 0;
  height: 100%;
  width: 100%;
  padding: 4px;
  display: flex;
  align-items: center;
  text-align: center;
  justify-content: center;
}

.pop-text {
  transition: text-shadow 8s;
  &:hover {
    text-shadow:   4px 4px 8px rgb(33, 33, 33);
    transition: text-shadow .2s;
  }
}

.chartreuse {
  color: chartreuse;
}

#donate {
  position: absolute;
  top: 50%;
  translate: 0 -50%;
  display: block;
}

.slideout {
  box-sizing: border-box;
  position: absolute;
  background-color: #dddddd7e;
  font-size: large;
  padding: 6px 12px;
  width: 440px;
  border-radius: 6px;
  & p {
    max-width: 300px;
  }
  & img {
    width: 46px;
    border-radius: 50%;
    box-shadow: -1px 0 1px #44444457;
    background: #44444457;
  }
}

.slideout-left {
  transform: skewX(-30deg);
  transition: left .8s ease-out;
  & p {
    transform: skewX(30deg);
    float: right;
  }
  & img {
    transform: skewX(30deg);
    float: right;
  }
}

.slideout-right {
  transform: skewX(30deg);
  transition: right .8s ease-out;
  & p {
    transform: skewX(-30deg);
    float: left;
  }
  & img {
    transform: skewX(-30deg);
    float: left;
  }
}

#news {
  left: -406px;
  top: 25%;
  translate: 0 -40%;
  &:hover {
    left: -68px;
    transition: left .4s ease-out;
  }
}

#wishlist {
  right: -394px;
  top: 75%;
  translate: 0 -80%;
  &:hover {
    right: -68px;
    transition: right .4s ease-out;
  }
  h4 {
    transform: skewX(-30deg);
    float: left;
    margin: 1.3em;
    font-size: 24px;
  }
}

#info {
  display: none;
  /* left: -386px;
  top: 50%;
  translate: 0 calc(50% + 32px);
  &:hover {
    left: -68px;
    transition: left .4s ease-out;
  } */
}

#bucket {
  position: absolute;
  left: 10px;
  top: 10px;
  > img {
    width: 120px;
  }
}

.langToggle {
  margin: 0;
  padding: 0;
  z-index: 11;
  position: fixed;
  top: 24px;
  right: 24px;
  opacity: .65;
  transition: opacity .2s;
  #flagbtn {
    width: 42px;
    border-radius: 50%;
  }
}

h1:lang(fr),
h2:lang(fr) {
  display: none;
}

#coffee-btn {
  padding-top: 8px;
  height: 1.6em;
}

#footer {
  position: absolute;
  bottom: 8px;
  display: flex;
  align-items: center;
  font-size: 0.8em;
  #home:before {
    content: "some homeless guy";
  }
}

@media (max-width: 400px) {  
  #footer #home:before {
    content: "";
  }
  #footer #home:after {
    content: "homeless";
  }
}

#btnControl1, #btnControl2, #btnControl3, 
#btnControl4, #langControl {
  display: none;
}

#langControl:checked + label > div {
  transition: all .2s;
  opacity: 1;
}

#btnControl1:checked + label > div,
#btnControl2:checked + label > div,
#btnControl3:checked + label > div,
#btnControl4:checked + label > div  {
  transition: opacity 1.1s ease-out,
            transform 0s 1.1s,
               height 0s 1.1s;
  opacity: 0;
  height: 0;
  transform: translateY(-100px);
  pointer-events: none;
}

#btnControl3:checked + label > div > #bucket  {
  transition: transform 0s 1s;
  transform: translateY(-200px);
}

.z4 {
  background: teal;
  z-index: 4;
}

.z3 {
  background: crimson;
  z-index: 3;
}

.z2 {
  background: darkslateblue;
  z-index: 2;
}

.z1 {
  background: tomato;
  z-index: 1;
}

.z0 {
  background: steelblue;
  z-index: 0;
}