/* Landing Page CSS */

#newUserForm {
    border: 2px black solid;
    padding: 20px;
}


/* style logo */
#logo {
    border-radius: 3rem;
}


#particles-js {
    position: absolute;
    width: 100%;
    height: 100%;
    background-color: #453481;
    /* background-image: url(""); */
    background-repeat: no-repeat;
    background-size: cover;
    background-position: 50% 50%;
}

/* styling for footer */
.footer {
    /* background-color: rgb(138, 219, 180); */
    /* background-color: paleturquoise; */
    background-color: rgb(84, 72, 93);
    /* position: sticky; */
    bottom: 0;
    width: 100%;
    padding: 10px;
    opacity: 0.8;
    filter: (opacity=50);
}

/* icons */
.icons {
    display: flex;
    justify-content: center;
    
}

.icons img {
    margin-left: 20px;
}


/* animation styling for title */
.title {
    font-family: 'Roboto', sans-serif;
}

.text {
    position: relative;
}

.text span{
    position: absolute;
    background-color: #D1B000;
    transition: 0.5s;
}

.horizontal{
    width: 100%;
    height: 5px;
}

.horizontal.one {
    top: 0;
    left: 0;
}

.horizontal.two {
    right: 0;
    bottom: 0;
}

.text:hover .horizontal.one {
    width: 0px;
    transform: translateX(-1000px);
}

.text:hover .horizontal.horizontal.two {
    width: 0px;
    transform: translateX(1000px);
}

.vertical {
    height: 0%;
    width: 6px;
}

.vertical.one {
    top: 0;
    left: 0;
    transform: translateX(-0.75rem, -1000px);
}

.vertical.two {
    bottom: 0;
    right: 0;
    transform: translateX(0.75rem, 1000px);
}

.text:hover .vertical.one {
    height: 100%;
    transform: translate(-0.75rem, 0px);

}
.text:hover .vertical.two {
    height: 100%;
    transform: translate(0.75rem, 0px);
}