:root {
  --black: #000000;
  --black-rgb: 0, 0, 0;
  --black-100: rgba(var(--black-rgb), 0.1);
  --black-200: rgba(var(--black-rgb), 0.2);
  --black-400: rgba(var(--black-rgb), 0.4);
  --black-600: rgba(var(--black-rgb), 0.6);
  --black-800: rgba(var(--black-rgb), 0.8);
  --black-900: rgba(var(--black-rgb), 0.9);
  --black-950: rgba(var(--black-rgb), 0.95);

  --white: #ffffff;
  --white-rgb: 255, 255, 255;
  --white-100: rgba(var(--white-rgb), 0.1);
  --white-200: rgba(var(--white-rgb), 0.2);
  --white-400: rgba(var(--white-rgb), 0.4);
  --white-500: rgba(var(--white-rgb), 0.5);
  --white-600: rgba(var(--white-rgb), 0.6);
  --white-800: rgba(var(--white-rgb), 0.8);

  --red: #ed5b6c;
  --red-rgb: 237, 91, 108;
  --red-100: rgba(var(--red-rgb), 0.1);
  --red-200: rgba(var(--red-rgb), 0.2);
  --red-400: rgba(var(--red-rgb), 0.4);
  --red-500: rgba(var(--red-rgb), 0.5);
  --red-600: rgba(var(--red-rgb), 0.6);
  --red-800: rgba(var(--red-rgb), 0.8);

  --yellow: #ffd700;
  --yellow-rgb: 255, 215, 0;
  --yellow-100: rgba(var(--yellow-rgb), 0.1);
  --yellow-200: rgba(var(--yellow-rgb), 0.2);
  --yellow-400: rgba(var(--yellow-rgb), 0.4);
  --yellow-600: rgba(var(--yellow-rgb), 0.6);
  --yellow-800: rgba(var(--yellow-rgb), 0.8);

  --green: #50b167;
  --green-rgb: 80, 177, 103;
  --green-100: rgba(var(--green-rgb), 0.1);
  --green-200: rgba(var(--green-rgb), 0.2);
  --green-400: rgba(var(--green-rgb), 0.4);
  --green-600: rgba(var(--green-rgb), 0.6);
  --green-800: rgba(var(--green-rgb), 0.8);

  --blue: rgba(0, 213, 255, 1);
  --blue-rgb: 0, 213, 255;
  --blue-100: rgba(var(--blue-rgb), 0.1);
  --blue-200: rgba(var(--blue-rgb), 0.2);
  --blue-400: rgba(var(--blue-rgb), 0.4);
  --blue-500: rgba(var(--blue-rgb), 0.5);
  --blue-600: rgba(var(--blue-rgb), 0.6);
  --blue-800: rgba(var(--blue-rgb), 0.8);

  --gray: #47474f;
  --gray-rgb: 60, 90, 153;
  --gray-100: rgba(var(--gray-rgb), 0.1);
  --gray-200: rgba(var(--gray-rgb), 0.2);
  --gray-300: rgba(var(--gray-rgb), 0.3);
  --gray-400: rgba(var(--gray-rgb), 0.4);
  --gray-500: rgba(var(--gray-rgb), 0.5);
  --gray-600: rgba(var(--gray-rgb), 0.6);
  --gray-800: rgba(var(--gray-rgb), 0.8);

  --orange: rgba(245, 108, 66, 1);
  --orange-rgb: 245, 108, 66;
  --orange-100: rgba(var(--orange-rgb), 0.1);
  --orange-200: rgba(var(--orange-rgb), 0.2);
  --orange-400: rgba(var(--orange-rgb), 0.4);
  --orange-500: rgba(var(--orange-rgb), 0.5);
  --orange-600: rgba(var(--orange-rgb), 0.6);
  --orange-800: rgba(var(--orange-rgb), 0.8);

  --gold: #b4886b;
  --gold-light: #f7e1a3;

  --background: rgba(242, 247, 246, 1);
  --foreground: #fff;
  --url: rgba(245, 108, 66, 1);
  --text: #000;
  /* --content-background: rgba(34, 34, 34,0.9); */
  --content-background: rgba(0, 0, 0, 0.8);
  --rounded: 10px;
}

body,
html {
  padding: 0;
  margin: 0;
  overflow: hidden;
  width: 100%;
  height: 100vh;
  background-color: transparent;
  color: var(--text);
  scroll-behavior: smooth;
  font-family: ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont,
    "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans", sans-serif,
    "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";
}

a {
  color: var(--url);
  font-family: ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont,
    "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans", sans-serif,
    "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";
}

* {
  box-sizing: border-box;
  text-decoration: none;
  margin: 0;
  padding: 0;
}

.wrap {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  overflow: hidden;
  display: flex;
  align-items: start;
  justify-content: center;
  background: var(--background);
  overflow-y: scroll;
}

.content {
  display: flex;
  flex: 1 0;
  max-width: 80vw;
  min-height: 100%;
  flex-direction: column;
}

.menu {
  position: absolute;
  bottom: 0;
  left: 0;
  display: flex;
  flex: 0;
  width: 100%;
  min-height: 50px;
  background: yellow;
  flex-direction: row;
  padding: 5px;
}

.menu-item {
  display: inline-block;
  padding: 5px 10px;
  margin: 2px 5px;
  background: var(--foreground);
}

.header {
  position: relative;
  display: flex;
  flex: 0;
  width: 100%;
  min-height: 300px;
  background: blue;
  flex-direction: column;
}

.container {
  display: flex;
  flex: 1;
  height: 100%;
  width: 100%;
  background: var(--foreground);
  flex-direction: column;
  justify-content: start;
  align-items: start;
  padding: 10px;
}

.container-flex {
  display: flex;
  flex: 0;
  max-height: content;
  width: 100%;
  background: var(--foreground);
  flex-direction: column;
  justify-content: start;
  align-items: start;
  padding: 10px;
}

.news-item-container {
  border: 1px solid gray;
  width: 100%;
  padding: 10px;
  margin-bottom: 10px;
  border-radius: 6px;
  background: #ffffff;
}

.notification-header {
  font-size: clamp(0.8rem, 1vw, 2rem);
  font-weight: bold;
  font-family: ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont,
    "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans", sans-serif,
    "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";
  padding: 5px 10px;
  width: 100%;
  text-align: left;
}

.notification-text {
  font-size: clamp(0.8rem, 1vw, 2rem);
  font-weight: default;
  font-family: ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont,
    "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans", sans-serif,
    "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";
  padding: 5px 10px;
  width: 100%;
  text-align: left;
}

.Large-Text {
  font-size: clamp(1.5rem, 2vw, 3rem);
  font-weight: default;
  font-family: ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont,
    "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans", sans-serif,
    "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";
  padding: 5px 10px;
  width: 100%;
  text-align: center;
}