@import "slovenscina-elements.scss";

body {
  background: $white;
}

header {
  position:fixed;
  top:0;
  width:100%;
  height:4rem;
  background:$blue;
  z-index: 1000000;
  box-shadow: 0px 4px 40px rgba(0, 0, 0, 0.2);
}

header {
  .logo {
    display: inline-block;
    padding:0.5rem 1.5rem;
    img {
      height:3rem;
    }
  }
  .menu-items {
    float:right;
    padding: 1.5rem 1.5rem;
    display: inline-block;
    a {
      margin-left:2rem;
      display: inline-block;
      color:white;
      text-decoration: none;
    }
  }
}

.tab-nav {
  margin-top:2rem;
  border-bottom:1px solid $grey-dark;
  a {
    position:relative;
    top:1px;
    display: inline-block;
    font-weight: 500;
    text-transform: uppercase;
    font-size: 1.125rem;
    padding: 0.25rem 2rem;
    text-decoration: none;
    color: $grey-dark;
    transition: color 0.3s ease-out;
    &.active,&:hover {
      color:$blue;
      border-bottom: 4px solid $blue;
    }
  }
}

h1.title {
  font-weight: 300;
  font-size: 1.5rem;
  line-height: 1.75rem;
  margin:0;
  color: $blue;
}
p.subtitle {
  font-size: 14px;
  line-height: 150%;
  margin-top:0.5rem;
}