/*fonts*/
@import url('https://fonts.googleapis.com/css2?family=Cutive+Mono&display=swap');

body{
   /*
    margin-bottom: 10em;
    */
    background-color: #702B00;
    margin-top: 2em;
    margin-bottom: 2em;
    margin-left: 2em;
    margin-right: 2em;
    /*
    opacity: 0.4;
    */
}

/* Split the screen in half */

.grid-container {
  display: grid;
  grid-template-columns: auto auto;
  grid-template-areas: "a b";

}
.grid-item1 {
  grid-template-rows: auto;
  grid-area: b;

}

.grid-item2 {
  grid-template-rows: auto;
  grid-area: a;
}

/* text */

p {
    color: #FFC463;
    font-family:'Cutive Mono';
    text-transform: lowercase;
    font-size: 1.5em;
    margin-top: 2em;
}

h1 {
    font-weight: bold;
    font-size: 3em;
    font-family: 'Cutive Mono';
    text-transform: lowercase;
    color: #FFC463;
}

.alignment {
    text-align: right;
}

/* swich button*/

.button {
    background-color: #702B00; 
    border: 1.5px solid;
    border-color: #FFC463;
    color: #FFC463;
    padding: 0.5em 0.5em;
    text-align: center;
    text-decoration: none;
    display: inline-block;
    font-size: 1.25em;
    font-family: 'Cutive Mono';
    text-transform: lowercase;
    transition-duration: 0.4s;
}
  
  .button:hover {
    background-color: #FFC463; 
    color: #702B00;
  }


.space {
    margin-top: 5em;
}

.cls-2 {
    fill: #FFC463;
  }

/*
svg:hoover {
    image-rendering: ;
}
*/

/* Postion of cards */

.oberposition {
    position: fixed;
    top: 10em;
    left: 20em;
}

.assposition {
    position: fixed;
    top: 5em;
    left: 30em;
}

.siebnerposition {
    position: fixed;
    top: 20em;
    left: 20em;
}

.herzposition {
    position: fixed;
    top: 5em;
    left: 10em;
}

.zehnerposition {
    position: fixed;
    top: 10em;
    left: 15em;
}

/**/

.cards {
    filter: invert(84%) sepia(74%) saturate(882%) hue-rotate(310deg) brightness(102%) contrast(101%);
    max-width: 80%;
}

.pictures {
    max-width: fit-content;
    object-fit: cover;
}

.container {
    position: relative;
    width: 20%;
  }

/*
  .image {
    display: block;
    width: auto;
    height: auto;
    object-fit: cover;
  }
*/
  
  .overlay {
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    height: 100%;
    width: 50%;
    opacity: 0;
    transition: .5s ease;
    background-color: none;
    object-fit: cover;
  }
  
  .container:hover .overlay {
    opacity: 1;
  }
  
  /*
  .text {
    color: white;
    font-size: 20px;
    position: absolute;
    top: 50%;
    left: 50%;
    -webkit-transform: translate(-50%, -50%);
    -ms-transform: translate(-50%, -50%);
    transform: translate(-50%, -50%);
    text-align: center;
  }
  */

/* footer */

footer{
    position: absolute;
    width: 100%;
    margin-top: 5em;
    color: #702B00;

}