@import url("https://fonts.googleapis.com/css2?family=Poppins&display=swap");
@import url("https://fonts.googleapis.com/css2?family=Montserrat:wght@400&display=swap");

body {
  /* font-family: 'Montserrat', sans-serif; */

  /*  */
  /* width: 100% ; */

  /* overflow-y:scroll; */
  overflow: auto;

  /* overflow: hidden; */
  /* object-fit: fill; */
  background-color: #000000;
  /* min-height: 100vh; */
  background-size: cover;
  /* background-size: 1600px 1000px; */
  height: 100vh;
  /* min-height:fit-content !important ; */
  background-position: center;
  color: #f5e8c7 !important;
  caret-color: transparent;
  background-repeat: no-repeat;
  /* backdrop-filter: blur(2px); */
  /* -webkit-filter: blur(8px); */
}
.font-mod {
  font-family: "Montserrat", sans-serif;
}
.bgblack {
  background: rgb(11, 9, 9) !important;
  width: 170px !important;
  height: 100% !important;
}
/* .statsscroll::-webkit-scrollbar {
    display: none;
  } */
.home {
  /* background-image: url('./images/homeimge4.webp'); */
  background-position-x: center;
  background-position-y: bottom;
  /*  */
  /* width: 100% ; */
  /* overflow:auto; */
  /* overflow: hidden; */
  /* object-fit: fill; */
  background-color: #000000;
  /* min-height: 100vh; */
  height: 100vh !important;
  overflow-y: hidden;
  width: 100vw;
  overflow-x: hidden;
  background-size: cover;
  /* background-size: 1600px 1000px; */
  height: 110vh;
  /* min-height:fit-content !important ; */
  /* background-position:center; */
  color: #f5e8c7 !important;
  caret-color: transparent;
  background-repeat: no-repeat;
}
input {
  min-height: 37px;
  min-width: 230px;
  /* cursor: pointer;   */
  font-size: medium !important;
  color: white;
  border: 0;
  background-color: rgb(37, 35, 35);
  caret-color: white;
  /* background-color:rgb(41, 40, 40); */
}
input:-webkit-autofill,
input:-webkit-autofill:hover,
input:-webkit-autofill:focus,
input:-webkit-autofill:active {
  -webkit-box-shadow: 0 0 0 30px white inset !important;
}
.nav-butt {
  margin: 3px !important;
  border-radius: 1.2rem;
  padding-bottom: 5.2px;
  padding-top: 5.2px;
  border-color: #f5e8c7;
}
.nav-link {
  margin: 0px !important;
  padding: 0px !important;
  color: #f5e8c7 !important;
}
.nav-link:hover {
  color: #a8a28d !important;
}
.login {
  background-image: url("./images/timerimginvert2.webp");
  background-position-y: bottom;
  /* background-image: url("./images/bwtest.png") ; */
  /* filter: blur(5px); */
  height: 110vh;
  /* min-height:1000px ; */
  /* height: 800px; */
  background-size: cover;
  /* background-size: 1600px 900px; */
  background-position: center;
  color: #f5e8c7 !important;
  caret-color: transparent;
}
.card {
  padding: 0px;
}
.timer-font {
  font-family: "Righteous", cursive !important;
  color: #f5e8c7d1 !important;
  font-weight: light;
}
.clock-font {
  /* width: 60%;
    height: 60%; */
  font-family: "Righteous", cursive !important;
  /* font-family: "Degular Bold", sans-serif; */
  /* font-weight: 700; */
  font-size: 3.67rem !important;
  transition: font-size 0.5s ease;

  /* font-family: 'Orbitron', sans-serif !important; */
  /* font-family: 'alarm clock', sans-serif !important; */
  /* color: rgb(74, 73, 73);       */
  color: #f5e8c7d1 !important;
  font-weight: light;
  /* background: linear-gradient(
        40deg,
        #fc00ff 0%,
        #00fffc 45%,
        #fffc00 100%
      );
        -webkit-text-fill-color: transparent;
        -webkit-background-clip: text; */
}

.enlarged {
  font-size: 5.5rem !important;
  /* font-size: 110% !important; */
  margin-top: -15px;
  transition: font-size 0.5s ease-out;
}

h1 {
  font-size: 55px !important;
}
.btn-timer {
  /* margin-right:10px; */
  color: #a8a28d !important;
  /* background: linear-gradient(
        40deg,
        #fc00ff 0%,
        #00fffc 45%,
        #fffc00 100%
      );
        -webkit-text-fill-color: transparent;
        -webkit-background-clip: text; */
}
.radio-left {
  /* border-top-left-radius: 10% !important; */
  color: #a8a28d !important;
  border-radius: 6% !important;
  border-top-right-radius: 0% !important;
  border-bottom-right-radius: 0% !important;
}
.radio-right {
  color: #a8a28d !important;
}

.infocard {
  /* padding: 0px; */
  /* padding-top: 30px; */
  padding-bottom: 30px;
  background-color: black;
  /* margin-top: 30px; */
  border-radius: 25px;
  min-width: 360px;
  max-width: 360px;
  box-shadow: 10px 7px;

  /* background: red !important; */

  background-color: #000000;
  /* background-image: url("https://www.transparenttextures.com/patterns/dark-mosaic.png");*/
  /* min-height: 530px; */
  background-image: url("https://www.transparenttextures.com/patterns/noise-pattern-with-subtle-cross-lines.png");
}

.quote {
  font-size: 1.3rem !important;
  color: #cfcdc6;
  font-weight: lighter;
}

.headingtitle {
  font-family: "Indie Flower", cursive;
  text-align: center;
  font-weight: bold;
  /* background: linear-gradient(
        40deg,
        #fc00ff 0%,
        #00fffc 45%,
        #fffc00 100%
      );
        -webkit-text-fill-color: transparent;
        -webkit-background-clip: text; */
}
.otaku-color {
  color: #f5e8c7;
}
.navbar-brand {
  color: white !important;
}

.navbar-light .navbar-nav .nav-link {
  color: white !important;
}

.navbar {
  background-color: rgb(0, 0, 0) !important;
  background-image: url("https://www.transparenttextures.com/patterns/noise-pattern-with-subtle-cross-lines.png");
  /* padding: 0px; */
  /* width: 100% ; */
  z-index: 1;
  color: #f5e8c7 !important;
}

h1 {
  font-size: 3rem;
  font-weight: bold;
}

p {
  font-size: 1.5rem;
  font-style: italic;
  margin-top: 1rem;
}

form {
  margin-top: 2rem;
}

label {
  font-size: 1.2rem;
}

input[type="email"],
input[type="password"] {
  margin-top: 0.5rem;
  font-size: 1.2rem;
  border-top-style: hidden;
  border-right-style: hidden;
  border-left-style: hidden;
  outline: none !important;
  margin-bottom: -1px;
  /* padding: 0.5rem; */
  /* padding: 0 0 0 0 !important ; */
}

.no-outline:focus {
  outline: none;
}

button[type="submit"] {
  margin-top: 1rem;
}
/* ///////////////////Netflix button */

html,
body {
  margin: 0 auto;
}

@import url("https://fonts.googleapis.com/css?family=Roboto");

main.net {
  /* height: 100vh;
    width: 100%; */
  display: flex;
  justify-content: center;
  align-items: center;
  margin-top: 10px;
  margin-right: 10px;
  background-image: url("https://www.transparenttextures.com/patterns/noise-pattern-with-subtle-cross-lines.png");
}

.otbutton {
  height: 30px;
  width: 68px;
  background-color: black;
  padding: 6px 30px 6px 30px;
  cursor: pointer;
  position: relative;
  overflow: hidden;
  z-index: 1;
  box-shadow: inset 0 0 20px rgba(255, 166, 170, 0);
  outline: 1px solid;
  outline-color: rgba(255, 166, 170, 0.5);
  outline-offset: 0px;
  text-shadow: none;

  transition: all 1250ms cubic-bezier(0.19, 1, 0.22, 1);
}

a.net {
  font-family: "Roboto", sans-serif;
  font-weight: bold;
  width: inherit;
  position: absolute;
  text-decoration: none;
  color: #e50914;
  z-index: 1;
  transition: color 0.2s;
  z-index: 3;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
}

a.is-white {
  color: white;
}

.background__button {
  position: absolute;
  width: 0;
  height: 0;
  background-color: #e50914;
  border-radius: 100px;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  z-index: 2;
  transition: width 0.3s, height 0.3s, box-shadow 0.3s;
}

.background__button.is-hover {
  width: 200px;
  height: 200px;
  box-shadow: inset 0px 0px 300px -40px rgba(0, 0, 0, 1);
}

.otbutton:hover {
  box-shadow: inset 0 0 20px rgb(4, 2, 2), 0 0 20px rgba(255, 126, 133, 0.2);
  outline-color: rgba(62, 16, 18, 0);
  outline-offset: 15px;
  text-shadow: 1px 1px 2px #3a4a51;
}
/*
 * react-calendar-heatmap styles
 *
 * All of the styles in this file are optional and configurable!
 * The github and gitlab color scales are provided for reference.
 */

.react-calendar-heatmap text {
  font-size: 10px;
  fill: #aaa;
}

.react-calendar-heatmap .react-calendar-heatmap-small-text {
  font-size: 5px;
}

.react-calendar-heatmap rect:hover {
  stroke: #555;
  stroke-width: 1px;
}

/*
 * Default color scale
 */

.react-calendar-heatmap .color-empty {
  fill: #eeeeee;
}

.react-calendar-heatmap .color-filled {
  fill: #8cc665;
}

/*
 * Github color scale
 */

.react-calendar-heatmap .color-github-0 {
  fill: #eeeeee;
}
.react-calendar-heatmap .color-github-1 {
  fill: #d6e87a;
}
.react-calendar-heatmap .color-github-2 {
  fill: #8cc665;
}
.react-calendar-heatmap .color-github-3 {
  fill: #44a340;
}
.react-calendar-heatmap .color-github-4 {
  fill: #1e6823;
}

/* .react-calendar-heatmap .color-github-0 {
  fill: #eeeeee;
}
.react-calendar-heatmap .color-github-1 {
  fill: #d8c48f;
}
.react-calendar-heatmap .color-github-2 {
  fill: #e0be69;
}
.react-calendar-heatmap .color-github-3 {
  fill: #c6a757;
}
.react-calendar-heatmap .color-github-4 {
  fill: #b49139;
} */

/*
 * Gitlab color scale
 */

.react-calendar-heatmap .color-gitlab-0 {
  fill: #ededed;
}
.react-calendar-heatmap .color-gitlab-1 {
  fill: #acd5f2;
}
.react-calendar-heatmap .color-gitlab-2 {
  fill: #7fa8d1;
}
.react-calendar-heatmap .color-gitlab-3 {
  fill: #49729b;
}
.react-calendar-heatmap .color-gitlab-4 {
  fill: #254e77;
}
.stats-namehead {
  font-style: normal;
  font-family: "Montserrat", sans-serif;
  font-weight: bold;
  /* color: red; */
}

.noti-active {
  /* font-family: 'Montserrat', sans-serif; */
  position: absolute;
  background: beige;
  width: 20px;
  height: 15px;
  border-radius: 10px;
  margin-left: 17px;
  margin-top: -6px;
  font-size: 10px !important;
  font-weight: bold;
  text-align: center;
  color: black;
}
.buycoffee {
  /* display: fixed; */
  position: fixed;
  bottom: 20px;
  right: 20px;
  width: 50px;
  height: 50px;
  border-radius: 50%;
  z-index: 0;
}
.maximize-screen {
  width: 30px;
  color: black;
  position: fixed;
  top: 70px;
  right: 13px;
  cursor: pointer;
}
.maximize-screen-active {
  width: 30px;
  color: black;
  position: fixed;
  top: 5px;
  right: 13px;
  cursor: pointer;
}