/* Common styles */
:root {
    /* Theme */
    --main-blue: #00A1FF;
    --main-blue-rgb:0,161,255;
    --main-yellow: #E9DCC5;
    --main-yellow-rgb: 233, 220, 197;
    --main-red: #D2342A;
    --main-red-rgb: 210,52,42;
    --main-green: #3CC96D;
    --main-green-rgb: 60,201,109;
    --main-purple: #76557F;
    --main-purple-rgb: 118, 85, 127;
    --main-gray-a: #677d8e;
    --main-gray: #464646;
    --main-gray-rgb: 46, 46, 46;
    --main-light: #f8f9fa;
    --main-light-rgb: 248,249,250;
    --main-dark: #121212;
    --main-dark-rgb: 18, 18, 18;




    /* All Bootstrap Colors */
    --bs-primary: var(--main-blue);
    --bs-primary-rgb: var(--main-blue-rgb);
    --bs-secondary: var(--main-gray);
    --bs-secondary-rgb: var(--main-gray-rgb);
    --bs-success: var(--main-green);
    --bs-success-rgb: var(--main-green-rgb);
    --bs-info: var(--main-purple);
    --bs-info-rgb: var(--main-purple-rgb);
    --bs-warning: var(--main-red);
    --bs-warning-rgb: var(--main-red-rgb);
    --bs-danger: var(--main-red);
    --bs-danger-rgb: var(--main-red-rgb);
    --bs-light: var(--main-light);
    --bs-light-rgb: var(--main-light-rgb);
    --bs-dark: var(--main-dark);
    --bs-dark-rgb: var(--main-dark-rgb);

    --bs-white-rgb: 255,255,255;
    --bs-black-rgb: 0,0,0;
    --bs-font-sans-serif: system-ui,-apple-system,"Segoe UI",Roboto,"Helvetica Neue",Arial,"Noto Sans","Liberation Sans",sans-serif,"Apple Color Emoji","Segoe UI Emoji","Segoe UI Symbol","Noto Color Emoji";
    --bs-font-monospace: SFMono-Regular,Menlo,Monaco,Consolas,"Liberation Mono","Courier New",monospace;
    --bs-gradient: linear-gradient(180deg, rgba(255, 255, 255, 0.15), rgba(255, 255, 255, 0));
    --bs-body-font-family: var(--bs-font-sans-serif);
    --bs-body-font-size: 1rem;
    --bs-body-font-weight: 400;
    --bs-body-line-height: 1.5;
    --bs-body-color: var(--main-light);
    --bs-body-color-rgb: var(--main-light-rgb);
    --bs-body-bg: var(--main-dark);
    --bs-body-bg-rgb: var(--main-dark-rgb);

 

    --bs-blue: #0d6efd;
    --bs-indigo: #6610f2;
    --bs-purple: #6f42c1;
    --bs-pink: #d63384;
    --bs-red: #dc3545;
    --bs-orange: #fd7e14;
    --bs-yellow: #ffc107;
    --bs-green: #198754;
    --bs-teal: #20c997;
    --bs-cyan: #0dcaf0;
    --bs-white: #fff;
    --bs-gray: #6c757d;
    --bs-gray-dark: #343a40;
    --bs-gray-100: #f8f9fa;
    --bs-gray-200: #e9ecef;
    --bs-gray-300: #dee2e6;
    --bs-gray-400: #ced4da;
    --bs-gray-500: #adb5bd;
    --bs-gray-600: #6c757d;
    --bs-gray-700: #495057;
    --bs-gray-800: #343a40;
    --bs-gray-900: #212529;
} 

a {
  text-decoration: none !important;
}

.hover-highlight:hover {
  background: var(--bs-gray)
}

.text-de-emphasis {
  opacity: .7;
}

.graydient {
  background: linear-gradient(gray, var(--bs-primary));
}

.follow-btn {
  font-size: medium;
  width: 200px;
}

.follow-btn.active {
  background: var(--bs-primary);
}

.follow-btn.inactive {
  background: var(--bs-secondary);
}

.follow-btn.inactive::before {
  font-family: "Font Awesome 5 Free";
  content: "\f067 ";
}


.hidden-scrollbar {
  -ms-overflow-style: none;  /* IE and Edge */
  scrollbar-width: none;  /* Firefox */
}
.hidden-scrollbar::-webkit-scrollbar {
  display: none; /* Chrome, Safari, Opera*/
}

.pointer {
  cursor: pointer;
}

img {
  max-width: 100%;
}

.overflow-x-auto {
  overflow-x: auto !important;
  overflow-y: clip;
}

.overflow-x-hidden {
  overflow-x: hidden !important;
  overflow-y: clip;
}

.tag-icon {
  font-size: 1em;
}

.contributor-icon {
  width: 48px;
  height: 30px;
  margin: 4px;
}

.contributor-icon-big {
  width: 45%;
  height: 45px;
  margin: 4px;
  max-width: 175px;
}

.loading-img {
  height: auto;
  max-width: 200px;
}

/* Scrollbar */
::-webkit-scrollbar {
  width: 5px;
  height: 5px;
}

::-webkit-scrollbar-thumb {
  background-color: #555;
  border-radius: 8px;
}

::-webkit-scrollbar-track {
  background-color: #ccc;
}

/* Wave Graphic */

.wave-container {  
  height: 40vh;
  background-color: #ffffff;
  position: relative;
}

.wave-container::before {   
  content: "";
  width: 100%;
  height: 132px;
  position: absolute;
  bottom: -0.3%;
  left: 0;
  background-size: auto;
  background-repeat: repeat no-repeat;
  background-position: 57vw bottom;
  background-image: url("data:image/svg+xml;utf8,<svg viewBox='0 0 1200  93' fill='none' xmlns='http://www.w3.org/2000/svg'><path d='M0 68L50 64C100 60 200 52 300 35C400 18 500 -7 600 1C700 10 800 52 900 68C1000 85 1100 77 1150 73L1200 68V94H1150C1100 94 1000 94 900 94C800 94 700 94 600 94C500 94 400 94 300 94C200 94 100 94 50 94H0V68Z' fill='%2300a1ff'/></svg>");
}

@media(max-width:850px) {
  .wave-container::before {    
    height: 66px
  }  
}