/*
	
	
	
	URL of website: https://www.nohoru.org
	
	last modification: 10-01-2025 [dd-mm-yyyy]
	
	CSS code created by: Luca Gueli
	
	
	
	Copyright notice for content of this website (except Font Awesome icons):
	
	You are not allowed to (re-)use, edit and/or distribute any of the content - such as texts, images, or other media files - without prior permission by the copyright holder.
	
	The copyright holder is: Copyright (c) 2025 n-o-h-o-r-u͡ network. All rights reserved.
	
	
	
	Copyright notice for CSS code of this document:
	
	You can (re-)use, edit and/or distribute the CSS code without any prior permission.
	
	There is no copyright holder.
	
	
	
	Copyright notice for Font Awesome icons:
	
	This website makes use of the free Font Awesome library (https://www.fontawesome.com).
	
	All Font Awesome icons are property of the respective copyright holder(s).
	
	
	
*/



.ripple	{
	
	position: absolute;
	width: 100px;
	height: 100px;
	background-color: rgba(255, 105, 180, 0.6);
	border-radius: 50%;
	pointer-events: none;
	opacity: 0.8;
	animation-timing-function: ease-out;
	will-change: transform, opacity;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
	animation: rippleExpand 4s forwards;
	
	}

@keyframes rippleExpand	{
			
			0%	{
				
				transform: translate(-50%, -50%) scale(0);
				opacity: 1;
				
				}
			
			100%	{
				
				transform: translate(-50%, -50%) scale(5);
				opacity: 0;
				
				}
			
			}

.ripple:nth-child(1)	{
			
			background-color: rgba(255, 105, 180, 0.6);
			animation-duration: 4s;
			
			}

.ripple:nth-child(2)	{
			
			background-color: rgba(255, 182, 193, 0.6);
			animation-duration: 5s;
			
			}

.ripple:nth-child(3)	{
			
			background-color: rgba(255, 20, 147, 0.6);
			animation-duration: 6s;
			
			}

.ripple:nth-child(4)	{
			
			background-color: rgba(255, 192, 203, 0.6);
			animation-duration: 7s;
			
			}

.ripple:nth-child(5)	{
			
			background-color: rgba(255, 228, 225, 0.6);
			animation-duration: 8s;
			
			}



@media screen and (max-width: 600px)	{
					
					.ripple	{
						
						width: 50px;
						height: 50px;
						
						}
					
					}