/* Fonts */
		@import url('https://fonts.googleapis.com/css2?family=Electrolize&family=Share+Tech&display=swap'); /* "Share Tech" */
		@import url('https://fonts.googleapis.com/css2?family=Orbitron:wght@400..900&display=swap');		/* "Orbitron", sans-serif; */
		@import url('https://fonts.googleapis.com/css2?family=Michroma&family=Oooh+Baby&display=swap'); /* "Michroma", sans-serif; */
		@import url('https://fonts.googleapis.com/css2?family=Exo+2:ital,wght@0,100..900;1,100..900&display=swap'); /* "Exo 2", sans-serif; */
		
		img.command {
			content:url("/assets/command_small.png");
		}
		img.culture {
			content:url("/assets/culture_small.png");
		}
		img.science {
			content:"data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 64 64'><ellipse cx='32' cy='32' rx='20' ry='8' stroke='black' stroke-width='3' fill='none'/><ellipse cx='32' cy='32' rx='20' ry='8' stroke='black' stroke-width='3' fill='none' transform='rotate(45 32 32)'/><ellipse cx='32' cy='32' rx='20' ry='8' stroke='black' stroke-width='3' fill='none' transform='rotate(90 32 32)'/><ellipse cx='32' cy='32' rx='20' ry='8' stroke='black' stroke-width='3' fill='none' transform='rotate(135 32 32)'/><circle cx='32' cy='32' r='4' fill='black'/></svg>";
		}
		img.warp {
			content:url("/assets/warp_small.png");
		}

    body {
      font-family: 'Share Tech';
      background: #ccc;
		}

		h1,h2,h3 {
			text-align: center;
		}
		
		.small-text {
		  font-size: 0.9em !important;
		}
		.very-small-text {
		  font-size: 0.8em !important;
		}		
		.small-title {
		  font-size: 1.1em !important;
		}
    .large-title {
		  font-size: 1.3em !important;
		}
		
		.flex-container {
			display: flex;
			flex-wrap: wrap;
			gap: 20px;
			padding: 20px;
			max-width: 1200px;
			margin: 0 auto;
    }
		
		/* Card Container */
    .card {
			position: relative;
			width: 250px;
			height: 375px;
			overflow: hidden;
			color: white;
			display: block;
			text-transform: uppercase;
			background-repeat: no-repeat;
			background-size: 250px 375px;
		}
		
		/* Fleet Container */
    .fleet {
			position: relative;
			width: 300px;
			height: 400px;
			overflow: hidden;
			display: block;
			background-repeat: no-repeat;
			background-size: 300px 400px;
		}
		.fleet p {
		  margin: 0 0 5px 0;
		}
		.fleet .fleet-title {
	    text-transform: uppercase;
	    font-size: 1.2em;
	    font-weight: bold;
	    margin-top: 108px;
      margin-left: 20px;
      width: 170px;
		}
		.fleet .fleet-text {
		  margin-left: 20px;
		  width: 170px;
		}
		.fleet-wide .fleet-text, .fleet-wide .fleet-title {
		  width: 260px;
		}

		
/* ANDORIAN */
		.andorian.card {
			background-image: url("/assets/Adv_Andorian.png");
			color: lightblue;
		}
		.andorian.card.start {
			background-image: url("/assets/Adv_Andorian_Start.png");
		}
		.andorian.start .card-header {
		  padding-left: 10px;
		}
		.andorian .card-header {
		  padding-left: 30px;
		}		
		.andorian .card-header p {
			margin: 0;
			padding-left: 25px;
			padding-top: 5px;
			font-size: 3.5rem;
		}
		.andorian.start .card-header p {
			padding-left: 10px;
			font-size: 1.1rem;
		}
		.andorian .card-title {
			margin-top: 10px;
			padding-left: 40px;
			font-size: 1.1em;
			font-weight: bold;
			height: 50px;
			width: 65%;
		}
		.andorian .card-text {
      margin-left: 25px;
      padding-top: 5px;
      height: 230px;
      width: 155px;
      font-size: 1em;
      text-transform: none;
		}
		.andorian .card-side-icons {
			height: auto;
			bottom: 25px;
			right: 3px;
			position: absolute;
			letter-spacing: normal;
			font-size: initial;
		}
		.andorian .card-side p {
			margin-right: 4px;
			color: #a89d92;
		}
		.andorian.fleet .fleet-title {
      color: lightblue;
		}		
		.andorian.fleet .fleet-text {
      color: white;
		}
		.andorian.fleet.fleet1 {
		  background-image: url("/assets/Fleet_Andorian_1.png");
		}
		.andorian.fleet.fleet2 {
		  background-image: url("/assets/Fleet_Andorian_2.png");
		}
		
/* CARDASSIAN */
		.cardassian.card {
			background-image: url("/assets/Adv_Cardassian.png");
			color: #FEDC8B;
		}
		.cardassian .card-header {
			padding-left: 20px;
			padding-top: 10px;
		}
		.cardassian .card-title {
			margin-top: 4px;
			padding-left: 25px;
			font-size: 1.1em;
			font-weight: bold;
			height: 45px;
			width: 65%;
		}
		.cardassian .card-text {
		  margin-left: 20px;
			padding-top: 5px;
			height: 230px;
			width: 165px;
			font-size: 1em;
			text-transform: none;
		}
		.cardassian .card-side p {
			margin-right: 5px;
		}
		.cardassian .card-side-icons {
			height: auto;
			bottom: 25px;
			right: 4px;
			position: absolute;
			letter-spacing: normal;
			font-size: initial;
		}
		
/* FEDERATION */
		.federation.card {
			background-image: url("/assets/Adv_Federation.png");
		}
		.federation.card.start {
			background-image: url("/assets/Adv_Federation_Start.png");
		}
		.federation .card-header {
			color: #0f1a3d;
		}
		.federation .card-header p {
			margin: 0;
			padding-left: 25px;
			padding-top: 5px;
			font-size: 3.5rem;
			color: #0f1a3d;
		}
		.federation.start .card-header p {
			padding-left: 10px;
			font-size: 1.1rem;
		}
		.federation .card-title {
			margin-top: 8px;
			padding-left: 25px;
			font-size: 1.2em;
			font-weight: bold;
			color: #d0d9f5;
			height: 50px;
			width: 65%;
		}
		.federation .card-text {
		  margin-left: 20px;
			padding-top: 5px;
			height: 230px;
			width: 165px;
			font-size: 1em;
			text-transform: none;
		}
		.federation .card-side-icons {
			height: auto;
			bottom: 25px;
			right: 1px;
			position: absolute;
			letter-spacing: normal;
			font-size: initial;
		}

/* FERENGI */
		.ferengi.card {
			background-image: url("/assets/Adv_Ferengi.png");
			color: #BC8662;
		}
		.ferengi.card.start {
			background-image: url("/assets/Adv_Ferengi_Start.png");
		}
		.ferengi .card-header {
			padding-left: 5px;
			padding-top: 7px;
			font-size: 3em;
			color: #96BF65;
		}
		.ferengi .card-header-roa {
      font-family: "Exo 2", sans-serif;
      font-size: 20px;
      font-optical-sizing: auto;
      font-weight: 700;
      font-style: normal;
      position: absolute;
      top: 23px;
      left: 165px;
      color: #e9a763;
		}
		.ferengi .card-title {
      margin-top: 12px;
      padding-left: 35px;
      padding: 2px 50px;
      font-weight: bold;
      height: 65px;
      width: 150px;
      text-align: center;
      font-size: 1.2em;
		}
		.ferengi .card-text {
      padding: 2px 35px;
      height: 170px;
      width: 180px;
      font-size: 1.1em;
      text-transform: none;
      color: #3B1400;
      text-align: center;
		}
		.ferengi .card-side p {
			margin-right: 5px;
		}
		.ferengi .card-side-icons {
			height: auto;
			bottom: 25px;
			right: 4px;
			position: absolute;
			letter-spacing: normal;
			font-size: initial;
		}
		.ferengi.fleet {
		  color: #96BF65;
		}
		.ferengi.fleet.fleet2 {
		  background-image: url("/assets/Fleet_Ferengi_2.png");
		}
		
/* KLINGON */
		.klingon.card {
			background-image: url("/assets/Adv_Klingon.png");
		}
		.klingon.card.start {
			background-image: url("/assets/Adv_Klingon_Start.png");
		}
		.klingon .card-header {
			margin-top: 10px;
			margin-left: 10px;
		}
		.klingon .card-header p {
      padding-left: 20px;
      padding-top: 8px;
      font-size: 3.3rem;
		}
		.klingon.start .card-header p {
			padding-left: 10px;
			padding-top: 5px;
			font-size: 1.1rem;
		}
		.klingon .card-title {
      margin-top: 3px;
      margin-left: 25px;
			font-size: 1.2em;
			font-weight: bold;
			height: 50px;
			width: 65%;
		}
		.klingon .card-text {
		  margin-left: 25px;
			padding-top: 5px;
			height: 230px;
			width: 165px;
			font-size: 1em;
			text-transform: none;
		}
		.klingon .card-side-icons {
			height: auto;
			bottom: 25px;
			right: 1px;
			position: absolute;
			letter-spacing: normal;
			font-size: initial;
		}
		
/* ROMULAN */
		.romulan.card {
			background-image: url("/assets/Adv_Romulan.png");
			color: #7DC3B9;
		}
		.romulan .card-header {
			padding-left: 5px;
			padding-top: 10px;
			color: white;
		}
		.romulan .card-title {
			margin-top: 5px;
			padding-left: 25px;
			font-size: 1em;
			font-weight: bold;
			height: 45px;
			width: 65%;
		}
		.romulan .card-text {
		  margin-left: 20px;
      padding-top: 15px;
			height: 230px;
			width: 165px;
			font-size: 1em;
			text-transform: none;
		}
		.romulan .card-side p {
			margin-right: 1px;
			color: white;
		}
		.romulan .card-side-icons {
			height: auto;
			bottom: 25px;
			right: 0px;
			position: absolute;
			letter-spacing: normal;
			font-size: initial;
		}

/* GENERICS */

/* Header */
		.card-header {
			display: flex;
			align-items: center;
			font-weight: bold;
			font-size: 3.5em;
			width: 120px;
			height: 60px;
		}
		.card-header.start {
			font-size: 1.2em;
			width: 160px;
		}
		.card-header p {
			padding-left: 20px;
			margin: 0;
		}
		.card-header img {
			width: 60px;
			height: 60px;
		}

/* Titel */
		.card-title {
			margin-top: 10px;
			padding-left: 15px;
			font-size: 1.3em;
			font-weight: bold;
			height: 50px;
		}
		.card-title p {
			margin: 0;
		}

/* Textbereich */
		.card-text {
			font-size: 1em;
			width: 154px;
			height: 200px;
			text-transform: none;
		}
		.card-text p {
			margin: 0 0 5px 0;
		}

/* Seitlicher Balken */
		.card-side {
			position: absolute;
			top: 0;
			right: 0;
			width: 40px;
			height: 350px;
			writing-mode: vertical-rl;
			text-align: left;
			font-size: 2em;
			font-weight: bold;
			letter-spacing: 5px;
			padding: 20px 5px;
		}
		.card-side p {
			margin-right: 2px;
			height: 250px;
		}
		.card-side-icons {
			height: auto;
			bottom: 25px;
			right: -1px;
			position: absolute;
			letter-spacing: normal;
			font-size: initial;
		}
		.card-side img {
			width: 35px;
			padding: 5px;
		}
		
/* Unterer Balken */	
    .card-bottom {
      position: absolute;
      bottom: 0;
      left: 0;
      height: 50px;
      width: 250px;
    	font-size: 2em;
    	font-weight: bold;
    	letter-spacing: 2px;
    }
    .card-bottom p {
      margin-left: 20px;
      margin-top: 5px;
      width: 150px;
    }
    .card-bottom-icons {
  			height: 50px;
  			position: absolute;
  		  bottom: 20px;
        right: 2px;
  			letter-spacing: normal;
  			font-size: initial;
  		}
  	.card-bottom img {
			width: 35px;
			padding: 5px;
		}
		
		.disclaimer {
  		display: block;
      background: rgba(255, 128, 0, 0.1);
      border-color: rgb(255, 128, 0);
      margin: 0;
      padding: 0.5em 1em;
      border-width: 0px 3px 0px 3px;
      text-align: center;
      margin-bottom: 50px;
		}
		.disclaimer h3 {
		  margin: 5px 0;
		}
		.disclaimer p {
		  margin: 2px 0;
		}