::-webkit-scrollbar {
    display: none;
}

* {
    margin: 0;
    padding: 0;
    font-family: Georgia, 'Times New Roman', Times, serif;
}

html {
    scroll-behavior: smooth;
}


input[type=text] {
    border: 1px solid rgb(188, 188, 188);
    background-color: rgb(254, 254, 254);
    padding: 0px auto;
    box-shadow: inset 8px 8px 5px rgba(0, 0, 0, 0.3), inset -8px -8px 5px rgba(255, 255, 255, 0.582);
    font-size: 1.7em;
    font-weight: 500;
    width: 618px;
    height: 38px;
    border-radius: 0px;
    color: #000;
    padding: 0 5px;
    margin-bottom: 24px;
    margin-left: 27px;
    margin-top: 40px;
    font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
}

.calc-buttons {
    margin-left: 7px;
    display: flex;
}

.button {

    width: 80px;
    margin: 3px;
    border: 1px ridge grey;
    height: 30px;
    border-radius: 20px;
    color: #000000;
    cursor: pointer;
}

button:hover {
    background-color: hsl(53, 100%, 50%);
    transition: .4s;
}

button:active {
    background-color: hsl(0, 0%, 100%);
    box-shadow: 0px 0px 10px rgb(255, 255, 255),
        0px 0px 20px rgb(255, 255, 255),
        0px 0px 40px rgb(255, 255, 255),
        0px 0px 60px rgb(255, 255, 255), inset 4px 4px 10px #cacaca, inset -4px -4px 10px #cacaca;
    text-shadow: none;
    border: 1px solid rgb(181, 181, 181);
    color: #878787;
    cursor: none;
}


.functions-one {
    display: flex;
    justify-content: center;
    flex-wrap: wrap;

}


.functions-two {
    display: flex;
    justify-content: center;
    flex-wrap: wrap;

}

.triggers {
    font-size: 1.2em;
    border: 1px solid #ffffff;
    background: linear-gradient(160deg, #95ff00, transparent, transparent);
    box-shadow: inset 1px 1px 4px #ffffff, inset -4px -4px 10px #ffffff, 2px 2px 10px #272727;
    color: #000000;
}

.numbers {
    background: linear-gradient(160deg, #ff0000, transparent, transparent);
    box-shadow: inset 1px 1px 4px #ffffff, inset -4px -4px 10px #ffffff, 2px 2px 10px #272727;
    font-size: 1.2em;
    color: #000000;
    border: 1px solid #ffffff;
}

.basic-stuff {
    background: linear-gradient(160deg, #3700ff, transparent, transparent);
    box-shadow: inset 1px 1px 4px #ffffff, inset -4px -4px 10px #ffffff, 2px 2px 10px #272727;
    font-size: 1.2em;
    color: #000000;
    border: 1px solid #ffffff;
}

.complex-stuff {
    background: linear-gradient(160deg, #ff00f7, transparent, transparent);
    box-shadow: inset 1px 1px 4px #ffffff, inset -4px -4px 10px #ffffff, 2px 2px 10px #272727;
    font-size: 1.2em;
    color: #000000;
    border: 1px solid #ffffff;
}

#bg {
    position: absolute;
    width: 100%;
    height: 127vh;
}



.nav-list {
    width: 100%;
    background: transparent;
    margin: 0px;
    display: flex;
    justify-content: end;
    align-items: center;
    z-index: 10;

}

ul li {
    display: flex;
    align-items: center;
    justify-content: center;
    height: 24px;
    width: 100px;
    margin-top: 18px;
    margin-right: 18px;
    margin-bottom: 18px;
    border-radius: 20px;
    list-style: none;
    background: linear-gradient(160deg, transparent, rgba(109, 109, 109, 0.956));
    box-shadow: inset 1px 1px 7px #ffffff, inset -5px -5px 10px #ffffff, 5px 5px 10px #585858;
    font-size: 1.1em;
    border: 1px solid #ffffff;
}

ul li:hover {
    background: linear-gradient(150deg, white, #00c8ff);
}

ul li:active {
    height: 24px;
    width: 100px;
    margin-top: 18px;
    margin-right: 18px;
    margin-bottom: 18px;
    background: #ffffff;
    background-color: hsl(0, 0%, 100%);
    box-shadow: 0px 0px 10px rgb(255, 255, 255),
        0px 0px 20px rgb(255, 255, 255),
        0px 0px 40px rgb(255, 255, 255),
        0px 0px 60px rgb(255, 255, 255), inset 4px 4px 10px #c6c6c6, inset -1px -1px 10px #d6d6d6;
    text-shadow: none;
    border: 1px solid rgb(181, 181, 181);
    cursor: none;
}

ul li a {
    text-decoration: none;
    color: rgb(0, 162, 255);
    font-size: 14px;
}

ul li a:hover {
    cursor: pointer;
    text-decoration: none;
    color: rgb(255, 0, 0);
}

ul h1 {
    margin-right: 212px;
    font-size: 2em;
    font-weight: 300;
    color: #ff00f2;
    font: large;
}


h3 {
    margin-left: 60px;
    padding: 10px 20px 5px 50px;
    color: hsl(240, 100%, 50%);
}

h1 span {
    transition: .5s;
    margin-left: -529px;
}

h1:hover span {
    color: rgb(255, 255, 255);
    text-shadow: 0px 0px 10px rgb(255, 255, 255),
        0px 0px 20px rgb(255, 255, 255),
        0px 0px 40px rgb(255, 255, 255),
        0px 0px 80px rgb(255, 255, 255),
        0px 0px 120px rgb(255, 255, 255),
        0px 0px 160px rgb(255, 255, 255);
}

.burger {
    position: absolute;
    cursor: pointer;
    right: 5%;
    top: 10px;
    display: none;
}

.line {
    width: 25px;
    background-color: white;
    height: 5px;
    margin: 3px;
}

.main {
    z-index: 1;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
}

.main h1 {
    font-size: 48px;
    margin-top: 127px;
    margin-left: 10px;
    padding: 0;
    color: rgb(144, 144, 144);
    transition: .5s;
    z-index: 1;
}

.main h1:hover {
    color: rgb(255, 255, 255);
    text-shadow: 0px 0px 10px rgb(255, 255, 255),
        0px 0px 20px rgb(255, 255, 255),
        0px 0px 40px rgb(255, 255, 255),
        0px 0px 80px rgb(255, 255, 255),
        0px 0px 120px rgb(255, 255, 255),
        0px 0px 160px rgb(255, 255, 255);
}






.detail {
    padding-top: 200px;
    padding-bottom: 30px;
    margin: auto;
    width: 80%;
    z-index: 1000;
}

h2 {
    margin-top: 10px;
    font-size: 2.5em;
    font-weight: 400;
    color: #000000;
}

strong {
    margin-bottom: 20px;
    font-size: 1.3em;
    font-weight: 300;
    color: rgb(1, 164, 252);
}

h4 {
    margin: 15px 0;
    font-size: 1.3em;
    font-weight: 200;
    color: #000000;
}

h4 p {
    margin: 10px 0;
    font-size: 16px;
    color: #595959;
}

footer {
    display: flex;
    align-items: center;
    justify-content: center;
    flex-direction: column;
    background: #000000;
}

footer p {
    font: 1em sans-serif;
    margin-bottom: 30px;
    color: #ffffff;
}

.heading {
    display: flex;
    justify-content: center;
    align-items: center;
    margin-left: 40px;
}

.heading h1 {
    margin-right: 10px;
    margin-left: 20px;
    margin-bottom: 15px;
    font-size: 3em;
    font-weight: 400;
    color: #a34100;
    font: large;
    cursor: pointer;
}

.heading h1:hover {
    transition: .2s;
    color: #ffffff;
    text-shadow: 0px 0px 10px #ffffff,
        0px 0px 20px #ffffff,
        0px 0px 40px #ffffff,
        0px 0px 80px #ffffff,
        0px 0px 120px #ffffff,
        0px 0px 160px #ffffff;
}

footer ul li {
    width: 180px;
    height: 27px;
}

footer ul li:active {
    height: 27px;
    width: 180px;
}

footer ul li a {
    color: #ffffff;
    font-size: .9em;
}

footer ul {
    position: relative;
    width: 80%;
    background: transparent;
    margin: 20px 0px;
    gap: 7px;
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    align-items: center;
    box-shadow: none;
    z-index: 10;
}


.socialbar ul {
    position: absolute;
    top: 350px;
    left: 10px;
    display: flex;
    flex-direction: column;
    transform-style: preserve-3d;
    transform: rotate(-0deg) skew(0deg);
}

.socialbar ul li {
    position: relative;
    list-style: none;
    width: 0px;
    height: 0px;
    margin: 18px 14.2px;
}

.socialbar ul li a {
    background: red;
}

.socialbar ul li span {
    position: absolute;
    display: flex !important;
    top: 0;
    left: 0;
    width: 37px;
    height: 37px;
    border-radius: 50%;
    justify-content: center;
    align-items: center;
    background: rgba(221, 216, 216, 0.572);
    color: rgba(255, 255, 255, 0.9);
}

.socialbar ul li :hover span {
    /* position: absolute; */
    transition: 0.8s;
}

.socialbar ul li :hover span :nth-child(1) {
    transform: translate(22px, -22px);
    transition: .8s;
    border-radius: 50%;
}

.socialbar ul li :nth-child(1):hover span {
    background: rgb(223, 218, 218);
}

.socialbar img:hover {
    box-shadow: -8px 8px 8px #525151;
    border-radius: 50%;
    transition: 0s;
}

.socialbar img:active {
    box-shadow: 0px 0px 5px #ffffff,
        0 0 10px #ffffff, 0 0 20px #ffffff, 0 0 40px #ffffff, 0 0 60px #ffffff, 0 0 100px #ffffff, 0 0 125px #ffffff, 0 0 160px #ffffff, 0 0 200px #ffffff;
    border-radius: 50%;
    transition: 0s;
}



.container {
    position: absolute;
    top: 70px;
    display: flex;
    align-items: center;
    /* flex-wrap: wrap; */
    width: 100%;
    height: 30px;
    background: transparent;
  }
  
  .container .btn {
    position: relative;
    width: 108px;
    height: 30px;
    margin: 12px;
  }
  
  .container .btn a {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
    background: rgba(116, 116, 116, 0);
    box-shadow: 0 23px 23px rgba(72, 71, 71, 0.475);
    border-top: 1px solid rgba(255, 255, 255, 0.137);
    border-bottom: 1px solid rgba(255, 255, 255, 0.137);
    border-radius: 30px;
    color: rgb(255, 255, 255);
    z-index: 1;
    font-weight: 400;
    font-size: 1.1rem;
    letter-spacing: 1px;
    text-decoration: none;
    overflow: hidden;
    transition: .5s;
    backdrop-filter: blur(12px);
  }
  
  .container .btn:hover a {
    letter-spacing: 3px;
  }
  
  .container .btn a::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 50%;
    height: 50%;
    background: linear-gradient(to left, rgba(179, 178, 178, 0.287), transparent);
    transform: skewX(45deg) translateX(0);
    transition: .5s;
  }
  
  .container .btn:hover a::before {
  
    transform: skewX(45deg) translateX(200%);
    transition: .5s;
  }
  
  .container .btn::before {
    content: '';
    position: absolute;
    left: 50%;
    transform: translateX(-50%);
    bottom: -2px;
    width: 30px;
    height: 20px;
    background: rgb(255, 255, 255);
    border-radius: 20px;
    transition: .5s;
  }
  
  .container .btn::after {
    content: '';
    position: absolute;
    left: 50%;
    transform: translateX(-50%);
    top: 0px;
    width: 30px;
    height: 20px;
    background: rgb(255, 255, 255);
    border-radius: 20px;
    transition: .5s;
  }
  
  .container .btn:hover::before {
    bottom: 0;
    height: 50%;
    width: 80%;
    border-radius: 30px;
    transition-delay: .2s;
  }
  
  .container .btn:hover::after {
    top: 0;
    height: 50%;
    width: 80%;
    border-radius: 30px;
    transition-delay: .2s;
  }
  
  .container .btn:nth-child(1):before,
  .container .btn:nth-child(1)::after {
    background: rgb(255, 20, 224);
    box-shadow: 0 0 5px rgb(252, 6, 219),
      0 0 15px rgb(252, 6, 219),
      0 0 30px rgb(252, 6, 219),
      0 0 60px rgb(252, 6, 219);
  }
  
  .container .btn:nth-child(2):before,
  .container .btn:nth-child(2)::after {
    background: rgb(52, 250, 2);
    box-shadow: 0 0 5px rgb(74, 255, 2),
      0 0 15px rgb(3, 240, 15),
      0 0 30px rgb(6, 252, 39),
      0 0 60px rgb(55, 252, 6);
  }
  
  .container .btn:nth-child(3):before,
  .container .btn:nth-child(3)::after {
    background: rgb(250, 105, 2);
    box-shadow: 0 0 5px rgb(250, 105, 2),
      0 0 15px rgb(250, 105, 2),
      0 0 30px rgb(250, 105, 2),
      0 0 60px rgb(250, 105, 2);
  }
  
  .container .btn:nth-child(4):before,
  .container .btn:nth-child(4)::after {
    background: rgb(57, 4, 248);
    box-shadow: 0 0 5px rgb(57, 4, 248),
      0 0 15px rgb(57, 4, 248),
      0 0 30px rgb(57, 4, 248),
      0 0 60px rgb(57, 4, 248);
  }
  
  .container .btn:nth-child(5):before,
  .container .btn:nth-child(5)::after {
    background: rgb(250, 2, 2);
    box-shadow: 0 0 5px rgb(255, 2, 2),
      0 0 15px rgb(255, 5, 5),
      0 0 30px rgb(252, 6, 6),
      0 0 60px rgb(252, 6, 6);
  }