* {
    box-sizing: border-box;
}

.home-text {
    margin: 1rem 0;
}

#home-info-top {
    z-index: 2;
    position: relative;
    width: 41.875rem;
}

#home-neon-logo {
    z-index: 1;
    position: absolute;
    top: 4.375rem;
    right: 10%;
    width: 25rem;
    rotate: 10deg;
    pointer-events: none;
}

.home-social-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 2.5rem;
    height: 2.5rem;
    padding: 0;
    background-color: var(--primary);
    font-size: 1em;
    color: #000;
    font-weight: bold;
    text-decoration: none;
    border-radius: 50%;
    margin-right: 0.375rem;
    transition: all 0.3s cubic-bezier(0.4, 0.2, 0.2, 1);
}

.home-social-btn:hover {
    box-shadow: 0 0 1rem 0 #ffbd59cc;
}

#home-featured {
    width: 100%;
    height: 12.5rem;
    background-color: #1b1b1b55;
    /*backdrop-filter: blur(0.625rem);*/
    border-radius: 1.25rem;
    overflow-x: auto;
    overflow-y: hidden;
    z-index: 2;
    position: relative;
    display: flex;
    flex-direction: row;
    padding: 0.625rem;
    align-items: center;
    gap: 0.75rem;
}

.home-featured-titlebox {
    display: flex;
    justify-content: space-between;
    align-items: center;
    z-index: 2;
    position: relative;
}

.home-featured-seeall {
    color: #fff;
    text-decoration: none;
    font-size: 1.2em;
    transition: all 0.3s cubic-bezier(0.4, 0.2, 0.2, 1);
}

.home-featured-seeall:hover {
    color: var(--primary);
    font-weight: bold;
    text-shadow: 0 0 0.5rem #ffe15955, 0 0 0.75rem #ffbd5955, 0 0 1rem #ffbd5955;
}

.project-rating {
    background-image: linear-gradient(#000000c4);
    border-radius: 2rem;
    padding: 0.1rem 0.5rem;
    text-wrap: nowrap;
    color: var(--project-rating-color);
    background-color: var(--project-rating-color);
    outline: 0.0625rem solid var(--project-rating-color);
}

.project-rating.rating-N\/A {
    --project-rating-color: #d8d8d8;
}

.project-rating.rating-E {
    --project-rating-color: #8ef58a;
}

.project-rating.rating-7\+ {
    --project-rating-color: #f1e683;
}

.project-rating.rating-9\+ {
    --project-rating-color: #f39c74;
}

.project-rating.rating-13\+ {
    --project-rating-color: #fa7a7a;
}

.home-project-thm {
    height: 6rem;
    width: 10.67rem;
    aspect-ratio: 16/9;
    border-radius: 0.5rem;
}

.home-project {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
    padding: 0.25rem;
    box-sizing: content-box;
    text-decoration: none;
    width: 10.67rem;
    background-color: #14141488;
    border-radius: 0.625rem;
    transition: all 0.3s cubic-bezier(0.4, 0.2, 0.2, 1);
}

.home-project:hover {
    .home-project-name {
        font-weight: bold;
    }
    background-color: #42331b55;
    box-shadow: 0 0 1rem 0 #ffbd59cc;
}

.hp-2 {
    display: flex;
    flex-direction: column;
    gap: 0.125rem;
}

.hp-2 p {
    margin: 0;
}

.home-project-name {
    font-size: 1em;
    overflow: hidden;
    text-overflow: ellipsis;
    width: inherit;
    text-wrap: nowrap;
    color: var(--primary);
    transition: all 0.3s cubic-bezier(0.4, 0.2, 0.2, 1);
    white-space: nowrap;
}

.home-project-author {
    font-size: 0.8em;
    overflow: hidden;
    text-overflow: ellipsis;
    text-wrap: nowrap;
    white-space: nowrap;
    width: inherit;
    color: #ddd;
}

.home-project-stats {
    font-size: 0.72em;
    color: #888;
}

label {
    display: block;
    width: fit-content;
    padding-bottom: 0.3rem;
}

input:where([type="text"], [type="password"], [type="email"]) {
    font: inherit;
    border: none;
    border-radius: 2rem;
    outline: 0.125rem solid #ffbd5944;
    background-color: var(--block1);
    padding: 0.5rem 0.75rem;
}

.home-why-section {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 20px;
}

.why-reason {
    display: flex;
    flex-direction: column;
    padding: 10px;
    width: 100%;
    height: auto;
    border-radius: 10px;
    gap: 8px;
    background-color: #41331f55;
    border: 1px solid #ffbd59;
    box-shadow: 0 0 1rem 0 #ffbd5988;
    transition: all 0.3s cubic-bezier(0.4, 0.2, 0.2, 1);
    align-items: center;
    justify-content: center;
}

.why-reason:hover {
    background-color: #ffbd5955;
    transform: scale(1.03);
    box-shadow: 0 0 1rem 0 #ffbd59cc;
}

.why-reason > * {
    padding: 0;
    margin: 0;
}

.why-reason h3,
.why-reason i {
    font-size: 1.25em;
}

.why-reason p {
    font-size: 1em;
}

.why-disclaimer {
    font-style: italic;
    color: #ffffff99;
}

.why-disclaimer span {
    font-weight: bold;
}

.home-news-story {
    display: flex;
    flex-direction: column;
    gap: 0.4rem;
    width: 20rem;
    height: 20rem;
    padding: 0.6rem;
    background-color: #14141488;
}

.home-news-story > img {
    width: 100%;
    aspect-ratio: 16/9;
}

.home-news-story > p,
.home-news-story > h3 {
    margin: 0;
}

.home-news-story > p {
    overflow: hidden;
    text-overflow: ellipsis;
    width: inherit;
    height: 5rem;
}