*, *::after, *::before {
    box-sizing: border-box;
    /* outline: 1px solid red; */
}

body {
    background: rgb(5, 5, 5);
    color: rgb(243, 238, 238);
    font-family: system-ui, sans-serif;
    padding: 0;
    margin: 0;
}

header {
    height: 100dvh;
    display: flex;
    justify-content: center;
    align-items: center;
    background-image: url(images/header.webp);
    background-position: center;
    background-color: rgb(0, 0, 0, 0.5);
    background-blend-mode: darken;
}

header > .container {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 5vw;
    width: min(100ch, calc(100vw - 4em));
}

.pfp {
    border-radius: 50%;
    width: 25vw;
    max-width: 300px;
    border: 5px solid transparent;
    z-index: 1;
    background: linear-gradient(white, white) padding-box,
              linear-gradient(to bottom right, #0080ff, #00008b) border-box;
}

.name {
    animation: multicolor infinite 10s;
}

.intro {
    z-index: 1;
}

.intro > h1 {
    font-size: 5rem;
    display: inline
}

.intro > p {
    font-size: 1.1rem;
}

.socials > a {
    font-size: 2.5rem;
    background:rgb(152, 151, 151);
    color:rgb(5, 5, 5);
    border-radius: 50%;
    display: inline-flex;
    width: fit-content;
    align-items: center;
    justify-content: center;
    aspect-ratio: 1/1;
    width: 60px;
    text-decoration: none;
    animation: forwards slideIn 1s;
    position: relative;
    filter: blur(5);
    left: 200px;
    opacity: 0;
}

.socials > a:nth-child(2) {
    margin-inline: 0.2em;
    animation-delay: 100ms;
}

.socials > a:nth-child(3) {
    animation-delay: 200ms;
}

.socials > a:nth-child(4) {
    margin-inline: 0.2em;
    animation-delay: 300ms;
}

section {
    min-height: 100dvh;
    padding: 4em;
    font-size: 1.15rem;
    display: flex;
    align-items: center;
    justify-content: center;
}

.about > div {
    max-width: 70ch;
}

.about {
    background-image: url(images/starship1.jpeg);
    background-position: center;
    background-color: rgb(0, 0, 0, 0.7);
    background-blend-mode: darken;
}

.works {
    flex-direction: column;
    background: rgb(20, 20, 20);
}

.works > div {
    max-width: 80ch;
    width: 75vw
}

.tables {
    display: flex;
    justify-content: space-between;
}

.table {
    background-color: rgb(4, 4, 75);
    padding: 1em 2em;
    border-radius: 20px;
    width: 75vw;
    margin-bottom: 1em;
    max-width: 35ch;
}

.table li {
    list-style: none;
    margin-block: 0.5em;
}

.table ul {
    padding: 0;
}

.table a {
    color: rgb(201, 197, 197);
    font-size: 1.3rem;
    text-decoration: none;
}

.table a:hover {
    text-decoration: underline;
    color: white;
}

footer {
    text-align: center;
    padding-block: 2em;
    color: white;
}

footer a {
    color: rgb(201, 197, 197);
    margin-inline: 0.5em;
}

@media (prefers-reduced-motion: no-preference) {
    .table {
        transform: translateX(-45vw);
        filter: blur(50%);
        transition: 1s all;
    }
    .tables.show .table {
        transform: translateX(0);
        filter: blur(0);
    }
    .coding {
        transition-delay: 100ms;
    }


    .am {
        transform: translateX(-100%);
        filter: blur(50%);
        transition: 1000ms all;
    }
    .am > * {
        transform: translateX(-100%);
        filter: blur(50%);
        transition: 1000ms all;
    }
    .am > *:nth-child(2) {
        transition-delay: 100ms;
    }
    .am > *:nth-child(3) {
        transition-delay: 200ms;
    }
    .am > *:nth-child(4) {
        transition-delay: 300ms;
    }
    .am.show {
        filter: blur(0);
        transform: translateX(0)
    }
    .am.show > * {
        filter: blur(0);
        transform: translateX(0)
    }
}

@media only screen and (max-width: 900px) {
    .intro > h1 {
        font-size: 3rem;
    }
}

@media only screen and (max-width: 650px) {
    header > .container  {
        flex-direction: column;
    }
    .pfp {
        width: 50vw;
    }
    .intro {
        text-align: center;
    }

    .tables {
        flex-direction: column-reverse;
    }
}

@keyframes slideIn {
    to {
        filter: blur(0);
        left: 0;
        opacity: 1;
    }
}

@keyframes multicolor {
    0%, 100%, 15% {
        color: red;
    }
    30% {
        color: orange;
    }
    45% {
        color: yellow;
    }
    60% {
        color: green;
    }
    75% {
        color: blue;
    }
    90%, 95% {
        color: purple
    }
}