<?xml version="1.0" encoding="UTF-8"?>
<xsl:stylesheet version="1.0"
xmlns:xsl="http://www.w3.org/1999/XSL/Transform">

<xsl:template match="/">
<html>
<head>
    <title>XML</title>
    <style>
        body {
            font-family: Arial, sans-serif;
            background-color: #f4f6f8;
        }

        h1 {
            text-align: center;
            color: #333;
        }

        .album {
            background: white;
            margin: 20px auto;
            padding: 20px;
            width: 70%;
            border-radius: 10px;
        }

        .title {
            font-size: 22px;
            font-weight: bold;
            color: #2c3e50;
        }

        .artist {
            font-size: 18px;
            color: #555;
        }

        .year {
            font-size: 14px;
            color: #888;
            margin-bottom: 10px;
        }

        table {
            width: 100%;
            border-collapse: collapse;
            margin-top: 10px;
        }

        th {
            background-color: pink;
            color: black;
            padding: 8px;
        }

        td {
            padding: 8px;
            border-bottom: 1px solid #ddd;
        }

        tr:hover {
            background-color: #f1f1f1;
        }
    </style>
</head>

<body>
    <h1>Album</h1>

    <xsl:for-each select="albumRegister/album">
        <div class="album">
            <div class="title">
                <xsl:value-of select="title"/>
            </div>
            <div class="artist">
                <xsl:value-of select="artist"/>
            </div>
            <div class="year">
                Year: <xsl:value-of select="year"/>
            </div>

            <table>
                <tr>
                    <th>Track</th>
                    <th>Duration</th>
                </tr>

                <xsl:for-each select="tracks/track">
                    <tr>
                        <td><xsl:value-of select="name"/></td>
                        <td><xsl:value-of select="duration"/></td>
                    </tr>
                </xsl:for-each>

            </table>
        </div>
    </xsl:for-each>

</body>
</html>
</xsl:template>

</xsl:stylesheet>
