@import url('https://fonts.googleapis.com/css2?family=Orbitron:wght@400;500&family=Inconsolata:wght@500;700&display=swap');
:root {
--text-color: #FFFFFF; /* White */
--shadow-color: #fcb316; /* New orange color for shadows */
--hover-shadow-color: #FF0000; /* Red (unused now) */
--black-fill: #000000;
}
/* Scrollbar Styling for Webkit browsers (Chrome, Safari, Edge) */
::-webkit-scrollbar {
width: 10px;
}
::-webkit-scrollbar-track {
background: #2a2a2a;
border-radius: 5px;
}
::-webkit-scrollbar-thumb {
background: var(--shadow-color);
border-radius: 5px;
}
::-webkit-scrollbar-thumb:hover {
background: #A0522D;
}
/* General & Background Styling for ALL Pages */
html, body {
height: 100%;
margin: 0;
font-family: 'Inconsolata', sans-serif;
background-image: url('background.jpg');
background-attachment: fixed;
background-repeat: repeat;
background-size: auto;
background-color: #0d0d0d;
color: var(--text-color);
overflow-x: hidden;
box-sizing: border-box;
}
body {
display: flex;
flex-direction: column;
}
/* --- HOME PAGE SPECIFIC STYLES ---
These styles are only applied when the tag has the class "home"
*/
body.home {
background-image: url('main-big.jpg');
background-size: cover; /* Use cover to ensure the image fills the screen */
background-position: center top;
background-repeat: no-repeat;
background-attachment: fixed;
display: flex; /* Ensure the body remains a flex container */
flex-direction: column; /* Ensure content stacks vertically */
justify-content: flex-start; /* Align content to the top */
align-items: center; /* Center content horizontally */
}
/* The main wrapping container for the home page content */
.blue-box-home {
width: 90%;
max-width: 1400px; /* Increased max-width for a slightly bigger box */
background-color: rgba(13, 0, 76, 0.58);
background-image:url("background.jpg");
border: 1px solid transparent;
border-image: url('border.jpg') 1 round;
box-sizing: border-box;
display: flex;
justify-content: center;
align-items: flex-start; /* Align columns to the top */
margin-top: 50px; /* Moves the container lower */
transition: all 0.5s ease;
opacity: 0.95;
}
/* Container for the two-column layout */
.blue-box-columns {
display: flex;
flex-direction: row;
padding: 10px;
gap: 10px; /* Reduced the gap between columns */
width: 100%; /* Ensure it fills the parent */
}
/* Left and right columns within the blue box */
.home-left-column, .home-right-column {
display: flex;
flex-direction: column;
gap: 10px; /* Reduced the gap between the boxes in the columns */
}
.home-left-column {
flex: 3; /* Increased flex value for a higher width ratio */
}
.home-right-column {
flex: 2; /* Right column is 1x wide */
}
/* Individual boxes within the columns */
.name-box-home, .about-box-home, .live-av-box-home, .projects-box-home, .commissions-box-home {
padding: 20px;
box-sizing: border-box;
border: 1px solid transparent;
border-image: url('border.jpg') 1 round;
}
.social-box-home {
padding: 20px;
box-sizing: border-box;
border: 1px solid transparent;
border-image: url('border.jpg') 1 round;
background-color: rgba(137, 98, 98, 0.8);
display: flex;
flex-direction: column;
gap: 10px;
}
/* Make the About box fill the remaining height in the left column */
.about-box-home {
background-color: rgba(73, 75, 103, 0.85);
flex-grow: 1;
padding-top: 10px;
padding-bottom: 20px;
text-align: left; /* Aligns text to the left */
}
#preview-animation-button {
background-color: rgba(252, 179, 22, 0.8);
color: black;
border: none;
padding: 10px 20px;
cursor: pointer;
margin-top: 10px;
font-family: 'Inconsolata', monospace;
font-weight: 700;
text-shadow: 1px 1px 1px rgba(0,0,0,0.5);
transition: background-color 0.3s ease;
}
#preview-animation-button:hover {
background-color: rgba(252, 179, 22, 1);
}
/* Specific background and opacity for each box */
.name-box-home {
background-color: rgba(82, 0, 0, 0.73);
text-align: left; /* Aligns text to the left */
}
.live-av-box-home {
background-color: rgba(96, 57, 19, 0.85);
}
.projects-box-home {
background-color: rgba(115, 98, 74, 0.86);
}
.commissions-box-home {
background-color: rgba(135, 89, 10, 0.8);
}
/* Styling for the h1 in the name box to prevent breaking */
.name-box-home h1 {
font-family: 'Orbitron', sans-serif;
font-weight: 400; /* Set font weight to 400 */
color: var(--text-color);
text-shadow: 2px 2px 2px var(--shadow-color);
font-size: clamp(2em, 2.5vw, 3em);
margin: 0;
white-space: nowrap; /* Prevent text from wrapping */
overflow: hidden;
text-overflow: ellipsis; /* Add ellipsis if text overflows */
}
/* H2 formatting for home page */
.live-av-box-home h2, .projects-box-home h2, .commissions-box-home h2 {
font-family: 'Orbitron', sans-serif;
font-weight: 400; /* Set font weight to 400 */
color: var(--text-color);
text-shadow: 2px 2px 2px var(--shadow-color);
margin-top: 0;
font-size: clamp(1.2em, 1.8vw, 2em);
margin: 0 0 10px 0;
}
/* Styling for home page links to prevent breaking */
.home-nav-link {
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
text-decoration: none;
display: block;
color: var(--text-color);
text-shadow: 2px 2px 2px #331100;
margin-bottom: 1px;
line-height: 1em; /* Reduced vertical space between links */
transition: text-shadow 0.3s ease, color 0.3s ease;
font-size: clamp(1em, 1.3vw, 1.2em);
font-family: 'Inconsolata', monospace;
font-weight: 700;
}
/* Link hover effect */
.home-nav-link:hover {
color: var(--shadow-color);
text-shadow: 1px 1px 2px white;
}
.link-list {
list-style-type: none;
padding: 0;
margin: 0;
}
/* --- ANIMATION STYLES FOR PAGE TRANSITION --- */
body.home.page-transition-out .blue-box-home {
/* Moves the entire blue box and its contents out of the screen */
transform: translateY(-150vh);
transition: transform 0.6s ease-in-out;
}
/*
-------------------------------------------
--- INSIDE PAGE STYLES (NON-HOMEPAGE) ---
-------------------------------------------
*/
/* Line styles for
and tags */
.line-break {
border: none;
height: 1px;
background: url('border.jpg') 0 0 repeat-x;
}
.inner-line {
margin: 0 -20px 0;
}
.middle-line {
width: 75%;
margin: 20px 0;
}
.wide-line {
width: 95%;
}
.left-box .inner-line, .mobile-menu .inner-line {
margin-bottom: 10px;
}
/* 1. Top Header Bar */
.top-header-box {
width: 100%;
padding-top: 20px;
padding-bottom: 20px;
z-index: 100;
background-color: rgba(0, 0, 0, 0.8);
border: 1px solid transparent;
border-image: url('border.jpg') 1 round;
display: flex;
align-items: center;
position: sticky;
top: 0;
opacity: 0;
animation: slideInAndFade 0.6s ease-out forwards;
}
/* Desktop Header Title */
.main-title {
font-family: 'Orbitron', sans-serif;
font-weight: 400;
color: var(--text-color);
text-shadow: 2px 2px 2px var(--shadow-color);
font-size: clamp(2em, 2.5vw, 3em);
margin: 0 0 0 400px;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
/* Mobile Header Container */
.mobile-menu-container {
display: none;
flex-grow: 1;
align-items: center;
justify-content: space-between;
padding: 0 20px;
}
/* Mobile Header Title */
.main-title-mobile {
font-family: 'Orbitron', sans-serif;
font-weight: 400;
color: var(--text-color);
text-shadow: 2px 2px 2px var(--shadow-color);
font-size: clamp(1.5em, 1.5vw, 1.5em);
margin: 0;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
/* Mobile Menu Button */
.mobile-menu-toggle {
background: none;
border: none;
color: var(--text-color);
font-size: 2em;
cursor: pointer;
display: none;
text-shadow: 2px 2px 2px var(--shadow-color);
transition: text-shadow 0.3s ease, color 0.3s ease;
}
.mobile-menu-toggle:hover {
color: var(--shadow-color);
text-shadow: 1px 1px 2px white;
}
.main-layout {
display: flex;
flex-grow: 1;
padding-bottom: 20px;
}
/* 2. Left Sidebar */
.left-box {
background-color: rgba(0, 0, 0, 0.5);
border: 1px solid transparent;
border-image: url('border.jpg') 1 round;
padding: 20px;
box-sizing: border-box;
display: flex;
flex-direction: column;
z-index: 101;
opacity: 0;
animation: slideInAndFade 0.6s ease-out 0.2s forwards;
}
.left-box-inner {
display: flex;
flex-direction: column;
gap: 20px;
padding-bottom: 80px;
}
.section-box {
position: relative;
background-color: var(--black-fill);
padding: 20px;
border: 1px solid transparent;
border-image: url('border.jpg') 1 round;
}
.section-title {
font-family: 'Orbitron', sans-serif;
font-weight: 400;
color: var(--text-color);
text-shadow: 2px 2px 2px var(--shadow-color);
margin-top: 0;
font-size: clamp(1em, 1.5vw, 1.5em);
}
.link-list {
list-style-type: none;
padding: 0;
margin: 0;
}
.nav-link {
display: block;
text-decoration: none;
color: var(--text-color);
text-shadow: 2px 2px 2px var(--shadow-color);
margin-bottom: 5px;
line-height: 1.2em;
transition: text-shadow 0.3s ease, color 0.3s ease;
font-size: clamp(0.9em, 1.2vw, 1.1em);
}
.nav-link:hover {
color: var(--shadow-color);
text-shadow: 1px 1px 2px white;
}
.rounded-top-corners {
border-radius: 10px 10px 0 0;
}
.rounded-bottom-corners {
border-radius: 0 0 10px 10px;
}
/* 3. Middle Content Area */
.middle-content {
padding: 20px 0;
box-sizing: border-box;
position: relative;
z-index: 1;
max-width: 1500px;
margin: 20px auto;
text-align: center;
}
/* Text box in middle */
.middle-text-box {
position: relative;
box-sizing: border-box;
border: 1px solid transparent;
border-image: url('border.jpg') 1 round;
background-color: black;
color: white;
z-index: 101;
max-width: 70%;
margin: 20px auto 20px 5%;
padding: 10px 20px;
text-align: left;
}
.middle-text-box::before {
content: '';
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
background-color: black;
opacity: 0.6;
z-index: -1;
}
.responsive-image {
display: block;
max-width: 90%;
height: auto;
border: 1px solid transparent;
border-image: url('border.jpg') 1 round;
margin: 20px auto;
opacity: 0;
animation: fadeIn 1s ease-in-out forwards;
}
/* Responsive YouTube Video */
.responsive-video-wrapper {
position: relative;
width: 90%;
max-width: 1500px;
margin: 20px auto;
border: 1px solid transparent;
border-image: url('border.jpg') 1 round;
}
.responsive-video-wrapper::before {
content: "";
display: block;
padding-top: 56.25%; /* 16:9 aspect ratio */
}
.responsive-video {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
}
/* 4. Right Content Box */
.right-main-box {
border: 1px solid transparent;
border-image: url('border.jpg') 1 round;
z-index: 101;
box-sizing: border-box;
padding: 20px;
max-height: 90vh;
overflow-y: auto;
position: relative;
opacity: 0;
animation: slideInAndFade 0.6s ease-out 0.4s forwards;
}
.right-main-box::before {
content: '';
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
background-color: black;
opacity: 0.6;
z-index: -1;
}
.inner-right-box {
margin: 0;
background-color: transparent;
border: 1px solid transparent;
border-image: url('border.jpg') 1 round;
box-sizing: border-box;
padding: 20px;
position: relative;
}
.project-title-h3 {
background-color: black;
opacity: 1;
margin: -20px -20px 0 -20px;
padding: 10px 20px;
z-index: 2;
position: relative;
font-size: clamp(1.5em, 2vw, 2.2em);
font-family: 'Orbitron', sans-serif;
font-weight: 400;
color: var(--text-color);
text-shadow: 2px 2px 2px var(--shadow-color);
}
.gradient-box {
padding: 20px;
background: linear-gradient(to bottom, rgba(210, 180, 140, 0.6), rgba(139, 69, 19, 0.6));
color: white;
margin: 0 -20px -20px;
}
.gradient-box p {
margin: 0;
}
/* Mobile Menu Styles */
.mobile-menu {
position: fixed;
top: 80px;
left: 0;
width: 100%;
background-color: rgba(0, 0, 0, 0.9);
z-index: 99;
box-sizing: border-box;
display: none;
border: 1px solid transparent;
border-image: url('border.jpg') 1 round;
}
.mobile-menu.is-open {
display: block;
}
/* New animations */
@keyframes slideInAndFade {
from {
opacity: 0;
transform: translateY(-20px);
}
to {
opacity: 1;
transform: translateY(0);
}
}
@keyframes fadeIn {
from {
opacity: 0;
}
to {
opacity: 1;
}
}
/* RESPONSIVE DESIGN (MEDIA QUERIES) */
@media screen and (min-width: 1361px) {
/* Apply padding to the blue box on big screens */
.blue-box-home {
padding: 50px;
margin-top: 100px;
}
.left-box {
position: fixed;
top: 20px;
left: 20px;
width: 350px;
display: block !important;
}
.right-main-box {
position: fixed;
top: 20px;
right: 50px;
width: 30%;
display: block !important;
}
.main-layout {
padding-left: calc(350px + 40px);
padding-right: calc(30% + 50px);
}
.mobile-menu-toggle,
.mobile-menu-container,
.mobile-menu {
display: none !important;
}
.main-title {
display: block !important;
}
}
@media screen and (min-width: 1254px) and (max-width: 1360px) {
.left-box {
position: fixed;
top: 20px;
left: 1.5%;
width: 25%;
display: block !important;
}
.right-main-box {
position: fixed;
top: 20px;
right: 2%;
width: 30%;
display: block !important;
}
.main-layout {
padding-left: calc(25% + 3%);
padding-right: calc(30% + 2%);
}
.mobile-menu-toggle,
.mobile-menu-container,
.mobile-menu {
display: none !important;
}
.main-title {
display: block !important;
}
}
@media screen and (max-width: 1253px) {
/* Hide the transparent background on mobile */
.right-main-box::before {
display: none;
}
/* Hide the desktop title */
.main-title {
display: none;
}
/* Show the mobile header container */
.mobile-menu-container {
display: flex;
padding-top: 5px;
}
/* Show the mobile menu button */
.mobile-menu-toggle {
display: block;
}
/* Ensure mobile menu is fixed and hidden by default */
.mobile-menu {
position: fixed;
top: 50px;
left: 0;
width: 100%;
background-color: rgba(0, 0, 0, 0.9);
z-index: 99;
box-sizing: border-box;
margin: 0;
padding: 5px;
display: none; /* Mobile menu is hidden by default */
border: 1px solid transparent;
border-image: url('border.jpg') 1 round;
}
.mobile-menu .section-box {
width: 90%;
margin: 0;
padding: 5px;
}
.mobile-menu .section-box .inner-line, .mobile-menu .line-break {
margin-left: -2px;
margin-right: -2px;
}
body {
display: flex;
flex-direction: column;
}
.left-box {
position: static;
display: none;
}
.right-main-box,
.middle-content,
.middle-text-box {
position: static;
width: 100%;
height: auto;
margin-top: 20px;
max-height: none;
overflow-y: visible;
z-index: auto;
order: 3;
}
.middle-content {
padding: 0;
max-width: 1500px;
margin: 20px auto;
}
.right-main-box {
padding: 20px;
max-width: 1500px;
margin: 20px auto;
}
.middle-text-box {
max-width: 1000px;
padding: 10px 20px;
margin: 20px auto;
text-align: left;
}
.responsive-image {
min-width: 374px;
max-width: 100%;
margin: 20px auto;
display: block;
}
.top-header-box {
order: 1;
position: sticky;
width: 100%;
height: auto;
padding: 10px;
}
.main-layout {
order: 4;
display: block;
padding: 0;
}
.main-title-mobile {
position: static;
transform: none;
text-align: left;
margin-left: 2%;
margin-top: -10px;
}
.project-title-h3 {
width: calc(100% + 40px);
box-sizing: border-box;
margin-left: -20px;
margin-right: -20px;
}
.left-box-inner {
margin-top: 0;
max-height: none;
overflow-y: visible;
padding-bottom: 20px;
display: flex;
flex-direction: row;
flex-wrap: wrap;
gap: 10px;
}
.section-box {
width: 100%;
}
}
.inline-link {
/* Inherits font-family and font-size from parent element */
font-family: inherit;
font-size: inherit;
/* Adopts styles from .home-nav-link */
text-decoration: none;
color: var(--text-color);
text-shadow: 2px 2px 2px #331100;
transition: text-shadow 0.3s ease, color 0.3s ease;
font-weight: 700;
/* Hover effect from .home-nav-link:hover */
/* Add a comma for multiple selectors to apply the same hover style */
}
.inline-link:hover {
color: var(--shadow-color);
text-shadow: 1px 1px 2px white;
}
@media screen and (max-width: 1080px) {
body.home {
background-image: url('main-mobile.jpg');
}
.blue-box-home {
max-width: 700px;
min-width: 370px;
/* Set margin-top for better vertical spacing */
margin-top: 20px;
padding: 20px;
}
.blue-box-columns {
flex-direction: column;
}
/* Responsive h1 for home page */
.name-box-home h1 {
font-size: clamp(1.5em, 3vw, 2.5em);
}
}
@media screen and (max-width: 600px) {
.section-title {
font-size: 0.7em;
margin-bottom: 5px;
}
.inner-line {
margin-top: 0;
margin-bottom: 0px;
}
.line-break {
margin-bottom: 0px;
}
.mobile-menu {
margin: 0;
}
}