@import url('https://fonts.googleapis.com/css2?family=Playfair+Display:wght@400;500;600;700&family=DM+Sans:wght@400;500;700&display=swap');

:root {
	--bulma-family-primary: 'DM Sans', system-ui, -apple-system, sans-serif;
	--bulma-family-title: 'Playfair Display', serif;
	--bulma-primary: hsl(35 80% 45%);
	--bulma-link: hsl(35 80% 45%);
	--bulma-link-text: hsl(35 80% 45%);
	--bulma-link-h: 35;
	--bulma-link-s: 80%;
	--bulma-link-l: 45%;
	--bulma-hover-background-l-delta: -5%;
	--bulma-navbar-burger-color:#fff;
	--bulma-skeleton-lines-gap: .55em;
	--bulma-skeleton-line-height: .8em;
	--bulma-skeleton-background:var(--bulma-grey-lighter);
	--bulma-body-background-color:hsl(220 20% 95%);
    --bulma-scheme-main:hsl(35 80% 45%);
    --bulma-scheme-h:35;
    --bulma-scheme-s:80%;
    --bulma-scheme-l:45%;
}

.card{ background:	linear-gradient(135deg, hsl(220 20% 10%) 0%, hsl(220 25% 18%) 100%);color:var(--bulma-grey-light)}
.title{font-family: var(--bulma-family-title); }
.navbar{--bulma-navbar-background-color:hsl(35 0% 35%);}
.navbar-brand .is-logo{ font-size:1.2em; font-family: var(--bulma-family-title);  color:var(--bulma-white);}
.navbar-brand .is-logo::before { content: ""; display: inline-block; width: 35px; height: 35px; border-radius: 35%; vertical-align: middle;
	/* Combined gradient + SVG */
	background:
	   url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><path d='M15 21v-8a1 1 0 0 0-1-1h-4a1 1 0 0 0-1 1v8'/><path d='M3 10a2 2 0 0 1 .709-1.528l7-5.999a2 2 0 0 1 2.582 0l7 5.999A2 2 0 0 1 21 10v9a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2z'/>\
</svg>")
		center / 80% auto no-repeat,
		linear-gradient(135deg, hsl(35 80% 45%) 0%, hsl(25 70% 40%) 100%);
}
a.navbar-item:hover{	--bulma-navbar-item-background-l-delta:-90%;}
.container .title { color:var(--bulma-white); font-weight:normal;}
.container .title span{
    background: linear-gradient(135deg, hsl(35 80% 45%) 0%, hsl(45 90% 55%) 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}

footer{background-color:hsl(220 20% 10%); color:var(--bulma-grey-light)}
footer hr{background: var(--bulma-transparent)}
footer .button.is-small{background:var(--bulma-transparent);border:none; box-shadow:none;color:var(--bulma-grey-light)}

.modal{	--bulma-modal-card-body-background-color:var(--bulma-white);--bulma-modal-card-head-background-color:var(--bulma-grey-light)}
.box{background-color:var(--bulma-white)}
a.dm-title{	font-size:1.3em; font-weight: bold;}
a.dm-title:hover{	color:var(--bulma-dark);}
a.dm-description{	color:hsl(199 29% 18%);}
a.dm-url{	-webkit-text-fill-color:hsl(199 29% 38%);	font-size:.8em;}

aside li a::before {
  display: inline-block;
  text-rendering: auto;
  -webkit-font-smoothing: antialiased;
  font: var(--fa-font-solid);
  content: '\f015';
  margin-left: -3px;
  margin-right:5px;
  color:var(--bulma-grey-light);
  padding:5px 0;;
  font-size:1.2em;
}
aside .menu-list a{color:var(--bulma-grey); font-size:1em;}
.menu-list a:hover{--bulma-menu-item-background-l-delta:-60%; color:var(--bulma-white)}
.menu-list a:hover::before{color:var(--bulma-white)}