/**********************

    WEBD-1008 (248288)
    Name: Edgar Leonardo Torres Mansilla    
    Date: 25/04/2024
    Description: CSS file for project 4 (leotorres.css)

*********************/

:root,
:root.C64 {
    --color-01: #011C00;
    --color-02: #EBFFE3;
    --color-03: #4F634F;
    --color-04: #a40202;
    --color-05: #ff0000;
    --color-06: #ffeec9;
    --bg-img01: url('/images/dith_patt_C64_01.png');
    --bg-img02: url('/images/dith_patt_C64_02.png');
    --bg-img03: url('/images/dith_patt_C64_03.png');
    --img01: url('/images/leo_portrait_C64.png');
    --cursor-normal: url('/images/cursor_normal_C64.png') 0 0, auto;
    --cursor-link: url('/images/cursor_link.png') 0 0, auto;
}
:root.PC {
    --color-01: #161D26;
    --color-02: #BFB7A8;
    --color-03: #313A40;
    --color-04: #149a19;
    --color-05: #ff0000;
    --bg-img01: url('/images/dith_patt_PC_01.png');
    --bg-img02: url('/images/dith_patt_PC_02.png');
    --bg-img03: url('/images/dith_patt_PC_03.png');
    --img01: url('/images/leo_portrait_PC.png');
    --cursor-normal: url('/images/cursor_normal_PC.png') 0 0, auto;
    --cursor-link: url('/images/cursor_link.png') 0 0, auto;
}
:root.GB {
    --color-01: #0F380F;
    --color-02: #9BBC0F;
    --color-03: #306230;
    --color-04: #CC6600;
    --color-05: #ff0000;
    --bg-img01: url('/images/dith_patt_GB_01.png');
    --bg-img02: url('/images/dith_patt_GB_02.png');
    --bg-img03: url('/images/dith_patt_GB_03.png');
    --img01: url('/images/leo_portrait_GB.png');
    --cursor-normal: url('/images/cursor_normal_GB.png') 0 0, auto;
    --cursor-link: url('/images/cursor_link.png') 0 0, auto;
}
:root.NES {
    --color-01: #251F26;
    --color-02: #F2F2F2;
    --color-03: #BFB2AA;
    --color-04: #ff0000;
    --color-05: #ff0000;
    --bg-img01: url('/images/dith_patt_NES_01.png');
    --bg-img02: url('/images/dith_patt_NES_02.png');
    --bg-img03: url('/images/dith_patt_NES_03.png');
    --img01: url('/images/leo_portrait_NES.png');
    --cursor-normal: url('/images/cursor_normal_NES.png') 0 0, auto;
    --cursor-link: url('/images/cursor_link.png') 0 0, auto;
}

.accent {
    color: var(--color-04);
}
.space_grotesk_400 {
    font-family: "Space Grotesk", sans-serif;
    font-weight: 400;
}

a {
    text-decoration: none;
    cursor: var(--cursor-link)
}
a:visited {
    text-decoration: none;
    color: var(--color-01);
}

.link_buttons a {
    color: var(--color-04);
    text-decoration: none;
}

.link_buttons a:hover {
    color: var(--color-02);
    text-decoration: underline;
}

.link_buttons a:focus {
    color: var(--color-02);
    text-decoration: underline;
}

.link_buttons2 a {
    color: var(--color-01);
    text-decoration: none;
}

.link_buttons2 a:hover {
    color: var(--color-02);
    text-decoration: underline;
}

.link_buttons2 a:focus {
    color: var(--color-02);
    text-decoration: underline;
}

#image-div {
    height: 300px;
    background-size: cover;
}
body {
    background-color: var(--color-01);
    display: flex;
    align-items: center;
    height: auto;
    cursor: var(--cursor-normal);
    min-height: 100vh; /* Ensures the body takes at least the full viewport height */
    flex-direction: column; /* Ensures main stacks vertically */
}

main {
    width: 90%;
    height: auto;
    background-color: var(--color-02);
    background-image: var(--bg-img01);
    background-position: top;
    background-repeat: repeat-x;
}

#main_navigation {
    display: flex;
    width: 100%;
    font-family: "Space Grotesk", sans-serif;
    font-weight: 700;
    font-size: 1.2em;
    margin-top: 20px;
    margin-bottom: 20px; /* Adds space below the navigation */
}

#main_navigation ul {
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    justify-content: flex-start;
    /* align-items: center; */
    list-style-type: none;
    padding: 0;
    margin: 0px 20px 0px 20px;
    width: 100%; /* Ensures the ul spans the full width of its container */
}

#main_navigation ul li {
    border: 3px solid var(--color-01);
    padding: 5px 20px 10px 5px;
    box-shadow: 4px 4px 0 var(--color-01);
    background-color: var(--color-02);
    margin-right: 10px; /* Adds space between items */
    text-decoration: none;
    color: var(--color-01);
}

#main_navigation li:hover {
    background-color: var(--color-04);
    color: var(--color-02);
}

#main_navigation li:focus {
    background-color: var(--color-02);
    color: var(--color-04);
}

#main_navigation ul li a {
    color: var(--color-01);
    display: block;
}

#main_navigation ul li a:hover {
    color: var(--color-02);
}

#big_title {
    margin-left: 20px;
    margin-right: 20px;
    padding-top: 20px;
    color: var(--color-01);
}
#main_text {
    display: flex;
    flex-direction: row;  /* Aligns children in a row */
    align-items: center;  /* Centers children vertically */
    justify-content: flex-start;  /* Aligns children to the start of the container */
    flex-wrap: nowrap;  /* Prevents children from wrapping */
}

#banner_img {
    width: 400px;  /* Set a fixed width or use max-width for responsiveness */
    height: 400px;  /* Fixed height, adjust as needed */
    background-image: var(--img01);
    background-size: contain;  
    background-position: center; 
    background-repeat: no-repeat;
}

.banner_01 {
    font-family: "Space Grotesk", sans-serif;
    font-optical-sizing: auto;
    font-weight: 400;
    font-size: 5em;
    letter-spacing: -1px;
}

.banner_02 {
    font-family: "Space Grotesk", sans-serif;
    font-optical-sizing: auto;
    font-weight: 700;
    font-size: 5em;
    letter-spacing: -1px;
}

.banner_03 {
    font-family: "Hind", sans-serif;
    font-optical-sizing: auto;
    font-weight: 400;
    font-style: normal;
    font-size: 1em;
    letter-spacing: -0.5px;
}

#landing_content_container {
    background-color: var(--color-01);
    width: 100%;
    height: auto;
}

.paragraph_title {
    color: var(--color-03);
}

.content_paragraph {
    padding: 20px;
    font-family: "Space Grotesk", sans-serif;
    font-optical-sizing: auto;
    font-weight: 400;
    font-style: normal;
    font-size: 1em;
    letter-spacing: -.6px;
    color: var(--color-02);
    margin-bottom: 0%;
}

footer {
    height: auto;
    background-image: var(--bg-img02);
    background-position: bottom;
    background-repeat: repeat-x;
    padding-bottom: 30px;
    background-color: var(--color-03);
    padding-top: 0px;
}
.trans_div_color2_bg {
    height: 50px;
    background-image: var(--bg-img03);
    background-position: top;
    background-repeat: repeat-x;
    background-color: var(--color-03);
}
#footer_nav {
    display: flex;
    width: 100%;
    font-family: "Space Grotesk", sans-serif;
    font-weight: 700;
    font-size: 1.2em;
    margin-top: 20px;
    margin-bottom: 20px; /* Adds space below the navigation */
    margin-top: 0;
}

#footer_nav ul {
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    justify-content: center;
    list-style-type: none;
    padding: 0px;
    margin: 0px 20px 0px 20px;
    width: 100%; /* Ensures the ul spans the full width of its container */
    padding-top: 50px;
}

#footer_nav ul li {
    border: 3px solid var(--color-04);
    padding: 5px 20px 10px 5px;
    box-shadow: 4px 4px 0 var(--color-04);
    background-color: var(--color-01);
    /* margin-right: 30px; */
    text-decoration: none;
    color: var(--color-02);
    margin-left: 10px;
    margin-right: 10px;
}
#footer_nav ul li a {
    color: var(--color-02);
    display: block;
}

#footer_nav ul li a:hover {
    color: var(--color-01);
    display: block;
}

#footer_nav ul li:hover {
    background-color: var(--color-02);
    color: var(--color-01);
}

#themes {
    width: 100%;
    height: auto;
    display: flex;
    justify-content: center;
    align-items: center;
    background-color: var(--color-04);
    box-shadow: inset 0px 2px 0 var(--color-01),
                inset 0px -2px 0 var(--color-01);
}

#themes ul {
    width: 50%;
    list-style: none;
    display: flex;
    justify-content: space-between;
    padding-left: 0;
}

#themes ul li  img {
    filter: grayscale(100%);
    transition: .2s ease-in-out;
}
#themes ul li:hover img {
    filter: grayscale(0);
    cursor: var(--cursor-link);
}

#bottom_last_nav {
    display: flex;
    justify-content: center;
    width: 100%;
    /* padding-top: 10px; */
}

#bottom_last_nav ul{
display: flex;
flex-wrap: wrap;
list-style: none;
padding-left: 0px;
}

#bottom_last_nav ul li {
    padding: 0px 20px 0px 20px;
    color: var(--color-02);
    text-align: center;
    font-family: "Hind", sans-serif;
    font-optical-sizing: auto;
    font-weight: 400;
    font-style: normal;
    font-size: 1.2em;
    letter-spacing: -0.5px;
}
#pixel_type1 {
    text-align: center;
    font-family: "Pixelify Sans", sans-serif;
    font-optical-sizing: auto;
    font-weight: 400;
    font-style: normal;
    font-size: 1.3em;
    letter-spacing: -0.5px;
    color: var(--color-04);
}
#copyright_p {
    text-align: center;
    font-family: "Hind", sans-serif;
    font-optical-sizing: auto;
    font-weight: 400;
    font-style: normal;
    font-size: .8em;
    letter-spacing: -0.5px;
    color: var(--color-01);
}



#menu button {
    padding: 10px 20px;
    margin: 20px;
    cursor: var(--cursor-link);
}

#menu button:hover {
    background-color: var(--color-04);
    color: var(--color-02);
}
#work_bar {
    width: 100%;
    height: auto;
    display: flex;
    justify-content: center;
    align-items: center;
    background-color: var(--color-01);
    box-shadow: inset 0px 2px 0 var(--color-03),
                inset 0px -2px 0 var(--color-03);
    margin-top: 40px;
}
.menu-button {
    font-family: "Space Grotesk", sans-serif;
    font-optical-sizing: auto;
    font-weight: 700;
    font-style: normal;
    font-size: 1.3em;
    border: 4px solid var(--color-02);
    padding: 5px 20px 10px 5px;
    box-shadow: 4px 4px 0 var(--color-02);
    background-color: var(--color-03);
    margin-right: 20px; /* Adds space between items */
    margin-left: 20px;
    text-decoration: none;
    color: var(--color-02);
    cursor: var(--cursor-link);
}
#content {
    display: flex;
    flex-wrap: wrap;
    flex-direction: row;
    margin-top: 20px;
    padding: 20px;
    height: auto;
}
#form_main {
    display: flex;
    justify-content: center;
    width: 100%;
    padding-bottom: 50px;
    padding-top: 50px;
}
#form_container {
    width: 100%;
}

#contact_form {
    width: 100%;
    display: flex;
    flex-direction: column;
    align-items: center;
}
.error
{
	color: var(--color-05);
    font-family: "Pixelify Sans", sans-serif;
	font-style: italic;
    font-size: .9em;
	font-weight: bold;
	display: none;
    text-align: right;
    padding-bottom: 3px;
}
.formfield {
    display: flex;
    flex-direction: column;
    justify-content: center;
    width: 70%;
}
.fields {
    font-family: "Space Grotesk", sans-serif;
    font-optical-sizing: auto;
    font-weight: 700;
    font-style: normal;
    font-size: 1.3em;
    border: 4px solid var(--color-01);
    padding: 5px 20px 10px 5px;
    box-shadow: -4px 4px 0 var(--color-01);
    background-color: var(--color-06);
    text-decoration: none;
    color: var(--color-01);
}

.fields:focus {
    font-family: "Space Grotesk", sans-serif;
    font-optical-sizing: auto;
    font-weight: 700;
    font-style: normal;
    font-size: 1.3em;
    border: 4px solid var(--color-04);
    padding: 5px 20px 10px 5px;
    box-shadow: -4px 4px 0 var(--color-04);
    background-color: var(--color-06);
    text-decoration: none;
    color: var(--color-01);
    background-image: url(/images/dot-grid.png);
    background-repeat: repeat;
    outline: none;
}

.form_label {
    font-family: "Space Grotesk", sans-serif;
    font-optical-sizing: auto;
    font-weight: 700;
    font-style: normal;
    font-size: 1.3em;
    padding-bottom: 10px;
}
.form_buttons {
    display: flex;
    justify-content: center;
    width: 60%;

}
.form_buttons ul {
    display: flex;
    flex-direction: row;
    list-style: none;
    padding-left: 0;
}

.form_reset_submit {
    font-family: "Space Grotesk", sans-serif;
    font-optical-sizing: auto;
    font-weight: 700;
    font-style: normal;
    font-size: 1.3em;
    border: 4px solid var(--color-01);
    padding: 5px 20px 10px 5px;
    box-shadow: -4px 4px 0 var(--color-01);
    background-color: var(--color-02);
    margin-right: 30px; /* Adds space between items */
    text-decoration: none;
    color: var(--color-01);
    cursor: var(--cursor-link);
}

.description-div {
    display: flex;
    align-items: center;
    flex-direction: column;
    width: 100%;
    font-family: "Space Grotesk", sans-serif;
    font-optical-sizing: auto;
    font-weight: 700;
    font-style: normal;
    font-size: 1.3em;
}

.description-div h2 {
    font-size: 3em;
    text-align: center;
    color: var(--color-04);
    margin-left: 5px;
    margin-right: 5px;
    
}

.description-div p {
    font-size: 1em;
    text-align: center;
    font-weight: 400;
    width: 70%;
    margin-left: 5px;
    margin-right: 5px;
}


/* Extra small devices (phones, 600px and down) */
@media only screen and (max-width: 600px) {
    #main_navigation ul {
        flex-direction: column;
    }
    #main_navigation ul li {
        /* width: 80%;  */
        margin-right: 0; /* Removes the margin since they stack vertically */
    }
    #big_title {
        padding-top: 5px;
        margin: 10px;
    }
    #main_navigation {
        margin-bottom: 5px; /* Adds space below the navigation */
    }
    #footer_nav ul {
        display: flex;
        flex-direction: column; /* Stacks items vertically */
    }

    .banner_01, .banner_02, .banner_03 {
        width: 100%; /* Ensures text spans the full width of its container */
        padding: 0 10px; /* Adds padding to avoid text touching the edges */
    }
    #big_title, #main_text {
        display: flex;
        flex-direction: column;
        align-items: center;
        text-align: center;
    }
    .form_reset_submit {
        font-size: 1em;
    }
    .description-div h2 {
        margin-left: 5px;
        margin-right: 5px;
        font-size: 2em;
    }
    #menu {
        display: flex;
        flex-direction: column;
        width: 80%;
    }
    #menu button {
        width: 100%;
        margin-left: 2px;
        margin-right: 2px;
    }
}

/* Small devices (portrait tablets and large phones, 600px up to 768px) */
@media only screen and (min-width: 601px) and (max-width: 768px) {
    #main_navigation {
        font-size: 1.5em;
        }
        .banner_01 {
            font-size: 5em;
        }
        .banner_02 {
            font-size: 5em;
        }
        .banner_03 {
            font-size: 1.3em;
        }
        .content_paragraph {
            font-size: 1.3em;
        }
        #contact_main_nav {
            margin-left: auto;
        }
        #footer_nav ul {
            flex-direction: column; /* Stacks items vertically */
        }
        #footernav ul li {
            width: 100%;
            margin: 0%;
        }
        #big_title, #main_text {
            display: flex;
            flex-direction: column;
            align-items: center;
            text-align: center;
        }
}

/* Medium devices (landscape tablets, 768px up to 992px) */
@media only screen and (min-width: 769px) and (max-width: 992px) {
    #main_navigation {
        font-size: 1.6em;
        }
        .banner_01 {
            font-size: 5em;
        }
        .banner_02 {
            font-size: 5em;
        }
        .banner_03 {
            font-size: 1.3em;
        }
        #contact_main_nav {
            margin-left: auto;
        }
        .content_paragraph {
            font-size: 1.3em;
        }
        #main_text {
            display: flex;
            flex-wrap: wrap;
            justify-content: space-between;
        }
        #big_title, #main_text {
            display: flex;
            flex-direction: column;
            align-items: center;
            text-align: center;
        }
}

/* Large devices (laptops/desktops, 992px up to 1200px) */
@media only screen and (min-width: 993px) and (max-width: 1200px) {
    #main_navigation {
        font-size: 1.7em;
        }
        .banner_01 {
            font-size: 6em;
        }
        .banner_02 {
            font-size: 6em;
        }
        .banner_03 {
            font-size: 1.3em;
        }
        #contact_main_nav {
            margin-left: auto;
        }
        main {
            width: 993px;
        }
        .content_paragraph {
            font-size: 1.3em;
        }
        #main_text {
            display: flex;
            flex-wrap: wrap;
            justify-content: space-between;
        }
}

/* Extra large devices (large laptops and desktops, 1200px and up) */
@media only screen and (min-width: 1201px) {
    #main_navigation {
        font-size: 1.9em;
        }
        .banner_01 {
            font-size: 6em;
        }
        .banner_02 {
            font-size: 6em;
        }
        .banner_03 {
            font-size: 1.3em;
        }
        #contact_main_nav {
            margin-left: auto;
        }
        main {
            width: 993px;
        }
        .content_paragraph {
            font-size: 1.3em;
        }
        #main_text{
            display: flex;
            flex-wrap: wrap;
            justify-content: space-between;
        }
}