@import url('header.css');
@import url('../src/components/styles/Modal.css');

:root {
	--font-family: 'Libre Franklin', 'Arial', sans-serif;
  --color-primary: white;
  ---animation-delay: .3s;
  --scrollbar: #ffffff;
  &[data-theme="dark"]{
    --color-primary: #1F1F1F;
    --scrollbar: #1f1f1f;
  }
}

* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    font-family: var(--font-family);

    &::-webkit-scrollbar {
      width: 8px;
      height: 8px;
    }

    &::-webkit-scrollbar-track {
      background: #f1f1f1;
      border-radius: 10px;
    }

    &::-webkit-scrollbar-thumb {
      background: #888;
      border-radius: 10px;
    }

    &::-webkit-scrollbar-thumb:hover {
      background: #555;
    }

    &::-webkit-scrollbar-horizontal {
      height: 10px;
    }

    &::-webkit-scrollbar-vertical {
      width: 10px;
    }
}

html {
	width: 100%;
	height: 100%;
	padding: 10px;
	scroll-behavior: smooth;
	background-color: var(--background-S360);
  transition: background-color var(---animation-delay);
}

body {
	overflow: hidden;
	height: 100%;
}

.container--view {
  display: flex;
  flex-direction: column;
  gap: 5px;
}