:root {
  --shiki-color-text: theme('colors.black');
  --shiki-token-constant: theme('colors.orange.600');
  --shiki-token-string: theme('colors.orange.600');
  --shiki-token-comment: theme('colors.zinc.500');
  --shiki-token-keyword: theme('colors.sky.600');
  --shiki-token-parameter: theme('colors.pink.600');
  --shiki-token-function: theme('colors.violet.600');
  --shiki-token-string-expression: theme('colors.orange.600');
  --shiki-token-punctuation: theme('colors.zinc.800');
}

/* Dark mode styles */
:root.dark {
  --shiki-color-text: theme('colors.white');
  --shiki-token-constant: theme('colors.orange.300');
  --shiki-token-string: theme('colors.orange.300');
  --shiki-token-comment: theme('colors.zinc.500');
  --shiki-token-keyword: theme('colors.sky.300');
  --shiki-token-parameter: theme('colors.pink.300');
  --shiki-token-function: theme('colors.violet.300');
  --shiki-token-string-expression: theme('colors.orange.300');
  --shiki-token-punctuation: theme('colors.zinc.200');
}

@tailwind base;
@tailwind components;
@tailwind utilities;

.imagewrapper {
  box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
  border-radius: 4px;
  overflow:hidden;
}

.videowrapper {
  float: none;
  clear: both;
  width: 100%;
  position: relative;
  padding-bottom: 46.25%;
  padding-top: 25px;
  height: 0;
}
.videowrapper iframe {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  border-radius: 4px;
}