@import url("../colorPalettes/malibu.css");

body {
    font-family: var(--fontStack);
    background: url('/Assets/BGs/haibisukasu01b.gif') repeat fixed;
}

#baselayout {
    background: var(--MALIBUwhite);

    border-radius: 30px;
    border: 4px dotted var(--MALIBUpink1);
    box-shadow: 5px 5px 0 var(--MALIBUyellow), -5px -5px 0 var(--MALIBUorange);

    position: relative;
}

#baselayout::after {
    content: "";
    position: absolute;
    bottom: -0;
    left: 0;

    width: 120px;
    height: 120px;
    background: url(/Assets/aesthetics/malibu/pngs/fakeHibiscuses.png) center/contain no-repeat;
    z-index: 20;

    pointer-events: none;
}

/* Left-side */
#eyecatcher,
#siteButton,
#jsCalender,
#home,
#spotlight,
#statusCafe,
#status,
#webgroups,
#stamps,
#blogRSS {
    background: url(/Assets/BGs/tumblr_inline_mpof7dA0ad1qz4rgp.png);

    border-radius: 20px;
    border: 3px dotted var(--MALIBUpink1);
    box-shadow: 4px 4px 0 var(--MALIBUorange), -4px -4px 0 var(--MALIBUblue);
}

.detailing {
    background: url(/Assets/pixels/other/bowDividerYellow.gif) repeat-x;
}

#eyecatcher {
    image-rendering: crisp-edges;
}

/* Calender */

.calendar-weekdays li {
    background: var(--MALIBUpink1);
    background-size: 100%;
}

header .calendar-navigation span {
    color: var(--MALIBUpink1);
}

header .calendar-navigation span:hover {
    color: var(--MALIBUgreen);
}

.calendar-body li {
    color: black;

    box-shadow: -1px -1.4px 1px inset #9e9699, 2px 3px 1.5px inset white, 0px 0px 2px #aba4a6;
    border: 1px solid var(--MALIBUsand);
}

.calendar-body .calendar-dates li {
    background: var(--MALIBUyellow);
    color: black;
}

.calendar-body .calendar-dates li:hover {
    background: var(--MALIBUgreen);
}

.calendar-dates li.inactive {
    color: #696969;
}

.calendar-dates li.active {
    background: var(--MALIBUblue)
}

/* Main */

#home {
    scrollbar-color: var(--MALIBUpink1) var(--MALIBUwhite);
}

#home::-webkit-scrollbar-track {
    background: var(--MALIBUwhite);
}

#home::-webkit-scrollbar-thumb {
    background-color: var(--MALIBUpink1);
}

#spotlight {
    height: unset;
}

.displayScreenshots {
    border: 4px groove var(--MALIBUgreen);
    filter: drop-shadow(-1px 2px 3px rgba(0, 0, 0, 0.26));
}

#spotlight a {
    color: var(--MALIBUpink1);
    transition: color .25s;
}

#spotlight a:hover {
    color: var(--MALIBUblue);
}

#spotlight h2 {
    text-align: center;
    color: var(--MALIBUgreen);
}

/* Status Cafe */

#thoughtBubble {
    background: var(--MALIBUyellow);
    border: 3px dashed var(--MALIBUpink1);
    outline: 5px solid var(--MALIBUorange);

    color: black;
}

#thoughtBubble::after {
    color: var(--MALIBUorange);
    -webkit-text-stroke: 1px var(--MALIBUpink1);

    background-color: var(--MALIBUorange);
    border: 1px solid var(--MALIBUpink1);
    border-radius: 11px;
}

#thoughtBubble a {
    color: var(--MALIBUpink1);
}

/* Side Columns */

.statusBubble {
    background: var(--MALIBUblue);
    border: 3px dashed var(--MALIBUwhite);
    color: black;
}

#status h3 {
    font-style: italic;
    color: black;
}

.statusBubble:nth-child(even) {
    background: var(--MALIBUpink1);
    color: white;
}

.statusBubble:nth-child(even) h3 {
    color: white !important;
}

#stamps h2,
#webgroups h2 {
    color: var(--MALIBUgreen);
}

#blogRSS h1,
#blogRSS h2,
#blogRSS h3,
#blogRSS h4,
#blogRSS h5,
#blogRSS h6 {
    color: var(--MALIBUgreen);
}

#blogRSS #title {
    color: var(--MALIBUgreen);
}

#blogRSS p {
    color: black;
}

.feed-item {
    border-bottom: 4px dashed var(--MALIBUsand);
}

.feed-item a {
    color: black;
}

.feed-item small {
    color: #797979;
}

/* Footer */

footer {
    background: linear-gradient(90deg, var(--MALIBUpink1) 0%, var(--MALIBUorange) 50%, var(--MALIBUyellow) 100%);
    color: white;
}

/* General */

hr {
    width: 100%;
    height: 0;
    border-top: 3px dotted var(--MALIBUgreen);
    border-radius: 999px;
}

.box,
.box2 {
    padding: 5px;
    background-color: var(--MALIBUwhite);
    border: 2px dashed var(--MALIBUpink1);
    border-radius: var(--globalBorderRadius);
}

h2 {
    color: var(--MALIBUgreen);
}

a {
    color: var(--MALIBUblue);
    text-decoration: none;
}

* {
    scrollbar-width: thin;
    box-sizing: border-box;

    scrollbar-color: var(--MALIBUpink1) var(--MALIBUwhite);
}

*::-webkit-scrollbar,
*::-webkit-scrollbar-button {
    width: 10px;
}

*::-webkit-scrollbar-track {
    background: var(--MALIBUwhite);
}

*::-webkit-scrollbar-thumb {
    background-color: var(--MALIBUpink1);
}

/* ? Media Queries */

@media (prefers-reduced-motion: reduce) {}

@media only screen and (max-width: 1024px) {}

@media only screen and (max-width: 810px) {}

@media only screen and (max-width: 500px) {}