---
import Card from "./Card.astro";
import Line from "./NetworkLine.astro";
---

<div id="Experience" class="h-fit py-10">
    <h1 class="text-5xl text-center">Education</h1>
    <div class="flex flex-col items-center pt-10">
        <div class="w-[90%] md:w-[500px]">
            <Card primaryColor="#fff">
                <div class="card-content">
                    <div class="flex flex-col justify-left w-full mb-3">
                        <h2 class="font-bold text-xl">
                            Diploma in Computer Science
                        </h2><h3>Jan 2022 - Present</h3>
                    </div>
                    <hr class="w-full mb-3" />
                    <h3 class="mb-1 font-bold text-lg">Achievements</h3>
                    <ul class="list-disc list-inside">
                        <li>3-time Dean's List recipient</li>
                        <li>President of Computer Programming Club</li>
                        <li>Vice President of Diploma Union</li>
                    </ul>
                </div>
            </Card>
            <Line height="100px" />
            <Card primaryColor="#fff">
                <div class="card-content">
                    <div class="flex flex-col justify-left w-full mb-3">
                        <h2 class="font-bold text-xl">Cambridge IGCSE</h2><h3>
                            Sep 2016 - June 2021
                        </h3>
                    </div>
                    <hr class="w-full mb-3" />
                    <h3 class="mb-1 font-bold text-lg">Achievements</h3>
                    <ul class="list-disc list-inside">
                        <li>IGCSE 5 A*s, 3 A's</li>
                        <li>President of Technology Society</li>
                        <li>Technology Manager of Prefects' Board</li>
                    </ul>
                </div>
            </Card>
        </div>
    </div>
</div>

<style>
    .card-content {
        display: flex;
        flex-direction: column;
        background-image: radial-gradient(
            rgba(255, 255, 255, 0.1) 1px,
            transparent 1px
        );
        background-position: 50% 50%;
        background-size: 1.1rem 1.1rem;
        padding: 2rem 2rem;
        border-radius: 1.25rem;
        overflow: hidden;
    }
</style>