/*
  Name: main.css 2024
  Description: Simple layout for Fomantic UI - Event Horizon
*/

		html {
			height: 100%;
		}

		body {
			height: 100%;
			background-position: center;
			background-repeat: no-repeat;
			background-size: cover;
			background-color: black;
			color: #aeb9ac !important;
			opacity: 0;
    	transition: opacity 2s;
		}

		@keyframes fadeAndScale2 {
			0% {
				opacity: 0;
			}
			40% {
				opacity: 0.5;
			}
			100% {
				opacity: 1;
			}
		}

	  #dynamic-background2 {
			position: fixed;
			top: 0;
			right: 0;

			width: 100%;
			height: 100%;

			z-index: -10;

			animation: fadeAndScale2 3s;
		}

/** link styling **/
		a:link { color: #fccf51; text-decoration: none; }
		a:visited { color: #fccf51; text-decoration: none; }
		a:active { color: var(--colrfnt1); text-decoration: none; }
		a:hover { color: var(--colrfnt1); text-decoration: none; }

		a.icn:hover { color: var(--colrfnt2); text-decoration: none; }

/** table styling  **/
		tr {
			border: 1px solid #ddd !important;
		}

		.th-left {
			text-align: left;
		}
/** modal styling  **/
		.ui.modal.game-modal {
			background-color: #034f84; /* Same color as flip card */
			color: whitesmoke;
		}
		.ui.modal.game-modal>.content {
			background-color: #034f84; /* Same color as flip card */
			color: whitesmoke;
		}
		.ui.modal.game-modal>.header {
			background-color: #034f84; /* Same color as flip card */
			color: whitesmoke;
		}
		.ui.modal.game-modal>.actions {
			background-color: #034f84; /* Same color as flip card */
			color: whitesmoke;
		}


/** form elements styling  **/
		.ui.input input {
			background-color: transparent !important;
			border: 1px  solid #fccf51 !important;
			color: white !important;
			font-weight: bold !important;
		}

		input[type=text]:focus {
		  border: 2px  solid #fccf51 !important;
		}

/** poster styling  **/
		.poster-showcase {
			margin-top: 100px;

			background-image: url('/obj/rockposters/Ozzy_1981.jpg');
	
			/* These center the image and prevent it from repeating */
			background-position: center;
			background-repeat: no-repeat;
			
			/* This is the key to responsive sizing. Choose ONE of the following: */
	
			/* Option A: 'cover' makes the image fill the entire container, cropping if necessary. */
			background-size: 60%;
	
			/* IMPORTANT: Give the container a height so the background is visible */
			min-height: 800px; /* Adjust this height as needed */
			}
	
/** button styling  **/
		.ui.button:hover {
  			color: black !important;
		} 

		.ui.gameModal.button {
			background-color: rgba(252, 207, 81, 0.7) !important;
		}

		.ui.label.teal:hover {
			background-color: teal !important;
			color: black !important;
		}

		.ui.label.grey:hover {
			background-color: lightgrey !important;
			color: black !important;
		}

		.ui.vertical.labeled.icon.menu {
			background-color: rgba(252, 207, 81, 0.7) !important;
  		color: black !important;
			border: 1px  solid black !important;
			font-weight: bolder !important;
		}

		.ui.vertical.menu .item {
			color: black !important;
			font-weight: bolder !important;
		}

		.ui.vertical.labeled.icon.menu .item:hover {
			background-color: #fccf51 !important;
		}

		.ui.vertical.labeled.icon.menu .item > .icon:not(.dropdown) {
		    float: left;
		    margin-right: 12px !important;
		}

		.ui.vertical.labeled.icon.menu .active.item {
			background-color: rgba(253, 227, 155, 1) !important;
		}

		.ui.breadcrumb, .ui.breadcrumb i, .ui.breadcrumb a {
			color: #fccf51 !important;
			text-shadow: 2px 2px 4px black;
		}

/** 	Book stuff 	**/

/**		.bookshape {
			margin-bottom: -10px;
		} **/
		span { cursor: pointer; }

		span:before { /* Just to give a little puddle of a shadow without adding another element */
			content: '';
			display: block;
			width: 80%;
			height: 1em;
			background: rgba(0,0,0,.35);
			border-radius: 50%;
			position: absolute;
			bottom:-35px;
			filter: blur(5px);
			z-index: 5;
		}
		.shelf {
			border-bottom: 30px solid #a5a5a5;
			border-left: 20px solid transparent;
			border-right: 20px solid transparent;
			top: -15px;
			z-index: -10;
		}
		/*Example adding pseudo element to give shelf depth*/
		.shelf:after {
			content: '';
			background: #686868;
			height: 20px;
			width: calc(100% + 40px); /*IE9+*/
			position: absolute;
			top: 30px;
			left: 0;
			right: 0;
			z-index: 1;
			margin: 0 -20px;
		}

/** 	Flip card stuff 	**/
		.flip-card {
			background-color: transparent;
			width: 150px;
			height: 190px;
			perspective: 1000px; /* Remove this if you don't want the 3D effect */
			margin-bottom: -20px;
		}
		
		/* This container is needed to position the front and back side */
		.flip-card-inner {
			position: relative;
			width: 100%;
			height: 100%;
			text-align: center;
			transition: transform 0.8s;
			transform-style: preserve-3d;
		}
		
		/* Do an horizontal flip when you move the mouse over the flip box container */
		.flip-card:hover .flip-card-inner {
			transform: rotateY(180deg);
		}
		
		/* Position the front and back side */
		.flip-card-front, .flip-card-back {
			position: absolute;
			width: 100%;
			height: 100%;
			backface-visibility: hidden;
		}
		
		/* Style the front side (fallback if image is missing) */
		.flip-card-front {
			background-color: #bbb;
			color: black;
		}
		
		/* Style the back side */
		.flip-card-back {
			background-color: #034f84;
			color: whitesmoke;
			transform: rotateY(180deg);
		}
/** pagination styling  **/
		.ui.pagination.menu {
			background-color: transparent;
			border: 1px solid #fccf51;
			margin-top: 40px;
		}

		.ui.pagination.menu .item {
			color: #fccf51 !important;
		}

		.ui.pagination.menu .item:hover {
			background-color: rgba(252, 207, 81, 0.2) !important;
		}

		.ui.pagination.menu .active.item {
			background-color: #fccf51 !important;
			color: #180F08 !important; /* Dark color for contrast */
			font-weight: bold;
		}

		.ui.pagination.menu .disabled.item {
			opacity: 0.4;
		}