@charset "utf-8";
/* CSS Document */

@import url("https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.7.2/css/all.min.css");

body{
    font-family: Arial, Helvetica, sans-serif;
    background:#f2f2f2;
    margin:40px;
    color:#222;
}

.page{
    max-width:900px;
    margin:auto;
    background:white;
    padding:40px;
    border-radius:10px;
    box-shadow:0 3px 12px rgba(0,0,0,.12);
}

h1{
    margin-top:0;
    color:#2d4b7a;
}

.meta{
    color:#666;
    margin-bottom:30px;
}

.song{
    margin:26px 0;
    font-size:16px;

}
.verse{
	white-space: pre-wrap;
	padding-left: 10px;
}
.refrain{
	white-space: pre-wrap;
    background:#fff8dc;
	padding-left: 10px;	
}

.chords{
    font-weight:bold;
    color:#96004F;
    font-family: Consolas, monospace;
}



.note{
    margin-top:40px;
    padding:15px;
    background:#eef6ff;
    border-radius:6px;
}
a.youtube {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 3px 7px;

    font-size: 13px;
    font-weight: 500;
    color: #555;
    text-decoration: none;

    background: #f5f5f5;
    border-radius: 4px;

    transition: background 0.2s, color 0.2s;
}

a.youtube::before {
    font-family: "Font Awesome 6 Brands";
    content: "\f167";
    font-size: 14px;
    color: #ff0000;
}

a.youtube:hover {
    color: #000;
    background: #e9e9e9;
}

@media print{
    body{
        background:white;
        margin:10mm;
    }

    .song{
        box-shadow:none;
        border:none;
        padding:0;
    }
}