:root {
    --black: #0F0F0F;
    --white: #FFFBF5;
    --purple: #E5B8F4;
}

* {
    box-sizing: border-box;
}

body {
    margin: 0;
    padding: 0;
    font-family: sans-serif;
    background-color: var(--black);
    color: var(--white);
    overflow-x: hidden;

    display: flex;
    flex-direction: column;
    min-height: 100vh;
}

.massiveContainer {
    min-height: 100vh;
    display: flex;
    flex-direction: column;
}

main {
    height: 100%;
    flex-grow: 1;

    a {
        color: wheat;

        &:visited {
            color: wheat;
        }
    }
}

.navigation-header {
    background-color: rgb(73, 51, 153);
    padding: 0 15px;
    height: 64px;
    display: flex;
    justify-content: center;
    align-items: center;

    nav {
        width: 100%;
        max-width: 1200px;
        display: flex;
        justify-content: space-between;
        align-items: center;

        .logo-container>a {
            color: ghostwhite;
            text-decoration: none;
            font-weight: 700;
            font-size: 26px;
        }

        .logo-container img {
            max-width: 64px;
            filter: drop-shadow(0 0 0.75rem black);
        }

        .navigation-items {
            display: flex;
            gap: 40px;
            z-index: 1500;
            transition: all ease-in-out 300ms;
        }

        .navigation-items>a {
            color: ghostwhite;
            text-decoration: none;
            font-weight: 500;
            font-size: 16px;
            transition: .4s ease-in-out;
        }

        .navigation-items>a:hover {
            color: white;
        }

        .hamburger {
            display: none;
            font-size: 20px;
            font-weight: 800;
            color: white;
        }

        @media screen and (max-width:768px) {
            .hamburger {
                display: flex;
                cursor: pointer;
            }

            .hamburger #closeHam {
                display: none;
            }

            .navigation-items {
                display: none;
                flex-direction: column;
                align-items: center;
                position: absolute;
                right: 0;
                top: 58px;
                background-color: rgb(73, 51, 153);
                width: 100%;
                height: calc(100vh - 58px);
                padding-top: 60px;
                gap: 10vh;
            }
        }
    }
}

.hero {
    width: 100%;
    height: 500px;
    overflow: hidden;

    @media only screen and (min-width: 2000px) {
        & {
            height: 750px;
        }
    }

    .heroText {
        z-index: 999;
        left: 0;
        right: 0;
        position: absolute;
        text-align: center;
        pointer-events: none;
        -webkit-text-stroke: 1px black;

        @media only screen and (min-width: 2000px) {
            & {
                transform: perspective(1px) translateY(30%);
            }
        }

        h1 {
            font-size: 3rem;
            margin-bottom: 0;
            padding-bottom: 0;
        }

        h2 {
            font-size: 2rem;
            margin-top: 0;
            padding-top: 0;
        }

        .heroLogo {
            margin-top: 50px;
            max-height: 250px;

            filter: drop-shadow(0 0 0.75rem black);
        }

        .heroTitle {
            width: 50%;

            @media only screen and (max-width: 950px) {
                & {
                    width: 95%;
                }
            }
        }
    }

    .showcase {
        display: flex;
        filter: blur(4px);
        transform: skewX(-25deg) translateX(-7%);
        width: 115%;
        justify-content: space-between;
        position: relative;
        height: 100%;

        @media only screen and (max-width: 950px) {
            & {
                width: 150%;
                transform: skewX(-25deg) translateX(-15%);
            }
        }

        .item {
            text-align: center;
            overflow: hidden;
            width: 100%;
            height: 100%;
            transition: all ease-in-out 300ms;

            .subitem {
                transform: skewX(25deg);
                justify-content: center;
                display: flex;
                height: 108%;

                img {
                    height: 100%;

                    @media only screen and (min-width: 2000px) {
                        & {
                            height: 115%;
                        }
                    }
                }
            }

            &:hover {
                flex-grow: 2;
                width: 250%;
                transition: all ease-in-out 300ms;
            }
        }
    }
}

.story {
    background: #5F5D9C;

    .container {
        display: grid;
        max-width: 1200px;
        margin: 0 auto;
        justify-content: center;
        gap: 1rem;
        padding: 15px;

        @media (min-width: 600px) {
            & {
                grid-template-columns: repeat(2, 1fr);
                padding: 0;
            }
        }

        .side {
            padding: 20px;
        }

        .reflex {
            display: grid;
            grid-template-columns: repeat(2, 1fr);
            justify-content: center;
            text-align: center;

            .icon {
                svg {
                    width: 128px;
                    display: block;
                    margin: auto;
                }

                img {
                    width: 128px;
                    display: block;
                    margin: auto;
                }

                a {
                    color: #FBF6EE;
                    text-decoration: none;

                    &:visited {
                        color: #FBF6EE;
                    }

                    &:hover {
                        color: #d6d0c7;
                        transition: all ease-in-out 300ms;
                    }
                }
            }
        }

        h2 {
            text-align: center;
        }
    }
}

.genericContainer {
    padding: 15px;
    margin: 0 auto;
    max-width: 1000px;
    margin-bottom: 50px;

    h1 {
        font-size: 3rem;
        text-align: center;
    }

    h2 {
        text-align: center;
    }

    p {
        font-size: 1rem;
        text-align: center;
    }

    ul {
        max-width: 250px;
        margin: 0 auto;
    }

    table {
        margin-left: auto;
        margin-right: auto;
        border-collapse: collapse;
        display: table;
        overflow: initial;
        min-width: 100%;

        th {
            text-align: start;
            letter-spacing: 0.05em;
            color: grey;
        }

        tr {
            border-top: 1px solid grey;

            &:hover {
                background-color: wheat;
                color: black;
            }
        }
    }
}

footer {
    background-color: #5F5D9C;
    display: block;
    padding: 3px;
    text-align: center;
    bottom: 0;
    flex: 0 1 auto;
}

.team {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    justify-content: center;
    align-items: center;

    @media only screen and (max-width: 950px) {
        & {
            grid-template-columns: repeat(2, 1fr);
        }
    }

    .member {
        border: 1px solid grey;
        height: 350px;
        width: 200px;
        margin-top: 10px;
        place-self: center;
        overflow: hidden;

        h2 {
            text-align: center;
        }

        h3 {
            text-align: center;
        }

        img {
            max-height: 200px;
            border-bottom: 1px solid grey;
        }
    }
}

.projects {
    display: grid;
    justify-content: center;
    align-items: center;
    grid-gap: 15px;
    grid-auto-rows: 1fr;
    grid-template-columns: repeat(2, 1fr);

    @media only screen and (max-width: 950px) {
        grid-template-columns: repeat(1, 1fr);
    }

    .pr {
        border: 2px solid grey;
        margin-top: 15px;
        height: 485px;
        overflow: hidden;

        p {
            padding: 15px;
            height: 110px;
        }

        a {
            color: wheat;

            &:visited {
                color: wheat;
            }
        }

        h2 {
            font-size: 2rem;
        }

        .wrapper {
            position: relative;

            img {
                position: relative;
                border-top: 2px solid grey;
                bottom: 0;
                max-width: 100%;
            }
        }
    }
}