---
import Welcome from '../components/Welcome.astro';
import Layout from '../layouts/Layout.astro';
import Image from 'astro/components/Image.astro';
import '/src/assets/css/main.scss';

// Welcome to Astro! Wondering what to do next? Check out the Astro documentation at https://docs.astro.build
// Don't want to use any of this? Delete everything in this file, the `assets`, `components`, and `layouts` directories, and start fresh.
---

<Layout>
	<div class="circle float-start ms-5">
		<Image class="circle-item rounded-shadow" style="--i: 0" src="/src/svg/energy/grass.svg?raw" alt="Grass Energy" width={25} height={25}></Image>
		<Image class="circle-item rounded-shadow" style="--i: 1" src="/src/svg/energy/fire.svg?raw" alt="Fire Energy" width={25} height={25}></Image>
		<Image class="circle-item rounded-shadow" style="--i: 2" src="/src/svg/energy/water.svg?raw" alt="Water Energy" width={25} height={25}></Image>
		<Image class="circle-item rounded-shadow" style="--i: 3" src="/src/svg/energy/electric.svg?raw" alt="Electric Energy" width={25} height={25}></Image>
		<Image class="circle-item rounded-shadow" style="--i: 4" src="/src/svg/energy/psychic.svg?raw" alt="Psychic Energy" width={25} height={25}></Image>
		<Image class="circle-item rounded-shadow" style="--i: 5" src="/src/svg/energy/fighting.svg?raw" alt="Fighting Energy" width={25} height={25}></Image>
		<Image class="circle-item rounded-shadow" style="--i: 6" src="/src/svg/energy/dark.svg?raw" alt="Dark Energy" width={25} height={25}></Image>
		<Image class="circle-item rounded-shadow" style="--i: 7" src="/src/svg/energy/steel.svg?raw" alt="Steel Energy" width={25} height={25}></Image>
		<Image class="circle-item rounded-shadow" style="--i: 8" src="/src/svg/energy/colorless.svg?raw" alt="Colorless Energy" width={25} height={25}></Image>
		<Image class="circle-item rounded-shadow" style="--i: 9" src="/src/svg/energy/fairy.svg?raw" alt="Fairy Energy" width={25} height={25}></Image>
		<Image class="circle-item rounded-shadow" style="--i: 10" src="/src/svg/energy/dragon.svg?raw" alt="Dragon Energy" width={25} height={25}></Image>
	</div>
	<Welcome />
</Layout>