#Searchbar{
    height: fit-content;
    font-size: 12px;
    background-color: #222;
    border: none;
    width: 300px;
    padding: 10px;
    margin-top: 25px;
    margin-left: 100px;
    border-radius: 20px;
    padding-left: 20px;
    color: #ddd;
    outline: none;
    transition: background-color var(--transitionBack);
}
#Searchbar:focus{
    background-color: #252525;
    transition: background-color var(--transitionTo);
}
#RocketCategories{
    height: 150px;
    width: 100%;
    margin-top: 50px;
    display: flex;
}
#RocketCategories div{
    height: 100%;
    margin-right: 10px;
}
#RocketCategories div div{
    height: 100%;
    width: 100%;
    background: linear-gradient(rgba(255, 255, 255, 0.00), rgba(0, 0, 0, 0.5));
    opacity: 0;
    cursor: pointer;
    position: relative;
    z-index: 6;
    transition: opacity var(--transitionBack);
}
#RocketCategories div div:hover{
    opacity: 1;
    transition: opacity var(--transitionTo);
}
#RocketCategories div h5{
    padding-left: 10px;
    position: relative;
    z-index: 7;
    transform: translateY(-30px);
    cursor: pointer;
    user-select: none;
}
#RocketCategories div img{
    height: 100%;
    border-radius: 5px;
    transform: translateY(-168px);
    position: relative;
    z-index: 5;
}
#AllRockets{
    height: 500px;
    width: 100%;
    margin-top: 20px;
}
#AllRockets div{
    width: 100%;
    margin-top: 15px;
    display: flex;
}
#AllRockets div div{
    height: 150px;
    width: 300px;
    margin-left: 28px;
    background-color: var(--bk-color);
    border-radius: 5px;
    position: relative;
    padding: 0;
    cursor: default;
    user-select: none;
}
#AllRockets div div .StatusIND{
    height: 15px;
    width: 15px;
    position: absolute;
    background-color: rgb(0, 196, 0);
    border-radius: 10px;
    top: -2px;
    left: -2px;
    margin: 0;
}
#AllRockets div div .RocketSilhouette{
    height: calc(100% - 20px);
    aspect-ratio: 1 / 2;
    margin-top: 10px;
    margin-left: 10px;
}
#AllRockets div div .RocketContent{
    height: 120px;
    width: 190px;
    border-radius: 0;
    margin-left: 20px;
    color: #bbb;
    display: block;
}
#AllRockets div div .RocketContent h4{
    font-size: 20px;
}
#AllRockets div div .RocketContent .RocketTags{
    height: 12px;
    width: 100px;
    margin: 0;
    margin-left: 5px;
    margin-top: 3px;
    border-radius: 0;
}
#AllRockets div div .RocketContent .RocketTags p{
    font-size: 10px;
    margin-right: 5px;
}
#AllRockets div div .RocketContent .RocketTags .CDOT{
    font-size: 15px;
    transform: translateY(-7px);
    user-select: none;
}
#AllRockets div div .RocketContent .RocketTimeline{
    position: absolute;
    height: 20px;
    width: 180px;
    top: 90px;
    left: 0;
    margin: 0;
    border-radius: 0;
}
#AllRockets div div .RocketContent .RocketTimeline .Line{
    width: 100%;
    height: 1px;
    background-color: #bbb;
    position: absolute;
    margin: 0;
    bottom: 0;
    transform: translateY(50%);
    z-index: 4;
}
#AllRockets div div .RocketContent .RocketTimeline .Point{
    height: 5px;
    width: 5px;
    background-color: #bbb;
    margin: 0;
    position: absolute;
    z-index: 5;
}
#AllRockets div div .RocketContent .RocketTimeline .HolePoint{
    height: 3px;
    width: 3px;
    border: 1px #bbb solid;
    background-color: #222;
    margin: 0;
    position: absolute;
    z-index: 5;
}
#AllRockets div div .RocketContent .RocketTimeline .Left{
    bottom: 0;
    left: 0;
    transform: translate(-50%, 50%);
}
#AllRockets div div .RocketContent .RocketTimeline .Right{
    bottom: 0;
    right: 0;
    transform: translate(50%, 50%);
}
#AllRockets div div .RocketContent .RocketTimeline .Ready{
    bottom: 0;
    left: 75%;
    transform: translate(-50%, 50%);
}
#AllRockets div div .RocketContent .RocketTimeline .ProgressLine{
    height: 2px;
    background-color: #bbb;
    position: absolute;
    margin: 0;
    bottom: 0;
    left: 0;
    border-radius: 0;
    transform: translate(0, 50%);
    z-index: 4;
}
#AllRockets div div .RocketContent .RocketTimeline .ProgressIND{
    height: 6px;
    width: 1px;
    background-color: #bbb;
    position: absolute;
    margin: 0;
    bottom: 0;
    border-radius: 0;
    transform: translate(0, 50%);
    z-index: 4;
}
#AllRockets div div .RocketContent .RocketTimeline p{
    font-size: 10px;
}
#AllRockets div div .RocketMoreContent{
    position: absolute;
    bottom: 0;
    left: 0px;
    height: 0px;
    width: calc(100% - 0px);
    background-color: #151515;
    margin: 0;
    border-radius: 0;
    border-bottom-left-radius: 5px;
    border-bottom-right-radius: 5px;
    transform: translateY(calc(100% - 10px));
    z-index: 10;
    filter: drop-shadow(5px 10px 5px black);
    transition: height 0.25s;
}
#AllRockets div div:hover .RocketMoreContent{
    height: 270px;
    transition: height 0.5s;
}
#AllRockets div div .RocketMoreContent .TopCover{
    position: absolute;
    top: 0;
    left: 0;
    height: 10px;
    width: 100%;
    background-color: var(--bk-color);
    margin: 0;
    border-radius: 0;
    border-bottom-left-radius: 5px;
    border-bottom-right-radius: 5px;
    display: none;
}
#AllRockets div div .RocketMoreContent .RocketLinks{
    height: 35px;
    width: 270px;
    position: absolute;
    margin: 0;
    margin-left: 15px;
    border-radius: 0;
    top: 0;
    background: none;
    cursor: pointer;
    opacity: 0;
    transition: opacity 0.15s, top 0.15s;
}
#AllRockets div div:hover .RocketMoreContent .RocketLinks{
    opacity: 1;
    top: 12px;
    transition: opacity 0.5s, top 0.5s;
}
#AllRockets div div .RocketMoreContent .RocketLinks h4{
    font-size: 9px;
    background-color: #222;
    padding: 0;
    height: fit-content;
    width: fit-content;
    padding: 4px;
    margin-right: 8px;
    border-radius: 10px;
    padding-left: 10px;
    padding-right: 10px;
    margin-top: 4px;
    transition: background-color 0.15s;
}
#AllRockets div div .RocketMoreContent .RocketLinks h4:hover{
    background-color: #1d1d1d;
    transition: background-color 0.25s;
}
#AllRockets div div .RocketMoreContent ul{
    margin: 0;
    width: 270px;
    border-radius: 0;
    margin-top: 20px;
    margin-left: 15px;
    list-style: none;
    padding: 0;
    position: relative;
    transition: all 0.25s;
}
#AllRockets div div:hover .RocketMoreContent ul{
    margin-top: calc(25px + 20px);
    transition: all 0.5s;
}
#AllRockets div div .RocketMoreContent li{
    margin-bottom: -13px;
    position: relative;
    opacity: 0;
    transition: all 0.25s;
}
#AllRockets div div:hover .RocketMoreContent li{
    margin-bottom: 7px;
    opacity: 1;
    transition: all 0.5s;
}
#AllRockets div div .RocketMoreContent li p{
    font-size: 11px;
}
#AllRockets div div .RocketMoreContent li .SpecNumber{
    position: absolute;
    top: 50%;
    right: 0;
    font-size: 9px;
    color: #aaa;
    transform: translateY(-50%);
}