$section-padding: 1rem 0rem;    
$section-padding-desktop: $section-padding;
$section-padding-large: $section-padding;

$gray: #adadad;
$text-colour: #1F1F1F;



@import "./bulma/bulma.sass";
@import "./font.scss";

body {
    color: $text-colour;
}

$hr-width: 0.15rem;
$hr-color: $gray;
hr {
    background-color: $hr-color;
    height: $hr-width;
}

.nav-tabs.tabs {
    li:first-of-type a {
        justify-content: left !important;
    }
    li:last-of-type a {
        justify-content: right !important;
    }
    a {
        padding: 0.5rem 0;
        font-size: 1.3rem;
        color: $text-colour;
        border-bottom-color: $hr-color;
        border-bottom-width: $hr-width;
        :hover {
            border-bottom-color: $hr-color;
        }
    }
    padding: 0.8rem 0;
    .is-active a {
        text-decoration: underline;
        font-weight: bold;
        color: $text-colour;
        border-bottom-color: $hr-color;
    }
}

.is-size-0 {
    font-size: 5rem;
}

.header .hero-body {
    padding-left: 0px !important;
    padding-top: 8em;
}

#content {
    font-size: 1.1rem;
    strong,i,b,em {
        font-family: $sans_font
    }
    em {
        font-style: italic;
        font-weight: lighter !important; 

    }
    table {
        table-layout: fixed;
        width: 100%;
        p {
            padding-bottom: 0 !important;
        }
    }    
    td {
        padding: 0.5rem 0;
    }
    hr {
        margin: 0.5rem 0;
    }
    iframe {
        padding-bottom: 1rem;
    }
    &.videos {
        em {
            margin-bottom: 1rem;
        }
    }
    &.about {
        hr ~ p {
            padding-bottom: 0 !important;
        }
    }
    &:not(.videos) p {
        padding-bottom: 2rem;
    }
    &.index {
        p {
            padding-bottom: 2rem;
        }
    }
    &.getintouch p {    
        padding-bottom: 0;
    }
    .contact {
        p { 
            font-family: $sans_font;
        }
        .contact_text {
            font-weight: 200;
        }
        padding-bottom: 1rem;
    }
}

.headshot {
    padding-top: 1rem;
    img {
        border-radius: 100%;
        border-width: 0.15rem;
        border-color: $gray;
        border-style: solid;
    }
}

#content-column {
    @media all and (max-width: 1216px) { 
        padding: 0 2rem; 
    }
    @media all and (min-width: 1408px) { 
        padding-right: 6.5rem !important;
    }
}

.title {
    font-family: $serif_font;
    font-style: italic;
    font-weight: 200;
}

.subtitle {
    font-family: $sans_font;
    font-weight: 200;
}

p {
    font-family: $serif_font;
    b {
        font-weight: normal;
    }
}

nav,footer {
    font-family: $sans_font;
    font-style: italic;
}

.cv-entry {
    padding: 1rem 0;
    font-family: $sans_font;
    .job-title {
        font-weight: 400;
    }
    .job-date {
        font-weight: 200;
    }
}

footer {
    hr {
        margin-top: 0;
        margin-bottom: 0.8rem;
    }
    .social-circles {
        img {
            height: 32px;
            border-radius: 100%;
        }
    }
}