/* 
// * ====================================================================
// * stylesheet for Lantabell Arts Website												
// * This work is protected by copyright laws and international treaties.
// * Copyright (c) 2025
// * All Rights Reserved.
// * ====================================================================
*/

/* page defaults */

body {	
	background-color:#64A0A0;
	margin-right: 10%;
	margin-left: 10%;
    font-family: "Arapey", serif;
	font-size:16pt;	
  text-align:center;
}
h1 {
    font-family: "Arapey", serif;
}
em{
	text-decoration:none;
	font-style:normal;
	color:#202020;
} 
.container {	
  background-color:#ffffff;
  width: 100%;
  box-sizing: border-box; /* Include padding and border in width */
  position: relative;
  margin-bottom:200px;
  text-align:center;
}
.section-title-top {
	box-sizing: border-box;
	text-align:center;
	margin-top:50px;
}
.section-title-top h1 {
    font-family: "Arapey", serif;
	color:#000000;
	font-size:36pt;
	font-weight:200px;
}
.section-title {
	box-sizing: border-box;
	text-align:center;
	margin-top:50px;
}
.section-title h1 {
    font-family: "Arapey", serif;
	color:#ffffff;
	font-size:32pt;
	text-shadow: 2px 2px 4px #333;
}
.spacer{
	width:100%;
	height:45px;
}

/* floating contact bar */

.floating-socials { 
	position:absolute; 
	top:0;
	right:0;
	width:155px;
	height:50px;
	padding:0;
	z-index:5;
}
.floating-socials img{ 
	display:inline-block;
	width:50px;
	height:50px;
	margin:0;
	float:left;
}

/* top header bar */

.header-bar {
	background-color:#ffffff;
	position: relative; /* Needed for absolute positioning of the images */
	justify-content: center; /* Center horizontally */
	align-items: center; /* Center vertically */
	width: 100%;
	height:300px;
}
.header-bar img {
	position: absolute; /* Allows images to overlap */
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%); /* Center both horizontally and vertically */
}
.header-bar img.logo-image {
	width:20%;
	height:auto;
	z-index: 1; 
	}
.header-bar img.title-image {
	width:40%;
	height:auto;
	z-index: 10;
	}
@media (max-width: 700px) { /* for phones */
	.header-bar img.logo-image {
		width:45%;
		height:auto;
		z-index: 1; 
	}
	.header-bar img.title-image {
		width:90%;
		height:auto;
		z-index: 10;
	}
}

/* navigation bar */

.navbar {
    display: flex;
    width: 100%;
    background-color: #A0C8C8;
    position: sticky;
    top: 0;
    justify-content: center; /* Center horizontally */
    align-items: center; /* Center vertically */
    z-index: 100;
    clear: all;
}
.navbar ul {
    list-style-type: none;
    margin: 0;
    padding: 0;
    overflow: hidden;
    background-color: #A0C8C8;
    display: flex; /* Default: horizontal menu */
}
.navbar li {
    float: left; /* Only applies on larger screens */
}
.navbar li a {
    display: block;
    font-family: "Arapey", serif;
    font-size: 16pt;
    font-style: normal;
    color: #ffffff;
    text-align: center;
    padding: 10px 10px;
    text-decoration: none;
}
.navbar li a:hover {
    color: #0000ff;
}
.navbar li a:active {
    color: #00ffff;
}
/* Styles for smaller screens (hamburger menu) */
.navbar .icon {
    display: none; /* Hide the icon by default */
    cursor: pointer;
}
.navbar .icon img {
	display: block;
	width: 50px;
	height: 50px;
	border-radius:0px 0px 15px 15px;
}
@media screen and (max-width: 700px) { /* Adjust breakpoint as needed */
    .navbar ul {
        flex-direction: column; /* Stack menu items vertically */
        display: none;  /* Hide the menu by default */
    }
    .navbar li {
        float: none; /* Prevent items from floating */
        text-align: center; /* Center text in menu items */
    }
    .navbar a {
        padding: 10px 15px; /* Adjust padding for smaller screens */
         font-size: 16pt; /* Slightly smaller font */
    }
    .navbar .icon {
        display: block; /* Show the icon */
        position: absolute; /* Position the icon */
        left:5px; /* Align to the left */
        top: 0px;
    }
    .navbar ul.responsive {
        display: flex; /* Show the menu when the icon is clicked */
    }
}
.prize-draw-link {
	color:#FFEA00;
}

/* Intro Pics */

.intro-pics {
	padding:0px;
	box-sizing: border-box;
	text-align:center;
	margin-top:10px;
}
	
.intro-pics img{
	cursor:pointer;
	padding: 5px;
}

/* About me section */

.about-text {
	box-sizing: border-box;
	font-family: "Arapey",verdana,arial,serif;
	width:100%;
	height:auto;
	text-align:center;
    overflow: auto;
	padding:20px;
}
.about-text img{
	box-sizing: border-box;
	float:left;
	margin:20px;
}
.about-text p {
	text-align:justify;
}
/* commission me section */

.commission-text {
	box-sizing: border-box;
	font-family: "Arapey",verdana,arial,serif;
	width:100%;
	height:auto;
	text-align:center;
    overflow: auto;
	padding:20px;
}
.commission-text img{
	box-sizing: border-box;
	float:right;
	margin:20px;
}
.commission-text p {
	text-align:justify;
}

/* my materials section */

.materials-text {
	box-sizing: border-box;
	font-family: "Arapey",verdana,arial,serif;
	width:100%;
	height:auto;
	text-align:center;
    overflow: auto;
	padding:20px;
}
.materials-text img{
	box-sizing: border-box;
	display:block;
	float:left;
	margin:20px;
}
.materials-text p {
	text-align:justify;
}
@media (max-width: 700px) {
	.about-text img, .commission-text img, .materials-text img{
		width:90%;
		height:auto;
	}
}
.blue {
	color:#0000ff;
}

/* Image Gallery div*/

.gallery {
	box-sizing: border-box;
	font-family: "Arapey",verdana,arial,serif;
	width:100%;
	height:auto;
	text-align:center;
}
/* Image slider for gallery */

.image-slider {
    clear: both;
    width: 95%; /* Use percentage for responsiveness */
    max-width: 840px; /* Set a max-width if needed */
    overflow: hidden;
    position: relative;
    background-color: #333;
    margin: 20px auto; /* Center the slider */
}
.image-track {
    display: flex;
    transition: transform 0.5s ease-in-out;
}
.image-track img {
    width: 200px; /* Adjust as needed */
    height: auto;
    margin: 10px 5px;
    cursor: pointer;
	border-radius:10px;
    flex-shrink: 0; /* Prevent images from shrinking */
}

/* Buttons for image slider */

.slide-left, .slide-right {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    padding: 10px;
    background-color: rgba(0, 0, 0, 0.5);
    color: white;
    border: none;
    cursor: pointer;
    z-index: 1;
}
.slide-left {
    left: 5px; /* Add some margin */
}
.slide-right {
    right: 5px; /* Add some margin */
}

/* Gallery overlay */

.overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.8);
    display: flex;
    justify-content: center;
    align-items: center;
    z-index: 1000;
}
.overlay img {
    max-width: 90%;
    max-height: 90%;
}
.overlay .close-button {
    position: absolute;
    top: 20px;
    right: 20px;
    color: white;
    font-size: 2em;
    cursor: pointer;
}
/* Media query for smaller screens */
@media (max-width: 700px) { /* Adjust breakpoint as needed */
    .image-track img {
        width: 120px; /* Smaller images on small screens */
		height:auto;
    }
    .slide-left, .slide-right {
        font-size: 14px;  /* Smaller buttons */
        padding: 8px;
    }
}

/* contact bar */

.contact-text-box {
	margin:0;
	font-family: "Arapey", arial, serif;
	font-size:18pt;
	color: #000000;
	text-align: center;
	background-color:#ffffff;
}

.kifweb {
	margin:0;
	font-family: verfana, arial, serif;
	font-size:10pt;	
	font-weight:600;
	color: #000000;
	text-align: center;
}
.kifweb a:link{
	color: #0000ff;
	font-style:normal;
	text-decoration:none;	
    cursor:pointer;		
}
.kifweb a:visited{
	color: #0000ff;		
}
.kifweb a:hover{
	color: #0000ff;
	font-style:bold;	
}
.kifweb a:active{
	color: #ff0000;		
}

/* prize-draw */

.prize-draw-holder {
    box-sizing: border-box;
    display: flex; /* Change to flexbox */
    flex-direction: column; /* Stack elements vertically */
    align-items: center; /* Center horizontally */
    text-align: center;
}
			
        .grid-container {
            display: grid;
            grid-template-columns: repeat(10, 1fr);
            grid-template-rows: repeat(10, 1fr);
            gap: 0px;
            border: 1px solid #ccc;
            padding: 5px;
            width: 360px;
            height: 360px;
			background-color:#64A0A0;
			
        }

        .grid-item {
            display: flex;
            justify-content: center;
            align-items: center;
            width: 100%;
            height: 100%;
            border: 1px solid #ccc;
            cursor: pointer;
            user-select: none;
			background-color:#fff;
        }

        .grid-item.selected {
            background-color: #60A0A0;
            color: #fff;
            cursor: pointer; /* Allow deselection */
        }

        #selectedNumbers, #email {
            width: 300px;
            padding: 5px;
            margin-top: 10px;
        }
		
		input[type=submit] {
			background-color:#60A0A0;
			color:#fff;
			font-size:1.1em;
			border:0px;
			padding:5px;
			border-radius:5px;
			cursor:pointer;
		}
		
		
		.arrow {
			position: absolute;
			top: 50%;
			transform: translateY(-50%);
			font-size: 2em;
			color: white;
			cursor: pointer;
			user-select: none;
		}


 #winner-spinner {
	 visibility:hidden;
	 }
 #countdown{
	 color:red;
	 }

/* img overlay nav buttons */

		.prev-arrow {
			left: 10px;
		}

		.next-arrow {
			right: 10px;
		}

		.overlay img{
			max-height: 90vh;
			max-width: 90vw;
		}	

.imgDiv {
	width:100%;
	margin:5px:
}