@import url('https://fonts.googleapis.com/css2?family=Sigmar:wght@400&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Caveat:wght@400&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Lato:wght@300;400;700&display=swap');

body {
	font-family: Lato, sans-serif;
	font-size: 15px;
	margin-top: 0;
	background-color: #E3E6EE; /* Soft blue-gray */
	background-image: radial-gradient(circle, rgba(90, 117, 189, 0.15) 10%, transparent 10%), 
    linear-gradient(to bottom, #D8D4EE, #E3E6EE);
	background-size: 30px 30px, 100% 100%; /* Dots first, then full gradient */
	color: #666666;
	}

/* MENU (STICKY) */

/* Menu Wrapper */
.sticky-menu {
	position: sticky;
	top: 0;
	background-color: #C9B9A6;
	box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);
	width: 100%;  /* Ensure the sticky container spans the full width */
	z-index: 1000; /* Make sure it's on top of everything else */
	}

/* Menu Container */
.navbar {
	margin-top: 0;
    background-color: #C9B9A6; /* Background color */
    display: flex;
    justify-content: center;
    padding: 0px;
}

/* Unordered List Styling */
.navbar ul {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    gap: 20px; /* Space between links */
}

/* List Items */
.navbar li {
    display: inline;
}

/* Menu Links */
.navbar a {
    font-family: Lato, sans-serif;
    color: #7077BA; /* Link color */
    text-decoration: none;
    font-size: 15px;
    font-weight: bold;
    padding: 10px 15px;
    transition: all 0.3s ease;
    display: block;
}

/* Hover Effect */
.navbar a:hover {
    background-color: #7077BA; /* Reverse colors */
    color: #C9B9A6;
    border-radius: 5px; /* Optional: adds rounded corners on hover */
}

#petz-warehouse-title {
	font-family: 'Sigmar', serif;
	font-size: 50px;
	color: #7077BA; /* Slightly purple-tinged blue */
	text-shadow: 2px 2px 2px rgba(169, 169, 169, 0.6);
	text-align: center;
	margin-top: 20px;
	transform: scaleY(1.6) skewX(-5deg);
	letter-spacing: 2px;
	-webkit-text-stroke: 1px #C9B9A6; /* Muted mustard yellow */
	margin-bottom: 0px;
	}
	
.site-container {
	background-color: #D8D4EE;
	border: 2px solid #9398C3; /* Soft gray-beige border */
	max-width: 751px;
	margin: 0 auto;
	min-height: 768px;
	padding: 0 20px;
	}

.welcome-title {
	display: inline-flex; /* Use inline-flex for horizontal layout */
	align-items: center; /* Vertically center the items (icon and text) */
	font-size: 18px;
	font-family: Lato, sans-serif;
	color: #666666;
	padding: 10px;
	border-bottom: 2px solid #7077BA; /* Border color */
	max-width: 350px;
	margin-bottom: 10px;
	}

.welcome-title i {
	margin-right: 10px; /* Space between the icon and the text */
	font-size: 18px; /* Adjust icon size */
	}	

.signature {
	font-family: 'Caveat', sans-serif;
	font-size: 65px;
	color: #7077BA; /* Slightly purple-tinged blue */
	margin-left: 30px;
	margin-top: -50px;
	}

.webring {
	display: flex;
	justify-content: space-between; /* Distribute items evenly with space between */
	align-items: center; /* Vertically center the content */
	gap: 20px;
	margin: 20px auto;
	width: 300px; /* Ensure it uses the full width available */
	margin-top: -50px;
	}

.webring-nav, .webring-center {
	flex: 1; /* Ensure both sides take up available space evenly */
	text-align: center;
	}

.webring-center {
	display: flex;
	flex-direction: column;
	align-items: center;
	min-width: 75px; /* Prevent shrinking too much */
	}

.webring-nav a {
	font-family: 'Lato', sans-serif;
	font-weight: bold;
	font-size: 1.1em;
	text-decoration: none;
	color: #7077BA;
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 10px;
	}

.webring-center img {
	max-width: 300px; /* Adjust the image size */
	display: block;
	}

.webring-random {
	font-family: 'Lato', serif;
	font-weight: bold;
	font-size: 1.1em;
	text-decoration: none;
	color: #7077BA;
	margin-top: 5px;
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 10px;
	white-space: nowrap;
	}

.content-container {
	width: 95%;
	margin: 0 auto;
	margin-top: 30px;
	}

.content {
	margin-bottom: 10px;
	}

.content-title {
	font-family: Lato, sans-serif;
	font-size:18px;
	font-weight: bold;
	width: 100%;
	padding: 10px;
	background-color: #7077BA;
	color: #C9B9A6;
	text-align: left;
	border: none;
	cursor: pointer;
	border:1px solid #000000;
	margin: 0px 0px 0px 0px;
	padding:5px;
	text-align:left;
	}

.content-items {
	display: none; /* Hide by default */
	padding: 10px;
	background-color: #E1DDED;
	color: #666666;
	margin-top: 0px;
	text-align: center; /* Center any text */
	margin: 0 auto;
	max-width: 90%;
	border-left: 1px solid #7077BA; /* Soft gray-beige border */
	border-right: 1px solid #7077BA; /* Soft gray-beige border */
	border-bottom: 1px solid #7077BA; /* Soft gray-beige border */
	}
	
.content-items.visible {
	display: block; /* Only show when visible */
	max-width: 90%; /* Ensure content doesn't overflow */
	}

.items {
	display: grid;
	grid-template-columns: repeat(3, 1fr); /* 3 columns layout */
	gap: 0px; /* Space between items */
	justify-items: center; /* Center grid items horizontally */
	max-width: 450px;
	margin: 0 auto;
	margin-top: 10px;
	}

/* For individual item styling */
.item {
	text-align: center;
	margin-bottom: 20px;
	font-family: Lato, serif;
	font-size: 15px;
	font-color: #000000;
	}

.item img {
	width: 138px; /* Image width */
	height: 114px; /* Image height */
	margin-bottom: 0px; /* Space between image and text */
	}

.item p {
	margin: 0;
	padding: 0;
	line-height: 1.2;
	}

	
/* Link styling */
.item a {
	margin: 2px;
	text-decoration: none;
	color: #7077BA;
	font-weight: bold;
	}

.item a:hover {
	text-decoration: underline;
	}

.center {
	text-align: center;
	}
	
a {
	color: #7077BA;
	}
	
.privacy-container {
	width: 95%;
	margin: 0 auto;
	margin-top: 30px;
	}	
	
.privacy-title {
	font-family: Lato, sans-serif;
	font-size:18px;
	font-weight: bold;
	width: 100%;
	padding: 10px;
	background-color: #7077BA;
	color: #C9B9A6;
	text-align: left;
	border: none;
	cursor: pointer;
	border:1px solid #000000;
	margin: 0px 0px 0px 0px;
	padding:5px;
	text-align:left;
	}


	/* Privacy Policy Item */
.privacy-item {
    display: none;  /* Hide by default */
}

.privacy-item.visible {
    display: block;  /* Show when visible */
	padding: 10px;
	background-color: #E1DDED;
	color: #666666;
	margin-top: 0;
	margin: 0 auto;
	max-width: 90%;
	border-left: 1px solid #7077BA; /* Soft gray-beige border */
	border-right: 1px solid #7077BA; /* Soft gray-beige border */
	border-bottom: 1px solid #7077BA; /* Soft gray-beige border */
	}	

/* RESPONSIVE FIXES */

@media (max-width: 768px) {
    #petz-warehouse-title {
        font-size: 40x !important; /* Scale down for tablets */
        transform: scaleY(1.3) skewX(-3deg); /* Reduce distortion on smaller screens */
        letter-spacing: 1px;
    }
}

@media (max-width: 480px) {
    #petz-warehouse-title {
        font-size: 36px !important; /* Even smaller for phones */
        transform: none !important; /* Remove skew for better readability */
        text-align: center;
    }
}

@media (max-width: 768px) {
    .navbar {
        flex-direction: column !important; /* Stack items */
        align-items: center !important;
        padding: 10px 0;
    }

    .navbar ul {
        flex-direction: column !important;
        gap: 10px; /* Reduce spacing */
    }

    .navbar a {
        font-size: 14px !important; /* Reduce font size slightly */
        padding: 8px 12px !important; /* Adjust padding */
        text-align: center !important;
    }
}

@media (max-width: 768px) {
    .webring {
        display: flex !important;
        flex-wrap: nowrap !important; /* Prevent stacking */
        justify-content: space-evenly !important; /* Even spacing */
        align-items: center !important;
        width: 100% !important;
    }

    .webring-center {
        min-width: 50px; /* Adjust as needed */
        text-align: center;
    }

    .webring-nav a {
        font-size: 14px !important; /* Reduce size slightly if needed */
        white-space: nowrap; /* Prevent text wrapping */
    }
}


@media (max-width: 768px) {
    .items {
        grid-template-columns: repeat(2, 1fr) !important; /* Switch to 2-column grid */
        max-width: 100% !important;
    }
}

@media (max-width: 480px) {
    .items {
        grid-template-columns: repeat(1, 1fr) !important; /* Stack items in 1 column */
        max-width: 90% !important;
    }
}