.btn-shaded:active {
  background-image: linear-gradient(180deg, white 50%, var(--first-color) 110%);
  box-shadow: 0px 5px 5px var(--first-color);
  border-radius: 50px;
  width: fit-content;
}
.submit_icon {
    border: 2px solid green;
    width: 3vw;
}

.button {
  background: transparent;
  border: 2px solid var(--second-color);
  text-align: center;
  cursor: pointer;
}

button[type=submit] {
    height: 20px;
    width: 70px
}

.click {
  cursor: pointer;
}
.click:active {
  background-image: linear-gradient(var(--first-color)50%, white 85%);
  box-shadow: 0px 5px 5px var(--first-color);
  border-radius: 50px;
}
.initially-clicked{
  background-image: linear-gradient(var(--first-color)50%, white 85%);
  box-shadow: 0px 5px 5px var(--first-color);
  border-radius: 50px;
  cursor: pointer;
}
.circle {
    height: 20vh;
    width: 20vh;
    transition: transform .2s;
    display: inline-block;
}
.circle2 {
    height: 100px;
    width: 100px;
    transition: transform .2s;
    display: inline-block;
    border-radius: 50%;
    border: 5px solid var(--first-color);
  
    -webkit-animation: myOrbit 4s linear infinite;
    -moz-animation: myOrbit 4s linear infinite;
    -o-animation: myOrbit 4s linear infinite;
    animation: myOrbit 4s linear infinite;
}
@-webkit-keyframes myOrbit {
    from {
        -webkit-transform: rotate(0deg) translateX(300px) rotate(0deg);
    }

    to {
        -webkit-transform: rotate(360deg) translateX(150px) rotate(-360deg);
    }
}

.nav {
    height: 12vh;
    background-color: var(--first-color);
}


.circle:hover {
    -ms-transform: scale(1.5);
    -webkit-transform: scale(1.5);
    transform: scale(1.5);
    opacity: 60%;
}

label {
  color: var(--third-color);
  font-size: 25px;
  text-align: center;
 
}

.NavMargin {
    height: 12vh;
    background-color: var(--first-color);
}
/* width */
::-webkit-scrollbar {
    width: 5px;
    background-color: #209396;
}
    ::-webkit-scrollbar:hover {
        width: 10px;
    }

/* Track */
::-webkit-scrollbar-track {
    box-shadow: inset 0 0 5px #209396;
    border-radius: 10px;
}

/* Handle */
::-webkit-scrollbar-thumb {
    background: rgb(140,0,0);
    background: linear-gradient(0deg, rgba(140,0,0,1) 0%, rgba(255,255,255,0.8421743697478992) 50%, rgba(140,0,0,1) 100%);
    border-radius: 10px;
}

    /* Handle on hover */
    ::-webkit-scrollbar-thumb:hover {
        cursor: pointer;
        background: rgb(140,0,0);
        background: linear-gradient(0deg, rgba(140,0,0,1) 0%, rgba(255,255,255,0.8421743697478992) 50%, rgba(140,0,0,1) 100%);
    }
@media only screen and (min-width: 1700px) {
    /*.circle {
        height: 300px;
        width: 400px;
      
    }*/
    label {
        
        font-size: 40px;
       
    }
  
      
    }


@media only screen and (MAX-width: 600px) {

    .nav {
        height: 0vh;
    }
}