/* root */ 

:root {

  --font-sans-serif: "Onest", sans-serif;
  
  --color-red: #E1251B;
  --color-green: #9BAE88; 
  
  --color-gray-light: #83888D;
  --color-gray-semilight: #3E454C;
  --color-gray-medium: #1C242D;
  --color-gray-dark: #101820;
  
}

/* main */

body {
  font-family:  var(--font-sans-serif);
}

h1, h2, h3, h4, h5, h6 {
  font-family:  var(--font-sans-serif);
}

.uk-h1, .uk-h2, .uk-h3, .uk-h4, .uk-h5 {
  font-family:  "Roboto", sans-serif;
}

.uk-heading-2xlarge, .uk-heading-xlarge, .uk-heading-large, .uk-heading-medium, .uk-heading-small {
  font-family:  var(--font-sans-serif);
}

.uk-navbar-item,
.uk-navbar-nav > li > a,
.uk-navbar-toggle {
  font-family:  var(--font-sans-serif);
}

/* a */

a {
  transition: opacity 0.03s ease;  
  opacity: 1;
}

a:hover {
  animation: blink 0.8s forwards;
}

@keyframes blink {
  0% { opacity: 1; }
  20% { opacity: .75; }
  100% { opacity: 1; }
}

/* colors */

html {
  color: var(--color-gray-dark);
}

.uk-light {
  color: white;
}

.uk-section-secondary:not(.uk-preserve-color) {
  color: white;
}

.uk-background-primary {
  background-color: var(--color-red);
}

.uk-section-secondary {
  background-color: var(--color-gray-dark);
} 

.uk-background-secondary strong {
  color: var(--color-gray-light);
} 

.uk-background-secondary {
  background-color: var(--color-gray-medium);
} 

.uk-background-secondary {
  background-color: var(--color-gray-medium);
} 

.uk-background-muted {
  background-color: var(--color-gray-semilight);
} 

.uk-overlay-primary {
  background: rgba(15, 7.5, 5, .5);
}

.uk-section-secondary:not(.uk-preserve-color) a {
  color: white !important;
}

/* button */

.uk-button {
  border-radius: 4px;
}

.uk-button:hover {
  background-color: var(--color-gray-dark);
}

.uk-button-primary {
  background-color: var(--color-red);
}

.uk-button-secondary {
  background-color: var(--color-green);
}

/* offcanvas */

.uk-offcanvas-bar {
  width: auto;
}

.uk-offcanvas-bar .uk-nav > li >a {
  padding: 10px 30px;
}

/* index */

.home nav a {
  border-bottom: 2px solid transparent;
  transition: all .3s ease-out;
  padding: 3px 0;
}

.home nav a:hover {
  border-bottom: 2px solid var(--color-red);
}

.home nav .uk-active a {
  border-bottom: 2px solid var(--color-red);
}

/* nav */

:not(#index) nav a {
  transition: all 0.3s ease-out;
}

/* workshop */

.workshop .uk-background-primary {
  background-color: var(--color-red);
}

.workshop nav :not(.uk-active) a:hover {
  background-color: var(--color-gray-light);
}

/* studio */

.studio .uk-background-primary {
  background-color: var(--color-green);
}

.studio nav :not(.uk-active) a:hover {
  background-color: rgba(16, 24, 32, .2);
}

/* footer */

footer > div > .uk-grid > div:not(.uk-first-column) {
  border-left: 1px solid var(--color-gray-light);
}


/* edit */

#editpage {
  position: fixed;
  top: 20px;
  right: 20px;
  z-index: 3000;
  padding: 5px 15px;
  background: red;
  color: white;
}