/* Reset and Global Styles */
	@import url('https://fonts.googleapis.com/css2?family=Orbitron:wght@400;700&family=Exo+2:wght@400;600&display=swap');
        html, body {
            margin: 0;
            padding: 0;
            min-height: 100vh; /* ensures the page is at least the full height of the viewport */
	    display: flex;
	    flex-direction: column;
            text-align: center;
	    background-image: url('assets/background.png'); /* Replace with your actual image file */
 	    background-size: cover; /* Ensures the image covers the entire screen */
	    background-position: center; /* Centers the image */
	    background-repeat: no-repeat; /* Prevents the image from repeating */
	    background-attachment: fixed; /* Keeps the background static when scrolling */
        }

        /* Navigation Bar */
        .nav {
            background-color: rgba(0, 0, 0, 1);
            /*overflow: hidden;*/
            padding: 0px 0;
	    top: 0;
	    position: relative;
	    width: 100%;
	    z-index: 1000;
        }

        .nav a {
            color: white;
            text-decoration: none;
            padding: 14px 20px;
            display: inline-block;
            font-size: 18px;
        }

        .nav a:hover {
            background-color: rgba(255, 255, 255, 0.2);
            border-radius: 5px;
	    bottom: 0;
        }

	/*.footer nav {}*/
	    
	/* about me social images */
	.social-row {
	    display: flex;
	    justify-content: center;
	    gap: 40px;
	    margin: 10px 0 20px;
	}

	.social-icon {
	    filter: invert(1);
	    width: 32px;
	    height: 32px;
	    /*transform: scale(1.5);*/
	}

	/*.small-gj {
	    transform: scale(0.8);
	}*/



        /* Social Media Icons Section */
        .social-footer {
	    background-color: rgba(0, 0, 0, 1);
	    position: relative;
	    width: 100%;
	    bottom: 0;
	    margin-top: 0px;
            display: flex;
            justify-content: center;
            /*gap: 30px;*/
	   align-items: center;
        }

        .icon-link {
            display: flex;
            justify-content: center;
            width: 3em;
            height:3em;
            padding: 0;
            margin: 0 15px;
            overflow: visible;
        }

        .nav-icon {
	   filter: invert(1);
            width: 100%;
            height:100%;
           /*object-fit: contain;*/
	   /* mask-image: none;
	    -webkit-mask-image: none;
	    background-color: transparent;*/
        }

        .linkedin-icon {
            transform: scale(2);
        }

        .discord-icon {
            transform: scale(2);
        }

        .gamejolt-icon {
           transform: scale(0.75);
	   /* width: 1em;
	    height: 1em;*/
	   /* transform: none;*/
        }

        /* 3-Column Layout */
        .container {
	    /*flex: 1;*/ /* pushes the footer to the bottom when  content is short */
	   /* background: url('gray_background.jpg') no-repeat center center fixed;
	    background-size: cover;*/
            display: grid;
            grid-template-columns: 1fr 4fr 1fr;
            gap: 20px;
            max-width: 1200px;
            margin:  auto;
            padding: 0px 20px 20px;
        }

        /* Left & Right columns */
        .artsy-column {
            /*background-color: rgba(130, 130, 130, 1); /*url('artsy_background.jpg') no-repeat center center;*/
            /*background-size: cover;*/
            min-height: 400px;
        }
        
        /* Center Column */
        .content {
          /*background-color: #222;*/
	    background: transparent;
            color: white;
	    padding: 5px;
	    padding-top: 20px;
	    margin: auto;
            border-radius: 10px;
            box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
        }

        /* Text Styling */
        h1 {
            color: white;
            font-size: 36px;
	    font-family: 'Orbitron', sans-serif;
	    text-align: center;
        }

	h2 {
	    color: white;
	    font-family: 'Orbitron', sans-serif;
	    text-align: center;
	}

        p {
            font-size: 22px;
            line-height: 1.6;
            color: white;
	    font-family: 'Exo 2', sans-serif;
        }

	li {
	    text-align: left;
	    font-size: 22px;
	    line-height: 1.6;
	    color: white;
	    font-family: 'Exo 2', sans-serif;
	}

	.hyper-link {
	
	    font-family: 'Exo 2', sans-serif;
	    font-size: 22px;
	    color: #ffffff;/*white;*/
	    text-decoration: none;
	    border-bottom: 1px solid rgba(255, 255, 255, 0.4);
	    transition: border-color 0.2s ease, box-shadow 0.2s ease;
	
	}


	.hyper-link:hover {
	    border-bottom-color: #ffffff;
	    box-shadow: 0 0 6px rgba(255, 255, 255, 0.6);
	}

        /* Image Styling */
        .profile-photo {
            border-radius: 10px;
            margin-bottom: 15px;
        }


	.experience-entry {
          /*  background: #2a2a2a;*/
	    background: transparent;
	    color: white;
            padding: 20px;
            border-radius: 8px;
            box-shadow: 0 2px 5px rgba(0, 0, 0, 0.2);
	    margin-top: 40px;
            margin-bottom: 20px;
	    max-width: 800px;
	    text-align: left;
        }


	.game-list {
	    display: grid;
	    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); /* Responsive grid */
	    gap: 20px;
	    max-width: 800px;
	    justify-items: center;
	}

	.game-card {
	   /* background-color: #2a2a2a;*/
	    background: transparent;
	    color: white;
	    padding: 15px;
	    border-radius: 10px;
	    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
	   /* margin-top: 400px;
	    margin-bottom: 400px;*/
	    text-align: center;
	    max-width: 350px;
	    transition: transform 0.2s ease-in-out;
	}

	.game-image {
	    width: 100%;
	    border-radius: 10px;
	}

	.btn {
	    display: inline-block;
	    padding: 10px 15px;
	    background-color: #ba221a;
	    color: white;
	    text-decoration: none;
	    border-radius: 5px;
	    margin-top: 10px;
	}

	.btn:hover {
	    background-color: rgba(186, 34, 26, 0.6);
	}


	.game-image-large {
	    width: 100%;
	    border-radius: 20px;
	    margin-bottom: 20px;
	}

	.screenshot-gallery {
	    display: flex;
	    gap: 10px;
	    justify-content: center;
	}

	.screenshot {
	    width: 100%;
	    border-radius: 5px;
	}

	.dev-log {
	    background-color: #2a2a2a;
	    color: white;
	    padding: 10px;
	    margin: 40px 0;
	    border-radius: 5px;
	    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.2);
	}


        /* Footer Navigation */
        
	.footer-container {
	    position: relative;
	    width: 100%;
	    background-color: rgba(0, 0, 0, 1);
	    text-align: center;
	   padding: 10px 0; /* adjust spacing between footer & socials*/
	    margin-top: auto;
	    bottom: 0;
	    /* top: 100vh; /*ensures it sticks to the bottom */
	}
	
       	@media (max-width: 768px) {
          .container {
            display: flex;
            flex-direction: column;
            gap: 10px;
            padding: 10px;
          }

          .artsy-column {
              display: none; /* Hides side columns if they are decorative */
          }

          .content {
              width: 100%;
              padding: 10px;
          }
        }

	@media (max-width: 600px) {
	    .nav {
	        display: flex;
	        flex-direction: column;
	        align-items: center;
    	    }

	   .nav a {
	    	display: block;
	        padding: 10px;
	        width: 100%;
	        text-align: center;
	    }
	}

	@media (max-width: 768px) {
	    h1 {
	        font-size: 24px;
	    }
	
	    p {
	        font-size: 16px;
	    }

	    .game-card {
	        max-width: 100%;
	    }
	
	    .game-image {
	        width: 100%;
	        max-width: 400px;
	    }
	}

	/* Hide menu toggle button by default */
	.menu-toggle {
	    display: none;
	    font-size: 24px;
	    background: none;
	    border: none;
	    color: white;
	    cursor: pointer;
	    padding: 10px;
	}
	
	/* Hide the menu by default on small screens */
	.nav-links {
	    display: flex;
	    justify-content: center;
	    gap: 20px;
	}
	
	/* Mobile styles */
	@media (max-width: 768px) {
	    .nav {
	        display: flex;
	        flex-direction: column;
	        align-items: center;
	        padding: 10px 0;
	        position: relative;
	    }
	
	    .menu-toggle {
	        display: block; /* Show the button */
	        position: absolute;
	        left: 10px;
	        top: 10px;
	    }
	
	    .nav-links {
	        display: none; /* Hide menu by default */
	        flex-direction: column;
	        width: 100%;
	        text-align: center;
	        background: rgba(0, 0, 0, 0.9);
	        position: absolute;
	        top: 50px;
	        left: 0;
	        padding: 10px 0;
	    }
	
	    .nav-links a {
	        display: block;
	        padding: 10px;
	        font-size: 18px;
	    }
	
	    /* Show menu when active */
	    .nav-links.active {
	        display: flex;
	    }
	}

	/* ===== Hire Me form (scoped) ===== */
	:root {
	  --hire-gap: 12px;
	  --hire-radius: 12px;
	  --hire-accent: #ba221a; /* matches .btn */
	}

	/* Form wrapper */
	.hire-form {
	  /* lives well inside your .content center column */
	  width: 100%;
	  max-width: 860px;
	  margin: 0 auto;
	  padding: 1rem;
	  displahy: grid;
	  gap: var(--hire-gap);
	  text-align: left;           /* your site is centered globally; form reads better left-aligned */
	  color: white;               /* keep your site’s white text */
	  font-family: 'Exo 2', sans-serif; /* aligns with your body font */
	}

	/* Headline inside form */
	.hire-form h2 {
	  font-family: 'Orbitron', sans-serif; /* matches your h1/h2 font */
	  font-size: 1.7rem;
	  margin: .25rem 0 .5rem;
	  /*text-align: left;*/
	}

	/* Field groups */
	.hire-form fieldset {
	  border: 1px solid rgba(255,255,255,.18);
	  background: rgba(0,0,0,0.35);          /* subtle translucent panel to match your site */
	  backdrop-filter: blur(2px);
	  border-radius: var(--hire-radius);
	  padding: 1rem;
	  display: grid;
	  gap: var(--hire-gap);
	}
	.hire-form legend {
	  padding: 0 .5rem;
	  font-weight: 700;
	  font-family: 'Orbitron', sans-serif;
	  font-size: 1.75rem;
	  letter-spacing: .3px;
	}
	
	/* Labels stack caption over control (best for narrow widths) */
	.hire-form label {
	  display: grid;
	  gap: 6px;
	}

	/* Inputs */
	.hire-form input,
	.hire-form select,
	.hire-form textarea {
	  width: 100%;
	  padding: .7rem .9rem;
	  border: 1px solid #c9c9c9;
	  border-radius: 10px;
	  color: white;
	  background: rgba(0,0,0,0.6);
	  outline: none;
	}
	.hire-form select[multiple] { min-height: 7rem; }
	.hire-form input::placeholder,
	.hire-form textarea::placeholder { color: rgba(255,255,255,.65); }
	
	/* Focus ring uses your accent red */
	.hire-form input:focus,
	.hire-form select:focus,
	.hire-form textarea:focus {
	  border-color: var(--hire-accent);
	  box-shadow: 0 0 0 2px rgba(186,34,26,.25);
	}

	/* Consent row *//*.hire-form*/ 
	.consent {
		   /* display: inline-grid; align-items: center; gap: .6rem;*/ 
	
		   grid-column: span 2;
	  	   display: flex; 
	 	   align-items: center; 
	  	   gap: .6rem; 
	  	   margin-top: .5rem;}

	/* Submit button styled to match .btn */
	/*.hire-form*/ button[type="submit"] {
	  display: inline-block;
	  padding: 10px 15px;
	  background-color: var(--hire-accent);
	  color: white;
	  text-decoration: none;
	  border-radius: 10px;
	  border: none;
	  font-weight: 700;
	  cursor: pointer;
	}
	/*.hire-form*/ button[type="submit"]:hover {
	  background-color: rgba(186, 34, 26, 0.85);
	}
	
	/* Desktop: two-column layout inside each fieldset */
	@media (min-width: 768px) {
	  .hire-form fieldset { grid-template-columns: 1fr 1fr; }
	  .hire-form label.full { grid-column: 1 / -1; }  /* let long controls span both columns */
	}
	
	/* Keep form from hugging the fixed footer on very short pages */
	@media (max-width: 768px) {
	  .hire-form { padding-bottom: 5rem; }
	}


	/* === Hire Me — spacing & sizing refinements === */
	
	/* Reduce extra space inside groups and keep everything top-aligned */
	.hire-form fieldset { 
	  row-gap: .6rem;            /* was ~1rem */
	  align-items: start; 
	}
	.hire-form legend { 
	  margin-bottom: .2rem; 
	  line-height: 1.1; 
	}
	.hire-form label { gap: 4px; }  /* tighter label→input spacing */
	
	/* Make Godot version a compact field and remove any phantom top gap */
	.hire-form label:has([name="godot_version"]) { margin-top: 0; }
	.hire-form input[name="godot_version"] {
	  max-width: 14ch;           /* compact numeric-ish input */
	  justify-self: start;
	}
	
	/* Links: trim spacing and ensure full width */
	.hire-form label:has([name="links"]) { margin-top: 0; }
	.hire-form input[name="links"] { width: 100%; }
	
	/* Notes: make taller, readable, and resizable if needed */
	.hire-form label:has(textarea[name="notes"]) { margin-top: 0; }
	.hire-form textarea[name="notes"] {
	  min-height: 18rem;         /* increase height */
	  line-height: 1.4;
	  resize: vertical;
	}
	
	/* Balance the multi-select height a bit */
	.hire-form select[multiple][name="platforms"] { min-height: 10rem; }
	
	/* Consent row: span the full width and align neatly */
	/*.hire-form .consent {
	  grid-column: 1 / -1;
	  display: flex; 
	  align-items: center; 
	  gap: .6rem; 
	  margin-top: .5rem;
	}
	.hire-form .consent input { margin: 0; }*/
	
	/* Slightly tighten the section headline spacing */
	.hire-form h2 { margin: .1rem 0 .35rem; }
	
	/* Desktop refinements */
	@media (min-width: 768px) {
	  .hire-form fieldset { grid-template-columns: 1fr 1fr; column-gap: 1rem; }
	  .hire-form input[name="godot_version"] { max-width: 16ch; } /* a touch wider on desktop */
	}
	
	/* === Consent row: always full-width, never two-column === */
	/*.hire-form .consent {
	  grid-column: 1 / -1 !important;  /* span both columns on desktop */
	 /* width: 100%;
	  display: flex;
	  align-items: center;
	  gap: .6rem;
	  margin: .75rem 0 0;
	  line-height: 1.3;
	  text-align: left;
	}
	
	/*.hire-form .consent input[type="checkbox"] {
	  margin: 0;
	  flex: 0 0 auto;
	}*/
	
	/* If consent is inside a fieldset grid, make sure that grid can span columns */
	/*@media (min-width: 768px) {
	  .hire-form fieldset { grid-template-columns: 1fr 1fr; }
	  .hire-form .consent { grid-column: 1 / -1 !important; }
	}*/