@font-face {
    font-family: 'smalle';
    src: url("https://dl.dropbox.com/scl/fi/0xtin3es6cxdzl5pdroar/smalle.ttf?rlkey=ksgjwn2u7354dchtgwakh0mjg&st=jir4fglp&dl=0");
}

@font-face {
    font-family: 'crayon';
    src: url("https://dl.dropbox.com/scl/fi/sbtspifcjyqbghv6g207j/CrayonHandRegular2016Demo.ttf?rlkey=1h94bytp4rd2qmsvw47oc425c&st=alzj58af&dl=0");
}

body {
    background-image: url("https://dl.dropbox.com/scl/fi/zyal91b93i3gut0gj7msj/prrbg.gif?rlkey=d2vvws6vlim02wt4f16lrzuom&st=v9mdhrbt&dl=0");
}

h3 {
    font-family: crayon;
    color: rgb(241, 96, 121);
}

p {
    font-size: 17px;
    font-family: 'smalle';
}

a {
    font-family: 'smalle';
    color: rgb(241, 96, 121);
}

.container {
    display: flex;
    margin-inline: auto;
    width: 738px;
    height: 550px;
    border-radius: 15px;
    background-image: url("https://dl.dropbox.com/scl/fi/wwm6jt8b56togcsdga3hb/Untitled2_20251124183604.png?rlkey=3ul9k9tib1w9fxuexq3hx3wu7&st=ymqm6n2p&dl=0");
    background-repeat: no-repeat;
    background-size: contain;
}

.left {
    margin: 30px;
    width: 50%;
    overflow-y: scroll;
}

.directory ul {
    list-style-image: url("https://dl.dropbox.com/scl/fi/kxq955hl96ysf15kn8azn/tumblr_d1581fdeed2a4916a75a51fbd51dfd64_671b2e8b_75.gif?rlkey=0lnwvrjwd01zq0zkh2eqk1coj&st=bq3cyotw&dl=0");
    font-family: 'smalle';
}

.directory a {
    text-decoration: none;
    color: rgb(247, 134, 154);
    transition: all 0.5s;
    padding-top: 5px;
}

.directory a:hover {
    text-decoration: wavy underline;
    color: black;
    background-color: rgb(247, 134, 154);
}

.right {
    margin: 30px;
    width: 50%;
    overflow-y: scroll;
}

.works a {
    color: rgb(241, 96, 121);
    font-family: 'smalle';
}

.works a:hover {
    font-style: italic;
}

.title {
    text-align: center;
    color: rgb(241, 96, 121);
}