style.scss

// Identify Document Colors
:root {
    --dark-blue: #103451;
    --medium-teal: #5ebbb8;
    --light-teal: #91cbc7;
    --grey: #f4f1f4;
    --white: #fff;

    // Color Themes
    // Primary
    --primary-background: var(--white);
    --secondary-background: var(--grey);
    --navbar: var(--dark-blue);
    --primary-accent: var(--medium-teal);
    --secondary-accent-1: var(--light-teal);
}

*, *::before, *::after {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
  }

.light {
    background-color: var(--primary-background)!important;
}
.grey {
    background-color: var(--secondary-background)!important;
}
.teal {
    background-color: var(--primary-accent)!important;
}
.dark {
    background-color: var(--navbar)!important;
    & h1, p, h3 {
        color: var(--primary-background)!important;
    } 
}

li, a { cursor: pointer; }

.highlight {
    color: var(--primary-accent)!important;
}

html, body {
    color: var(--primary-background);
}

h1 {
    color: var(--navbar);
    font-family: 'Playfair Display', serif!important;
    font-weight: 700!important;
    font-size: 5em!important;
    margin-bottom: 0px!important;
    font-style: italic;
}

h3 {
    margin-top:0px!important;
}

body {
    font-family: 'Chivo', sans-serif;
    font-weight: 300;
   }

.hero-content {
    position: absolute;
    text-align: center;
    top: 43%;
    left: 50%;
    transform: translate(-50%, -50%);
    & h2 {
        margin-top:20px;
        margin-bottom:20px;
    }
    & .top-icon {
        color: var(--navbar);
        padding: 0px 20px 0px 20px;
        opacity: 0;
    }
}

.navigation {
    background-color: var(--navbar)!important;
    border-bottom:3px solid var(--primary-accent)!important;
    margin-top:0px!important;
    border-radius: 0px!important;
    width:100%;
    padding:10px;
    transition:
      box-shadow 0.5s ease,
      padding 0.5s ease
    ;
    & .ui.container > .item {
        padding-right:50px!important;
        color: var(--primary-background);
    }
}
.navigation.fixed {
    background-color: #FFFFFF;
    border: 1px solid #DDD;
    box-shadow: 0px 3px 5px rgba(0, 0, 0, 0.2);
  }

.ui.image {
    border: .5em solid var(--navbar);
    position: relative;
    z-index: 1;
}

.photo-border {
    padding: .5em;
    border: 0.5em solid var(--secondary-accent-1);
    position: relative;
  
    &::before, &::after {
      content: '';
      display: block;
      position: absolute;
      background: var(--primary-background);
    }
    
    &::before {
      top: -1em; // let it overlap a bit to prevent thin line which could appear during scaling in some browsers etc.
      bottom: -1em;
      left: 5em;
      right: 5em;
    }
    
    &::after{
      left: -1em;
      right: -1em;
      top: 5em;
      bottom: 5em;
    }
}
 
.section {
    padding-top:100px;
    padding-bottom:100px;
    &.footer {
        height:50px;
        padding:0px;
        border-top: 2px solid var(--secondary-accent-1)
    }
}

.footer .container {
    margin:0px!important;
    padding:0px!important;
    & .menu {
        margin-top:0px!important;
    }
}

.ui.form {
    & .field {
        margin: 4px!important;
    }
    & .field input, .field textarea{
        border-radius: 0px!important;
    }
}

.button {
    border-radius: 0px!important;
}

// Hexagon Skills Section
@media (min-width:1210px) {
    .honeycomb {
        text-align: center;
        margin-top: 40px;
        margin-bottom: 40px;
      }
    
    .hexagon, .hexagon::before, .hexagon::after {
        width: 100px;
        height: 173px;
    }
    
    .hexagon {
        position:relative;
        display:inline-block;
        margin:1px 29px;
        background-color: var(--navbar);
        text-align: center;
        &::before {
            background-color:inherit;
            content: "";
            position: absolute;
            left: 0;
            transform: rotate(-60deg);
        }
        &::after {
            background-color:inherit;
            content: "";
            position: absolute;
            left: 0;
            transform: rotate(60deg);
        }
        &:nth-child(even){
            top:90px;
        }
        &:hover {
            background-color: var(--secondary-accent-1);
            cursor: pointer;
        }
        &:active {
            background-color: var(--secondary-accent-1);
        }
        &.transparent {
            background-color:transparent;
        }
        & .hex-content {
            position: absolute;
            top: 50%;
            left: 50%;
            transform: translate(-50%, -50%);
            width: 140%;
            font-size: 1.4rem;
            line-height: 1.2;
            z-index: 1;
            color:var(--primary-background);
        }
    }
    
    .spacing-fix {
        font-size:0;
    }
    
    .tiny.progress {
        background-color: var(--primary-background)!important;
        margin-top:10px!important;
    }
}