:root { --accent-color: #F29C38; --accent2-color: #82C91E; --accent3-color: #E6261F; --accent4-color: #8980F5; --primary-color: #1F76C3; --dark-text-color: #212121; --gray-text-color: #757575; --button-padding-x: 16px; --button-padding-y: 12px; --font-family-body: 'Roboto', sans-serif; --light-text-color: #FFFFFF; --dark-border-color: #9AA1B1; --light-border-color: #E3E4E6; --font-family-heading: 'Poppins', sans-serif; --button-rounded-radius: 4px; --dark-background-color: #0D1B2A; --light-background-color: #EAF3FC; --medium-background-color: #D8E9F8; --primary-button-text-color: #FFFFFF; --secondary-button-bg-color: #F4F7FB; --secondary-button-text-color: #1F76C3; --primary-button-hover-bg-color: #155A8D; --primary-button-hover-text-color: #FFFFFF; --secondary-button-hover-bg-color: #DEE7F2; --secondary-button-hover-text-color: #1F76C3;
 }

 
.hovered-element {
  outline: #3871E0 dashed 2px;
}

.clicked-element {
  outline: #3871E0 solid 2px;
}

.clicked-code-section {
  border: #3B82F6 solid 2px;
}