*{
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}


:root {
    --green-accent: #74e8ae;
    --dark-text:#193c48;
    --light-text:#517072;
    background-color:white;
}
body{
    position:relative;
}

body.main {
    font-size: 24px;
    font-family: Basiersquare, sans-serif;
    line-height: 1.5em;
    color:var(--dark-text);
    margin: 0;
    background:white;
}

.navbar{
    font-size:24px;
    font-weight:600;
    position: fixed;
    background: white;
    z-index: 100;
    width: 100%;
    text-align: right;
}
.navbar a{
    margin: 0 0 0 2rem;
    text-decoration: none;
    color:var(--light-text);
    font-weight: 600;
}
.navbar a.navbar-brand{
    margin:0;
}
.navbar a.active{
    color:var(--dark-text);
}

.mt-10{
    margin-top:10rem;
}
.color-green-accent-1{
    color:var(--green-accent);
}
.border-top-accent{
    border-top:1px solid var(--green-accent);
    margin-bottom:2em;
}
.smaller-text{
    font-size:18px;
    line-height:1.5em;

}
.flex{
    display:flex;
}
.number{
    margin:1em 1.5em 0 0 ;
}

.intro-text{
    margin:2em 0;
}


.color-gradient-1 {
    background: linear-gradient(90deg, #17F3C7, #74E8AE, #17F3C7);
    background: -webkit-linear-gradient(90deg, #17F3C7, #74E8AE, #17F3C7);
    background-size: 200% auto;
    text-fill-color: transparent;
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    animation: gradientShift 3s linear infinite;
}
h1{
    font-size:60px;
    line-height: 1em;
    font-weight: 700;
}
.hidden{
    display: none;
}
h2, h3{
    font-size: 40px;
    line-height: 1.2em;
    font-weight: 600;
    padding: 0.4em 0 1em;
}

h2.bigger-heading{
    font-size: 40px;
    font-weight:700;
    padding:1em 0;
}
ol{
    list-style-type:none;
    padding:0;
}
@media only screen and (min-width: 768px) {
    .side-bar{
        color:var(--light-text);
        padding: 0.1em 2.2em 0 0;
    }

    .intro-text {
        margin:10em 0 ;
    }
    .smaller-text{
        padding:1.3em;
    }
    h1{
        font-size: 72px;
    }
    h2{
        font-size:48px;
    }
    h2.bigger-heading{
        font-size: 64px;
        padding:2em 0;
    }
    h3{
        font-size:24px;
        font-weight:600;
    }

    li h2{
        display:inline-block;
        padding:0 0 0.4em 0.4em;
    }
    ol{
        list-style-type: decimal-leading-zero;
    }
    ol li{
        border-bottom:1px solid var(--green-accent);
        padding:2em 0 2em 0;
        list-style-position: inside;
    }
    ol li p{
        padding:0 0 0 2.6em;
    }
    ol li:first-of-type{
        padding:0 0 2em 0;
    }

}


@font-face {
    font-family: 'Basiersquare';
    src: url('../fonts/basiersquare-bold-webfont.woff2') format('woff2'), url('../fonts/basiersquare-bold-webfont.woff') format('woff'), url('../fonts/basiersquare-bold-webfont.ttf') format('truetype');
    font-weight: 700;
    font-style: normal;
    font-display: auto;
}
@font-face {
    font-family: 'Basiersquare';
    src: url('../fonts/basiersquare-regular-webfont.woff2') format('woff2'), url('../fonts/basiersquare-regular-webfont.woff') format('woff'), url('../fonts/basiersquare-regular-webfont.ttf') format('truetype');
    font-weight: 400;
    font-style: normal;
    font-display: auto;
}
@font-face {
    font-family: 'Basiersquare';
    src: url('../fonts/basiersquare-semibold-webfont.woff2') format('woff2'), url('../fonts/basiersquare-semibold-webfont.woff') format('woff'), url('../fonts/basiersquare-semibold-webfont.ttf') format('truetype');
    font-weight: 600;
    font-style: normal;
    font-display: auto;
}
.profile{
    margin: 3em 0;
    font-size:18px;
    text-align:justify
}
.profile img{
    margin: 4em auto 0;
    display:block;
    width:120px;
    filter: sepia(1) saturate(0%);
    -webkit-filter: sepia(1)  saturate(0%);
}
.profile h4{
    font-size: 24px;
    font-weight: 600;
    text-align:center;
    margin:1em
}

.text{
    padding:0 2em 2em 0;
}

footer{
    padding-top:4em;
    font-size:18px;
}

p a{
    text-decoration:none;
    color: inherit;
}
p a:hover{
    background:var(--green-accent);
    border-radius:20px;
    padding:0 4px;
    color:white;
    font-weight:600;
}