/* =================================================================================== */

/* BUTTONS */

/* =================================================================================== */

.pushButton{
  cursor: pointer;

  height: 100%;
  width: 100%;

  text-decoration:none;
  font-weight: 800;
  color: var(--dark-black);
  font-weight: 800;
  letter-spacing: 1.5px;
  font-size: 1rem;

  background-color: var(--soft-black);
  border: none;
  box-shadow: 0px 10px 0px 0px var(--dark-black);
  transform: translateY(-10px);
  transition: box-shadow .1s ease, transform .1s ease;
}

.pushButton:hover{
  box-shadow: 0px 5px 0px 0px var(--dark-black);
  transform: translateY(-5px);
  transition: box-shadow .1s ease, transform .1s ease;
}

.pushButton:active{
  box-shadow: 0px 0px 0px 0px var(--dark-black);
  transform: translateY(0px);
  transition: box-shadow .1s ease, transform .1s ease;
}

.pushButton:disabled{
  color: var(--dark-black);
  background-color: var(--medium-black);
  box-shadow: 0px 0px 0px 0px var(--dark-black);
  transform: translateY(0px);
  transition: all .1s ease;
}

/* =================================================================================== */

/* Contact */

/* =================================================================================== */

.contactButton{
  color: var(--dark-green);
  background-color: var(--green);
  border-radius: 5px;
  box-shadow: 0px 10px 0px 0px var(--dark-green);
}

.contactButton:hover{
  box-shadow: 0px 5px 0px 0px var(--dark-green);
}
.contactButton:active{
  box-shadow: 0px 0px 0px 0px var(--dark-green);
}

/* =================================================================================== */

/* device */

/* =================================================================================== */

.deviceButton{
  color: var(--dark-black);
  background-color: var(--soft-black);
  border-radius: 100%;
  box-shadow: 0px 10px 0px 0px var(--dark-black);
  
  align-items: center;
  align-content: center;
  justify-items: center;
  justify-content: center;

  width: 4rem;
  height: 4rem;

  color: var(--white-smoke);
}

.deviceButton:hover{
  box-shadow: 0px 5px 0px 0px var(--dark-black);
}
.deviceButton:active{
  box-shadow: 0px 0px 0px 0px var(--dark-black);
}

/* =================================================================================== */

/* Link */

/* =================================================================================== */

.linkButton{
    height: 3rem;
  color: var(--dark-yellow);
  background-color: var(--yellow);
  border-radius: 5px;
  box-shadow: 0px 10px 0px 0px var(--dark-yellow);
}

.linkButton:hover{
  box-shadow: 0px 5px 0px 0px var(--dark-yellow);
}
.linkButton:active{
  box-shadow: 0px 0px 0px 0px var(--dark-yellow);
}
.linkButton:disabled{
  color: var(--dark-black);
  background-color: var(--medium-black);
  box-shadow: 0px 0px 0px 0px var(--dark-black);
}

/* =================================================================================== */

/* Tabs */

/* =================================================================================== */

.tabs button{
  display: inline-flex;
  height: 3rem;
  width: 10rem;

  align-items: center;
  align-content: center;
  justify-content: center;

  background: var(--blue);
  border: 0px solid var(--blue);
  border-radius:5px;

  color:var(--white-smoke);
  text-decoration:none;
  font-weight: 800;

  -webkit-transition: all 0.1s;
  -moz-transition: all 0.1s;
  transition: all 0.1s;
}

.tabs button:hover{
  background: var(--black-blue);
  border: 1px solid var(--white-smoke);
  transition: all 0.1s;
}
.tabs button.active{
  background: var(--black-blue);
}

/* =================================================================================== */

/* Explore */

/* =================================================================================== */

.explore{
    height: 3rem;
    color: var(--dark-yellow);
    background-color: var(--yellow);
    border-radius: 5px;
    box-shadow: 0px 10px 0px 0px var(--dark-yellow);
}

.explore:hover{
  box-shadow: 0px 5px 0px 0px var(--dark-yellow);
}
.explore:active{
  box-shadow: 0px 0px 0px 0px var(--dark-yellow);
}

/* =================================================================================== */

/* Page Explore */

/* =================================================================================== */

.page_explore{
    height: 3rem;
    color: var(--dark-blue);
    background-color: var(--blue);
    border-radius: 5px;
    box-shadow: 0px 10px 0px 0px var(--dark-blue);
    color: var(--white-smoke);
}

.page_explore:hover{
  box-shadow: 0px 5px 0px 0px var(--dark-blue);
}
.page_explore:active{
  box-shadow: 0px 0px 0px 0px var(--dark-blue);
}

/* =================================================================================== */

/* Pro */

/* =================================================================================== */

.proButton{
    color: var(--dark-red);
    background-color: var(--red);
    border-radius: 5px;
    box-shadow: 0px 10px 0px 0px var(--dark-red);
    color: var(--dark-red);
}

.proButton:hover{
  box-shadow: 0px 5px 0px 0px var(--dark-red);
}
.proButton:active{
  box-shadow: 0px 0px 0px 0px var(--dark-red);
}

/* =================================================================================== */

/* Preview */

/* =================================================================================== */

.preview_button{
  width: 5rem;
  height: 5rem;
  color: var(--dark-yellow);
  background-color: var(--yellow);
  border-radius: 100%;
  box-shadow: 0px 10px 0px 0px var(--dark-yellow);
}

.preview_button:hover{
  box-shadow: 0px 5px 0px 0px var(--medium-black);
}
.preview_button:active{
  box-shadow: 0px 0px 0px 0px var(--medium-black);
}
.preview_button:disabled{
  color: var(--dark-black);
  background-color: var(--medium-black);
  box-shadow: 0px 0px 0px 0px var(--dark-black);
}