/* CSS File for all Dropdown Related Classes */

.float {
	position: fixed;
	width: 60px;
    height: 60px;
    top: 50px;
	background-color: aliceblue;
	border-radius: 35px;
    transition: 500ms;
    box-shadow: 0 0 10px aliceblue;
    left: calc(50% - 500px);
    transform: translateX(-50%);
}

.float:hover {
    background-color: rgba(0,0,0);
}

.float-dropdown-parent {
    position: fixed;
	width: 60px;
    height: 60px;
    top: 50px;
	background-color: aliceblue;
	border-radius: 35px;
    vertical-align: middle;
    transition: 500ms;
    box-shadow: 0 0 10px aliceblue;
    left: calc(50% + 500px);
    transform: translateX(-25%);
}

.float-dropdown-parent:hover {
    background-color: rgba(0,0,0);
}

.float-dropdown {
    display: none;
    position: fixed;
	width: 120px;
    height: 50px;
    top: 50px;
	background-color: aliceblue;
	border-radius: 20px;
    transition: 500ms;
    animation: vanish 0.5s;
    box-shadow: 0 0 10px aliceblue;
    left: calc(50% + 500px);
    transform: translateX(-65%);
}

.float-dropdown:hover {
    background-color: #111111;
}

.float-dropdown-scroll {
    display: none;
    position: fixed;
	width: 50px;
    height: 50px;
    top: 50px;
	background-color: aliceblue;
	border-radius: 20px;
    transition: 500ms;
    animation: vanish 0.5s;
    box-shadow: 0 0 10px aliceblue;
}

.float-dropdown-scroll:hover {
    background-color: #111111;
}

.float-dropdown-open {
    display: block;
    position: fixed;
	width: 140px;
    height: 50px;
    top: 50px;
	background-color: aliceblue;
	border-radius: 20px;
    transition: 500ms;
    animation: appear 0.5s;
    box-shadow: 0 0 10px aliceblue;
    left: calc(50% + 500px);
    transform: translateX(-65%);
}

.float-dropdown-open:hover {
    background-color: #111111;
}

.gradient-text-button-drop {
    font-family: var(--font-main);
    background: linear-gradient(to right, var(--gradient-lef), var(--gradient-mid), var(--gradient-rig));
    background-size: 200% 200%;
    animation: rainbow 2s ease-in-out infinite;
    background-clip: text;
    -webkit-background-clip:text;
    font-weight: bolder;
    color: #111111;
    transition: 500ms;
    font-size: 1.5em;
    text-align: left;
    border: none;
    margin: 0;
    position: absolute;
    top: 50%;
    left: 50%;
    -ms-transform: translate(-50%, -50%);
    transform: translate(-50%, -50%);
}

.gradient-text-button-drop:hover {
    color:rgba(0,0,0,0);
}

.gradient-text-button-drop-parent {
    font-family: var(--font-main);
    background: linear-gradient(to right, var(--gradient-lef), var(--gradient-mid), var(--gradient-rig));
    background-size: 200% 200%;
    animation: rainbow 2s ease-in-out infinite;
    background-clip: text;
    -webkit-background-clip:text;
    font-weight: bolder;
    color: #111111;
    transition: 500ms;
    font-size: 50px;
    text-align: center;
    border: none;
    margin: 0;
    position: absolute;
    top: 50%;
    left: 50%;
    -ms-transform: translate(-50%, -50%);
    transform: translate(-50%, -50%);
}

.gradient-text-button-drop-parent:hover {
    color:rgba(0,0,0,0);
}

/* Nav-Button Fade In and Out Keyframes */

@keyframes appear {
    from {
        opacity: 0;
    }

    to {
        opacity: 1;
    }
}

@keyframes vanish {
    from {
        display: block;
        opacity: 1;
    }

    to {
        display: none;
        opacity: 0;
    }
}