:root {
    --blue: #CBE7F4;
    --lightGrey: #F0EFEC;
    --lightBlue: #CBE7F4;
    --pink: #F4D6DC;
    --peach: #FBD7C8;
    --orange: #DFD4DF;
    --yellow: #080807;
    --green: #C4D3BC;
    --teal: #20c997;
    --cyan: #17a2b8;
    --white: #fff;
    --gray: #D5D5D7;
    --gray-dark: #343a40;
    --primary: #007bff;
    --secondary: #6c757d;
    --success: #7952b3;
    --info: #17a2b8;
    --warning: #ffc107;
    --danger: #dc3545;
    --light: #f8f9fa;
    --dark: #343a40;
    --breakpoint-xs: 0;
    --breakpoint-sm: 576px;
    --breakpoint-md: 768px;
    --breakpoint-lg: 992px;
    --breakpoint-xl: 1200px;
    --font-family-sans-serif: 'gt_ultra_fineregular', -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans", "Liberation Sans", sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";
    --font-family-monospace: SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace
}

@font-face {
    font-family: 'gt_ultra_fineblack';
    src: url('assets/gtultrafine-black-webfont.woff2') format('woff2'),
        url('assets/gtultrafine-black-webfont.woff') format('woff');
    font-weight: normal;
    font-style: normal;

}

@font-face {
    font-family: 'gt_ultra_fineblack_italic';
    src: url('assets/gtultrafine-blackitalic-webfont.woff2') format('woff2'),
        url('assets/gtultrafine-blackitalic-webfont.woff') format('woff');
    font-weight: normal;
    font-style: normal;

}

@font-face {
    font-family: 'gt_ultra_finebold';
    src: url('assets/gtultrafine-bold-webfont.woff2') format('woff2'),
        url('assets/gtultrafine-bold-webfont.woff') format('woff');
    font-weight: normal;
    font-style: normal;

}

@font-face {
    font-family: 'gt_ultra_finebold_italic';
    src: url('assets/gtultrafine-bolditalic-webfont.woff2') format('woff2'),
        url('assets/gtultrafine-bolditalic-webfont.woff') format('woff');
    font-weight: normal;
    font-style: normal;

}

@font-face {
    font-family: 'gt_ultra_finelight';
    src: url('assets/gtultrafine-light-webfont.woff2') format('woff2'),
        url('assets/gtultrafine-light-webfont.woff') format('woff');
    font-weight: normal;
    font-style: normal;

}

@font-face {
    font-family: 'gt_ultra_finelight_italic';
    src: url('assets/gtultrafine-lightitalic-webfont.woff2') format('woff2'),
        url('assets/gtultrafine-lightitalic-webfont.woff') format('woff');
    font-weight: normal;
    font-style: normal;

}

@font-face {
    font-family: 'gt_ultra_fineregular';
    src: url('assets/gtultrafine-regular-webfont.woff2') format('woff2'),
        url('assets/gtultrafine-regular-webfont.woff') format('woff');
    font-weight: normal;
    font-style: normal;

}

@font-face {
    font-family: 'gt_ultra_fineregular_italic';
    src: url('assets/gtultrafine-regularitalic-webfont.woff2') format('woff2'),
        url('assets/gtultrafine-regularitalic-webfont.woff') format('woff');
    font-weight: normal;
    font-style: normal;

}

@font-face {
    font-family: 'gt_ultra_finethin';
    src: url('assets/gtultrafine-thin-webfont.woff2') format('woff2'),
        url('assets/gtultrafine-thin-webfont.woff') format('woff');
    font-weight: normal;
    font-style: normal;

}

@font-face {
    font-family: 'gt_ultra_finethin_italic';
    src: url('assets/gtultrafine-thinitalic-webfont.woff2') format('woff2'),
        url('assets/gtultrafine-thinitalic-webfont.woff') format('woff');
    font-weight: normal;
    font-style: normal;

}

@font-face {
    font-family: 'gt_ultra_fineultra';
    src: url('assets/gtultrafine-ultra-webfont.woff2') format('woff2'),
        url('assets/gtultrafine-ultra-webfont.woff') format('woff');
    font-weight: normal;
    font-style: normal;

}

body {
    margin: 0;
    font-family: 'gt_ultra_fineregular', -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans", "Liberation Sans", sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";
    font-size: 1rem;
    font-weight: 400;
    line-height: 1.6;
    color: #333;
    text-align: left;
    padding: 0;
    margin: 0;
}

.container-fluid {
    padding: 0 !important;
}

header {
    position: relative;
    background-color: #f4edd2;
    height: 40rem;
    min-height: 40rem;
    width: 100%;
    overflow: hidden;
}

header video {
    position: absolute;
    top: 50%;
    left: 100%;
    min-width: 30%;
    min-height: 100%;
    width: auto;
    height: 50rem;
    z-index: 0;
    -ms-transform: translateX(-50%) translateY(-50%);
    -moz-transform: translateX(-50%) translateY(-50%);
    -webkit-transform: translateX(-50%) translateY(-50%);
    transform: translateX(-50%) translateY(-50%);
}
@media (min-width: 620px) and (max-width: 960px) {
header video {
    position: absolute;
    top: 45%;
    left: 85%;
    min-width: 30%;
    min-height: 100%;
    width: auto;
    height: 45rem;
}
}
@media (max-width: 619px) {
header video {
    position: absolute;
    top: 45%;
    left: 50%;
    min-width: 30%;
    min-height: 100%;
    width: auto;
    height: 50rem;
}
}

/* Media Query for devices withi coarse pointers and no hover functionality */
/* This will use a fallback image instead of a video for devices that commonly do not support the HTML5 video element */
@media (pointer: coarse) and (hover: none) {
    header {
        background:  #f4edd2 no-repeat top right scroll ;
        background-image: url('assets/meHeader-50.png'); 
    }

    header video {
        display: none;
    }
}

header .container {
    position: relative;
    z-index: 2;
}

.logoImg {
    display: block;
    width: 200px;
}

h1,
h2,
h3,
h4,
h5,
{
margin-top: 0;
margin-bottom: 1rem
}

h1 {
    font-family: 'gt_ultra_fineblack';
    color: #4a685a;
    font-size: 6rem;
    letter-spacing: -0.4rem;
}
@media (min-width: 620px) and (max-width: 960px) {
h1 {
    font-family: 'gt_ultra_fineblack';
    color: #4a685a;
    font-size: 6rem;
    letter-spacing: -0.4rem;
}
}
@media (max-width: 619px) {
h1 {
    font-family: 'gt_ultra_fineblack';
    color: #4a685a;
    font-size: 3rem;
    letter-spacing: -0.2rem;
}
}
h6 {
    margin-top: 0;
    margin-bottom: 0rem;
    font-weight: 900;
}


p {
    margin-top: 0;
    margin-bottom: 0.5rem
}

#about {
    background-color: #F0EFEC;
}



#exp {
    background-color: #C4D3BC;
}

#train {
    background-color: #CBE7F4;
}

#skill {
    background-color: #F4D6DC;
}

.row {
    margin: 3rem 0;
}

.comp {
    font-family: 'gt_ultra_finebold';
    color: #4a685a;
}

.catAbout {
    font-family: 'gt_ultra_finebold';
    color: #8b8a89;
}

.catExp {
    font-family: 'gt_ultra_finebold';
    color: #4a685a;
}

.catTrain {
    font-family: 'gt_ultra_finebold';
    color: #5e859e;
}

.catSkill {
    font-family: 'gt_ultra_finebold';
    color: #9c717d;
}
.skills a {
    color: #333;
    text-decoration: none;
}
.skillsText {
    color: #9c717d;
}
.btn-outline-info {
    color: #9c717d;
    border-color: #9c717d;
    background-color:#f4edd2 ;
}
/*# sourceMappingURL=starter.css.map */