/*Text accents*/
.loud-pink {
    color: #ff00ff; /* Pink */
    font-family: Impact, sans-serif; /* Funky font family */
    text-shadow: 2px 2px 4px #ff00ff; /* Pink shadow */
    text-transform: uppercase; /* Uppercase text */
    letter-spacing: 2px; /* Increased letter spacing */
}

.loud-yellow {
    color: #ffff00; /* Yellow */
    font-family: "Comic Sans MS", cursive; /* Comic Sans MS font */
    text-shadow: 2px 2px 4px #ff007f; /* Orangey-pink shadow */
    text-transform: capitalize; /* Capitalize first letter of each word */
    letter-spacing: 1px; /* Letter spacing */
}

.loud-green {
    color: #00ff00; /* Green */
    font-family: "Courier New", monospace; /* Courier New font */
    text-shadow: 2px 2px 4px #00ff00; /* Green shadow */
    text-transform: lowercase; /* Lowercase text */
    font-size: 22px; /* Font size */
    letter-spacing: 1.5px; /* Letter spacing */
}

.loud-purple {
    color: #800080; /* Purple */
    font-family: "Arial Black", sans-serif; /* Arial Black font */
    text-shadow: 2px 2px 4px #800080; /* Purple shadow */
    letter-spacing: 2px; /* Letter spacing */
}

.loud-blue {
    color: #0000ff; /* Blue */
    font-family: "Verdana", sans-serif; /* Verdana font */
    text-shadow: 2px 2px 4px #0000ff; /* Blue shadow */
    letter-spacing: 2px; /* Letter spacing */
}

.loud-red {
    color: #ff0000; /* Red */
    font-family: "Georgia", serif; /* Georgia font */
    text-shadow: 2px 2px 4px #ff0000; /* Red shadow */
    letter-spacing: 1px; /* Letter spacing */
}

.loud-orange {
    color: #ffa500; /* Orange */
    font-family: "Trebuchet MS", sans-serif; /* Trebuchet MS font */
    text-shadow: 2px 2px 4px #ffa500; /* Orange shadow */
    letter-spacing: 1.5px; /* Letter spacing */
}

/*funky containers*/
.pink-container {
    width: 80%;
    height: 100%;
    background-color: #ff61ff; /* Bright pink background */
    border: 5px solid #00FF00; /* Green border */
    border-radius: 20px; /* Rounded corners */
    position: relative;
    perspective: 1000px; /* Perspective for 3D effect */
    margin: 50px auto; /* Center container */
}
/* Blue Container */
.blue-container {
    width: 80%;
    height: 100%;
    background-color: #61bfff; /* Light blue background */
    border: 5px solid #ff00ff; /* Magenta border */
    border-radius: 20px; /* Rounded corners */
    position: relative;
    perspective: 1000px; /* Perspective for 3D effect */
    margin: 50px auto; /* Center container */
}

/* Green Container */
.green-container {
    width: 80%;
    height: 100%;
    background-color: #bfff61; /* Light green background */
    border: 5px solid #ff61ff; /* Pink border */
    border-radius: 20px; /* Rounded corners */
    position: relative;
    perspective: 1000px; /* Perspective for 3D effect */
    margin: 50px auto; /* Center container */
}

/* Yellow Container */
.yellow-container {
    width: 80%;
    height: 100%;
    background-color: #ffff61; /* Light yellow background */
    border: 5px solid #6161ff; /* Blue border */
    border-radius: 20px; /* Rounded corners */
    position: relative;
    perspective: 1000px; /* Perspective for 3D effect */
    margin: 50px auto; /* Center container */
}

/* Purple Container */
.purple-container {
    width: 100%;
    height: 100%;
    padding: 20px 20px 20px 20px;
    background-color: #bf61ff; /* Light purple background */
    border: 5px solid #61ffb5; /* Light turquoise border */
    border-radius: 20px; /* Rounded corners */
    position: relative;
    perspective: 1000px; /* Perspective for 3D effect */
}

/*Image nonsense*/
.round-spin-wacky-image {
    width: 200px; /* Adjust size as needed */
    height: auto; /* Maintain aspect ratio */
    border-radius: 50%; /* Make it round */
    box-shadow: 0 0 20px rgba(1, 1, 1, 0.5); /* Add shadow */
    transition: transform 0.5s ease; /* Add transition for animation */
}

.round-spin-wacky-image:hover {
    transform: rotate(360deg) scale(1.2); /* Rotate and scale on hover */
}