/**
  *   THIS IS THE MAIN BUTTONS MODULE, WHICH WILL BE USED BY USERS, IN THEIR WEB-DEVELOPMENT PROJECTS.

  *   MANY OTHER MODULES ARE ALSO LINKED TO THIS FILE TO MAINTAIN THE MODULARITY THROUGHOUT THE PROJECT.

  *   ? ========================== HOW TO WRITE SCSS OR CSS CODE ======================================
  *   ? > Try to write clean code and avoid extra css to implement a particular features

  *   ! WRITE TEST METHODS FOR EVERY FEATURE YOU ARE IMPLEMENTING
  *   ? Testing will help you to implement exact CSS/SCSS you want.

  *   ? At last, Try to follow all the best coding practices. 

  *   ? If any doubt, check CONTRIBUTING.md and CODE_OF_CONDUCT.md file

  *   ? Have a nice day!
  */

  /**
      Author: The DesignSystems
      LICENSE: https://www.github.com/DesignSystemsOSS/eccentrictouch/blob/master/LICENSE
      (c) All Copyrights are reserved by The DesignSystems
  */

/// ALL BUTTON RELATED CSS IS WRITTEN BELOW


/// feature: non-decorated-link
/// used to remove default text-decoration from link texts
.non_decorated {
  text-decoration: none;
}

.cartoon_button {
  color: black;
  font-family: var(--general-font-family);
  font-weight: var(--button-font-weight);
  background-color: white;
  width: 50%;
  padding: 1em;
  overflow: hidden;
  outline: solid;
  outline-color: black;
  box-shadow: 6px 6px black;
}

.cartoon_button_pd_2 {
  color: black;
  font-family: var(--general-font-family);
  font-weight: var(--button-font-weight);
  background-color: white;
  width: 50%;
  padding: 2em;
  overflow: hidden;
  outline: solid;
  outline-color: black;
  box-shadow: 6px 6px black;
}

.cartoon_button_pd_3 {
  color: black;
  font-family: var(--general-font-family);
  font-weight: var(--button-font-weight);
  background-color: white;
  width: 50%;
  padding: 3em;
  overflow: hidden;
  outline: solid;
  outline-color: black;
  box-shadow: 6px 6px black;
}

.cartoon_button_pd_4 {
  color: black;
  font-family: var(--general-font-family);
  font-weight: var(--button-font-weight);
  background-color: white;
  width: 50%;
  padding: 4em;
  overflow: hidden;
  outline: solid;
  outline-color: black;
  box-shadow: 6px 6px black;
}

.cartoon_button_pd_5 {
  color: black;
  font-family: var(--general-font-family);
  font-weight: var(--button-font-weight);
  background-color: white;
  width: 50%;
  padding: 5em;
  overflow: hidden;
  outline: solid;
  outline-color: black;
  box-shadow: 6px 6px black;
}

.cartoon_button_pd_6 {
  color: black;
  font-family: var(--general-font-family);
  font-weight: var(--button-font-weight);
  background-color: white;
  width: 50%;
  padding: 6em;
  overflow: hidden;
  outline: solid;
  outline-color: black;
  box-shadow: 6px 6px black;
}

.cartoon_button_pd_7 {
  color: black;
  font-family: var(--general-font-family);
  font-weight: var(--button-font-weight);
  background-color: white;
  width: 50%;
  padding: 7em;
  overflow: hidden;
  outline: solid;
  outline-color: black;
  box-shadow: 6px 6px black;
}

.cartoon_button_pd_8 {
  color: black;
  font-family: var(--general-font-family);
  font-weight: var(--button-font-weight);
  background-color: white;
  width: 50%;
  padding: 8em;
  overflow: hidden;
  outline: solid;
  outline-color: black;
  box-shadow: 6px 6px black;
}

.cartoon_button_pd_9 {
  color: black;
  font-family: var(--general-font-family);
  font-weight: var(--button-font-weight);
  background-color: white;
  width: 50%;
  padding: 9em;
  overflow: hidden;
  outline: solid;
  outline-color: black;
  box-shadow: 6px 6px black;
}

.cartoon_button_pd_10 {
  color: black;
  font-family: var(--general-font-family);
  font-weight: var(--button-font-weight);
  background-color: white;
  width: 50%;
  padding: 10em;
  overflow: hidden;
  outline: solid;
  outline-color: black;
  box-shadow: 6px 6px black;
}

.cartoon_button_hoverable {
  color: black;
  font-family: var(--general-font-family);
  font-weight: var(--button-font-weight);
  width: 100%;
  background-color: white;
  padding: 1em;
  overflow: hidden;
  outline: solid;
  outline-color: black;
  transition: 0.2s ease-in-out;
  text-align: center;
}

.cartoon_button_hoverable:hover {
  box-shadow: 6px 6px black;
  padding: 0.8em;
}

.cartoon_button_hoverable_pd_2 {
  color: black;
  font-family: var(--general-font-family);
  font-weight: var(--button-font-weight);
  width: 100%;
  background-color: white;
  padding: 2em;
  overflow: hidden;
  outline: solid;
  outline-color: black;
  transition: 0.2s ease-in-out;
  text-align: center;
}

.cartoon_button_hoverable_pd_2:hover {
  box-shadow: 6px 6px black;
  padding: 1.8em;
}

.cartoon_button_hoverable_pd_3 {
  color: black;
  font-family: var(--general-font-family);
  font-weight: var(--button-font-weight);
  width: 100%;
  background-color: white;
  padding: 3em;
  overflow: hidden;
  outline: solid;
  outline-color: black;
  transition: 0.2s ease-in-out;
  text-align: center;
}

.cartoon_button_hoverable_pd_3:hover {
  box-shadow: 6px 6px black;
  padding: 2.8em;
}

.cartoon_button_hoverable_pd_4 {
  color: black;
  font-family: var(--general-font-family);
  font-weight: var(--button-font-weight);
  width: 100%;
  background-color: white;
  padding: 4em;
  overflow: hidden;
  outline: solid;
  outline-color: black;
  transition: 0.2s ease-in-out;
  text-align: center;
}

.cartoon_button_hoverable_pd_4:hover {
  box-shadow: 6px 6px black;
  padding: 3.8em;
}

.cartoon_button_hoverable_pd_5 {
  color: black;
  font-family: var(--general-font-family);
  font-weight: var(--button-font-weight);
  width: 100%;
  background-color: white;
  padding: 5em;
  overflow: hidden;
  outline: solid;
  outline-color: black;
  transition: 0.2s ease-in-out;
  text-align: center;
}

.cartoon_button_hoverable_pd_5:hover {
  box-shadow: 6px 6px black;
  padding: 4.8em;
}

.cartoon_button_hoverable_pd_6 {
  color: black;
  font-family: var(--general-font-family);
  font-weight: var(--button-font-weight);
  width: 100%;
  background-color: white;
  padding: 6em;
  overflow: hidden;
  outline: solid;
  outline-color: black;
  transition: 0.2s ease-in-out;
  text-align: center;
}

.cartoon_button_hoverable_pd_6:hover {
  box-shadow: 6px 6px black;
  padding: 5.4em;
}

.cartoon_button_hoverable_pd_7 {
  color: black;
  font-family: var(--general-font-family);
  font-weight: var(--button-font-weight);
  width: 100%;
  background-color: white;
  padding: 7em;
  overflow: hidden;
  outline: solid;
  outline-color: black;
  transition: 0.2s ease-in-out;
  text-align: center;
}

.cartoon_button_hoverable_pd_7:hover {
  box-shadow: 6px 6px black;
  padding: 6.8em;
}

.cartoon_button_hoverable_pd_8 {
  color: black;
  font-family: var(--general-font-family);
  font-weight: var(--button-font-weight);
  width: 100%;
  background-color: white;
  padding: 8em;
  overflow: hidden;
  outline: solid;
  outline-color: black;
  transition: 0.2s ease-in-out;
  text-align: center;
}

.cartoon_button_hoverable_pd_8:hover {
  box-shadow: 6px 6px black;
  padding: 7.8em;
}

.cartoon_button_hoverable_pd_9 {
  color: black;
  font-family: var(--general-font-family);
  font-weight: var(--button-font-weight);
  width: 100%;
  background-color: white;
  padding: 9em;
  overflow: hidden;
  outline: solid;
  outline-color: black;
  transition: 0.2s ease-in-out;
  text-align: center;
}

.cartoon_button_hoverable_pd_9:hover {
  box-shadow: 6px 6px black;
  padding: 8.8em;
}

.cartoon_button_hoverable_pd_10 {
  color: black;
  font-family: var(--general-font-family);
  font-weight: var(--button-font-weight);
  width: 100%;
  background-color: white;
  padding: 10em;
  overflow: hidden;
  outline: solid;
  outline-color: black;
  transition: 0.2s ease-in-out;
  text-align: center;
}

.cartoon_button_hoverable_pd_10:hover {
  box-shadow: 6px 6px black;
  padding: 9.8em;
}

.cartoon_non_underlined_link {
  font-family: var(--general-font-family);
  color: black;
  text-decoration: none;
  border-bottom: 2px solid black;
  font-weight: var(--button-font-weight);
}

.cartoon_non_underlined_link:hover {
  border-bottom: none;
}

.cartoon_underlined_link {
  font-family: var(--general-font-family);
  color: black;
  text-decoration: none;
  font-weight: var(--button-font-weight);
}

.cartoon_underlined_link:hover {
  border-bottom: 2px solid black;
}

.cartoon_active_link {
  font-family: var(--general-font-family);
  color: black;
  text-decoration: none;
  font-weight: var(--button-font-weight);
}

.cartoon_active_link:hover {
  color: #0500FF;
}
.cartoon_button_semicurved_hoverable{
  font-family: var(--general-font-family);
  color: black;
  text-decoration: none;
  font-weight: var(--button-font-weight);
  padding: 1em;
  width: 100%;
  background-color: white;
  overflow: hidden;
  outline-color: black;
  transition: 0.2s ease-in-out;
  text-align: center;
  border-radius: 6px;
  border: 3px solid #000000;
  box-sizing: border-box;
}

.cartoon_button_semicurved_hoverable:hover{
  box-shadow: 6px 6px black;
  padding: 0.8em;  
}

.cartoon_button_semicurved_hoverable_pd_2{
  font-family: var(--general-font-family);
  color: black;
  text-decoration: none;
  font-weight: var(--button-font-weight);
  padding: 2em;
  width: 100%;
  background-color: white;
  overflow: hidden;
  outline-color: black;
  transition: 0.2s ease-in-out;
  text-align: center;
  border-radius: 6px;
  border: 3px solid #000000;
  box-sizing: border-box;
}

.cartoon_button_semicurved_hoverable_pd_2:hover{
  box-shadow: 6px 6px black;
  padding: 1.8em;  
}

.cartoon_button_semicurved_hoverable_pd_3{
  font-family: var(--general-font-family);
  color: black;
  text-decoration: none;
  font-weight: var(--button-font-weight);
  padding: 3em;
  width: 100%;
  background-color: white;
  overflow: hidden;
  outline-color: black;
  transition: 0.2s ease-in-out;
  text-align: center;
  border-radius: 6px;
  border: 3px solid #000000;
  box-sizing: border-box;
}

.cartoon_button_semicurved_hoverable_pd_3:hover{
  box-shadow: 6px 6px black;
  padding: 2.8em;  
}

.cartoon_button_semicurved_hoverable_pd_4{
  font-family: var(--general-font-family);
  color: black;
  text-decoration: none;
  font-weight: var(--button-font-weight);
  padding: 4em;
  width: 100%;
  background-color: white;
  overflow: hidden;
  outline-color: black;
  transition: 0.2s ease-in-out;
  text-align: center;
  border-radius: 6px;
  border: 3px solid #000000;
  box-sizing: border-box;
}

.cartoon_button_semicurved_hoverable_pd_4:hover{
  box-shadow: 6px 6px black;
  padding: 3.8em;  
}

.cartoon_button_semicurved_hoverable_pd_5{
  font-family: var(--general-font-family);
  color: black;
  text-decoration: none;
  font-weight: var(--button-font-weight);
  padding: 5em;
  width: 100%;
  background-color: white;
  overflow: hidden;
  outline-color: black;
  transition: 0.2s ease-in-out;
  text-align: center;
  border-radius: 6px;
  border: 3px solid #000000;
  box-sizing: border-box;
}

.cartoon_button_semicurved_hoverable_pd_5:hover{
  box-shadow: 6px 6px black;
  padding: 4.8em;  
}

.cartoon_button_semicurved_hoverable_pd_6{
  font-family: var(--general-font-family);
  color: black;
  text-decoration: none;
  font-weight: var(--button-font-weight);
  padding: 6em;
  width: 100%;
  background-color: white;
  overflow: hidden;
  outline-color: black;
  transition: 0.2s ease-in-out;
  text-align: center;
  border-radius: 6px;
  border: 3px solid #000000;
  box-sizing: border-box;
}

.cartoon_button_semicurved_hoverable_pd_6:hover{
  box-shadow: 6px 6px black;
  padding: 5.8em;  
}

.cartoon_button_semicurved_hoverable_pd_7{
  font-family: var(--general-font-family);
  color: black;
  text-decoration: none;
  font-weight: var(--button-font-weight);
  padding: 7em;
  width: 100%;
  background-color: white;
  overflow: hidden;
  outline-color: black;
  transition: 0.2s ease-in-out;
  text-align: center;
  border-radius: 6px;
  border: 3px solid #000000;
  box-sizing: border-box;
}

.cartoon_button_semicurved_hoverable_pd_7:hover{
  box-shadow: 6px 6px black;
  padding: 6.8em;  
}

.cartoon_button_semicurved_hoverable_pd_8{
  font-family: var(--general-font-family);
  color: black;
  text-decoration: none;
  font-weight: var(--button-font-weight);
  padding: 8em;
  width: 100%;
  background-color: white;
  overflow: hidden;
  outline-color: black;
  transition: 0.2s ease-in-out;
  text-align: center;
  border-radius: 6px;
  border: 3px solid #000000;
  box-sizing: border-box;
}

.cartoon_button_semicurved_hoverable_pd_8:hover{
  box-shadow: 6px 6px black;
  padding: 7.8em;  
}

.cartoon_button_semicurved_hoverable_pd_9{
  font-family: var(--general-font-family);
  color: black;
  text-decoration: none;
  font-weight: var(--button-font-weight);
  padding: 9em;
  width: 100%;
  background-color: white;
  overflow: hidden;
  outline-color: black;
  transition: 0.2s ease-in-out;
  text-align: center;
  border-radius: 6px;
  border: 3px solid #000000;
  box-sizing: border-box;
}

.cartoon_button_semicurved_hoverable_pd_9:hover{
  box-shadow: 6px 6px black;
  padding: 8.8em;  
}

.cartoon_button_semicurved_hoverable_pd_10{
  font-family: var(--general-font-family);
  color: black;
  text-decoration: none;
  font-weight: var(--button-font-weight);
  padding: 10em;
  width: 100%;
  background-color: white;
  overflow: hidden;
  outline-color: black;
  transition: 0.2s ease-in-out;
  text-align: center;
  border-radius: 6px;
  border: 3px solid #000000;
  box-sizing: border-box;
}

.cartoon_button_semicurved_hoverable_pd_10:hover{
  box-shadow: 6px 6px black;
  padding: 9.8em;  
}


.cartoon_button_curved_hoverable{
  font-family: var(--general-font-family);
  color: black;
  text-decoration: none;
  font-weight: var(--button-font-weight);
  padding: 1em;
  width: 100%;
  background-color: white;
  overflow: hidden;
  outline-color: black;
  transition: 0.2s ease-in-out;
  text-align: center;
  border-radius: 30px;
  border: 3px solid #000000;
  box-sizing: border-box;
}

.cartoon_button_curved_hoverable:hover{
  box-shadow: 6px 6px black;
  padding: 0.8em; 
}

.cartoon_button_curved_hoverable_pd_2{
  font-family: var(--general-font-family);
  color: black;
  text-decoration: none;
  font-weight: var(--button-font-weight);
  padding: 2em;
  width: 100%;
  background-color: white;
  overflow: hidden;
  outline-color: black;
  transition: 0.2s ease-in-out;
  text-align: center;
  border-radius: 30px;
  border: 3px solid #000000;
  box-sizing: border-box;
}

.cartoon_button_curved_hoverable_pd_2:hover{
  box-shadow: 6px 6px black;
  padding: 1.8em; 
}

.cartoon_button_curved_hoverable_pd_3{
  font-family: var(--general-font-family);
  color: black;
  text-decoration: none;
  font-weight: var(--button-font-weight);
  padding: 3em;
  width: 100%;
  background-color: white;
  overflow: hidden;
  outline-color: black;
  transition: 0.2s ease-in-out;
  text-align: center;
  border-radius: 30px;
  border: 3px solid #000000;
  box-sizing: border-box;
}

.cartoon_button_curved_hoverable_pd_3:hover{
  box-shadow: 6px 6px black;
  padding: 2.8em; 
}

.cartoon_button_curved_hoverable_pd_4{
  font-family: var(--general-font-family);
  color: black;
  text-decoration: none;
  font-weight: var(--button-font-weight);
  padding: 4em;
  width: 100%;
  background-color: white;
  overflow: hidden;
  outline-color: black;
  transition: 0.2s ease-in-out;
  text-align: center;
  border-radius: 30px;
  border: 3px solid #000000;
  box-sizing: border-box;
}

.cartoon_button_curved_hoverable_pd_4:hover{
  box-shadow: 6px 6px black;
  padding: 3.8em; 
}

.cartoon_button_curved_hoverable_pd_5{
  font-family: var(--general-font-family);
  color: black;
  text-decoration: none;
  font-weight: var(--button-font-weight);
  padding: 5em;
  width: 100%;
  background-color: white;
  overflow: hidden;
  outline-color: black;
  transition: 0.2s ease-in-out;
  text-align: center;
  border-radius: 30px;
  border: 3px solid #000000;
  box-sizing: border-box;
}

.cartoon_button_curved_hoverable_pd_5:hover{
  box-shadow: 6px 6px black;
  padding: 4.8em; 
}

.cartoon_button_curved_hoverable_pd_6{
  font-family: var(--general-font-family);
  color: black;
  text-decoration: none;
  font-weight: var(--button-font-weight);
  padding: 6em;
  width: 100%;
  background-color: white;
  overflow: hidden;
  outline-color: black;
  transition: 0.2s ease-in-out;
  text-align: center;
  border-radius: 30px;
  border: 3px solid #000000;
  box-sizing: border-box;
}

.cartoon_button_curved_hoverable_pd_6:hover{
  box-shadow: 6px 6px black;
  padding: 5.8em; 
}

.cartoon_button_curved_hoverable_pd_7{
  font-family: var(--general-font-family);
  color: black;
  text-decoration: none;
  font-weight: var(--button-font-weight);
  padding: 7em;
  width: 100%;
  background-color: white;
  overflow: hidden;
  outline-color: black;
  transition: 0.2s ease-in-out;
  text-align: center;
  border-radius: 30px;
  border: 3px solid #000000;
  box-sizing: border-box;
}

.cartoon_button_curved_hoverable_pd_7:hover{
  box-shadow: 6px 6px black;
  padding: 6.8em; 
}

.cartoon_button_curved_hoverable_pd_8{
  font-family: var(--general-font-family);
  color: black;
  text-decoration: none;
  font-weight: var(--button-font-weight);
  padding: 8em;
  width: 100%;
  background-color: white;
  overflow: hidden;
  outline-color: black;
  transition: 0.2s ease-in-out;
  text-align: center;
  border-radius: 30px;
  border: 3px solid #000000;
  box-sizing: border-box;
}

.cartoon_button_curved_hoverable_pd_8:hover{
  box-shadow: 6px 6px black;
  padding: 7.8em; 
}

.cartoon_button_curved_hoverable_pd_9{
  font-family: var(--general-font-family);
  color: black;
  text-decoration: none;
  font-weight: var(--button-font-weight);
  padding: 9em;
  width: 100%;
  background-color: white;
  overflow: hidden;
  outline-color: black;
  transition: 0.2s ease-in-out;
  text-align: center;
  border-radius: 30px;
  border: 3px solid #000000;
  box-sizing: border-box;
}

.cartoon_button_curved_hoverable_pd_9:hover{
  box-shadow: 6px 6px black;
  padding: 8.8em; 
}

.cartoon_button_curved_hoverable_pd_10{
  font-family: var(--general-font-family);
  color: black;
  text-decoration: none;
  font-weight: var(--button-font-weight);
  padding: 10em;
  width: 100%;
  background-color: white;
  overflow: hidden;
  outline-color: black;
  transition: 0.2s ease-in-out;
  text-align: center;
  border-radius: 30px;
  border: 3px solid #000000;
  box-sizing: border-box;
}

.cartoon_button_curved_hoverable_pd_10:hover{
  box-shadow: 6px 6px black;
  padding: 9.8em; 
}

.cartoon_multi_layer_button {
  width: 20%;
  padding: 1em;
  transition: 0.2s ease-in-out;
}

.cartoon_multi_layer_button:hover {
  box-shadow: 6px 24px 26px rgb(219, 219, 219);
}
body{
  display: flex;     /*            GLOWING BUTTON(NEON) */
 height: 100vh;
 background: black;
 align-items: center;
 justify-content: center;
}
.glowing_button{
 position: relative;
 height: 60px;
 width: 200px;
 border: none;
 outline: none;
 color: white;
 background: #111;
 cursor: pointer;
 border-radius: 5px;
 font-size: 18px;
 font-family: 'Raleway', sans-serif;
}
.glowing_button:before{
 position: absolute;
 content: '';
 top: -2px;
 left: -2px;
 height: calc(100% + 4px);
 width: calc(100% + 4px);
 border-radius: 5px;
 z-index: -1;
 opacity: 0;
 filter: blur(5px);
 background: linear-gradient(45deg, #ff0000, #ff7300, #fffb00, #48ff00, #00ffd5, #002bff, #7a00ff, #ff00c8, #ff0000);
 background-size: 400%;
 transition: opacity .3s ease-in-out;
 animation: animate 20s linear infinite;
}
.glowing_button:hover:before{
 opacity: 1;
}
.glowing_button:hover:active{
 background: none;
}
.glowing_button:hover:active:before{
 filter: blur(2px);
}
@keyframes animate {
 0% { background-position: 0 0; }
 50% { background-position: 400% 0; }
 100% { background-position: 0 0; }
}
