*:before,
*:after,
* {
   margin: 0;
   padding: 0;
   box-sizing: border-box;
}

*:focus {
   outline: none;
   filter: var(--button-select);
}

:root {
   --button-select: drop-shadow(0px 0px 0.2em #000000) brightness(90%);
}

body {
   position: relative;
   min-height: 100vh;
   max-width: 100vw;
   background-color: #ffcab7;
}

.unselectable {
   user-select: none;
   -moz-user-select: none;
   -webkit-user-select: none;
   cursor: default;
}

/*--------------------------------*/
#header-image {
   width: clamp(300px, 60%, 90%);
}

#header-image-container {
   background-color: white;
   display: flex;
   padding-left: 1rem;
   justify-content: center;
   /*align-content: center;*/
}
#logo {
   width: 100%;
   background-color: white; /* rgba(0, 0, 0, 1);*/
   padding: 0 0 0 8vw;
   margin: 0 auto 0 auto;
   text-align: center;
   user-select: none;
   -moz-user-select: none;
   -webkit-user-select: none;
}

#buttons-container {
   width: 100%;
   background-color: white; /* rgba(0, 0, 0, 1);*/
   padding: 0.2rem;
   margin: 0 auto 0 auto;
   text-align: center;
   user-select: none;
   -moz-user-select: none;
   -webkit-user-select: none;
   border-bottom: rgba(0, 0, 0, 0.5) solid 5px;
}

.buttons {
   font-size: clamp(1rem, 3vw, 2rem);
   font-weight: 700;
   text-shadow: 1px 1px 1px rgba(0, 0, 0, 1);
   border-radius: 15px;
   padding: 0.4rem;
   background-color: burlywood;
   color: brown;
   box-shadow: 2px 2px 5px rgba(156, 6, 6, 0.8);
   user-select: none;
   -moz-user-select: none;
   -webkit-user-select: none;
}

.buttons:hover {
   /* transform: scale(0.9); */
   filter: var(--button-select);
}

#instructions {
   width: 100%;
   font-size: clamp(1rem, 2vw, 3rem);
   font-weight: 500;
   text-shadow: 1px 1px 1px rgba(0, 0, 0, 1);
   padding: 0.5rem 1rem 0 1rem;
   text-align: center;
   margin: 0 auto 1rem auto;
   text-align: center;
   user-select: none;
   -moz-user-select: none;
   -webkit-user-select: none;
}

/*-----------------------------*/

#gallery {
   width: 95%;
   margin: auto;
   display: flex;
   flex-flow: row wrap;
   /*display: grid;
   grid-auto-flow: row;
   grid-template-columns: repeat(auto-fill, minmax(200px, 24%));*/

   justify-content: center;
   align-content: center;
   gap: 0.3em;
   padding-bottom: 1rem 0;
   margin: 1rem auto;
}

.tiles {
   border-radius: 20px;
   width: clamp(150px, 30%, 45%);
   /*height: 100%;*/
   box-shadow: 0 0 10px 10px rgba(75, 75, 75, 0.5);
   transition: transform 0.3s;
}

.tiles:hover {
   transform: scale(0.98);
   box-shadow: 0 0 5px 5px rgba(75, 75, 75, 0.5);
   /* filter: var(--button-select); */
}

/*-----------------------*/
/* animation-delay
animation-direction
animation-duration
animation-fill-mode
animation-iteration-count
animation-name
animation-play-state
animation-timing-function */

#from-right {
   opacity: 0;
   /* animation: right-to-left 1s 0.5s forwards; */
   animation-name: right-to-left;
   animation-duration: 1s;
   animation-delay: 0.1s;
   animation-fill-mode: forwards;
}
#from-left {
   opacity: 0;
   /* animation: left-to-right 1s 0.5s forwards; */
   animation-name: left-to-right;
   animation-duration: 1s;
   animation-delay: 0.1s;
   animation-fill-mode: forwards;
}

@keyframes right-to-left {
   from {
      opacity: 0;
      margin-left: 100%;
      width: 300%;
   }

   to {
      opacity: 1;
      margin-left: 0%;
      width: 100%;
   }
}
@keyframes left-to-right {
   from {
      opacity: 0;
      margin-left: -300%;
      width: 300%;
   }

   to {
      opacity: 1;
      margin-left: 0%;
      width: 100%;
   }
}