/*JAMIE MUIR MADE THIS 22/11/25 ask me if you want this, dont just take it (unless i know you)*/
/* --- HARD 2000s HALF-LIFE / COUNTER-STRIKE UI STYLE --- */

body {
    margin: 0;
    padding: 0;
    background: url(../images/mwhl.png); 
    font-family: "Verdana", "Tahoma", sans-serif;
    color: #cdd2c8;
}
#screen {
    width: 95%;
    max-width: 1000px;   
    margin: 10px auto;
    background: #4c5844; /* lighter steam green*/ 
    
    border-width: 2px;
    border-style: solid;
    border-top-color: gray;
    border-left-color:gray;
    border-right-color: #000;
    border-bottom-color: #000;
    
    

    padding: 0;
}

/* HEADER ------------------------------------------------------- */

header {
    padding: 18px;
    background: #282d22; /* dark steam green*/ 
    border-radius: 10px 10px 0px 0px; /*used to curl top left&right corners*/
    border-bottom: 3px solid #42453c;

    margin:10px 10px 0px 10px; /*order is top, right, bottom, left*/
}

header h1 {
    margin: 0;
    font-size: 22px;
    color: #efefef;
}

.sub {
    margin: 3px 0 0;
    font-size: 12px;
    color: #c4b550;
}

/* NAVIGATION --------------------------------------------------- */

nav {
    background: #000000;
    border-bottom: 2px solid #3e4637;


    border-radius: 0px 0px 10px 10px; /*used to curl bottom left&right corners*/
    margin:0px 10px 10px 10px; /*order is top, right, bottom, left*/
}

nav ul {
    margin: 0;
    padding: 10px;
    list-style: none;
    font-size:14px;

    display: flex; /*make it centered*/
    justify-content: center;
    gap: 20px;       
}

nav li {
    display: inline-block;
}

nav a {
    display: inline-block;
    padding: 10px 14px;
    color: #d2d2d2;
    text-decoration: none;
}

nav a:hover {
    background: #000000;
    color: #c4b550;
}

/* ACTIVE TAB (no longer folder) */
nav a.active {
    color: #c4b550;
}



/*Folder is used in the 'projects' page, i didnt wanna just remove the idea because i liked it so much*/
#folder {
    background: #000000;
    border-bottom: 10px solid #4c5844;
    padding-bottom:10;

    width: auto;
    margin-left: -12px;   /*dumbest fix i've had to employ*/
    margin-right: -12px;
    margin-bottom: 0px;
}

#folder ul {
    margin: 0;
    padding: 0;
    list-style: none;
}

#folder li {
    display: inline-block;
    border-right: 1px solid #000;
}

#folder a {
    display: inline-block;
    padding: 10px 14px;
    font-size: 11px;
    color: #b8c2b2;
    text-decoration: none;
}

#folder a:hover {
    background: #141d14;
    color: #c4b550;
}

/* ACTIVE TAB (folder tab style) */
#folder a.active {
    position: relative;
    top: 1px;

    background: #4c5844;/* matches panel background */
    color: #efefef;
    
    border-width: 2px;
    border-style: solid;
    border-top-color: gray;
    border-left-color:gray;
    border-right-color: #000000;
    border-bottom-color: #4c5844;
    
    
    position: relative;
    top: 2px;               /* creates the 'tab connected down' illusion */
    padding-bottom: 12px;   /* slightly bigger to overlap the content box border */
}

/*make inactive tabs look clearly separate */
#folder a {
    border-bottom: 2px solid #0d130d;
}

/* hover looks like nothings happening */
#folder a.active:hover {
    background: #4c5844;
    color: #efefef;
}

/* MAIN --------------------------------------------------------- */

main {
    padding: 20px 20px 30px;
}

main h2 {
    margin: 0 0 15px;
    font-size: 16px;
    padding-bottom: 4px;
    border-bottom: 2px solid #e0e0e0;
    color: #e0e0e0;
}

/* BLOCK PANELS ------------------------------------------------- */


.darkbox {
    background: #3e4637;
    color: #cdd2c8;

    width: 100%;
    box-sizing: border-box;

    padding: 12px;
    margin-bottom: 22px;

    border-width: 2px;
    border-style: solid;
    border-top-color: #000;
    border-left-color:#000;
    border-right-color: gray;
    border-bottom-color: gray;
}

.lightbox{
    background: #4c5844;
    color: #cdd2c8;

    width: 100%;
    box-sizing: border-box;

    padding: 12px;
    margin-bottom: 22px;

    
    
    border-width: 2px;
    border-style: solid;
    border-top-color: gray;
    border-left-color:gray;
    border-right-color: #000;
    border-bottom-color: #000;
}

.whitebox{/*whereas the dark/light boxes are the sharp, 3d looking boxes you would see in menus, white/yellow boxes are softer, more natural containers. Yellowbox is like a stickynote*/
    background: #f7f7f7;
    color:#4d4d4d;

    border-radius: 10px;
    width: 100%;
    box-sizing: border-box;

    padding: 12px;
    margin-bottom: 22px;

    border:#000 solid 1px;
}

.whitebox h2 {
    border-bottom: 2px solid #4d4d4d;
    color: #4d4d4d;
}

.yellowbox{
    background:#c4c38a;
    color:#4d4d4d;

    border-radius: 10px;
    width: 100%;
    box-sizing: border-box;

    padding: 12px;
    margin-bottom: 22px;

    border:#000 solid 2px;
    
    box-shadow: 0px 0px 10px #3a3a3a;/*yellow box is meant to look like a sticky note, it has a shadow because of that.*/
}

.block {
    background: #3e4637;
    
    width: 100%;
    box-sizing: border-box;

    padding: 12px;
    margin-bottom: 22px;
}

.block h3 {
    margin: 0 0 10px;
    font-size: 15px;
    color: #e9e9df;
    padding-bottom: 4px;
    border-bottom: 1px solid #000;
}

/* MULTI MEDIA BLOCK --------------------------------------------- */
/*
using flexbox for multiple things side by side, first time using it so im going to write stuff down before i forget. 
flex: x; where x is a number makes the element take up that much space (if 3 elements each have flex:1; space will be divided in 3rds)
*/
.media{ 
    display: flex;
    /*
    flex-direction: row-reverse; <- instead of align-items for right->left
    
    align-items: center;  <- centers image
    */
    
    gap: 20px;             

}

/* COLOR ACCENTS */
.block-tag-orange { border-left: 6px solid #ca9833; }
.block-tag-red { border-left: 6px solid #8d2b2b; }
.block-tag-light { border-left: 6px solid #708860; }
.block-tag-dark { border-left: 6px solid #3e4637; }
/* LINKS AND IMAGES ---------------------------------------------- */
img {
    image-rendering: contain;
    max-width: 100%;
    height: auto;
}

a {
    color: #c4b550;
    text-decoration: none;
}

a:hover {
    color: #ac9f46;
    text-decoration: underline;
}

.block a {
    color: #c4b550;
    text-decoration: none;
    font-size: 14px;
}

.block a:hover {
    color: #ac9f46;
    text-decoration: underline;
}

footer a{
    color: #939793;
    text-decoration: none;
}
footer a:hover{
    color: #939793;
    text-decoration: underline;
}

/* FONTS --------------------------------------------------------- */
@font-face{
    font-family: "halflife2";
    src: url(../misc/halflife2.ttf)
}

/* FOOTER -------------------------------------------------------- */
footer {
    background: #0c120c;
    color: #6f766f;
    padding: 10px;
    font-size: 12px;
    border-top: 2px solid #000;
    text-align: center;
}

/* DEVICE PROOFING ---------------------------------------------- */
@media (max-width: 600px) {
    body {
        font-size: 14px;
    }

    header h1 {
        font-size: 16px;
    }

    nav a {
        padding: 8px 10px;
        font-size: 10px;
    }

    main {
        padding: 15px;
    }

    .block {
        padding: 10px;
    }

    footer {
        font-size: 9px;
    }

    nav a.active {
        top: 0;
        padding-bottom: 10px;
    }
}