/* General syles */
* {
  margin: 0;
  padding: 0;

  font-family: 'Times New Roman', Times, serif;
  text-decoration: none;

  /* Removes Text Highlighting */
  -webkit-touch-callout: none; /* iOS Safari */
    -webkit-user-select: none; /* Safari */
     -khtml-user-select: none; /* Konqueror HTML */
       -moz-user-select: none; /* Old versions of Firefox */
        -ms-user-select: none; /* Internet Explorer/Edge */
            user-select: none; /* Non-prefixed version, currently
                                  supported by Chrome, Edge, Opera and Firefox */
}


/* General page style */
body {
  display: flex;
  flex-direction: column;
  align-items: center;

  min-height: 100vh;

  /* https://grabient.com/HQNgnArANKBMAcMIgCw1gRhDD8DM6GawA7AAxgwpkHDIboklInTAph5A?style=linearSwatches&angle=45 */
  background: linear-gradient(45deg, #a87759 0.000%, #a87759 16.667%, #818665 calc(16.667% + 1px), #818665 33.333%, #7e9c85 calc(33.333% + 1px), #7e9c85 50.000%, #a1b3aa calc(50.000% + 1px), #a1b3aa 66.667%, #d0c5c3 calc(66.667% + 1px), #d0c5c3 83.333%, #e8cec3 calc(83.333% + 1px) 100.000%);
}


/* Heading */
h1 {
  margin: 40px;
  text-align: center;

  font-family: "Diplomata", serif;
  font-weight: 400;
  font-size: 40px;
  font-style: normal;
  color:  #f9a71a;
  text-shadow: 2px 2px 1px rgb(41, 23, 0);
}


/* Grid */
.Container {
  width: 80%;
  max-width: 1200px;

  display: grid;
  grid-template-columns: repeat(auto-fit, 300px);
  gap: 20px;
  justify-content: center;

  margin-bottom: 20px;
}


/* Card styling */
.Card{
  display: flex;
  flex-direction: column;
  aspect-ratio: 4/3;

  background-color:  #4A4A4A;
  border-radius: 10px;
  overflow: hidden;
  border-bottom: solid 7px #2a2a2a;
  border-right: solid 4px #2a2a2a;

  transition: filter 0.2s;
  transition: background-color 0.2s;
  transition: border 0.2s;
  transition: transform 0.2s;
}

.Card:hover{
  filter: hue-rotate(90deg);
  background-color:  #405e28;
  border-bottom: solid 7px #2d411c;
  border-right: solid 4px #2d411c;
  transform: scale(1.02);
}

.Card img {
  width: 100%;
  height: 80%;
  object-fit: cover;
}

.CardContent {
  display: flex;
  flex-direction: column;
  justify-content: center;
  flex-grow: 1;
}

.CardTitle {
  padding: 0 10px;
  
  text-align: center;
  color:#D0C5C3;
  font-size: 23px;
}