@import url('https://fonts.googleapis.com/css?family=Oxygen&display=swap');

* {
    box-sizing: border-box;
}
  
body {
    padding: 20px;
    background-color: #0C1216;
    font-family: 'Oxygen', sans-serif;
    padding-top: 70px;
}

header{
    position: relative;
    z-index: 1000000;
}

header .navbar div a img {
    display: inline-block;
    vertical-align: top;
    width: 210px;
}

p {
    font-size: 1.15rem;
}

.navbar {
    background-color: #0C1216; 
    transition: 0.5s;
}

.navbar.scrolled {
    background: #0C1216 !important;
    transition: 0.5s;
}

.navbar-light .navbar-nav .active>.nav-link, .navbar-light .navbar-nav .nav-link.active, .navbar-light .navbar-nav .nav-link.show, .navbar-light .navbar-nav .show>.nav-link {
    color: #000;
    background: #fff;
}

.navbar-light .navbar-nav .active>.nav-link:hover {
    color: #000;
}

.navbar-light .navbar-nav .nav-link {
    color: rgba(255, 255, 255, .8);
    transition: ease-in 0.3s;
}

.navbar-light .navbar-nav .nav-link:hover,
.navbar-light .navbar-nav .nav-link:focus {
    color: #B19979;
}

.navbar-light .navbar-brand,
.navbar-light .navbar-brand:hover,
.navbar-light .navbar-brand:focus,
.navbar-light .navbar-brand:visited {
    color: rgba(255, 255, 255, 1);
    font-size: 2.5rem;
    font-weight: 600;
}

.navbar-toggler,
.navbar-toggler:focus,
.navbar-toggler:active,
.navbar-toggler-icon:focus {
    outline: none;
    border: none;
    box-shadow: none;
}

.navbar-toggler-icon {
    background-image: none;
    background-color: #B19979;
    height: 3px;
    width: 25px;
    margin: 10px 0;
    position: relative;
    transition: all 0.35s ease-out;
    transform-origin: center;
}

.navbar-toggler-icon::before {
    display: block;
    background-color: #B19979;
    height: 3px;
    content: "";
    position: relative;
    top: -7px;
    transition: all 0.15s ease-out;/*taken down to hide quicker*/
    transform-origin: center;
}

.navbar-toggler-icon::after {
    display: block;
    background-color: #B19979;
    height: 3px;
    content: "";
    position: relative;
    top: 4px;
    transition: all 0.1s ease-out;
    transform-origin: center;
}

.navbar-toggler:not(.collapsed) .navbar-toggler-icon {
    transform: rotate(45deg);
}

.navbar-toggler:not(.collapsed) .navbar-toggler-icon::before {
    opacity: 0;
}

.navbar-toggler:not(.collapsed) .navbar-toggler-icon::after {
    transform: rotate(-90deg) translateX(7px);
}

/* Header/Blog Title */
.heading {
    padding: 30px;
    font-size: 40px;
    text-align: center;
    background: #0C1216;
    color: white;
}

/* Create two unequal columns that floats next to each other */
/* Left column */
.leftcolumn {
    float: left;
    width: 100%;
    color: white;
}

/* Add a card effect for articles */
.card {
    background-color: #0C1216;;
    padding: 20px;
    margin-top: 20px;
}

.card h2 {
    display: inline-block;
    position: relative;
    padding-bottom: 10px;
}

.card h2::before {
    content: "";
    position: absolute;
    left: 0;
    bottom: 0;
    width: 100%;
    height: 2px;
    background-color: #B19979;
}

.imgBx {
    width: 100%;
    height: 100%;
}

.imgBx img {
    object-fit: cover;
    width: 100%;
    height: 100%;
}

/* Clear floats after the columns */
.row:after {
    content: "";
    display: table;
    clear: both;
}

/* Footer */
.footer {
    padding: 20px;
    text-align: center;
    background: #ddd;
    margin-top: 20px;
}