/*
Theme Name:   Poseidon Child
Theme URI:    https://alanwallwork.co.uk/poseidon-child/
Description:  Poseidon Child Theme
Author:       Gaffyn
Author URI:   https://alanwallwork.co.uk
Template:     poseidon
Version:      1.0.0
License:      GNU General Public License v2 or later
License URI:  http://www.gnu.org/licenses/gpl-2.0.html
Tags:         light, dark, two-columns, right-sidebar, responsive-layout, accessibility-ready
Text Domain:  poseidonchild
*/

:root {
	/*--page-background-color: #cd94cd;
    --title-font: 'Orbitron', sans-serif;
    --navi-font: 'Orbitron', sans-serif;
    --header-background-color: #f6d5f6;*/
	--link-color:  #404040; /*#17631A;*/
	--link-hover-color:  #22aadd; /*#404040;*/

	/*--page-background-color: #efb6ef;
	--page-background-color: rgb(191,114,69);*/
	
	

    /*--title-font: 'Orbitron', sans-serif;
    --navi-font: 'Orbitron', sans-serif;
    --header-background-color: #f6d5f6; */

	/*--page-background-color: #fbf6ea;
    --page-background-color: #f1f9f6;
	--header-background-color: #fbf6ea;
	--link-color: #c4a48d;
	--navi-hover-color: #c4a48d; */

	--primary-color: #22aadd;
	--secondary-color: #0084b7;
	--tertiary-color: #005e91;
	--accent-color: #dd2e22;
	--highlight-color: #00b734;
	--light-gray-color: #eeeeee;
	--gray-color: #777777;
	--dark-gray-color: #404040;
	--text-color: #404040;
	--medium-text-color: #777;
	--light-text-color: #aaa;
	--light-background-color: #eee;
	--dark-border-color: #404040;
	--medium-border-color: #ccc;
	--light-border-color: #ddd;
	/*--link-color: #22aadd;
	--link-hover-color: #404040;*/
	--button-color: #22aadd;
	--button-text-color: #fff;
	--button-hover-color: #404040;
	--button-hover-text-color: #fff;
	/*--page-background-color: #fff;*/
	--page-border-color: rgba(0, 0, 0, 0.12);
	/*--header-background-color: #fff;*/
	--site-title-color: #404040;
	--site-title-hover-color: #22aadd;
	--navi-color: #404040;
	--navi-hover-color: #22aadd;
	--navi-border-color: #ccc;
	--title-color: #404040;
	--title-hover-color: #22aadd;
	--widget-title-color: #404040;
	--widget-title-hover-color: #22aadd;
	--widget-title-border-color: #eee;
	/*--footer-background-color: #fff;*/
	--footer-text-color: #404040;
--text-font: "Prosto One", arial, helvetica, sans-serif;
	--title-font: "Righteous", arial, helvetica, sans-serif;	
	--navi-font: "Righteous", arial, helvetica, sans-serif;
	--widget-title-font: "Righteous", arial, helvetica, sans-serif;
	/*--navi-font: "Raleway", arial, helvetica, sans-serif;
	--widget-title-font: "Raleway", arial, helvetica, sans-serif;*/
	--title-font-weight: bold;
	--navi-font-weight: bold;
	--widget-title-font-weight: bold;
	--title-text-transform: none;
	--navi-text-transform: uppercase;
	--widget-title-text-transform: uppercase;
	--text-line-height: 1.5;
	--title-line-height: 1.5;

}

.righteous-regular {
  font-family: "Righteous", serif;
  font-weight: 400;
  font-style: normal;
}

.page-title {
	display: none;
	background: yellow;
	margin: 0 auto;
	margin-left: 12.5%;
}

.wp-post-image {
    padding: 10px 0;
}

.header-image {
    background: #b598b5;
}

.post-content .entry-meta,
.site-content .entry-meta {
    outline-color: #fff;
    background: #334455;
	color: #000;
	padding-left: 10px;
	max-width: 30%;
	width: auto;
}

.main-navigation ul a {
	padding: 5px;
	background: #bbb;
	border-radius: 5px;
	font-size: 1.1em;
	margin: 5px;
}

.nav-next, .nav-previous, .tags {
	padding: 2px;
	background: #bbb;
	border-radius: 3px;
}

.wp-block-tag-cloud {
	background: #bbb;
	opacity: 0.8;
	padding: 5px;
	border-radius: 3px;
}


/* No Sidebar & Centered Layout Template */
.no-sidebar .content-area,
.site-content .centered-content-area {
	float: none;
	margin: 0 auto;
	padding: 0;
	max-width: 3000px;
	width: 100%;
}

.container {
    max-width: 3000px;
	background: rgb(152,114,92);
background: radial-gradient(circle, rgba(152,114,92,0.6) 25%, rgba(124,120,117,0.6) 100%);
	/*background: rgba(150,150,150,0.3);*/
	position: relative;
	/*z-index: -1 !important;*/
}

.page-container::before, .page-container2::before {    
	content: "";
	background-size: cover;
	background-image: url('http://alanwallwork.co.uk/wp-content/uploads/2024/10/pattern-a.jpg');
	background-repeat: repeat-y;
	position: absolute;
	top: 0px;
	right: 0px;
	bottom: 0px;
	left: 0px;
	opacity: 0.3;
	z-index: -1 !important;
}


.header-main {
	background: url('http://alanwallwork.co.uk/wp-content/uploads/2024/11/pattern3-1.png');
}

.site-footer {
	background: #AAA;
}

.custom-logo {
	border: 2px solid #fff !important;	
}

.page-container {
	width: 75%;
	margin: 0 auto;
	position: relative;
	padding: 30px;
	border-radius: 30px;
	margin-bottom: 20px;
}

.page-container2 {
	width: 100%;
	margin: 0 auto;
	position: relative;
	padding: 30px;
	border-radius: 30px;
	margin-bottom: 20px;
}

.page-container p, .page-container h2 {
	padding: 0 10px;
}

/*.feature-image {
    float:left;
    margin-right:5px;
	width: 50%;
	height: 50%;
    }

.feature-image a:link img {
    background: green;
    padding: 3px;
	width: 50%;
	height: 50%;
    }

.feature-image a:hover img {
    background:blue;
    }
*/

.pics {
	padding: 10px;
	border: 1px solid black;
	margin: 10px auto;
	width: auto;
	display: flex;
	align-items: space-evenly;
	justify-content: center;
	flex-flow: row wrap;
}

.pics img {
	flex: 1 0 21%;
}

.pic {
	padding: 5px;
	border: 1px solid black;
	margin: 0 auto;
	width: 100%;
	text-align: center;
}

.header-image, .featured-image-header {
	display: none;
}

.studiolist {
	list-style: none !important;
	display: flex;
	align-items: space-evenly;
	justify-content: space-evenly;
	flex-flow: wrap;
	margin: 0;
	padding: 0;
}

.studioitem {
	position: relative;
	display: flex;
	flex-direction: column;
	padding: 5px;
	border: 1px solid black;
	border-radius: 10px;
	margin: 5px 5px;
	/*width: 150px;*/
	width: 215px;
	height: auto;
	background: #999;
}

.studioitem p, .randomitem p {
	text-align: center;
	font-size: 0.9em;
	padding-top: 5px;
	background: #ccc;
	border-radius: 5px;
	margin-bottom: auto;
	min-height: 50px;
	height: auto;
	width: 100%;
}

.studioitem .itemimg {
	padding-left: 27px;
	margin-top: 20px;
	height: auto;
	justify-content: flex-end;
	align-items: center;
	/*width: auto;*/
}

.randomitem {
	position: relative;
	display: flex;
	flex-direction: column;
	padding: 5px;
	border: 1px solid black;
	border-radius: 10px;
	margin: 5px 5px;
	width: 150px;
	/*width: 215px;*/
	height: auto;
	background: #999;
}

.randomitem .itemimg {
	padding-left: 20px;
	margin-top: 20px;
	height: auto;
	justify-content: flex-end;
	align-items: center;
	/*width: auto;*/
}

.studioname {
	text-align: center;
}

.randompots {
	text-align: center;
	font-size: 1.5em;
	margin-top: 0;
}

/*.entry-header {
	text-align: center;
}*/

.entry-title, .more-link {
	background: #bbb;
	padding: 2px;
	border-radius: 3px;
}

#metaslider-id-2386 {
	padding: 6px;
	border: 2px solid #FFF;
	width: auto;
	pointer-events: none;
	background: #000;
}

.infolinks {
	position: relative;
	display: flex;
	width: 100%;
	align-items: space-evenly;
	justify-content: space-evenly;
	flex-flow: row wrap;
	background-color: rgba(230,230,230,0.25);
	border: 2px dotted black;
	border-radius: 30px;
	padding: 15px;
}

.infopagelink {
	position: relative; 
	height: auto;
    width: 250px;
    display: flex;
    align-items: center;
    justify-content: space-between;
	border: 1px solid black;
	border-radius: 3px;
	padding: 5px;
	margin: 5px;
	flex-flow: column;
	text-align: center;
}

.infopagelink::before {    
	content: "";
	background-size: cover;
	position: absolute;
	top: 0px;
	right: 0px;
	bottom: 0px;
	left: 0px;
	opacity: 0.9;
}

.edulink::before {
	background-image: url('http://alanwallwork.co.uk/wp-content/uploads/2024/10/goldsmithspic2.jpg');	
}

.forestlink::before {    
	background-image: url('http://alanwallwork.co.uk/wp-content/uploads/2024/10/foresthillpic14.jpg');
}

.greenlink::before {    
	background-image: url('http://alanwallwork.co.uk/wp-content/uploads/2024/10/greenwichpic1.jpg');
}

.marnlink::before {    
	background-image: url('http://alanwallwork.co.uk/wp-content/uploads/2024/10/marnhullpic14.jpg');
}

.abbotlink::before {    
	background-image: url('http://alanwallwork.co.uk/wp-content/uploads/2024/10/abbotsfordpic9.jpg');
}

.whittylink::before {    
	background-image: url('http://alanwallwork.co.uk/wp-content/uploads/2024/10/whittypic23.jpg');
}

.misslink::before {    
	background-image: url('http://alanwallwork.co.uk/wp-content/uploads/2024/10/missegrepic37.jpg');
}

.sherlink::before {    
	background-image: url('http://alanwallwork.co.uk/wp-content/uploads/2024/10/inhisown_AW.jpg');
}

.exhibitionlink::before {
	background-image: url('http://alanwallwork.co.uk/wp-content/uploads/2025/01/Walford-Mill-Exhibition-Promo-scaled.jpg');
}

.videolink::before {
	background-image: url('http://alanwallwork.co.uk/wp-content/uploads/2025/01/videolink.png');
}

.tilematchlink::before {
	background-image: url('http://alanwallwork.co.uk/wp-content/uploads/2025/01/tilematchlink.png')
}

.infotitle {
	font-size: 1.2em;
	text-align: center;
	padding: 2px;
	background: #ccc;
	border-radius: 10px;
	font-style: bolder;
	border: 1px dotted #000;
	z-index: 9999;
}

.infoyear {
	font-size: 1em;
	text-align: center;
	padding: 2px;
	background-color: #ccc;
	border-radius: 10px;
	font-style: bolder;
	border: 1px dotted #000;
	z-index: 9999;
}

.info-a {
	height: 100%;
	text-decoration: none !important;
	margin: 5px;
	padding: 3px;
}

.quoth {
	color: #444;
	background-color: rgba(200,200,200,0.3);
}

.alanlink {
	height: 100%;
	background-color: #ccc;
	text-decoration: none !important;
	border: 1px dotted rgba(200,200,200,0.8);
	padding: 5px;
	border-radius: 5px;
	margin: 20px auto;
	max-width: 40%;
	
}

.alanlink p {
	font-size: 1.2em;
	height: auto;
	color: #000;
	text-align: center;
}

.alanbutton {
		background: rgba(200,200,200,0.8);
        border: 3px dotted rgba(50,50,50,0.8);
		border-radius: 15px;
        color: rgba (50,50,50,1);
        padding: 20px 34px;
        text-align: center;
        text-decoration: none !important;
		font-style: italic;
        display: inline-block;
		width: 100%;
        font-size: 20px;
        margin: 0 auto;
		/*margin-left: 25%;*/
		cursor: pointer;
		transition: all 0.5s ease-in-out;
}

.alanbutton:hover, .alanbutton:focus {
	background: rgba(50,50,50,0.8);
	color: rgba(200,200,200,1);
	border: 3px dotted rgba(200,200,200,0.8);
}

.linkbox {
	
	display: flex;
      align-items: center;
      gap: 20px; /* space between button and text */
      padding: 20px;
	  width: auto;
	  margin: 0 auto;
	justify-content: center;
}

.linkbtn {
	padding: 10px 20px;
      /*background-color: #4CAF50;
      color: white;*/
	  background-color:  rgba(200,200,200,0.8);
	color: black;
      border: 1px solid black;
      border-radius: 5px;
      cursor: pointer;
	  font-size: 1.2em;
	transition: all 1s ease-in-out;
	text-decoration: none !important;
}

.linkbtn:hover {
	color: white;
	background: black;
}

.linktxt {
/*	background-color: #f1f1f1;*/
	background: rgb(200,200,200);
      padding: 10px 15px;
	border: 1px solid black;
      border-radius: 5px;
	width: auto;
	justify-self: center;
}

.tilefun {
	display: flex;
    align-items: space-evenly;
    justify-content: space-between;
	flex-flow: row wrap;
}

#metaslider-id-2613, #metaslider-id-2624,
#metaslider-id-2635, #metaslider-id-2646 {
	padding: 0;
	margin: 0;
	border: 2px solid #FFF;
	width: 250px;
	height: auto;
	/*pointer-events: none;*/
	background: #000;
	transition: all 10s ease-in-out;
}

#metaslider-id-2613:hover, #metaslider-id-2624:hover,
#metaslider-id-2635:hover, #metaslider-id-2646:hover {
	transform: scale(1.5) rotate(3600deg);
	opacity: 0.5;
}

.alanfooter {
	width: 90%;
	background: #ccc;
	display: flex;
	align-items: space-evenly;
	justify-content: space-evenly;
	flex-flow: row wrap;
	padding: 5px;
	margin: 0 auto;
	margin-top: 20px;
	height: auto;
	border-radius: 10px;
}

.alanfooter p {
	color: #333;
	padding: 0 3px;
	padding-left: 10px;
	text-align: center;
	border-left: 2px dotted #333;
}

@media screen and (max-width: 600px) {
	.alanfooter {
		flex-flow: column wrap;
	}
	
	.alanfooter p {
		border-left: 0;
	}
	
}

.privacylink {
	font-size: 0.9em;
	align-self: center;
}

	

.alanrights {
	font-size: 0.9em;
}

.tilematch {
  display: flex;
  justify-content: center;
  align-items: center;
  min-height: 100vh;
  height: auto;
  margin: 0;
  background-color: rgba(230,230,230,0.25); 
	  /*#f0f0f0; */
  flex-direction: column;
	text-align: center;
	margin-bottom: 100px;
	padding-bottom: 50px;
}

.tilematchtext {
	width: 80%;
	margin: 0 auto;
	padding-bottom: 40px;
}

.game-board {
  display: grid;
  grid-template-columns: repeat(4, 150px);
  gap: 10px;
}

.tile {
  position: relative;
  width: 150px;
  height: 150px;
  cursor: pointer;
  perspective: 1000px;
}

.winspinl {
	animation: spinnyl 5s linear;
}

.winspinr {
	animation: spinnyr 5s linear;
}

@keyframes spinnyl {
	from {
		transform: rotate(0deg);
	} to {
		transform: rotate(-720deg)
	}
}

@keyframes spinnyr {
	from {
		transform: rotate(0deg);
	} to {
		transform: rotate(720deg)
	}
}

.tile-inner {
  position: absolute;
  width: 100%;
  height: 100%;
  transform-style: preserve-3d;
  transition: transform 0.5s;
}

.tile.flipped .tile-inner {
  transform: rotateY(180deg);
}

.tile-front, .tile-back {
  position: absolute;
  width: 100%;
  height: 100%;
  backface-visibility: hidden;
  border-radius: 5px;
}

.tile-front {
  background-color: #333;
}

.tile-back {
  background-color: rgba(230,230,230,0.25);
	  /*#fff;*/
  transform: rotateY(180deg);
}

.tile-back img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: 5px;
  transition: transform 0.5s ease-in-out;
}

.tilewin:hover {
	animation: getbig 6s ease-in-out infinite alternate;
}


@keyframes getbig {
	from {
		transform: scale(1);
	} to {
		transform: scale(1.3);
	}
}

#playAgain {
  margin: 20px auto;
  padding: 10px 20px;
  font-size: 16px;
  cursor: pointer;
}

/* .slot-machine {
  display: flex;
  gap: 10px;
  margin-bottom: 20px;
}

.slot {
  width: 100px;
  height: 100px;
  border: 2px solid #333;
  display: flex;
  justify-content: center;
  align-items: center;
  background-color: #fff;
}

#result {
  margin-top: 20px;
  font-size: 18px;
  font-weight: bold;
} */

.tile-fun {
    margin: 0;
    overflow: hidden;
    display: flex;
    justify-content: center;
    align-items: center;
    background-color: #222;
    min-height: 120vh;
	height: auto;
}

#tile-container {
    position: absolute;
    top: 0;
    left: 0;
    width: 100vw;
    height: 120vh;
    overflow: hidden;
}

.tilez {
    position: absolute;
    width: 200px;
    height: 200px;
    background-size: cover;
    border-radius: 10px;
    animation: flyAround 8s linear infinite alternate, rotateTile 9s linear infinite alternate;
	transition: all 3s ease-in-out;
}

.tilez2 {
    position: absolute;
    width: 200px;
    height: 200px;
    background-size: cover;
    border-radius: 10px;
    animation: rotateTile 10s linear infinite alternate;
	transition: all 3s ease-in-out;
}

.tilez3 {
    position: absolute;
    width: 200px;
    height: 200px;
    background-size: cover;
    border-radius: 10px;
    animation: rotateTile2 11s linear infinite alternate, flyAround 9s linear infinite alternate;
	transition: all 3s ease-in-out;
}

.tilez:hover, .tilez2:hover {
	transform: scale(3);
	opacity: 0.5;
}

.tilez3:hover {
	opacity: 0.1;
}

@keyframes flyAround {
    0% {
        transform: scale(1);
    }
    25% {
        transform: scale(1.2);
    }
    50% {
        transform: scale(0.8) rotate(360deg);
		opacity: 0.8;
		filter: hue-rotate(360deg);
    }
    75% {
        transform: scale(1.1);
    }
    100% {
        transform: scale(1.4);
    }
}

@keyframes rotateTile {
    0% {
        transform: rotate(0deg);
    }
	50% {	
		transform: rotate(360deg);
	}
	100% {
		transform: rotate(0deg);
	}
}

@keyframes rotateTile2 {
    0% {
        transform: cale(1);
	}
	50% {
		transform: rotate(-360deg); 
	}
    100% {
        transform: scale(1);
		
    }
}

.messtile {
	position: absolute;
	animation: tilemess 1s ease-in-out infinite alternate;
	border: 5px red solid !important;
	width: 300px;
	z-index: 9999;
}

@keyframes tilemess {
	0% {
		transform: translate(100px, 100px) ;
	}
	50% {
		transform: translate(200px, 200px,);
		
	}
	100% {
		transform: translate(-100px, -100px);
	}
}

@media screen and (max-width: 780px) {
	.page-container {
		width: 100%;
		margin: 0 auto;
		position: relative;
		padding: 10px;
		border-radius: 30px;
		margin-bottom: 20px;
	}

	.post-content .entry-meta,
	.site-content .entry-meta {
		max-width: 80%;
	}
	
	.alanbutton {
        padding: 10px 10px;    
        font-size: 16px;
        margin: 0 auto;
	}

	.infopagelink {
		width: 200px;
	}

	.infolinks {
		padding: 5px;
	}
	
	.quoth {
		font-size: 0.8em;
	}
	
	.tilematch {
  		display: flex;
  		justify-content: center;
  		align-items: center;
  		height: auto;
  		margin: 0;
  		background-color: #f0f0f0;
  		flex-direction: column;
		text-align: center;
		margin-bottom: 100px;
		padding-bottom: 50px;
	}

	.game-board {
  		display: grid;
  		grid-template-columns: repeat(4, 50px);
  		gap: 5px;
	}

	.tile {
  		position: relative;
  		width: 50px;
  		height: 50px;
  		cursor: pointer;
  		perspective: 333px;
	}
	
}

@media screen and (max-width: 1200px) {
	.linkbox {
		flex-direction: column-reverse;
	}
	
	.linkbtn {
		text-align: center;
	}
	
	.linktxt {
		text-align: center;
	}
}

.nodims {
	border-bottom: 1px dotted red;
}

.numthumb {
	font-size: 0.8em;
	text-align: center;
}

.video-container {
    display: flex;
    flex-wrap: wrap; /* Allows items to wrap to the next line */
    gap: 32px; /* Adds space between items */
    justify-content: center; /* Centers items horizontally */
}

.video {
    flex: 1 1 calc(40% - 32px); /* Makes each video take up 1/3 of the container width minus gap */
    max-width: calc(40% - 32px); /* Ensures videos don't exceed their allocated width */
    box-sizing: border-box; /* Includes padding and border in width calculations */
}

.video iframe {
    width: 100%; /* Makes the iframe responsive */
    height: 200px; /* Adjust height as needed */
}

@media (max-width: 768px) {
    .video {
        flex: 1 1 100%; /* One video per row */
        max-width: 80%;
    }
}

.alangang {
	width: auto;
	height: auto;
	/* border: 2px solid #000; */
	margin: 0 auto;
	margin-bottom: 50px;
}

.alangang img {
	border: 2px dotted #000;
}

.wp-element-caption {
	background: rgba(230, 230, 230, 0.5) !important;
	color: #000 !important;
	padding: 10px;
}