@import url(https://www.fontshare.com/fonts/zodiak);
@import url(https://www.fontshare.com/fonts/dancing-script);

/* Add the @font-face declarations */

/* Zodiak */

@font-face {
  font-family: 'Zodiak-Thin';
  src: url('../fonts/Zodiak-Thin.woff2') format('woff2'),
       url('../fonts/Zodiak-Thin.woff') format('woff'),
       url('../fonts/Zodiak-Thin.ttf') format('truetype');
  font-weight: 100;
  font-display: swap;
  font-style: normal;
}
@font-face {
  font-family: 'Zodiak-ThinItalic';
  src: url('../fonts/Zodiak-ThinItalic.woff2') format('woff2'),
       url('../fonts/Zodiak-ThinItalic.woff') format('woff'),
       url('../fonts/Zodiak-ThinItalic.ttf') format('truetype');
  font-weight: 100;
  font-display: swap;
  font-style: italic;
}
@font-face {
  font-family: 'Zodiak-Light';
  src: url('../fonts/Zodiak-Light.woff2') format('woff2'),
       url('../fonts/Zodiak-Light.woff') format('woff'),
       url('../fonts/Zodiak-Light.ttf') format('truetype');
  font-weight: 300;
  font-display: swap;
  font-style: normal;
}
@font-face {
  font-family: 'Zodiak-LightItalic';
  src: url('../fonts/Zodiak-LightItalic.woff2') format('woff2'),
       url('../fonts/Zodiak-LightItalic.woff') format('woff'),
       url('../fonts/Zodiak-LightItalic.ttf') format('truetype');
  font-weight: 300;
  font-display: swap;
  font-style: italic;
}
@font-face {
  font-family: 'Zodiak-Regular';
  src: url('../fonts/Zodiak-Regular.woff2') format('woff2'),
       url('../fonts/Zodiak-Regular.woff') format('woff'),
       url('../fonts/Zodiak-Regular.ttf') format('truetype');
  font-weight: 400;
  font-display: swap;
  font-style: normal;
}
@font-face {
  font-family: 'Zodiak-Italic';
  src: url('../fonts/Zodiak-Italic.woff2') format('woff2'),
       url('../fonts/Zodiak-Italic.woff') format('woff'),
       url('../fonts/Zodiak-Italic.ttf') format('truetype');
  font-weight: 400;
  font-display: swap;
  font-style: italic;
}
@font-face {
  font-family: 'Zodiak-Bold';
  src: url('../fonts/Zodiak-Bold.woff2') format('woff2'),
       url('../fonts/Zodiak-Bold.woff') format('woff'),
       url('../fonts/Zodiak-Bold.ttf') format('truetype');
  font-weight: 700;
  font-display: swap;
  font-style: normal;
}
@font-face {
  font-family: 'Zodiak-BoldItalic';
  src: url('../fonts/Zodiak-BoldItalic.woff2') format('woff2'),
       url('../fonts/Zodiak-BoldItalic.woff') format('woff'),
       url('../fonts/Zodiak-BoldItalic.ttf') format('truetype');
  font-weight: 700;
  font-display: swap;
  font-style: italic;
}
@font-face {
  font-family: 'Zodiak-Extrabold';
  src: url('../fonts/Zodiak-Extrabold.woff2') format('woff2'),
       url('../fonts/Zodiak-Extrabold.woff') format('woff'),
       url('../fonts/Zodiak-Extrabold.ttf') format('truetype');
  font-weight: 800;
  font-display: swap;
  font-style: normal;
}
@font-face {
  font-family: 'Zodiak-ExtraboldItalic';
  src: url('../fonts/Zodiak-ExtraboldItalic.woff2') format('woff2'),
       url('../fonts/Zodiak-ExtraboldItalic.woff') format('woff'),
       url('../fonts/Zodiak-ExtraboldItalic.ttf') format('truetype');
  font-weight: 800;
  font-display: swap;
  font-style: italic;
}
@font-face {
  font-family: 'Zodiak-Black';
  src: url('../fonts/Zodiak-Black.woff2') format('woff2'),
       url('../fonts/Zodiak-Black.woff') format('woff'),
       url('../fonts/Zodiak-Black.ttf') format('truetype');
  font-weight: 900;
  font-display: swap;
  font-style: normal;
}
@font-face {
  font-family: 'Zodiak-BlackItalic';
  src: url('../fonts/Zodiak-BlackItalic.woff2') format('woff2'),
       url('../fonts/Zodiak-BlackItalic.woff') format('woff'),
       url('../fonts/Zodiak-BlackItalic.ttf') format('truetype');
  font-weight: 900;
  font-display: swap;
  font-style: italic;
}
@font-face {
  font-family: 'Zodiak-Variable';
  src: url('../fonts/Zodiak-Variable.woff2') format('woff2'),
       url('../fonts/Zodiak-Variable.woff') format('woff'),
       url('../fonts/Zodiak-Variable.ttf') format('truetype');
  font-weight: 100 900;
  font-display: swap;
  font-style: normal;
}
@font-face {
  font-family: 'Zodiak-VariableItalic';
  src: url('../fonts/Zodiak-VariableItalic.woff2') format('woff2'),
       url('../fonts/Zodiak-VariableItalic.woff') format('woff'),
       url('../fonts/Zodiak-VariableItalic.ttf') format('truetype');
  font-weight: 100 900;
  font-display: swap;
  font-style: italic;
}

/* Dancing Script */

@font-face {
  font-family: 'DancingScript-Regular';
  src: url('../fonts/DancingScript-Regular.woff2') format('woff2'),
       url('../fonts/DancingScript-Regular.woff') format('woff'),
       url('../fonts/DancingScript-Regular.ttf') format('truetype');
  font-weight: 400;
  font-display: swap;
  font-style: normal;
}
@font-face {
  font-family: 'DancingScript-Bold';
  src: url('../fonts/DancingScript-Bold.woff2') format('woff2'),
       url('../fonts/DancingScript-Bold.woff') format('woff'),
       url('../fonts/DancingScript-Bold.ttf') format('truetype');
  font-weight: 700;
  font-display: swap;
  font-style: normal;
}

@font-face {
  font-family: 'DancingScript-Variable';
  src: url('../fonts/DancingScript-Variable.woff2') format('woff2'),
       url('../fonts/DancingScript-Variable.woff') format('woff'),
       url('../fonts/DancingScript-Variable.ttf') format('truetype');
  font-weight: 400 700;
  font-display: swap;
  font-style: normal;
}

/* Existing styles */
body {
  background: #f0ebe1; /* soothing, earthy tone */
  color: #4a4a4a;
  font-family: "Zodiak-Regular", Arial, sans-serif; /* Updated font-family */
  margin: 0;
  padding: 20px;
}

h2 {
  color: #6b4f4f;
  margin-bottom: 10px;
  font-family: "Zodiak-Regular";
}

.widget {
  background: #fff;
  border-radius: 8px;
  padding: 15px;
  box-shadow: 0 2px 4px rgba(0,0,0,0.1);
}

/* Bento Box Grid Layout */
.bento-container {
  background-color: #a2b8a3;
  display: grid;
  grid-gap: 20px;
  grid-template-columns: repeat(3, 1fr);
  grid-template-areas:
    "calendar calendar clock"
    "countdown quote quote"
    "notes music random";
}

/* Bento Box Hover Effect */
#hover-effect:hover {
  background-color: #fef4e3; 
}


/* Assign grid areas */
.calendar { grid-area: calendar; }
.clock { grid-area: clock; }
.countdown { grid-area: countdown; }
.quote { grid-area: quote; }
.notes { grid-area: notes; }
.music { grid-area: music; }
.random { grid-area: random; }

/* Calendar Specific Styles */
.calendar-widget .calendar {
  text-align: center;
  margin-top: 10px;
}

.calendar-widget .day {
  display: inline-block;
  width: 30px;
  height: 30px;
  line-height: 30px;
  margin: 2px;
  border-radius: 50%;
  background: #e0d6c2;
}

.calendar-widget .today {
  background: #a68975;
  color: #fff;
  font-weight: bold;
}

/* Music Bar */
.music-bar audio {
  width: 100%;
  margin-top: 10px;
}

/* Notes Area */
.notes textarea {
  width: 100%;
  height: 100px;
  border: 1px solid #ccc;
  border-radius: 4px;
  padding: 8px;
  font-size: 14px;
  resize: vertical;
}

/* Random Image */
/* .random img {
  width: 100%;
  border-radius: 8px;
} */

/* Random Color */
.random {
  width: 100%;
  border-radius: 8px;
}

#quote {
  font-family: "DancingScript-Regular";
  font-size: 24px;
  font-style: italic;
  text-align: left;
}

audio::-webkit-media-controls-panel {
  background-color: #a2b8a3; /* Change this to your desired background color */
}

audio::-webkit-media-controls-play-button,
audio::-webkit-media-controls-pause-button,
audio::-webkit-media-controls-mute-button,
audio::-webkit-media-controls-volume-slider {
  background-color: #a2b8a3; /* Change this to your desired background color */
}