.home-section {
    align-content: center;
    position: relative;
    height: 100vh;
    width: 100vw;  
    overflow: hidden;  
    background-image: 
    linear-gradient(90deg, black 1px, transparent 1px),
    linear-gradient(180deg, black 1px, transparent 1px),
    linear-gradient(90deg, transparent 100px, black 100px),
    linear-gradient(180deg, transparent 100px, black 100px);
    background-size: 48px 48px;

    /* background-image: radial-gradient(blue 2px, transparent 2px);
    background-size: 30px 30px; */
}

.home-container {
    margin-left: 6rem;
    max-width: max-content;
    display: grid;
}

.home-btn {
    text-align: center;
    width: 280px;
    margin-top: 4rem;
    /* justify-self: center; */
    background-color: white;
    font-size: 1.5rem;
    font-weight: 900;
    padding-block: .9rem;
    border: 3px solid black;
    box-shadow: 2px 2px;
    cursor: pointer;
}

.home-btn:hover {
    background-color: rgb(216, 216, 216);
    /* background: repeating-linear-gradient(
                -45deg,
                rgb(200, 200, 200),
                rgb(200, 200, 200) 8px,
                white 8px,
                white 16px
    ); */
}

.home-btn:active {
    box-shadow: 0 0;
}

.home-h1 {
    padding-top: 5rem;
    /* font-size: clamp(.8rem, 11vw + 2rem, 14rem); */
    font-size: clamp(4rem, 12vw, 14rem);
    font-weight: 200;
    line-height: 0.9;
}

.red {
    color: red;
    font-weight: 900;
}

.bikebrain {
    letter-spacing: 4px;
}

.red-wheel {
    right: -18vw;
    top: 150px;
    /* bottom: -25vh; */
    position: absolute;
    animation: Rotate 100s linear infinite;
    width: 55vw;
    height: 55vw;
}

.bottom-text, .right-text {
    font-size: clamp(1rem, .9vw + .6rem, 1.9rem);
    /* font-size: 1.5rem; */
    font-weight: 600;
    position: absolute;
    letter-spacing: 1.8px;
    font-family:  monospace;
}

.bottom-text {    
    bottom: 2rem;
    animation-name: LRmove;
    animation-duration: 12s;
    animation-iteration-count: infinite;
    animation-timing-function: linear;
}

.right-text {
    transform:translateY(-50%) rotate(-90deg);
    transform-origin: right center;
    right: 2.5rem;
    animation-name: TBmove;
    animation-duration: 14s;
    animation-iteration-count: infinite;
    animation-timing-function: linear;
}

@keyframes LRmove {
    0% {right: 15vw;}
    4% {right: 15vw;}
    50% {right: 3rem;}
    54% {right: 3rem;}
    100% {right: 15vw;}
}

@keyframes TBmove {
    0% {bottom: 55vh;}
    4% {bottom: 55vh;}
    54% {bottom: 70vh;}
    50% {bottom: 70vh;}
    100% {bottom: 55vh;}
}

@keyframes Rotate {
    from {transform: rotate(0deg)}
    to {transform: rotate(360deg);}
}

@media (max-width: 1400px) {
    body {
        background-image: none;
    }

    .right-text, .bottom-text {
        display: none;
    }

    main {
        grid-template-columns: auto;
    }

    .home-h1 {
        padding-inline: 0;
        /* text-align: center; */
    }

    /* ul {
        gap: 2rem;
    } */
}

@media (max-width: 1000px) {
    .home-section {
        text-align: center;
    }
    .red-wheel {
        /* right: -18vw;
        top: 150px; */
        /* bottom: -25vh; */
        position: relative;
        right:unset;
    } 
    .home-container {
        margin: auto;
        display: block;
    }
}