@import '/node_modules/@rose-pine/palette/dist/css/rose-pine-hsl.css';
@import url('https://fonts.googleapis.com/css2?family=Fraunces:ital,opsz,wght@0,9..144,100..900;1,9..144,100..900&display=swap');

.fraunces-me {
 }

body {
	color: var(--rp-moon-text);
	background: var(--rp-moon-base);
    padding: 0;
    margin: 0;
    text-align: justify; 
}

pre {
    background: var(--rp-moon-base);
    border-radius: 0.5rem;
}

a {
    color: var(--rp-moon-iris);
    text-decoration: none;
}

a:visited {
    color: hsl(from var(--rp-moon-iris) h s calc(l * 0.85))
}

.nav { 
    margin: auto;
    margin-top: 1rem;

    padding: 2rem;
    max-width: 60rem;
    width: calc(100%-4rem);

    font-family: "Fraunces", serif;
    font-optical-sizing: auto;
    font-weight: 400;
    font-style: normal;
    font-variation-settings:
        "SOFT" 0,
        "WONK" 0;
    font-size:1.728rem;
}

a.nav{
    margin: 1rem;
    margin-left: 0rem;
    padding-left: 0rem;
    color: var(--rp-moon-text);
}

.main {
    background: var(--rp-moon-surface);
    padding: 1rem;
    margin: auto;
    margin-top: 1rem;
    max-width: 60rem;
    width: calc(100%-4rem);
    box-shadow: 0px 0px 1rem 0px hsl(from var(--rp-moon-base) h s calc(l * 0.85));
    border-radius: 0.5rem;
}

hr {
    color: var(--rp-moon-muted);
}



.blog-entry{
    background: var(--rp-moon-overlay);
    padding-left: 0.5rem;
    border-radius: 0.5rem;
    #display: block;
    #height:10rem;
    width:100%;
    color: var(--rp-moon-text) !important;
    text-decoration : none !important;
    display: flex;
}



.blog-entry:hover{
    box-shadow: 0px 0px 1rem 0px hsl(from var(--rp-moon-surface) h s calc(l * 0.85));
    transition: 0.15s;
}

.blog-entry div {
    width: calc(100% - 15rem);
    min-width: 20rem;
}



.blog-entry img{
    #height:100%;
    width:15rem;
    object-fit: cover;
    border-radius: 0 0.5rem 0.5rem 0;
}

@media only screen and (max-width: 600px) {
    .blog-entry div {
        width: 100%;
    }

    .blog-entry img {
        width: 100%;
    }
}

.blog-entry h4{
    margin-top:1rem;
}


h1{font-size: 2.986rem}
h2{font-size: 2.488rem}
h3{font-size: 2.074rem}
h4{font-size: 1.728rem}

 h1, h2, h3, h4{
    font-family: "Fraunces", serif;
    font-optical-sizing: auto;
    font-weight: 400;
    font-style: normal;
    text-align: left;
    font-variation-settings:
        "SOFT" 0,
        "WONK" 0;
}