@import url('https://fonts.googleapis.com/css2?family=IM+Fell+DW+Pica:ital@0;1&display=swap');



body {
  background-color: #ffffff;
  color: #e3bcc7;
  font:16px IM Fell DW Pica;
  cursor: url("Assets/Image/Clicker.png"), auto;
}


::selection {
  background: #f7d9bd;
}

.title {
    color: #e3bcc7;
    font-family: IM Fell DW Pica;
}


.animal {
    background: #fbe3c4;
}

.outil {
    background: #e3bcc7;
}

.jour {
  color: #e3bcc7;
  background: #f2bea0;
  font-family: IM Fell DW Pica;
}

.form {
  color: #e3bcc7;
  background: #fffdf6;
  border: 1px solid #f2bea0;
  border-radius: 4px;
}

.button {
  background-color: #E36E59;
  border: none;
  font-family: IM Fell DW Pica;
  color: #e3bcc7;
  border-radius: 4px;
  cursor: url("Assets/Image/Pointer.png"), pointer;
}

.button:hover{
  background-color: #B04F3E;
}

img {
    max-width: 100%;
    height: auto;
    display: block;
}

#CultofUsakumya img {
  display: inline;
}

.imglist {
  position: relative;
  float: left;
  width: 33%;
}

.imglist .image {
 display: block;
 width: auto;
 height: auto;
}

.imglist .overlay{
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    margin-left: auto;
    margin-right: auto;
    width: 100%;
    transition: all 0.5s ease;
    opacity: 0;
}

.imglist:hover .overlay{
    opacity: 1;
}

.invisible {
  display: none;
}

.visible {
  display: none;
}

#webimg,
#webtxt {
  display: inline-block;
  vertical-align: middle;
}
#web {
  display: flex;
  justify-content: center;
  align-items: center;
}


/* links */

/* unvisited link */
a:link {
  color: #e3bcc7;
  text-decoration: none;
}

/* visited link */
a:visited {
  color: #e3bcc7;
  text-decoration: none;
}


/* selected link */
a:active {
  color: #c9b1b8;
  text-decoration: none;
}


.child {
    position: absolute;
    width: 100%;
    height: 100%;
}
.child.ghost{
    visibility: hidden;
    width: 100%;
    top: 0;
    left: 0;
    position: relative;
}


/* Create three equal columns that floats next to each other */
.column {
  float: left;
}

.left{
  padding-top: 5%;
  width: 25%;
}

.middle {
  width: 50%;
}

.right {
  padding-top: 5%;
  width: 25%;
}

/* Clear floats after the columns */
.row:after {
  content: "";
  display: table;
  clear: both;
}

/* Responsive layout - makes the three columns stack on top of each other instead of next to each other */
@media screen and (max-width: 800px) {
  .column {
    width: 100%;
  }

  .imglist{
    width: 100%;
  }

  .imglist .overlay{
      top: 25%;
      left: 0;
      width: 50%;
  }

  .invisible {
    display: none;
  }

  .visible {
    display: inline;
  }

  .row {
    display: flex;
    flex-flow: column;
  }

  .middle {
    order: 1;
  }

  .left {
    order: 3;
  }

  .right {
    order: 2;
  }
}

@media screen and (min-width: 2400px) {
  .imglist .overlay{
      top: 25%;
      left: 0;
      width: 50%;
  }

  .invisible {
    display: none;
  }

  .visible {
    display: none;
  }
}