header {
    color: black !important;
    background-color: rgba(255, 255, 255, 0.9);
}
#nav-links a {
    color: black !important;
}
#spacer {
    height: 150px;
}
main {
    width: 90%;
    margin: auto auto 40px auto;
}
main h1 {
    font-size: 10vw;
    margin-top: 10px;
    margin-bottom: 20px;
}

#projects-container {
    margin-top: 50px;
}
.project-box-v1 {
    width: 100%;
    overflow: hidden;
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    margin-bottom: 100px;
}
.project-box-v2 {
    width: 100%;
    overflow: hidden;
    display: flex;
    flex-direction: row-reverse;
    justify-content: space-between;
    margin-bottom: 100px;
}
.left-proj {
    width: 35%;
    height: 500px;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
}
.left-proj-top {
    height: 49%;
    display: flex;
    flex-direction: row;
    justify-content: space-between;
}
.left-proj-top-img-first {
    width: 40%;
    height: 100%;
    object-fit: cover;
    border-radius: 10px;
}
.left-proj-top-img-second {
    width: 59%;
    height: 100%;
    object-fit: cover;
    border-radius: 10px;
}
.left-proj-bottom {
    height: 49%;
}
.left-proj-bottom-img{
    width: 100%;
    height: 100%;
    object-fit: cover;
    border-radius: 10px;
}
.center-proj {
    width: calc(40% - 30px);
    height: 470px;
    border-radius: 10px;
    padding: 15px;
    display: flex;
    flex-direction: column;
    justify-content:end;
}
.center-proj:hover .animated-button{
    width: 145px;
}
.project-title {
    font-size: 3vw;
    margin-top: 10px;
    margin-bottom: 10px;
}
.favicon-text {
    font-weight: bold;
    margin: 5px 0;
}
.right-proj {
    width: 24%;
    height: 500px;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
}
.right-proj img {
    width: 100%;
    height: 49%;
    object-fit: cover;
    border-radius: 10px;
}
#project-links {
    margin-top: 10px;
    display: flex;
    flex-direction: row;
    justify-content: left;
    gap: 20px;
    margin-bottom: 50px;
}
#project-links a:hover {
    width: 110px;
}

/* COLORS */
#project-1-text {
    background:
        linear-gradient(rgba(255,255,255,.65), rgba(255,255,255,.65)),
        radial-gradient(60rem 60rem at 20% 15%, rgba(255,255,255,.35), transparent 60%),
        radial-gradient(50rem 50rem at 80% 85%, rgba(255,255,255,.30), transparent 60%),
        linear-gradient(135deg, #00e08f 0%, #00c6d9 30%, #0076ff 65%, #0044cc 100%);
    background-blend-mode: normal, screen, screen, normal;
    color: #111;
}
#project-2-text {
    background:    
        linear-gradient(rgba(255,255,255,.65), rgba(255,255,255,.65)),
        radial-gradient(60rem 60rem at 20% 15%, rgba(255,255,255,.35), transparent 60%),
        radial-gradient(50rem 50rem at 80% 85%, rgba(255,255,255,.30), transparent 60%),
        linear-gradient(135deg, #a8d6f4 0%, #9ed2c1 35%,#f5c5cf 70%,#1d1e30 100%);
    background-blend-mode: normal, screen, screen, normal;
    color: #111;
}
#project-3-text {
    background:
        linear-gradient(rgba(255,255,255,.60), rgba(255,255,255,.60)),
        radial-gradient(60rem 60rem at 20% 15%, rgba(255,255,255,.35), transparent 60%),
        radial-gradient(50rem 50rem at 80% 85%, rgba(255,255,255,.30), transparent 60%),
        linear-gradient(135deg, #E8DDF9 0%, #D7C8FF 22%, #CDE8FF 48%, #CFF3EA 72%, #FFE0F1 100%);
    background-blend-mode: normal, screen, screen, normal;
    color: #111;
}
#project-4-text {
    background:
        linear-gradient(rgba(255,255,255,.65), rgba(255,255,255,.65)),
        radial-gradient(60rem 60rem at 20% 15%, rgba(255,255,255,.35), transparent 60%),
        radial-gradient(50rem 50rem at 80% 85%, rgba(255,255,255,.30), transparent 60%),
        linear-gradient(315deg, #f8e6d4 0%, #f5a25b 35%, #eb7726 70%, #8a4c26 100%);
    background-blend-mode: normal, screen, screen, normal;
    color: #111;
}
#project-5-text {
    background:
        linear-gradient(rgba(255,255,255,.65), rgba(255,255,255,.65)),
        radial-gradient(60rem 60rem at 20% 15%, rgba(255,255,255,.35), transparent 60%),
        radial-gradient(50rem 50rem at 80% 85%, rgba(255,255,255,.30), transparent 60%),
        linear-gradient(135deg, #fcefdc 0%, #c9ede3 30%, #f8a66c 65%, #f36c1d 100%);
    background-blend-mode: normal, screen, screen, normal;
    color: #111;
}

@media screen and (max-width: 768px) {
    main h1 {
        font-size: 15vw;
    }
    .project-box-v1, .project-box-v2 {
        flex-direction: column;
        height: auto;
    }
    .left-proj {
        height: 300px;
        width: 100%;
    }
    .center-proj {
        width: calc(100% - 30px);
        height: auto;
        margin: 5px 0;
    }
    .project-title {
        font-size: 10vw;
    }
    .right-proj {
        width: 100%;
        height: 300px;
        margin-top: 3px;
    }
}