* {
box-sizing: border-box;
margin: 0;
padding: 0;
}
html, body {
height: 100%;
scroll-behavior: smooth;
background: #0a0a0a url('https://res.cloudinary.com/dgkt7x7go/image/upload/v1749661092/Illustration44_jbeo9s.jpg') no-repeat center center fixed;
background-size: cover;
font-family: 'Orbitron', sans-serif;
color: #e0e0e0;
overflow-x: hidden;
}
.container, section {
background: rgba(0, 0, 0, 0.7);
backdrop-filter: blur(6px);
padding: 3rem 2rem;
border-radius: 16px;
max-width: 1000px;
margin: 5rem auto;
box-shadow: 0 0 20px rgba(255, 102, 0, 0.1);
transition: transform 0.3s ease, box-shadow 0.3s ease;
}
.container:hover, section:hover {
box-shadow: 0 0 25px rgba(255, 102, 0, 0.6);
}
.pfp {
width: 96px;
height: 96px;
border-radius: 50%;
background: url('https://res.cloudinary.com/dgkt7x7go/image/upload/v1750165867/pfp_pz6zk6.png') no-repeat center center;
background-size: cover;
margin-bottom: 2rem;
}
h1, h2 {
font-family: 'Unica One', sans-serif;
color: #ff6600;
text-shadow: 0 0 6px #ff6600;
letter-spacing: 0.2rem;
}
h1 {
font-size: 2.5rem;
margin-bottom: 0.5rem;
}
h2 {
font-size: 2rem;
margin-bottom: 1.5rem;
}
.subtitle {
font-size: 1rem;
color: #aaa;
margin-bottom: 2rem;
letter-spacing: 0.25rem;
}
.nav-buttons {
display: flex;
flex-wrap: wrap;
gap: 1rem;
margin-bottom: 3rem;
}
.nav-buttons a {
color: #ff6600;
text-decoration: none;
padding: 0.75rem 1.5rem;
border: 2px solid #ff6600;
border-radius: 999px;
font-size: 1rem;
font-weight: bold;
text-align: center;
transition: all 0.3s ease;
letter-spacing: 0.2rem;
box-shadow: 0 0 4px #ff660033;
}
.nav-buttons a:hover {
background-color: #ff6600;
color: #000;
box-shadow: 0 0 15px #ff6600aa;
}
.contact {
font-size: 0.9rem;
color: #aaa;
letter-spacing: 0.15rem;
margin-top: auto;
}
.contact a {
color: #ff6600;
text-decoration: underline;
}
.gallery-grid {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
gap: 14px;
max-width: 1200px;
margin: 0 auto;
padding: 1rem;
box-sizing: border-box;
}
.gallery-grid img {
width: 100%;
max-height: 300px; /* LIMIT THIS */
object-fit: cover;
border-radius: 8px;
transition: transform 0.3s ease, filter 0.3s ease;
cursor: pointer;
}
#gallery iframe:hover {
box-shadow: 0 0 25px rgba(255, 102, 0, 0.6);
}
#gallery h2 {
color: #FF6600; /* Or whatever neon orange chaos you got going on */
font-size: 2.5rem;
margin-bottom: 2rem;
letter-spacing: 2px;
text-transform: uppercase;
}
.price-list {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
gap: 1.5rem;
margin: 1rem 0;
justify-content: center;
}
.price-item {
background: rgba(255, 255, 255, 0.05);
border: 1px solid #ff660033;
padding: 1.5rem;
border-radius: 12px;
text-align: center;
color: #fff;
cursor: pointer;
transition: all 0.3s ease;
backdrop-filter: none;
filter: none;
}
.price-item:hover,
.price-item.selected {
background: rgba(255, 102, 0, 0.4);
border-color: #ff6600;
box-shadow: 0 0 15px rgba(255, 102, 0, 0.5);
}
.price-item h3 {
margin-bottom: 0.5rem;
font-size: 1.25rem;
color: #ff6600;
}
.price-item p {
font-size: 0.95rem;
color: #ccc;
}
.commission-form {
display: flex;
flex-direction: column;
gap: 1rem;
margin-top: 2rem;
}
.commission-form input,
.commission-form select,
.commission-form textarea {
background: rgba(255, 255, 255, 0.05);
border: 1px solid #ff660044;
color: #fff;
padding: 0.75rem 1rem;
border-radius: 8px;
font-size: 0.9rem;
font-family: 'Orbitron', sans-serif;
letter-spacing: 0.1rem;
}
.commission-form textarea {
min-height: 100px;
resize: vertical;
}
.commission-form button {
background: #ff6600;
border: none;
color: #000;
font-weight: bold;
padding: 0.75rem 1.5rem;
border-radius: 999px;
letter-spacing: 0.15rem;
cursor: pointer;
box-shadow: 0 0 10px #ff6600aa;
transition: all 0.3s ease;
}
.commission-form button:hover {
background: #fff;
color: #ff6600;
box-shadow: 0 0 20px #ff6600cc;
}
.commission-form select[multiple] {
height: auto;
min-height: 120px;
background: rgba(255, 255, 255, 0.05);
color: #fff;
border: 1px solid #ff660044;
padding: 0.75rem;
border-radius: 8px;
font-family: 'Orbitron', sans-serif;
font-size: 0.9rem;
}
.size-options {
display: flex;
flex-direction: column;
gap: 0.5rem;
margin-top: 0.75rem;
background: rgba(255, 255, 255, 0.03);
border-radius: 8px;
padding: 0.5rem 1rem;
font-size: 0.8rem;
border: 1px solid #ff660022;
border-left: 2px solid #ccc;
transition: all 0.3s ease;
}
.size-options label {
color: #ccc;
font-family: 'Orbitron', sans-serif;
cursor: pointer;
display: flex;
align-items: center;
gap: 0.5rem;
}
/* Highlight selected stuff */
.price-item.selected,
.size-item.selected {
background: #ff770011;
border: 1px solid #ff7700cc;
box-shadow: 0 0 10px #ff770055;
color: #fff;
}
.size-options input[type="radio"] {
accent-color: #ff6600;
cursor: pointer;
}
.size-options.hidden {
display: none;
}
.size-item {
background: #000000;
padding: 0.5rem;
border-radius: 6px;
cursor: pointer;
transition: all 0.2s ease;
}
.size-item:hover {
background: #000000;
}
.size-item.selected {
background: #000000;
font-weight: bold;
}
/* Make all selected buttons glow like they're about to combust */
.price-item.selected,
.size-item.selected {
background: rgba(255, 102, 0, 0.08);
border: 1px solid #ff6600cc;
box-shadow:
0 0 6px #ff6600cc,
0 0 12px #ff660088,
0 0 20px #ff660044;
color: #fff;
transition: all 0.3s ease;
}
/* Optional: bump text weight for extra punch */
.price-item.selected h3,
.price-item.selected p,
.size-item.selected {
font-weight: 700;
color: #fff;
}
.selected {
background: rgba(255, 102, 0, 0.2);
border: 1px solid #ff6600;
box-shadow: 0 0 8px #ff6600aa;
}
@keyframes desyncFlicker {
0% { opacity: 0.1; }
3% { opacity: 1; }
7% { opacity: 0.3; }
11% { opacity: 0.9; }
17% { opacity: 0.2; }
24% { opacity: 1; }
36% { opacity: 0.6; }
48% { opacity: 0.8; }
55% { opacity: 0.1; }
62% { opacity: 1; }
75% { opacity: 0.4; }
90% { opacity: 0.95; }
100% { opacity: 1; }
}