@import 'utils'; @import 'design';

@mixin nav($navSize) {

.nav {
    @include width-fit-content('min-width');
    width: 25%;
    &-button {
        @include transition('border .25s ease-in-out');
        padding: 12px 25px;
        border: 1px solid transparent;
        text-decoration: none;
        display: block;
        font-size: 21px;
        &-wrapper {
            display: inline-flex;
            width: calc(100%/#{$navSize} - 3px);
            justify-content: center;
        }
        &:visited, &:active {
            color: $reality-black;
        }
        &:hover {
            color: $reality-blue;
        }            
        &.active {
            border: 1px solid $reality-black;
        }
    }
}

}

// TODO: Make this dynamic with # of sections @include nav(3);

// Element Defaults html {

background-color: white;
/* Hide scrollbar for IE and Edge */
-ms-overflow-style: none;
/* Hide scrollbar for Firefox */
scrollbar-width: none;
/* Firefox 64 */
/* Hide scrollbar for Chrome, Safari and Opera */
&::-webkit-scrollbar {
    display: none;
}

}

h1 {

font-weight: normal;
font-size: 36px

}

p, ul {

margin: 0

}

a {

color: $reality-black;
text-decoration: none;
&:hover {
    color: $reality-blue;
}

}

.about p {

margin-left: 15px;

}

.container {

padding: 20px 15px;
margin-right: auto;
margin-left: auto;

}

.main {

@include transition('top .5s ease-in-out');
font-family: 'Quicksand', sans-serif;
position: relative;

}

.content {

@include transition('height .5s ease-in-out, padding .5s ease-in-out');
padding: 0 10px;
height: 0;
width: 60%;
margin: 0 auto;
font-size: 18px;
&-block {
    @include transition('height .5s ease-in-out, opacity .3s ease-in-out');
    opacity: 0;
    position: relative;
    padding: 0 10px;
    &.hidden {
        display: none;
        visibility: hidden;
    }
}

}

.name {

text-align: center;
margin: 0;
a:hover {
    color: $reality-black;
}

}

a.home:hover {

color: $reality-blue;

}

.post {

padding-bottom: 40px;
&-title {
    margin: 0;
}
&-list {
    list-style-type: none;
    padding: 20px 35px;
}
&.archive {
    padding-bottom: 20px;
}
&-meta {
    clear: both;
    .right-align {
        float: right;
    }
}
&-content {    
    padding: 30px 0;
    p {
        padding: 10px 20px;
    }
    ul {
        padding: 10px 55px;
    }
    li {
        padding: 5px 0;
    }
    a {
        color: $reality-blue-dark;
        font-weight: bold;
        &:hover {
            color: $reality-blue;
        }
    }
}

}