body {
  /*background: linear-gradient(90deg, white, gray);*/
  background-color: #1D1D1D;
/*151515*/
}

body,
h1,
p {
  /*font-family: "Helvetica Neue", "Segoe UI", Segoe, Helvetica, Arial, "Lucida Grande", sans-serif;*/
  font-weight: normal;
  font-size: 18px;
 font-family: "Segoe UI",Helvetica,sans-serif;
  margin: 0;
  padding: 0;
  text-align: center;
  color: #cccccc;
}

body, img:hover, a.nav-link:hover, a img:hover {
  cursor: url("/assets/reversalraincursor.png"), url("/assets/reversalrainlogo.cur"), default;
}
a:hover, div img:hover {
  cursor: url("/assets/reversalrainlogoflipped.cur"), default;
}

.container {
  margin-left:  auto;
  margin-right:  auto;
  margin-top: 25px; <!--100px;-->
  max-width: 1440px;
  padding-right: 10px;
  padding-left: 10px;
}

.row:before,
.row:after {
  display: table;
  content: " ";
}

.pb10 {
  padding-bottom: 15px;
}
.pb5 {
  padding-bottom: 5px;
}

.prl10 {
  padding-right: 10px;
  padding-left: 10px;
}

.pt10 {
  padding-top: 10px;
}

.pr5 {
  padding-right: 5px;
}

.pr7 {
  padding-right: 7px;
}
.bio {
  font-size: 16px;
}
h1 {
 font-family: "Segoe UI",Helvetica,sans-serif;
  font-size: 40px;
  font-weight: 300;
  margin: 0 0 20px 0;
}

h3 {
  font-family: "Segoe UI",Helvetica,sans-serif;
  font-weight: 400;
  margin-top: 0px;
  margin-right: 0px;
  margin-bottom: 10px;
  margin-left: 0px;
  color: #ececec;
}

h4 {
  font-family: "Segoe UI",Helvetica,sans-serif;
  font-size: 25px;
  font-weight: 400;
  margin-top: 0px;
  margin-right: 0px;
  margin-bottom: 10px;
  margin-left: 0px;
  color: #cccccc;
}

.lead {
  font-size: 20px;
  font-weight: 300;
  margin-bottom: 0px;
  color: #cccccc;
}

.link:hover { color: #FFFFFF; } /* CSS link hover (white) */

.scaled:hover {
  webkit-transform: scale(1.02 , 1.02); /*safari*/
  -ms-transform: scale(1.02, 1.02); /*microsoft*/
  transform: scale(1.02, 1.02); /*general other*/
}

  /* Add a black background color to the top navigation */
.topnav {
  background-color: #333;
  overflow: hidden;
  padding: 0 1rem;
}

.navbar-light a.navbar-brand {

}

.navbar-nav a.nav-link {
  padding-left: 10px;
  padding-right: 10px;
}

.navbar-light .navbar-nav a.nav-link,
.navbar-light .navbar-nav .active>.nav-link,
.navbar-light .navbar-nav a.nav-link:hover {
  color: #f2f2f2;
}

/* Style the links inside the navigation bar */
.topnav a {
  float: left;
  color: #f2f2f2;
  text-align: center;
  padding: 10px 10px;
  text-decoration: none;
  font-size: 17px;
}

/* Change the color of links on hover */
.topnav a:hover {
  background-color: #1F83FA;
  color: #f2f2f2;
}

.navbar-light a.navbar-brand:hover {
  background-color: transparent;
}

/* Add a color to the active/current link */
.topnav li.active {
  background-color: #EA4A51;
  color: white;
}

.side {
      flex-direction: column;
}

.block__cta {
    align-items: center;
    display: flex;

    justify-content: center;
    position: relative;
    z-index: 1;
}


.btn {
    align-items: center;
    background-color: #444444;
    border: none;
    border-radius: 20px;
    box-shadow: 0 0 0 0 #fff;
    color: #fff;
    cursor: pointer;
    display: flex;
    font-family: Mont,sans-serif;
    font-size: 16px;
    font-weight: 600;
    justify-content: center;
    letter-spacing: .05em;
    min-height: 50px;
    padding: 10px 20px;
    text-decoration: none;
    transition: box-shadow .25s ease-in;
    white-space: nowrap;
}

.btn:hover {
 color: #4ab4ff;
}

button {
  background-image: url(images/navbar.png);
  background-repeat: no-repeat;
  background-position: 50% 50%;
  /* put the height and width of your image here */
  height: 40px;
  width: 56px;
  border: none;
}

button span {
  display: none;
}

p.navbar-brand {
  color: #ffffff;
}

p {
  margin: 0 0 10px;
  color: #cccccc;
}

a {
  text-decoration: none;
  color:#cccccc;
}

div#scratch-games {
  margin-top: 20px;
}

div#applet {
  margin-left: auto;
  margin-right: auto;
}

.video-container {
  position: relative;
  width: 100%;
  margin: 0 auto;
}

.video-container iframe {
  display: block;
  width: 100% !important;
  height: auto;
  aspect-ratio: 16 / 9;
  border: none;
}

/* Shared media width (video + banners) */
.video-container,
.rr-media {
  width: 100%;
  max-width: 860px;   /* SAME WIDTH as iframe area */
  margin: 0 auto;
  padding: 0 20px;    /* prevents edge overflow on phones */
  box-sizing: border-box;
}

/* Banner images match video width */
.rr-media-img {
  display: block;
  width: 100%;
  max-width: 100%;
  height: auto;
}
/* Override Bootstrap container widths for mobile */
@media (max-width: 1440px) {
  .container {
    width: 100% !important;
    max-width: 100% !important;
    padding-left: 0 !important;
    padding-right: 0 !important;
  }
}

/* Make social circle icons scale properly on small screens */
.row img.scaled {
  max-width: 100%;
  height: auto;
}


@media (max-width: 600px) {
   .row img.scaled {
  /* removing this section 1-27-26 to fix saling issues in instagram web browser  width: 90px;   /* smaller icons for mobile */
  }
}

/* fix the shop image on instagram web browser hopefully? */
.fullwidth-img {
  display: block;
  width: 100%;
  max-width: 100%;
  height: auto;
  padding-left: 0;
  padding-right: 0;
}
.fullwidth-links {
  padding-left: 0;
  padding-right: 0;
}

/* Make social circle icons scale properly on small screens */

/* IG WebView-safe, bounded full-width section */
.rr-fullwidth {
  width: 100%;
  max-width: 1440px;
  margin: 0 auto;
  padding: 0 20px;
  box-sizing: border-box;
  text-align: center;
}

/* Wrapper controls size (THIS is what IG respects) */
.rr-banner-wrap {
  width: 100%;
  max-width: 900px;   /* desktop */
  margin: 0 auto;
}

/* Image simply fills wrapper */
.rr-banner {
  display: block;
  width: 100%;
  height: auto;
}

/* Tablets */
@media (max-width: 992px) {
  .rr-banner {
    max-width: 700px;
  }
}

/* Phones (Instagram WebView included) */
@media (max-width: 600px) {
  .rr-banner-wrap {
    max-width: 340px; /* ← adjust to taste */
  }
}

  a.patreon-button{
   box-shadow: 1px 1px 0px rgba(0, 0, 0, 0.2);
 line-height:36px!important;
 min-width:150px;
 display:inline-block!important;
 background-color:red;
 padding:2px 12px !important;
 text-align:center !important;
 border-radius:12px;
 color:#fff;
 cursor:pointer;
 overflow-wrap:break-word;
 vertical-align:middle;
 border:0 none #fff !important;
 font-family:'Quicksand',Helvetica,Century Gothic,sans-serif !important;
 text-decoration:none;
 text-shadow:none;
 font-weight:700!important;
 font-size:14px !important
}