Module:ScopeBox/styles.css

@media screen {
	.scope-box {
		display: inline-block;
		
		backdrop-filter: blur(6px);
		border: var(--border-color) 1px solid;
		box-shadow: 0 0 10px black;
		
		background-position: left;
		background-clip: padding-box;
		background-color: transparent;
	}
	
	.scope-box-ambrosia {
		background-image: url("https://amaranth-legacy.yttrium.systems/NebulaAddition4.png");
	}
	
	.scope-box-cosmoria {
		background-image: url("https://amaranth-legacy.yttrium.systems/NebulaAddition3.png");
	}
	
	.scope-box-galvyria {
		background-image: url("https://amaranth-legacy.yttrium.systems/NebulaAddition5.png");
	}
	
	.scope-box-vela {
		background-image: url("https://amaranth-legacy.yttrium.systems/e/e5/Vela-Background.png");
	}
	
	.scope-box-astralis {
		background-image: url("https://amaranth-legacy.yttrium.systems/Astralis-Background.png");
	}
	
	 .scope-box-haven {
        background-image: url("https://amaranth-legacy.yttrium.systems/Amarleg-haven.png");
    }
	
	.scope-box-aziel {
		background-image: url("https://amaranth-legacy.yttrium.systems/Aziel-Background.png");
	}
	
	.scope-box-empyrea {
		background-image: url("https://amaranth-legacy.yttrium.systems/Empyrea-Background.png");
	}
	
	.scope-box :link, .scope-box :visited {
		display: inline-block;
		
		background: linear-gradient(to right, var(--color-0) 30%, var(--color-1) 50%, 75%, var(--color-2) 100%);
		/* background-clip: text; */
		
		color: transparent;
		text-align: center;
		
		font-family: Cinzel;
		font-size: 300%;
	}
}