/* watermark */
.watermark {
    position: absolute;
    top: 1%;
    right: 1%;
    opacity: 1;
}

.logo-only {
    max-width: 75px;
    height: auto;
    filter: drop-shadow(0 0 5px rgba(0,0,0,0.3));
    opacity: 0.9;
}

/* hud */

/* Font */
@import url('https://fonts.googleapis.com/css2?family=Poppins:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;0,800;0,900;1,400;1,500;1,600&display=swap');

/* * */
* {
  box-sizing: border-box;
  user-select: none;
  -webkit-user-drag: none;
  
}

        body {
            justify-content: center;
            align-items: end;
            display: flex;
            height: 99vh;
            background-size: cover;
            margin: 0;
            font-family: "Rubik", sans-serif;
        }

        .container {
            width: 30vh;
            height: 6vh;
            position: absolute;
            bottom: 20px;
            left: 50%;
            transform: translateX(-50%);
            transition: all 0.3s ease;
        }
        
.stats{
  display: flex;
  position: absolute;

  bottom: 1%;
  left: 50%;
  transform: translate(-50%, -1%);
}


#c{
    color: #0090ff;
  display: flex;
  font-size: 1vw;
  text-align: center;
  justify-content: center;
  align-items: center;
}


.boxs {
  display: flex;
  position: absolute;

  bottom: 1%;
  left: 50%;
  transform: translate(-50%, -6%);

}
.main {
  display: flex;
}
.box {
  width: 50px;
  height: 50px;
  justify-content: center;
  align-items: center;
  display: flex;
  margin: 5px;
  border-radius: 1vh;
  /* border: 3px solid #0090ff; */
  border: 2px solid rgba(56, 182, 255, 0.7);
  /* background-color: #025797; */
  /* background: rgb(9, 26, 34); */
  background: hsl(216, 14%, 4%);
  font-size: 2vh;
  color: #0090ff;
  overflow: hidden;
  position: relative;
}

.box::before {
                content: '';
                position: absolute;
                height: 100%;
                width: 100%;
                background: #38b6ff;
                top: 50%;
                left: 50%;
                transform: translate(-50%, -50%);
                z-index: 2;
                opacity: calc(0.1);
                filter: blur(0.9vh);
}


        .settings {
            position: absolute;
            top: 50%;
            left: 50%;
            transform: translate(-50%, -50%);
            width: 50vh;
            height: 45vh;
        }

        .name {
            text-align: center;
            color: white;
            font-size: 3vh;
            font-weight: 450;
            margin-top: 10px;
        }

        .content1 {
            width: 50vh;
            height: 6vh;
            background-color: rgb(17, 17, 17);
            border-radius: 10px;
            border: 1px solid rgb(43, 43, 43);
            color: white;
            font-size: 2.3vh;
            justify-content: center;
            align-items: center;
            display: flex;
        }

        .sf {
            width: 25vh;
            height: 1vh;
            padding: 20px;
            justify-content: start;
            align-items: center;
            display: flex;
            font-weight: 500;
        }

        .sf:last-child {
            justify-content: end;
        }

        .closebtn {
            width: 3.2vh;
            height: 3.2vh;
            justify-content: center;
            align-items: center;
            display: flex;
            border-radius: 10px;
            background-color: #222222c7;
            border: 1px solid #0091ffd0;
            font-size: 1.3vh;
            transition: 0.3s;
            cursor: pointer;
            color: #0090ff;
        }

        .closebtn:hover {
            background-color: #053d68;
        }

        .content {
            margin-top: 1vh;
            width: 50vh;
            height: 30vh;
            background-color: rgb(17, 17, 17);
            border-radius: 10px;
            border: 1px solid rgb(43, 43, 43);
        }

        .sec {
            padding: 15px;
            display: flex;
            justify-content: space-between;
            align-items: center;
        }

        .txtsec {
            flex: 1;
        }

        .nnc {
            font-size: 2.1vh;
            color: white;
        }

        .nnd {
            color: rgb(163, 163, 163);
            font-size: 1.5vh;
            margin-top: 5px;
        }

        .colorpicker {
            width: 6vh;
            height: 4vh;
            border: none;
            border-radius: 8px;
            cursor: pointer;
            background: none;
            padding: 0;
        }

        .colorpicker::-webkit-color-swatch {
            border: 1px dotted white;
            border-radius: 6px;
        }

        .posbtns {
            padding: 0px 15px;
        }

        .posbtn {
            width: 10vh;
            height: 3vh;
            flex: 1;
            background-color: rgb(26, 26, 26);
            border: 1px solid transparent;
            border-bottom-left-radius: 7px;
            border-top-left-radius: 7px;
            color: #b4b4b4;
            font-size: 1.8vh;
            cursor: pointer;
            transition: all 0.3s ease;
            font-family: "Rubik", sans-serif;
        }
        .posbtn:last-child {
            border-bottom-right-radius: 7px;
            border-bottom-left-radius: 0px;
            border-top-left-radius: 0px;
            border-top-right-radius: 7px;
        }

        .posbtn:hover {
            background-color: #313131;
        }

        .posbtn.active {
            background-color: #0090ff;

            color: white;
        }

                .container.top {
            bottom: auto;
            top: 20px;
        }