/* ----------------------------------- 
File Name: styles.css 
Written By: Brad Donohoo 
Last Date Modified: 6/27/26 
License: Proprietary 
Owner: Highstar Games LLC 
-------------------------------------*/ 

/* --- Icon Library Import --- */ 
@import url('https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.5.1/css/all.min.css'); 

/* --- Local Fonts Setup --- */ 
@font-face 
{ 
    font-family:  'Inknut Antiqua Light'; 
    src:          url('../fonts/Inknut Antiqua/InknutAntiqua-Light.ttf') format('truetype'); 
    font-weight:  300; 
    font-style:   normal; 
    font-display: swap; 
} 

/* --- Global Variables & Strict Resets --- */ 
:root 
{ 
    --bg-dark:     #000000; 
    --bg-purple:   #4a0072; 
    --bg-gradient: radial-gradient(circle at top center, #6a1b9a 0%, #000000 70%); 
    --text-light:  #ffffff; 
    --accent:      #b86bff; /* Distinct purple for hovers */ 
    --font-main:   'Inknut Antiqua Light', serif; 
    --font-pixel:  'Courier New', Courier, monospace; 
} 

/* Strict reset to remove the white border around the site */ 
html, body, * { 
    margin:     0; 
    padding:    0; 
    box-sizing: border-box; 
} 

body 
{ 
    background-color:      var(--bg-dark); 
    background-image:      var(--bg-gradient); 
    background-attachment: fixed; 
    color:                 var(--text-light); 
    font-family:           var(--font-main); 
    font-size:             1rem; 
    line-height:           1.6; 
    min-height:            100vh; 
    display:               flex; 
    flex-direction:        column; 
    overflow-x:            hidden; /* Stops horizontal scrolling white-space */ 
} 

/* --- Header & Nav Updates (Shrunk Height) --- */ 
.main-header 
{ 
    display:         flex; 
    justify-content: space-between; 
    align-items:     center; 
    padding:         5px 2%; /* Sliced padding down significantly to shrink the height */ 
    background:      #000000; 
    border-bottom:   2px solid var(--bg-purple); 
    position:        relative; 
    z-index:         1000; 
    max-height:      85px; /* Adjusted slightly to accommodate the massive new font */ 
} 

.logo-container 
{ 
    display:     flex; 
    align-items: center; 
    gap:         15px; 
} 

/* Main Profile Icon */ 
.dev-avatar 
{ 
    width:           60px; 
    height:          60px; 
    image-rendering: pixelated; 
} 

/* The new Text-Based Title */ 
.site-title 
{ 
    font-family:    'Inknut Antiqua Light', serif; 
    color:          #ffffff; 
    font-size:      3.5rem; /* Increased massively (~6 sizes up) */ 
    text-transform: uppercase; 
    letter-spacing: 2px; 
} 

.main-nav ul 
{ 
    list-style: none; 
    display:    flex; 
    gap:        20px; 
} 

/* Explicitly White Links */ 
.main-nav a 
{ 
    color:           #ffffff; 
    text-decoration: none; 
    font-size:       1rem; 
    transition:      color 0.3s ease, border-bottom 0.3s ease; 
} 

/* Explicitly Purple Hover States */ 
.main-nav a:hover, .main-nav a.active 
{ 
    color:         var(--accent); 
    border-bottom: 2px solid var(--accent); 
} 

/* --- Main Content & Banner Sizing --- */ 
.page-content 
{ 
    flex:           1; 
    display:        flex; 
    flex-direction: column; 
    align-items:    center; 
    padding:        40px 5%; 
} 

.hero-banner 
{ 
    width:           100%; 
    max-width:       960px; /* Increased 20% from 800px */ 
    max-height:      50vh;  /* Scaled up slightly to accommodate width */ 
    object-fit:      contain; /* Keeps aspect ratio perfect without stretching */ 
    margin-bottom:   30px; 
    image-rendering: pixelated; 
} 

.hero-video 
{ 
    width:      88%; 
    max-width:  800px; 
    border:     6px solid #000000; 
    margin:     40px 0; 
} 

/* --- Typography & Elements --- */ 
.pixel-title 
{ 
    font-family:    var(--font-pixel); 
    font-size:      2.5rem; 
    text-transform: uppercase; 
    letter-spacing: 4px; 
    margin-bottom:  20px; 
    text-align:     center; 
} 

.wishlist-link 
{ 
    font-size:       1.8rem; 
    color:           var(--text-light); 
    text-decoration: none; 
    margin:          20px 0; 
    border-bottom:   2px solid var(--text-light); 
} 

.mailchimp-form 
{ 
    text-align:     center; 
    margin-top:     60px; /* Increased space below WISHLIST */ 
    margin-bottom:  40px; 
    display:        flex; 
    flex-direction: column; 
    align-items:    center; /* Centers the whole group decoupled from text */ 
} 

.subscribe-form 
{ 
    display:     flex; 
    align-items: center; /* Centers label perfectly with the text box */ 
    margin-top:  20px; 
} 

.subscribe-form label 
{ 
    font-size:    0.8rem; 
    margin-right: 10px; /* Places label directly to the left of the field */ 
} 

.subscribe-form input[type="email"] 
{ 
    padding:    10px; 
    width:      250px; 
    background: #000; 
    border:     1px solid #555; 
    color:      white; 
} 

.subscribe-form button 
{ 
    padding:     10px 20px; 
    background:  white; 
    color:       black; 
    border:      none; 
    cursor:      pointer; 
    font-family: var(--font-main); 
    font-weight: bold; 
    margin-left: 20px; /* Adds extra space between text field and button */ 
} 

.thanks-text 
{ 
    margin-top: 25px; /* Adds extra space below the text field */ 
    font-size:  0.8rem; 
} 

/* --- Grids (Gallery & About) --- */ 
.gallery-grid 
{ 
    display:               grid; 
    grid-template-columns: repeat(4, 1fr); 
    gap:                   15px; 
    max-width:             1000px; 
    margin-top:            20px; 
} 

.gallery-grid img 
{ 
    width:           100%; 
    aspect-ratio:    1 / 1; 
    object-fit:      cover; 
    image-rendering: pixelated; 
} 

.about-grid 
{ 
    display:               grid; 
    grid-template-columns: 1fr 2fr; 
    gap:                   40px; 
    max-width:             800px; 
    margin-top:            40px; 
    align-items:           start; 
} 

.profile-card 
{ 
    text-align: center; 
} 

.profile-pic 
{ 
    width:         150px; 
    clip-path:     polygon(50% 0%, 100% 25%, 100% 75%, 50% 100%, 0% 75%, 0% 25%); 
    margin-bottom: 10px; 
} 

.box-art 
{ 
    width:           100%; 
    max-width:       300px; 
    margin-top:      40px; 
    image-rendering: pixelated; 
} 

/* --- Footer --- */ 
.main-footer 
{ 
    text-align:  center; 
    background:  linear-gradient(to bottom, transparent 0%, #000000 60%); 
    padding-top: 40px; 
    margin-top:  auto; 
} 

/* Footer Social Icons */ 
.social-icons 
{ 
    margin-top:      20px; 
    display:         flex; 
    justify-content: center; 
    gap:             30px; 
    margin-bottom:   20px; 
} 

.social-icons a 
{ 
    color:           #ffffff; 
    font-size:       30px; 
    text-decoration: none; 
    transition:      color 0.3s ease, transform 0.3s ease; 
} 

.social-icons a:hover 
{ 
    color:     var(--accent); 
    transform: translateY(-5px); 
} 

.footer-text 
{ 
    margin-bottom: 20px; 
    font-size:     0.9rem; 
} 

.web-fence-bottom 
{ 
    height:            120px; 
    width:             100%; 
    background-image:  url('/assets/images/artwork/WebSalFence.png'); 
    background-repeat: repeat-x; 
    background-size:   contain; 
    image-rendering:   pixelated; 
}