.btn-1 {
    height: 30px;
    background: transparent;
    border: 1px solid rgb(73, 73, 73);
    color: var(--text-color);
    font-family: Arkitech;
    letter-spacing: 1px;
    font-size: 0.6rem;
    padding: 8px;
    border-radius: 4px;
    cursor: pointer;
    transition: background 0.3s ease;
    box-shadow: rgba(99, 99, 99, 0.2) 0px 2px 8px 0px;
    -webkit-box-shadow: -1px 0px 5px 1px rgba(255, 255, 255, 0.36);
    -moz-box-shadow: -1px 0px 5px 1px rgba(255, 255, 255, 0.36);
    box-shadow: -1px 0px 5px 1px rgba(255, 255, 255, 0.08);
    width: 180px;
    transition: all 500ms;
    text-decoration: none;
    text-align: center;
    /* font-weight: bold; */
}

/* .btn-2 {
    background: repeating-linear-gradient(
    -35deg,
    #222,
    #222 3px,
    #333 0px,
    #333 6px
);
    border: 0.5px solid rgb(112, 112, 112);
    color: var(--text-color);
    font-weight: bolder;
    font-family: Arkitech;
    letter-spacing: 1px;
    font-size: 10px;
    padding: 10px;
    border-radius: 4px;
    cursor: pointer;
    -webkit-box-shadow: -1px 0px 5px 1px rgba(255, 255, 255, 0.36);
    -moz-box-shadow: -1px 0px 5px 1px rgba(255, 255, 255, 0.36);
    box-shadow: -1px 0px 5px 1px rgba(255, 255, 255, 0.08);
    overflow: hidden;
    opacity: 0.8;
    transition: opacity 0.3s ease; 
}
.animation {
    animation-name: slider; 
    animation-duration: 5s; 
    animation-timing-function: linear; 
    animation-delay: 0s;
    animation-iteration-count: infinite;
    animation-direction: normal ;
    animation-play-state: running;
    
} */

/* @keyframes slider {
    0% {
        background-position-y: 0;
    }

    100% {
        background-position-y: -100px; 
    }
} */


.btn-1:hover{
    background: var(--secondary);
    transform: scale(1.04);

}

.btn-2:hover{
    /* background: repeating-linear-gradient(
    -55deg,
    #333,
    #333 10px,
    #222 10px,
    #222 20px
); */
}

/* From Uiverse.io by vikiWayne */ 
.btn-2 {
  padding: 8px 1.5em;
    border: none;
    border-radius: 4px;
    /* font-weight: bold; */
    letter-spacing: 1px;
    text-transform: uppercase;
    cursor: pointer;
    color: var(--text-color-page-1);
    transition: all 500ms;
    font-size: 12px;
    position: relative;
    overflow: hidden;
    outline: 1px solid  rgb(73, 73, 73);
    font-family: inherit;
    background-color: transparent;
    text-decoration: none;
}

.btn-2:nth-child(1){
  background-color: rgba(10,10,10,0.8);
  color: white;
}

.btn-2:hover {
  color: #ffffff;
  transform: scale(1.04);
  outline: 1px solid  rgb(73, 73, 73);
  box-shadow: 4px 5px 10px -4px  rgb(83, 83, 83);
}

.btn-2::before {
  content: "";
  position: absolute;
  left: -50px;
  top: 0;
  width: 0;
  height: 100%;
  background-color: rgb(97 97 97);
  transform: skewX(45deg);
  z-index: -1;
  transition: width 500ms;
}


.btn-2:hover::before {
  width: 250%;
}