@charset "UTF-8";
/* CSS Document */
/* SOFTFOXXO'S WEBSITE CSS STYLE */

/* GLOBALS */
* {
	color: white;
	margin: 0px;
	padding: 0px;
	text-decoration: none;
	text-align: center;
	border: none;
	font-family: 'Dosis', sans serif;
	font-size: 32px;
}
a {
	color: plum;
	cursor: pointer;
}
a:visited {
	color: plum;
	cursor: pointer;
}
a:hover {
	color: magenta;
	cursor: pointer;
}

body {
	background-color: black;
	color: white;
}
button {
	color: white;
	background-color: #2d002a;
	padding: 0.5vh;
	border-radius: 16px;
	width: 48vh;
	height: 7vh;
	max-width: 90%;
	min-width: 450px;
	-webkit-transition-duration: 0.1s;
	transition-duration: 0.1s;
	margin: auto;
	vertical-align: top;
	line-height: 6vh;
	filter: drop-shadow(1vh 1vh 0vh #140013);
}
button:hover {
	color: black;
	cursor: pointer;
}
button:active {
	color: white;
	cursor: pointer;
}

#footer {
    opacity: 0.2;
    background-color: transparent;
    margin-top: 2vh;
    margin-bottom: 1vh;
}

/* SCROLLING */
/* Container styles */
.scrolling-text-container {
    overflow: hidden;
}

/* Inner container styles */
.scrolling-text-inner {
    display: flex;
    white-space: nowrap;
    font-size: 16px;
    font-weight: 600;
    padding: 8px 0;
}

/* Text styles */
.scrolling-text {
    display: flex;
}

.scrolling-text-item {
    padding: 0 30px;
	color: grey;
	text-shadow: -1px 1px 2px #000,
				 1px 1px 2px #000,
				 1px -1px 2px #000;
				 -1px -1px 2px #000;
}

/* Apply the animation to the text items */
.scrolling-text-inner>div {
    animation: var(--direction) var(--marquee-speed) linear infinite;
}

/* Setting the Animation using Keyframes */
@keyframes scroll-left {
    0% {
        transform: translateX(0%);
    }

    100% {
        transform: translateX(-50%);
    }
}

@keyframes scroll-right {
    0% {
        transform: translateX(-50%);
    }

    100% {
        transform: translateX(0%);
    }
}