@charset "UTF-8";

:root {
  --nsm-white: #fffffb;
  --nsm-gray: #969595;
  --nsm-gray-medium: #6a6a69;
  --nsm-gray-dark: #484a4d;
  --nsm-red: #ed202c;
  --nsm-red-dark: #c31a24;
}

.nav-link {
  color: var(--nsm-white);
}

.nav-link:hover, .nav-link:focus {
  color: var(--nsm-red);
}

.nav-link:active {
  color: var(--nsm-red-dark);
}

/*
That don't really work because of margin. could remove margin on toggle instead.
.dropdown:hover .dropdown-menu {
  display: block;
  margin-top: 0.125rem;
}*/

a {
  color: var(--nsm-red);
}
a:hover {
  color: var(--nsm-red-dark);
}

.anchor {
  display: block;
  position: relative;
  top: -6rem;
  visibility: hidden;
}

@media (max-width: 991px) {
  .anchor {
    top: -11.5rem;
  }
}

.sfm-social {
    color: var(--nsm-white) !important;
    font-size: 1.5rem; 
}

.sfm-social-dark {
  color: var(--bs-dark) !important;
  font-size: 1.5rem; 
}

.sfm-social-red {
  color: var(--nsm-red) !important;
  font-size: 1.5rem; 
}

.bg-gray-dark {
  background-color: var(--nsm-gray-dark) !important;
}

/*comment out to get grayer gray*/
/*.bg-dark {
  background-color: #272828 !important;
}*/

.bg-gray-medium {
  background-color: var(--nsm-gray-medium) !important;
}

.bg-gray {
  background-color: var(--nsm-gray) !important;
}

.bg-white {
  background-color: var(--nsm-white) !important;
}

.bg-red {
  background-color: var(--nsm-red) !important;
}

.text-red {
  color: var(--nsm-red) !important;
}

.text-green {
  color: greenyellow !important;
}

.text-lightblue {
  color: lightblue !important;
}

.border-danger {
  border-color: var(--nsm-red) !important;
}

.btn-danger {
  color: #fff;
  background-color: var(--nsm-red);
  border-color: var(--nsm-red-dark);
}
.btn-danger:hover {
  color: #fff;
  background-color: #ed3842;
  border-color: var(--nsm-red-dark);
}

.nsm-card {
  width: 14rem;
  height: 14rem;
}

.accordion-body {
  background-color: var(--bs-dark);
  color: var(--nsm-white);
}

.accordion-button {
  background-color: var(--bs-dark);
  color: var(--nsm-white);
}

.accordion-button:not(.collapsed) {
  color: var(--nsm-white);
  background-color: var(--nsm-red);
}

.accordion-button:not(.collapsed)::after {
  background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='%23fffffb'%3e%3cpath fill-rule='evenodd' d='M1.646 4.646a.5.5 0 0 1 .708 0L8 10.293l5.646-5.647a.5.5 0 0 1 .708.708l-6 6a.5.5 0 0 1-.708 0l-6-6a.5.5 0 0 1 0-.708z'/%3e%3c/svg%3e");
}
.accordion-button::after {
  background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='%23ed202c'%3e%3cpath fill-rule='evenodd' d='M1.646 4.646a.5.5 0 0 1 .708 0L8 10.293l5.646-5.647a.5.5 0 0 1 .708.708l-6 6a.5.5 0 0 1-.708 0l-6-6a.5.5 0 0 1 0-.708z'/%3e%3c/svg%3e");
}

.accordion-button:focus {
  border-color: var(--nsm-white);
  box-shadow: 0 0 0 0.25rem rgba(237, 32, 44, 0.25);
}

.nsm-parallax {
  background-image: url('../img/nightskies.2.jpg'); /* credit: https://www.hicetnunc.xyz/tz/tz1UQpm4CRWUTY9GBxmU8bWR8rxMHCu7jxjV */

  background-attachment: fixed;
  background-position: center;
  background-repeat: no-repeat;
  background-size: cover;
}

.nsm-feature-icon {
  transition: transform 0.3s ease-in-out;
  transform: translateY(0px) scale(1) rotate(0deg);
}

.nsm-feature-icon:hover {
  transform: translateY(-10px) scale(1.1) rotate(10deg);
}

.nsm-clipboard {
  padding: 2px 2px;
  transition: 1s;
}

.nsm-clipboard:active {
  border-radius: 4px;
  background-color: var(--nsm-red);
  color: var(--nsm-white);
  transition: 0s ease-in-out;
}

/* Tokenomics */

#nsm-tx-tax {
  background: var(--bs-dark);
  background: linear-gradient(90deg, rgba(237,32,44,1) 0%, rgba(237,32,44,1) 2%,
    rgba(106,106,105,1) 2%, rgba(106,106,105,1) 8%, 
    var(--bs-dark) 8%, var(--bs-dark) 100%);
}

#nsm-supply-burn {
  background: var(--bs-dark);
  background: linear-gradient(90deg, rgba(237,32,44,1) 0%, rgba(237,32,44,1) 14%,
    var(--bs-dark) 14%, var(--bs-dark) 100%);
}


/* Timeline */

.timeline {
    border-left: 3px solid var(--nsm-red);
    border-bottom-right-radius: 4px;
    border-top-right-radius: 4px;
    /*background: rgba(114, 124, 245, 0.09);*/
    background: rgba(72, 74, 77, 0.9);
    margin: 0 auto;
    letter-spacing: 0.2px;
    position: relative;
    line-height: 1.4em;
    font-size: 1.03em;
    padding: 50px;
    list-style: none;
    text-align: left;
    max-width: 70%;
}

@media (max-width: 767px) {
    .timeline {
        max-width: 98%;
        padding: 25px;
    }
}

.timeline h1 {
    font-weight: 300;
    font-size: 1.4em;
}

.timeline h2,
.timeline h3 {
    font-weight: 600;
    font-size: 1rem;
    margin-bottom: 10px;
}

.timeline .event {
    border-bottom: 2px dashed var(--bs-dark);
    padding-bottom: 25px;
    margin-bottom: 25px;
    position: relative;
}

@media (max-width: 767px) {
    .timeline .event {
        padding-top: 30px;
    }
}

.timeline .event:last-of-type {
    padding-bottom: 0;
    margin-bottom: 0;
    border: none;
}

.timeline .event:before,
.timeline .event:after {
    position: absolute;
    display: block;
    top: 0;
}

.timeline .event:before {
    left: -207px;
    content: attr(data-date);
    text-align: right;
    font-weight: 500;
    font-size: 1.75em;
    min-width: 120px;
}

@media (max-width: 767px) {
    .timeline .event:before {
        left: 0px;
        text-align: left;
    }
}

.timeline .event:after {
    -webkit-box-shadow: 0 0 0 3px var(--nsm-red);
    box-shadow: 0 0 0 3px var(--nsm-red);
    left: -55.8px;
    background: var(--bs-dark);
    border-radius: 50%;
    height: 9px;
    width: 9px;
    content: "";
    top: 5px;
}

@media (max-width: 767px) {
    .timeline .event:after {
        left: -31.8px;
    }
}

.rtl .timeline {
    border-left: 0;
    text-align: right;
    border-bottom-right-radius: 0;
    border-top-right-radius: 0;
    border-bottom-left-radius: 4px;
    border-top-left-radius: 4px;
    border-right: 3px solid var(--nsm-red);
}

.rtl .timeline .event::before {
    left: 0;
    right: -170px;
}

.rtl .timeline .event::after {
    left: 0;
    right: -55.8px;
}

/* 7 col xxl grid */

@media (min-width: 1400px) {
  .row-cols-xxl-7 > * {
    flex: 0 0 auto;
    width: 14.285714285714285714285714285714%;
  }
}