@import url('https://fonts.googleapis.com/css2?family=Figtree:ital,wght@0,300..900;1,300..900&display=swap');

:root {
    --Grey: #313131;
    --DarkGrey: #1a1a1a;
    --Red: #da0404;
    --White: #ffffff;
    --Black: #141414;

    --RedHover: #dd1f1f;
    --GreyHover: #8b8b8b;
}

* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

html {
    scroll-behavior: smooth;
}

html, body {
    height: 100%;
    margin: 0;
}

body {
    overflow-x: hidden;
    font-family: Sans-Serif;
    margin: 0;
    background-color: var(--DarkGrey);
    font-family: "Figtree", sans-serif;
    font-weight: 400;
    cursor: default;
}

/*Sections*/
/*Home*/
#home {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    height: 100vh;
    cursor: default;
}

#home h1 {
    font-size: 4rem;
    font-weight: 800;
    color: var(--White);
    text-shadow: 0rem 0rem 1rem rgb(255, 255, 255, 0);
    transition: all 1s ease-in-out;
}

#home h1:hover {
    text-shadow: 0rem 0rem 1rem rgba(255, 255, 255, 0.75);
}

#home p {
    font-size: 1.5rem;
    font-weight: 400;
    color: var(--White);
    margin-top: .5rem;
}

#home .buttons {
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: center;
    margin-top: 1.5rem;
    width: 100%;
}

.buttons * {
    margin-inline: .75rem;
    border-style: none;
    border-radius: .5rem;
    font-size: 1.25rem;
    padding: 1rem;
    font-weight: 600;
    margin-block-start: 1.5rem;
}

.buttons a {
    text-decoration: none;
    color: var(--White);
    padding: 0;
    margin: 0;
}

.btn-about {
    background-color: var(--Red);
    transition: background-color 0.5s ease-in-out;
}

.btn-about:hover {
    background-color: var(--RedHover);
    cursor: pointer;
}

.btn-projects {
    background-color: var(--Grey);
    transition: background-color 0.5s ease-in-out;
}

.btn-projects:hover {
    background-color: var(--GreyHover);
    cursor: pointer;
}


/* about */
#about {
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: center;
    height: 100vh;
    color: var(--White);
    width: 100%;
    padding: 4rem;
}

.about-prg {
    width: 75%;
    margin: 0 auto;
}

.about-prg h1 {
    font-size: 2.5rem;
    margin-block-end: 1rem;
    font-weight: 800;
}

.about-prg p {
    font-size: 1.25rem;
}

.about-img img {
    border-radius: 22.5rem;
    width: 100%;
    box-shadow: 0rem 0rem .625rem .3125rem rgba(0, 0, 0, 0.75);
    transition: all 0.75s ease-in-out;
}

.about-img img:hover {
    box-shadow: 0rem 0rem 15px 15px #da0404;
}


/*projects*/
#projects {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    min-height: calc(100vh + 2rem);
    margin-top: 2rem;
    color: var(--White);
    padding: 1rem;
    margin-top: 1rem;
    box-sizing: border-box;
    margin-bottom: 0;
}

.projects-container {
    display: flex;
    flex-direction: row;
    /* Ensure all items are in a row */
    align-items: stretch;
    /* Stretch items to the same height */
    justify-content: center;
    width: 100%;
    gap: 1rem;
    /* Add gap between cards */
    padding: 1rem;
    /* Add padding for spacing */
    box-sizing: border-box;
}

.projects-card {
    display: flex;
    flex-direction: column;
    border-radius: .5rem;
    font-size: 1.75rem;
    color: var(--White);
    background-color: #3c3c3c;
    width: 30%;
    /* Set a fixed width */
    max-width: 30%;
    /* Ensure a maximum width */
    box-shadow: 0px 4px 8px rgba(0, 0, 0, 0.1);
    /* Add a subtle shadow */
    overflow: hidden;
    /* Prevent content overflow */
}

.projects-card img {
    width: 100%;
    height: auto;
    border-top-left-radius: .5rem;
    border-top-right-radius: .5rem;
}

.projects-card-desc {
    padding: 1rem;
    display: flex;
    flex-direction: column;
    flex-grow: 1;
    justify-content: space-between;
    /* Space out the content */
}

.projects-card-desc h2 {
    font-size: 1.5rem;
    margin: 0;
    /* Remove default margin */
}

.projects-card-desc p {
    margin: .5rem 0;
    font-size: 1rem;
}

.projects-card .buttons {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    margin-top: auto;
    /* Push the button to the bottom */
}

.btn-Myprojects {
    display: inline-flex;
    background-color: var(--Red);
    transition: background-color 0.5s ease-in-out;
    align-items: center;
    justify-content: center;
    padding: 0.5rem 1rem;
    /* Add padding to the button */
    color: var(--White);
    /* Ensure button text color is white */
    text-decoration: none;
    /* Remove underline from the link */
    border: none;
    /* Remove default button border */
    cursor: pointer;
    /* Pointer cursor on hover */
}

.btn-Myprojects:hover {
    background-color: var(--RedHover);
    cursor: pointer;
}

.btn-Myprojects a {
    color: inherit;
    /* Inherit the button text color */
    text-decoration: none;
    /* Remove underline from the link */
}

#projects button {
    border-radius: .5rem;
}


/*CV*/
#cv {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: space-evenly;
    color: var(--White);
    font-size: 1rem;
    min-height: calc(100vh - 1rem);
    margin-top: 1rem;
}

#cv>h1 {
    margin-top: 1.5rem;
}

.CVcontainer {
    display: flex;
    flex-wrap: wrap;
    width: 80%;
}

.box {
    color: var(--White);
    font-size: 1rem;
    padding: 1rem;
    margin: .25rem;
    margin-bottom: 1rem;
    background-color: var(--Grey);
    transition: all .5s ease-in-out;
    box-shadow: 0rem 0rem 0px 0px #da0404;
    border-radius: 1rem;
    cursor: default;
}

.big-box {
    flex-basis: 100%;
    color: var(--White);
    font-size: 1rem;
    padding-block: 1rem;
    padding-left: 1rem;
    height: fit-content;
    margin-bottom: 1rem;
    background-color: var(--Grey);
    transition: all .5s ease-in-out;
    box-shadow: 0rem 0rem 0px 0px #da0404;
    border-radius: 1rem;
    cursor: default;
}

.flx1 {
    flex: 1;
    flex-basis: calc(33.33% - .5rem);
    /* Adjust the margin as needed */
}

.flx2 {
    flex: 2;
    flex-basis: calc(50% - .5rem);
    /* Adjust the margin as needed */
}

.flx3 {
    flex: 3;
    flex-basis: calc(100% - .5rem);
    /* Adjust the margin as needed */
}

.cmpt {
    text-align: center;
}

.box:hover, .big-box:hover {
    box-shadow: 0rem 0rem 15px 1px #da0404;
}

.cvTitle {
    font-size: 2.5rem;
    font-weight: 800;
    margin-bottom: .375rem;
}

.cvDesc {
    font-size: 1.5rem;
    font-weight: 500;
    margin-bottom: .125rem;
}

.row {
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: center;
    margin-inline-end: .75rem;
}

.row>div {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    text-align: center;
    background-color: #585858;
    border-bottom: var(--White) .25rem solid;
    transition: all .50s ease-in-out;
    height: 12rem;
}

.row>div:nth-child(1) {
    border-bottom: darkred .25rem solid;
    transition: all .50s ease-in-out;
}

.row>div:nth-child(1):hover {
    border-bottom: rgb(255, 0, 0) .5rem solid;
    box-shadow: 0rem 0rem 15px 1px rgb(255, 0, 0);

}

.row>div:nth-child(2) {
    border-bottom: rgb(31, 0, 145) .25rem solid;
    transition: all .50s ease-in-out;
}

.row>div:nth-child(2):hover {
    border-bottom: rgb(55, 0, 255) .5rem solid;
    box-shadow: 0rem 0rem 15px 1px rgb(55, 0, 255);
}

.row>div:nth-child(3) {
    border-bottom: rgb(99, 1, 50) .25rem solid;
    transition: all .50s ease-in-out;
}

.row>div:nth-child(3):hover {
    border-bottom: rgb(209, 3, 106) .5rem solid;
    box-shadow: 0rem 0rem 15px 1px rgb(209, 3, 106);
}

.row>div:hover {
    scale: 95%;
}

.row>div>img {
    width: 100px;
}


.programming {
    display: flex;
    align-items: center;
    justify-content: center;
    flex-direction: column;
    height: auto;
    width: 80%;
}

.programming .cvTitle {
    text-align: left;
}

.programming-container {
    display: flex;
    align-items: center;
    justify-content: center;
    flex-direction: column;
}


.programming div {
    width: max-content;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-direction: row;
}

.programming .box {
    box-shadow: 0px 0px 0px rgba(0, 0, 0, 0);
}

.programming .box:hover {
    box-shadow: 0px 0px 0px rgba(0, 0, 0, 0);
}

.programming div img {
    width: 100px;
    justify-content: center;
    align-items: center;
}

.programming div strong {
    margin-left: 1rem;
}

.programming-container>.box {
    color: var(--White);
    font-size: 1rem;
    padding: 1rem;
    margin: .25rem;
    margin-bottom: 1rem;
    background-color: transparent;
    transition: all .5s ease-in-out;
    box-shadow: 0rem 0rem 0rem 0rem #da0404;
    border-radius: 0;
}

.webdev {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    width: 80%;
}

.webdev img {
    width: 40%;
    justify-content: center;
    align-items: center;
}

.redLn {
    border-bottom: var(--Red) .25rem solid;
}

.redLn:hover {
    border-bottom: var(--Red) .25rem solid;
}

/*CV colors*/
.CVred {
    transition: all .5s ease-in-out;
    color: var(--White);
    text-shadow: 0rem 0rem .625rem rgba(0, 0, 0, 1);
}

.CVred:hover {
    text-shadow: 0rem 0rem 1.25rem #fa0101;
    cursor: default;
}




#cv button {
    margin-block: 2rem;
    font-size: 1.5rem;
    font-weight: 600;
    display: inline-block;
    outline: 0;
    border: 0;
    cursor: pointer;
    will-change: box-shadow, transform;
    background: var(--Red);
    box-shadow: 0px 0.01em 0.01em rgb(45 35 66 / 40%), 0px 0.3em 0.7em -0.01em rgb(45 35 66 / 30%), inset 0px -0.01em 0px rgb(58 65 111 / 50%);
    padding: 0 2em;
    border-radius: 0.3em;
    color: #fff;
    height: 2.6em;
    text-shadow: 0 1px 4px rgb(0 0 0 / 80%);
    transition: box-shadow 0.15s ease, transform 0.15s ease;
}

#cv button:hover {
    box-shadow: 0px 0.1em 0.2em rgb(45 35 66 / 40%), 0px 0.4em 0.7em -0.1em rgb(45 35 66 / 30%), inset 0px -0.1em 0px #000000;
    transform: translateY(-0.1em);
}

#cv button:active {
    box-shadow: inset 0px 0.1em 0.6em #da0404;
    transform: translateY(0em);
}

/*END SECTIONS*/

footer {
    display: flex;
    text-align: center;
    align-items: center;
    justify-content: center;
    color: var(--White);
}

footer p {
    margin-block: 2rem;
}

/* Base Styles */
.menu-container {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 1rem;
    background-color: var(--DarkGray);
    color: var(--White);
}

.menu-logo img {
    height: 50px;
    /* Adjust based on your logo's dimensions */
    width: auto;
}

.menu ul {
    display: flex;
    list-style: none;
    margin: 0;
    padding: 0;
}

.menu li {
    margin-left: 2rem;
}

.menu a {
    text-decoration: none;
    color: var(--White);
    font-size: 1rem;
    font-weight: 600;
    transition: color 0.3s ease;
}

.menu a:hover {
    color: var(--Red);
    /* Adjust based on your color scheme */
}


/* Base Styles */
.menu-container {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 1rem;
    backdrop-filter: blur(10px);
    /* Apply blur effect */
    -webkit-backdrop-filter: blur(10px);
    /* For Safari */
    color: var(--White);
    position: fixed;
    /* Make the nav bar stick to the top */
    top: 0;
    /* Position it at the top of the viewport */
    width: 100%;
    /* Make sure it spans the entire width */
    z-index: 1000;
    /* Ensure it stays on top of other content */
}

/* Adjust for Content */
body {
    margin: 0;
    padding-top: 4rem;
    /* Adjust this value to match the height of your nav */
}

/* Menu and Logo */
.menu-logo img {
    height: 50px;
    width: auto;
}

.menu ul {
    display: flex;
    list-style: none;
    margin: 0;
    padding: 0;
}

.menu li {
    margin-left: 2rem;
}

.menu a {
    text-decoration: none;
    color: var(--White);
    font-size: 1rem;
    font-weight: 600;
    transition: color 0.3s ease;
}

.menu a:hover {
    color: var(--Red);
    /* Adjust based on your color scheme */
}

/* Media Queries */
/* Tablets */
@media (max-width: 768px) {
    .menu a {
        font-size: 1.25rem;
    }


    #home h1 {
        font-size: 3rem;
    }

    #home p {
        font-size: 1.25rem;
    }


    #about {
        flex-direction: column;
    }

    #about h1 {
        text-align: center;
    }

    #about .about-img {
        margin-top: 3rem;
        width: 50%;
        display: flex;
        align-items: center;
        justify-content: center;
    }

    .projects-card {
        flex-direction: column;
        margin: 0;
    }

    .row>div>p {
        font-size: 1rem;
        max-height: fit-content;
        padding: .5rem;
    }

    .programming-container>.box {
        flex-direction: column;
        align-items: center;
        justify-content: space-evenly;
        width: 100%;
        text-align: center;
    }

    .programming-container>.box>img {
        margin-bottom: .5rem;
    }
}

/* Mobile Devices */
@media (max-width: 480px) {
    .menu a {
        font-size: 1.25rem;
    }


    #home h1 {
        font-size: 3rem;
    }

    #home p {
        font-size: 1.25rem;
    }


    #about {
        flex-direction: column;
    }

    #about h1 {
        text-align: center;
    }

    #about .about-img {
        margin-top: 3rem;
        width: 50%;
        display: flex;
        align-items: center;
        justify-content: center;
    }

    .projects-card {
        flex-direction: column;
        margin: 0;
    }

    .row>div>p {
        font-size: 1rem;
        max-height: fit-content;
        padding: .5rem;
    }

    .programming-container>.box {
        flex-direction: column;
        align-items: center;
        justify-content: space-evenly;
        width: 100%;
        text-align: center;
    }

    .programming-container>.box>img {
        margin-bottom: .5rem;
    }
}