style.css

:root{
     --background-color: rgb(19, 24, 48);
    /* --background-color: rgb(1, 2, 12); */
    --secondary: rgb(34, 41, 72);
}
body {
    background-color: var(--background-color);
    width: 100vw;
    height: 50rem;
    background-image:
    linear-gradient(transparent 0%, rgb(19, 24, 48) 80%),
    radial-gradient(ellipse at top center, rgb(44, 56, 114), transparent),
    radial-gradient(circle at top center, rgb(44, 56, 114), transparent);
    background-repeat: no-repeat;
}
.martinMono {
    font-family: "Martian Mono", system-ui;
    font-optical-sizing: auto;
    /*font-weight: weight;*/
    font-style: normal;
    font-variation-settings:
      "wdth" 100;
    color: white;
}
.header {
    color: white;
    font-size: 3.5rem;
    font-weight: 1;
    text-align: center;
    height: 7rem;
    width: 100%;
    position: relative;
    top: 0px;
    left: 0px;
    transition-duration: 0.5s;
    animation-name: title;
    animation-duration: 4s;
    animation-delay: .4s;
    animation-fill-mode: forwards;
}
.line {
    z-index: -100;
    border-left: .2rem solid white;
    height: 205rem;
    margin-left: calc(50% + 0.1rem);
    margin-top: 10rem;
    width: 0px;
    box-shadow: 0px 0px 1rem white;
    position: absolute;
    top: 5rem;
}
.box {
    transition: .5s;
    border-radius: .75rem;
    z-index: 1;
    font-size: 1.2rem;
    padding: 0px;
    margin: 0px;
    border: solid 0.01rem transparent;

}
.box:hover {
    z-index: 1;
    /* background-color: var(--secondary); */
    background-color: rgba(156, 161, 249, 0.105);
    filter: sepia(50px);
    backdrop-filter: blur(1rem);
    -webkit-backdrop-filter: blur(1rem);
    box-shadow: 0px 1.5rem 3rem rgba(0, 0, 0, 0.571), inset 0px 0px 4rem rgba(255, 255, 255, 0.179);
    transform: translateY(-1.5rem) translateX(1rem) rotate(5deg) scale(1.1);
    border: solid 0.05rem rgba(255, 255, 255, 0.362);

    .boxTime {
        transform: translateY(2rem);
        color: white;
    }
    .boxText {
        transform: translateY(2rem);
    }
    .image {
        transform: translateX(50vw);
        opacity: 1;
        transition-duration: 1s;
    }
}
.boxHeader {
    font-size: 1.6rem;
    font-weight: 700;
    padding: 1.5rem;
    padding-bottom: 0px;
    margin: 0px;
}
.right {
    translate: calc(50vw + 2rem);
    width: 45vw;
}
.left {
    width: 45vw;
    translate: calc(50vw - 45vw - 2rem);
}
.boxTime {
    font-weight: 1;
    font-size: 1.5rem;
    padding: 1.5rem;;
    padding-top: 0px;
    padding-bottom: 0px;
    margin: 0px;
    translate: 0px -2rem;
    color: transparent;
    transition: .5s;
}
.boxText {
    padding: 1.5rem;
    padding-top: .75rem;
    margin: 0px;
    translate: 0px -2rem;
    transition-duration: .6s;
    transition-delay: .14s;

}
.image {
    position: absolute;
    translate: -100vw -20vh;
    transition-duration: 1s;
    opacity: 0;
}
.arpnet {
    color: white;
    position: relative;
    top: 0px;
}
@keyframes title {
 25% {
    font-weight: 500;
    filter: drop-shadow(0px 0px .5rem white);
    font-size: 4rem;
    height: 9rem;
 }
 50% {
    font-weight: 500;
    filter: drop-shadow(0px 0px .5rem white);
    font-size: 4rem;
    height: 9rem;
 }
 100% {
    font-weight: 500;
    filter: drop-shadow(0px 0px 0px white);
    font-size: 4rem;
    height: 9rem;
 }
}