/* Theme Dard and Light */
:root {
    --primary-color: #000000;
    --secondary-color: #BBBBBB;
    --tertiary-color: #303030;
    --font-color: #000000;
    --bg-color: #E8E8E8;    
}

[data-theme="dark"] {
    --primary-color: #ffffff;
    --secondary-color: #303030;
    --tertiary-color: #BBBBBB;
    --font-color: #E8E8E8;
    --bg-color: #000000;    
}

/* all elements who needs change its color are here */
body {
  font-family: "Lato", sans-serif;
  background-color: var(--bg-color);
  color: var(--font-color);  
}

h1 {
    color: var(--secondary-color);    
}

a {
  color: var(--primary-color);
  text-decoration: none;
}

section {
  max-width: 68%;
  margin: 0 auto;
}

.intro {
  background-color: var(--secondary-color);
}

.iconbutton {
  background-color: #ffffff;  
}

footer {
  background-color: #000000;
  color: #FFFFFF;  
}

.menuitem {
  color: #ffffff;
}

.prev {	
  background-color: var(--primary-color);
  color: var(--secondary-color);
}

/* Position the "next button" to the right */
.next {	
  background-color: var(--primary-color);
  color: var(--secondary-color);
}

/* On hover, add a black background color with a little bit see-through */
.prev:hover, .next:hover {
	background-color: var(--tertiary-color);
}