:root {
	/* Card */
   --card-radius-primary: 20px; 
   --card-background: #f4f4f4;
   --card-width: 600px; 
   --card-height: 250px; 
   --card-content-padding: 15px; 
}

@import url("https://fonts.googleapis.com/css2?family=Spline+Sans:wght@300;400;500;600;700&display=swap");

.card {
  border: var(--Borders);
  max-width: var(--card-width);
  border-radius: var(--card-radius-primary);
  background-color:  var(--card-background);
  box-shadow: rgba(0, 0, 0, 0.3) 0px 19px 38px, rgba(0, 0, 0, 0.22) 0px 15px 12px;
  box-sizing: border-box;
  margin: 20px;
  display: flex;
  flex-direction: row;
  align-items: center;
  transition: 0.5s ease-in;
  font-size: 18px;
  word-break: break-word;

  transition: 0.3s;
  
  animation: CardfadeInAnimation ease 0.5s;
  animation-iteration-count: 1;
  animation-fill-mode: forwards;
}

.cardfixed {
  border: var(--Borders);
  background-color:  var(--card-background);
  max-width: var(--card-width);
  border-radius: var(--card-radius-primary);
  box-shadow: rgba(0, 0, 0, 0.3) 0px 19px 38px, rgba(0, 0, 0, 0.22) 0px 15px 12px;
  box-sizing: border-box;
  margin: 20px;
  display: flex;
  flex-direction: row;
  align-items: center;
  transition: 0.5s ease-in;
  font-size: 18px;
  word-break: break-word; 
  transition: 0.3s;
  
  animation: CardfadeInAnimation ease 0.5s;
  animation-iteration-count: 1;
  animation-fill-mode: forwards;
}

@keyframes CardfadeInAnimation {
	0% {
		opacity: 0;
	}

	100% {
		opacity: 1;
	}
}

.card:hover {
	height:auto;
	/*flex-direction: column;*/
}

.card:hover .card_extra{
  display: block;
}

.card:hover .card_image{
display: none;
}

.card:hover .card_title{
	border-radius: var(--card-radius-primary) var(--card-radius-primary) 0px 0px;
}

.card_image {
  //position: relative;
  //display: block;
	width:100px;
	height:180px;
  //border-radius: var(--card-radius-primary) 0px 0px var(--card-radius-primary);
  object-fit: cover; /* keep aspect ratio but clip image */
}

.card_extra {
  border: var(--Debug);
  padding-left: var(--card-content-padding);
  margin-bottom: 10px;
  display: none;
}

.card_content {
	border: var(--Debug);
	height: 100%;
	width: 100%;
	font-family: "Spline Sans", sans-serif;
	font-size: 18px;
 }
 

.card_date {
  border: var(--Debug);
  display: block;
  padding-left: var(--card-content-padding);
  font-weight: bold;
  display: block;
  color: #222022;
  margin-bottom: 10px;
}

.card_title {
	border: var(--Debug);
	display: block;
	padding: 15px var(--card-content-padding);   /* top/bottom and left/right */
	font-size: 24px;
	margin-bottom: 15px;
	border-radius: 0px var(--card-radius-primary)  0px 0px;
	color: white;
	background-color: black;
	word-wrap: break-word;
	overflow: hidden;
	max-height: 3.2em; /* (Number of lines you want visible) * (line-height) */
	line-height: 1.2em;
}

.card_reference {
  border: var(--Debug);
  padding-left: var(--card-content-padding);
  display: block;
  font-size: 18px;
  margin-bottom: 10px;
}

.card_text {
  border: var(--Debug);
  padding-left: var(--card-content-padding);
  display: block;
  margin-bottom: 10px;
}
  .card_text select{
 font-size: 20px;
 border-radius: 5px;
 }

 .card_anything {
  border: var(--Debug);
  padding-left: var(--card-content-padding);
  display: block;
  margin-bottom: 10px;
 }
 
  .card_anything select{
 font-size: 20px;
 border-radius: 5px;
 }
 
 
.card_red_text {
  border: var(--Debug);
  padding-left: var(--card-content-padding);
  color: red;
  display: block;
  margin-bottom: 10px;
}




.card_full_Width_Button {
	text-align: center;
	display: grid;  
margin: auto;

	padding: 15px var(--card-content-padding);   /* top/bottom and left/right */
	//border-radius: 0px 0px var(--card-radius-primary) 0px;
	background-color: #555555;
	color: white;
	border: 2px solid red;
	width: 95%;
}

.card_full_Width_Button:hover {
  background-color: white;
  color: black;
}