styles.scss

@import '~bootstrap/scss/bootstrap';
@import '/node_modules/animate.css/animate.css';
@import '/menu.scss';
@import '/animations.scss';

$home-font: 'Helvetica Neue', sans-serif;

body {
    @extend .bg-light;
    @extend .fadeIn;
    color: #222222;
    background: #F5F5F5;
    font: $home-font;
    overflow-x: hidden;
    @extend .w-100;
    max-width: 100%;
}

main {
    overflow-x: hidden;
    @extend .w-100;
    max-width: 100%;
}

.container {
    width: 800px;
}

// mixins

@mixin flex($direction, $justify, $align, $text ) {
    display: flex;
    flex-direction: $direction;
    justify-content: $justify;
    align-items: $align;
    text-align: $text;
}

.flex-center {
    @include flex(column, center, center, center);   
}

.flex-center-row {
    @include flex(row, center, center, center);   
}

.flex-left {
    @include flex(column, center, flex-start, left);   
}
.flex-right {
    @include flex(column, center, flex-end, right);   
}

// links

a {
    color: inherit;
    transition: .2s ease-in-out;
}

a:hover, a:focus {
    text-decoration: none;
    color: #000;
}

a:focus {
    outline:0;
}

button:focus {
    outline:0;
}

// external links

.x-link {
    color: $primary;
}
.x-link:hover {
    text-decoration: underline;
}

// utilities

// text

h1 {
    font-size: 2rem;
}

h3 {
    font-size: 1.2rem; 
    color: #444444;
}

#home h3 {
    font-size: 1.75rem;
    color: #222222;
}

p {
    font-weight: 100;
}

.jumbotron p {
    font-size: 1.3rem; 
    font-weight: 100;
    line-height: 130%;
}


// footer

footer p, 
footer span {
    font-size: 14px;
    font-weight: 100;
    color: #666666;
    transition: all .3s ease-in-out;
}

footer span:hover {
    text-decoration: underline;
    color: #222222;
}

footer img {
    width: 23px;
}

// height

.min-25 {
    min-height: 25vh;
}
.min-50 {
    min-height: 50vh;
}
.min-75 {
    min-height: 75vh;
}
.min-100 {
    min-height: 100vh;
}

// position

.absolute {
    position: absolute;
}
.relative {
    position: relative;
}
.right {
    right: 0;
}
.left {
    left: 0;
}

// colors

.bg-white {
    background: #fff;
}

// images

.img {
    @extend .w-100;
    height: auto;   
}
.img-full {
    height: 100%;
    width: 100%;
    object-fit: cover;
}

// background images

@mixin bgImg($url, $size, $position, $attachment) {
    background: $url;
    background-size: $size;
    background-position: $position;
    background-attachment: $attachment;
}

.bg--jaxx {
    background: url("/img/jaxx-bg.png") center;
    background-size: cover;
}

.bg--metrics {
    background: url("/img/metrics-bg.png") center;
    background-size: cover;
}

.bg--jaxxio {
    background: url("/img/jaxxio-bg.png") center;
    background-size: cover;
}

.bg--decentraltv {
    background: url("/img/decentraltv-bg.png") center;
    background-size: cover;
}

.bg--eurofab {
    background: url("/img/eurofab-bg.png") center;
    background-size: cover;
}

.bg--omniwallet {
    background: url("/img/omniwallet-bg.png") center;
    background-size: cover;
}

.bg--maclaw {
    background: url("/img/maclaw-bg.png") center;
    background-size: cover;
}

.bg--hypersportauto {
    background: url("/img/hypersportauto-bg.png") center;
    background-size: cover;
}

// card styles

.card {
    text-decoration: none;
    transition: .2s ease-in-out;
}

.card:hover, 
.card:focus {
    box-shadow: 0 0 20px #000;
    text-decoration: none;
    transform: translateY(-5px);
}

.card-img, .card-img-top {
    flex-shrink: 0;
    width: 100%;
    border-top-left-radius: 0;
    border-top-right-radius: 0;
} 

.card p:nth-of-type(2) {
    color: #888888; 
    margin-bottom: -10px; 
    font-weight: 100;
}

// delays

.delay-01 {
    animation-delay: .1s;
}
.delay-03 {
    animation-delay: .3s;
}
.delay-06 {
    animation-delay: .6s;
}
.delay-09 {
    animation-delay: .9s;
}

// media queries

// add bottom border on nav links mobile menu
@media (max-width: 992px) {
    .nav-link {
        border-bottom: 1px solid lightgrey;   
        padding: 13px 0;
    }
    .navbar-nav li:nth-of-type(1) {
        border-top: 1px solid lightgrey;   
    }
}

// center content class on mobile
@media (max-width: 768px) {
    .flex-center-sm {
        @include flex(column, center, center, center);   
    }
    .container {
        padding: 3rem;
        width: inherit;
    }
}

// reduce container padding on mobile
@media (max-width: 601px) {
    .container {
        padding: 22px;
    }
    .jumbotron {
        margin-top: 30px;
    }
}