*, *::after, *::before {
    box-sizing: border-box;
}

body {
    background-color: rgb(41, 41, 41);
    margin: 0;
}

p, h1, h2, h3, h4, h5, h6 {
    color: white;
}

div {
    width: max-content;
}

a {
    text-decoration: none;
}

button {
    padding: 0;
    border: none;
    font: inherit;
    color: inherit;
    background-color: transparent;
    cursor: pointer;
}

span {
    display: inline;
}

.neon-pink {
    color: white;
    filter: drop-shadow(0px 0px 2px rgb(255, 185, 247)) drop-shadow(0px 0px 16px rgb(255, 91, 230));
}

.neon-pink-ambient {
    user-select: none;
    color: white;
    filter: drop-shadow(0px 0px 80px rgb(101, 35, 255)) drop-shadow(0px 0px 2px rgb(255, 185, 247)) drop-shadow(0px 0px 16px rgb(255, 91, 230));
}

.neon-green {
    color: white;
    filter: drop-shadow(0px 0px 2px rgb(95, 255, 138)) drop-shadow(0px 0px 16px rgb(10, 237, 10));
}

.neon-green-ambient {
    color: white;
    filter: drop-shadow(0px 0px 80px rgb(222, 255, 156)) drop-shadow(0px 0px 2px rgb(95, 255, 138)) drop-shadow(0px 0px 16px rgb(10, 237, 10));
}

.neon-red {
    color: white;
    filter: drop-shadow(0px 0px 2px rgb(222, 117, 147)) drop-shadow(0px 0px 16px rgb(237, 6, 6));
}

.neon-red-ambient {
    color: white;
    filter: drop-shadow(0px 0px 80px rgb(184, 149, 234)) drop-shadow(0px 0px 2px rgb(222, 117, 147)) drop-shadow(0px 0px 16px rgb(237, 6, 6));
}

.neon-blue {
    color: white;
    filter: drop-shadow(0px 0px 2px rgb(187, 185, 255)) drop-shadow(0px 0px 16px rgb(127, 91, 255));
}

.neon-blue-ambient {
    user-select: none;
    color: white;
    filter: drop-shadow(0px 0px 80px rgb(60, 255, 232)) drop-shadow(0px 0px 2px rgb(187, 185, 255)) drop-shadow(0px 0px 16px rgb(127, 91, 255));
}

.neon-pink {
    color: white;
    filter: drop-shadow(0px 0px 2px rgb(255, 185, 247)) drop-shadow(0px 0px 16px rgb(255, 91, 230));
}

.neon-pink-ambient {
    user-select: none;
    color: white;
    filter: drop-shadow(0px 0px 80px rgb(101, 35, 255)) drop-shadow(0px 0px 2px rgb(255, 185, 247)) drop-shadow(0px 0px 16px rgb(255, 91, 230));
}

#neon-night {
    transition-property: all;
    transition-duration: 2.1s;
    transition-timing-function: cubic-bezier(.41,.81,.62,-0.46);
}

#neon-night.neon-pink-ambient {
    transition-timing-function: cubic-bezier(.44,2,.84,.07);
}

@media only screen and (max-width: 768px) {
    .general-text {
        margin-top: 50px;
        margin-bottom: 90px;
    }

    #title {
        height: max-content;
        width: 100%;
        margin: auto;
    }
    
    #neon-night {
        font-weight: 100;
    }

    h2 {
        font-size: 2rem;
        width: 90vw;
    }

    p {
        font-size: 1.2rem;
    }
    
    .center {
        margin: auto;
    }

    .general-text {
        width: 90%;
        margin: auto;
    }

    button.neon-pink-ambient {
        padding: 0.7rem;
        border: 1.5px solid rgb(162, 162, 162);
        margin: 2rem 0 2rem 0;
        font-family: system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif;
        color: rgb(162, 162, 162);
        filter: none;
    }
    
    button.neon-pink-ambient:active {
        border-color: white;
        color: white;
        filter: drop-shadow(0px 0px 36px rgb(232, 56, 202)) drop-shadow(0px 0px 4px rgb(232, 56, 202));
    }

    .gallery {
        display: flex;
        align-items: flex-start;
        flex-direction: row;
        overflow-y: hidden;
        overflow-x: scroll;
        height: 200px;
        width: 95vw;
        margin: auto;

        scroll-snap-type: x mandatory;
    }

    .galleryContainer {
        position: relative;
        margin: auto;
        margin-bottom: 80px;
    }

    .gallery-left {
        display: none;
    }

    .gallery-right {
        display: none;
    }

    .gallery-item {
        display: flex;
        box-sizing: content-box;
        height: 200px;
        width: 80vw;
        padding-left: 5vw;
        padding-right: 5vw;
        margin-right: 3vw;

        scroll-snap-align: start;

        align-items: center;
        justify-content: center;

        color: white;
        font-size: 1.2rem;

        flex-shrink: 0;

        background-color: rgb(52, 52, 52);
    }

    .footer {
        margin-top: 40px;
        display: block;
        height: 300px;
        width: 100%;

        background-color: rgb(20, 20, 20);
    }
}


@media only screen and (min-width: 768px) {
    .general-text {
        margin-top: 50px;
        margin-bottom: 90px;
    }

    #title {
        height: max-content;
        width: 100%;
        margin: auto;
    }
    
    #neon-night {
        font-weight: 100;
    }

    h2 {
        font-size: 2rem;
    }

    p {
        font-size: 1.2rem;
    }
    
    .center {
        margin: auto;
    }

    .general-text {
        width: 700px;
        margin: auto;
    }

    button.neon-pink-ambient {
        padding: 0.7rem;
        border: 1.5px solid rgb(162, 162, 162);
        margin: 2rem 0 2rem 0;
        font-family: system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif;
        color: rgb(162, 162, 162);
        filter: none;
    }
    
    button.neon-pink-ambient:hover {
        border-color: white;
        color: white;
    }
    
    button.neon-pink-ambient:active {
        border-color: white;
        color: white;
        filter: drop-shadow(0px 0px 36px rgb(232, 56, 202)) drop-shadow(0px 0px 4px rgb(232, 56, 202));
    }

    .gallery {
        display: flex;
        align-items: flex-start;
        flex-direction: row;
        overflow: hidden;
        height: 200px;
        width: 700px;
        margin: auto;
    }

    .galleryContainer {
        position: relative;
        margin: auto;
        margin-bottom: 80px;
    }

    .gallery-left {
        display: none;
        position: absolute;
        top: 0;
        left: 0;

        height: 200px;
        width: 50px;

        align-items: center;
        justify-content: center;

        color: white;
        font-size: 2rem;
        font-weight: bold;
        font-family: system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif;
        background-color: #00000048;
        opacity: 0.5;

        user-select: none;
    }

    .gallery-right {
        display: none;
        position: absolute;
        top: 0;
        left: 650px;

        height: 200px;
        width: 50px;

        align-items: center;
        justify-content: center;

        color: white;
        font-size: 2rem;
        font-weight: bold;
        font-family: system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif;
        background-color: #00000048;
        opacity: 0.5;

        user-select: none;
    }

    .gallery-right.hoverable, .gallery-left.hoverable {
        display: flex;
    }

    .gallery-left.hoverable:hover, .gallery-right.hoverable:hover {
        opacity: 1;
        background-color: #00000000;
        filter: drop-shadow(0px 0px 80px rgb(60, 255, 232)) drop-shadow(0px 0px 2px rgb(187, 185, 255)) drop-shadow(0px 0px 16px rgb(127, 91, 255));
    }

    .gallery-item {
        display: flex;
        box-sizing: content-box;
        height: 200px;
        width: 600px;
        padding-left: 50px;
        padding-right: 50px;

        align-items: center;
        justify-content: center;

        color: white;
        font-size: 1.2rem;

        flex-shrink: 0;

        background-color: rgb(52, 52, 52);
    }

    .footer {
        margin-top: 40px;
        display: block;
        height: 300px;
        width: 100%;

        background-color: rgb(20, 20, 20);
    }
}