:root {
    --color-primary: #6239ad;
    --color-secondary:#bf8fff;
    --padding-x: 0.89rem;
    --padding-y: 0.5rem;
}

* {
    cursor: url('https://cdn.cursors-4u.net/previews/mac-os-x-normal-select-pointer-8e4b54d7-32.webp') 32 32, auto;
}

a, h1.title, a > .img-thumbnail, li.mb-3, a > strong, footer i{
    cursor: url('https://cdn.cursors-4u.net/previews/tiny-spiderman-web-shot-37cf94e5-32.webp') 32 32, auto !important;
    cursor: pointer;
}

.fav-img {
    max-width: clamp(150px, 2em, 200px);
    height:auto;
    cursor:pointer;
}

.card-content, .alert-warning {
    padding-top: var(--padding-y);
    padding-bottom: var(--padding-y);
    padding-left: var(--padding-x);
    padding-right: var(--padding-x);
}

body{
    background-image: url(/images/purplestars.gif);
    background-repeat: repeat;
    background-size: 150px;
    font-family: Georgia, Times, 'Times New Roman', serif;
    font-size: clamp(10pt, 3.8vw, 12pt);
    word-wrap: none;
}

.webpage{
    max-width:900px;
    margin-left:auto;
    margin-right:auto;
    margin-top:40px;
    margin-bottom:40px;
}

header{
    background-image: url(/images/purplesatinbg.jpg);
    background-repeat: repeat;
    background-size: 100px; 
}

main{
    background-image: url(/images/purple-plaid-pattern.png);
    background-repeat: repeat;
    background-size: 120px;
    margin-bottom:10px;
}

.title{
    font-weight: bold;
    color: var(--color-secondary);
    text-shadow: #000000 3px 2px 3px;
}

.heading {
    font-weight: bold;
    color: var(--color-primary);
}

header h1{
    font-family: fantasy, Cambria, Cochin, Georgia, Times, 'Times New Roman', serif;
}

.box-shadow{
    box-shadow: #000000 5px 7px 6px;
}

footer a{
    text-decoration: none;
    color: #f8f8ff;
}

footer a:hover{
    text-decoration: none;
    color: #e3e3f8;
}