/* Thin */
@font-face {
    font-family: 'Poppins';
    src: url(../../fonts/Poppins-Thin.ttf) format('truetype');
    font-style: normal;
    font-weight: 100;
}

/* Light */
@font-face {
    font-family: 'Poppins';
    src: url(../../fonts/Poppins-Light.ttf) format('truetype');
    font-style: normal;
    font-weight: 300;
}

/* Normal */
@font-face {
    font-family: 'Poppins';
    src: url(../../fonts/Poppins-Regular.ttf) format('truetype');
    font-style: normal;    
    font-weight: 400;
}

/* Medium */
@font-face {
    font-family: 'Poppins';
    src: url(../../fonts/Poppins-Medium.ttf) format('truetype');
    font-style: normal;
    font-weight: 500;
}

/* Bold */
@font-face {
    font-family: 'Poppins';
    src: url(../../fonts/Poppins-Bold.ttf) format('truetype');
    font-style: normal;    
    font-weight: 700;
}

/* Black */
@font-face {
    font-family: 'Poppins';
    src: url(../../fonts/Poppins-Black.ttf) format('truetype');
    font-style: normal;
    font-weight: 900;
}

/* Thin */
@font-face {
    font-family: 'Poppins';
    src: url(../../fonts/Poppins-ThinItalic.ttf) format('truetype');
    font-style: italic;
    font-weight: 100;
}

/* Light */
@font-face {
    font-family: 'Poppins';
    src: url(../../fonts/Poppins-LightItalic.ttf) format('truetype');
    font-style: italic;
    font-weight: 300;
}

/* Normal */
@font-face {
    font-family: 'Poppins';
    src: url(../../fonts/Poppins-Italic.ttf) format('truetype');
    font-style: italic;    
    font-weight: 400;
}

/* Medium */
@font-face {
    font-family: 'Poppins';
    src: url(../../fonts/Poppins-MediumItalic.ttf) format('truetype');
    font-style: italic;
    font-weight: 500;
}

/* Bold */
@font-face {
    font-family: 'Poppins';
    src: url(../../fonts/Poppins-BoldItalic.ttf) format('truetype');
    font-style: italic;    
    font-weight: 700;
}

/* Black */
@font-face {
    font-family: 'Poppins';
    src: url(../../fonts/Poppins-BlackItalic.ttf) format('truetype');
    font-style: italic;
    font-weight: 900;
}


/* COLORS
You can edit these and use them! Use css color names (e.g. "red", "purple") or hex codes (e.g. #00ff00). */
:root {
    --main-bg-color: rgb(247, 244, 246);
    --main-fg-color: black;
    --main-highlight-color: #fce1f5;
}


/* A brief explanation of the template's layout:
HTML - Properties here affect the entire layout.
    BODY
    NAV - The bar containing links to the homepage, all posts, about, etc...
        OL - Container for an ordered list of the links.
            LI - Container for each individual link.
                A - A link to another page.
    MAIN - The main view, where each post appears.
        HEADER - Container for the title and date of each post.
    NAV #pagination - (Only on blog posts) Container for links to the next and previous post.
        SECTION .pageprev - A container for the previous post link.
        SECTION .pagenext - A container for the next post link.
    FOOTER - A container for various details.
        P - Contains site & author details.
        ADDRESS - Contains email details (if specified).
        ASIDE - Contains last updated & RSS link. */

html {
    scrollbar-color: var(--main-fg-color) #00000000;
    font-family: "Poppins";
    font-size: medium;
    text-wrap: pretty;
    word-break: break-word;
}

a {
   color: rgb(196, 46, 141); 
}
a:visited{
    color: #a15481;
}

nav {
    background-color: var(--main-bg-color);
}

main {
    background-color: var(--main-bg-color);
    color: var(--main-fg-color);
}

nav,
main,
footer {
    border: 1px solid var(--main-fg-color);
}

nav, main {
    border-bottom: none;
}

blockquote {
    margin-left: 0;
    padding-left: 1.5rem;
    border-left: 3px solid var(--main-highlight-color);
}

code {
    background-color: var(--main-highlight-color);
    padding: 0.1rem;
}

pre:has(code) {
    background-color: var(--main-highlight-color);
}

/* the followings are the css for link page */
.link_entries{
    display: flex;
    padding: 0.2em 0;
    border-bottom: 1px dotted #a15481;
}

.link_title{
    padding: 0 0.25em;
    flex: 1.5 0 0;
    align-self:center;
}

.link_descrption{
    align-self:center;
    flex: 2 0 0;
}
/*end*/

/*Mobile below*/
@media (min-width: 720px){
    html{
        font-size: small;
    }
}