/* Var */
:root {
    --black: #0D1117;
    --light-grey: #161b22a1;
    --light-grey2: #3d434dc2;
    --purple: #6f3fc948;
    --green: rgba(38, 255, 0, 0.082);
    --blue: #00f7ff18;
    --gap: 1.5rem;
    --border-rad-sml: 0.4rem;
}

/* Utility */
.grid {
    display: grid;
}

.flex {
    display: flex;
    gap: 2rem;
    align-items: center;
}

.nav,
.header,
.card {
    border-radius: var(--border-rad-sml);
    outline: 1px solid rgba(255, 255, 255, 0.178);
    box-shadow: 0 4px 8px rgba(0, 0, 1, 0.6);
}

.card {
    outline: 1px solid rgba(255, 255, 255, 0.3);
}

/* Base */
html {
    background-image: url(img/bg.webp);
    background-position: 70% 0;
}

body {
    font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
    color: white;
    padding-bottom: 2rem;
}

h1,
h2,
h3,
.header p,
.nav a {
    font-weight: 600;
}

h1,
h2 {
    font-size: 1.5rem;
    font-weight: 600;
}

img {
    filter: brightness(0) invert(1);
}

a,
a:visited {
    text-decoration: none;
}

a,
a:visited {
    color: inherit;
}

button {
    background-color: rgba(0, 0, 0, 0.178);
    border: none;
    border-radius: var(--border-rad-sml);
}

a,
button {
    transition: background-color 0.5s ease;
}

button:hover,
a:hover {
    cursor: pointer;
}

*:hover {
    transition: background-color 0.25s ease;
}

/* Main layout */
html {
    background-color: var(--black);
    height: 100%
}

body {
    font-size: 15px;
    grid-template-columns: 1fr 5fr;
    grid-template-rows: min-content min-content;

    margin: 1.5rem;
    gap: 1.5rem;
}

/* Header */
.header {
    grid-row: 1/2;
    grid-column: 2/3;

    background-color: var(--light-grey);
    padding: 1.5rem;
    gap: 2rem;
    backdrop-filter: blur(10px);

    transition: box-shadow 0.5s ease;
}

.header:hover {
    transition: all 0.5s ease;
    box-shadow: 0 0 100px rgba(255, 255, 255, 0.075);
}

.header-row-1,
.header-row-2 {
    justify-content: space-between;
    align-items: center;
}

.header-row-1 {
    gap: 15%;
}

.header-row-1 .right {
    gap: 1rem;
}

.header-row-1 .right img {
    filter: invert(1) brightness(0.75);
}

.header-row-1 a:not(.un) {
    border: 1px solid rgba(255, 255, 255, 0.151);
    padding: 0.25rem;
    border-radius: var(--border-rad-sml);
}

.header-row-2>.right {
    gap: 0.75rem;
}

.header-row-2 p {
    color: rgba(255, 255, 255, 0.788);
    font-weight: 400;
}

.header-row-2 span {
    font-weight: 600;
    color: white;
    font-size: 1.3rem;
    line-height: 30px;
}

.header button {
    text-align: center;
    width: 4rem;
    padding: 0.4rem 0.8rem;
}

.header button:hover,
.header a:hover {
    background-color: rgba(255, 255, 255, 0.041);
}

.search {
    flex: 2;
}

.search>input {
    flex: 1;
    height: 0.4rem;
    border-radius: 5rem;
    border: none;
    padding: 0.75rem;
}

.header button,
.header input {
    background-color: rgba(0, 0, 0, 0.247);
    outline: 1px solid rgba(255, 255, 255, 0.137);
    color: rgba(255, 255, 255, 0.76);
}

.header input:focus {
    outline-color: rgba(255, 255, 255, 0.315);
    box-shadow: 0 4px 8px rgba(0, 0, 1, 0.459);
}

.pfp {
    filter: none !important;
    border-radius: 50%;
}

.pfp-small {
    width: 1.5rem;
    border-radius: 0.25rem;
}

.pfp-large {
    width: 3rem;
}

/* Nav */
.nav {
    grid-column: span 1;
    grid-row: 1/-1;

    flex-direction: column;
    align-items: start;
    gap: 2rem;

    background-color: var(--light-grey);
    backdrop-filter: blur(10px);
    padding: 1.5rem;

    transition: box-shadow 0.5s ease;
}

.nav:hover {
    box-shadow: 0 0 100px rgba(255, 255, 255, 0.075);
    transition: box-shadow 0.5s ease;
}

.nav>.title {
    gap: 0.9rem;
}

.title>img {
    width: 2.5rem;
}

.nav>nav {
    flex-direction: column;
    gap: 4rem;
    width: 100%;
}

.main-nav,
.other-nav {
    align-self: start;
}

.main-nav img,
.other-nav img {
    margin-right: 2rem;
}

.nav ul {
    width: 100%;
}

.nav li {
    width: 100%;
    border-radius: var(--border-rad-sml);
}

.nav a {
    display: flex;
    align-items: center;
    padding: 1rem 0.5rem;

    border-radius: var(--border-rad-sml);
    border: 1px solid #0000;
    transition: background-color 0.25s ease;
}

.nav a:hover {
    background-color: #e5edff09;
    border-radius: var(--border-rad-sml);

    /* border: 1px solid rgba(255, 255, 255, 0.082); */
    transition: background-color 0.25s ease;
}

/* Main */
.main {
    grid-column: span 1;
    grid-row: span 1;

    grid-template-columns: 4fr 1fr;
    grid-template-rows: 1fr 20fr;
    gap: var(--gap);
}

.main>h2 {
    align-self: flex-end;
}

.projects {
    grid-column: 1/2;
    grid-row: 2/3;

    grid-template-columns: repeat(auto-fit, minmax(400px, 1fr));
    gap: var(--gap);
}

.card {
    background-color: var(--light-grey2);
    padding: 1.5rem;

    flex-direction: column;
    align-items: start;
    gap: 1rem;
    backdrop-filter: blur(10px);

    transition: all 0.5s ease;
    box-shadow: 0 0 0 rgba(0, 0, 0, 0);
}

.card:hover {
    cursor: pointer;
    background-color: #444b57;

    transition: all 0.5s ease;
    box-shadow: 0 0 130px var(--purple);
}

.card h3 {
    font-size: 1.2rem;
}

.card p {
    color: rgba(255, 255, 255, 0.829);
}

.card-icons {
    margin-left: auto;
    justify-content: end;
    gap: 0.75rem;
}

.card-icons>button {
    padding: 0.2rem 0.45rem;
    background-color: rgba(255, 255, 255, 0.103);
    border: 1px solid rgba(255, 255, 255, 0.151);
}

.card-icons>button:hover {
    background-color: rgba(255, 255, 255, 0.164);
}

.card-icons img {
    opacity: 0.75;
    width: 1.05rem;
}

/* Main right */
.main-right {
    grid-column: 2/3;
    grid-row: 2/3;

    flex-direction: column;
    gap: 2.5rem;
}


.trending>h2 {
    margin-bottom: 1.5rem;
}

.announcements h3,
.trending h3 {
    margin-bottom: 0.75rem;
}

.announcements>ul,
.trending>ul {
    gap: 1.5rem;
}

/* Load in animation */
/* Animations */
@keyframes fadeInUp {
    0% {
        transform: translateY(10%);
        opacity: 0;
    }

    100% {
        transform: translateY(0%);
        opacity: 1;
    }
}

.fadeInUp-animation {
    animation: 1.5s fadeInUp;
}


/* Media query */
@media (max-width: 910px) {
    html {
        background-position: 70% 120%;
    }

    body {
        margin: 0;
        grid-template-columns: 1fr;
        grid-template-rows: repeat(4, min-content);
        background-image: none;
        gap: 0;
    }

    .fadeInUp-animation {
        animation: none
    }

    .header,
    .nav {
        outline: none;
        box-shadow: none;
    }

    .header:hover,
    .nav:hover {
        box-shadow: none;
    }

    .header {
        grid-row: 1;
        grid-column: 1;
        border-bottom: none !important;
    }

    .header-row-1>.right,
    .header-row-2>.right {
        display: none;
    }

    .header-row-1 input {
        width: 10px !important;
    }

    .nav {
        grid-row: 2;
        gap: 2rem !important;
    }

    nav {
        flex-direction: column !important;
        gap: 1rem !important;
    }

    .main-nav,
    .other-nav {
        display: flex;
        flex-direction: row !important;
        flex-wrap: wrap;
        column-gap: 3rem;
    }

    .main-nav {
        padding-bottom: 1rem;
        border-bottom: 1px solid rgba(255, 255, 255, 0.089);
    }

    .other-nav {
        padding-top: 0;
    }

    .main-nav>li,
    .other-nav>li {
        width: 40%;
    }

    .announce-title,
    .title,
    .announcements {
        display: none !important;
    }

    .main {
        grid-template-columns: 1fr;
        grid-template-rows: repeat(2, min-content) !important;
        padding: 0 1rem;
        margin-top: 2rem;
    }

    .main-right {
        grid-column: 1;
        grid-row: 3;
        flex-direction: row;
        display: block;
    }

    .trending {
        margin-top: 1rem !important;
    }
}