/************************/
/* 	      MAIN          */
/************************/
body {
  font-family: 'Nunito Sans', sans-serif;
  margin: auto;
  scroll-behavior: smooth;
  background-color: #f2f2f2;
}



/************************/
/* 	       NAV         */
/************************/

header {
  position: sticky;
	top: 10px;
}

nav {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
}

nav a {
  text-decoration: none;
  font-size: 2em;
  letter-spacing: 1px;
  font-weight: 700;
}

nav ul {
  display: flex;
  list-style-type: none;
}

nav li a {
  text-decoration: none;
  font-size: 1.1em;
  font-weight: 600;
  color: #010101;
  margin: 1em;
}

nav a:hover, nav a:active {
  color: #A3DADA;
}

nav li a:hover, nav li a:active {
  color: #59AF7C;
}



/************************/
/* 	     COLORS         */
/************************/

.square {
  width: 100px;
  height: 100px;
}


.my-primary {
	background-color: #59AF7C;
}
.my-text-primary {
  color: #59AF7C;	
}

.my-secondary {
	background-color: #A3DADA;
}
.my-text-secondary {
  color: #A3DADA;	
}

.my-tertiary {
	background-color: #FFE579;
}
.my-text-tertiary {
  color: #FFE579;	
}

.my-quaternary {
	background-color: #C6611D;
}
.my-text-quaternary {
  color: #C6611D;	
}

.my-black {
	background-color: #010101;
}
.my-text-black {
  color: #010101;	
}

.my-light {
	background-color: #f2f2f2;
}
.my-text-light {
  color: #f2f2f2;	
}



/************************/
/* 	    TYPO        */
/************************/

h1, h2, h3, h4, h5, h6, a {
  font-family: 'Chakra Petch', sans-serif;
}

p {
  letter-spacing: .5px;
  font-size: 1em;
}

.lead {
  font-weight: 600;
}

blockquote {
  font-style: italic;
  font-weight: 600;
}



/************************/
/* 	    BOUTTONS        */
/************************/

button {
  z-index: 0;
  cursor: pointer;
  position: relative;
  padding: 1.5em 4em 1.5em;
  font-size: 20px;
  letter-spacing: 1px;
  border: none;
  background-color: rgba(0, 0, 0, 0);
}
button:hover {

  border: 1px solid black;
  background-color: transparent;
}
button:active {
  transform: scale(.96);
}
button::after {
  content: "";
  width: 100%;
  height: 100%;
  position: absolute;
  top: 0px;
  left: 0px;
  transition: 0.2s;
}
button:hover::after {
  z-index: -1;
  top: 9px;
  left: 9px;
}
button span {
  z-index: 1;

  position: absolute;
  width: 20em;
	transform: translateX(-50%) translateY(-50%);
}
button:hover span {
  animation: bounce 2s infinite linear;
}

@keyframes bounce {
	0% {transform: translateX(-50%) translateY(-50%)}
	25% {transform: translateX(-50%) translateY(-65%)}
	50% {transform: translateX(-50%) translateY(-50%)}
	75% {transform: translateX(-50%) translateY(-35%)}
	100% {transform: translateX(-50%) translateY(-50%)}
}

.anim-text-long {
  width: 25rem;
}

.anim-text-long-sm {
  width: 15rem;
}


.my-btn-primary {
  border: 1px solid #59AF7C;
}
.my-btn-primary::after {
  background-color: #59AF7C;
}

.my-btn-secondary {
  border: 1px solid #A3DADA;
}
.my-btn-secondary::after {
  background-color: #A3DADA;
}

.my-btn-tertiary {
  border: 1px solid #FFE579;
}
.my-btn-tertiary::after {
  background-color: #FFE579;
}


.my-btn-sm {
  font-size: .8em;
}
.my-btn-lg {
  font-size: 1.4em;
}




.my-link {
  text-decoration: none;
  color: #59AF7C;
  position: relative;
  font-family: 'Nunito Sans';
  font-weight: 700;
}

.my-link:hover {
  color: #59AF7C;
}

.my-link:after {
  content: '';
  height: 2px;
  position: absolute;
  bottom: 0;
  left: 0;
  width: 0%;
  background: #59AF7C;
  transition: 0.2s;
}

.my-link:hover:after {
  width: 100%;
}

.my-link-sm {
  font-size: .8em;
}
.my-link-lg {
  font-size: 1.2em;
}