@font-face{font-family:'spleen-32x64';src:url('//hamster.land/font/spleen-32x64.otf');}
* { font-family:'spleen-32x64'; }
* { word-wrap: break-word; overflow-wrap : break-word;}

img.emoji {
  height: 1em;
  width: 1em;
  margin: 0 .05em 0 .1em;
  vertical-align: -0.1em;
}

.iframes{
 width:100%;
 border:0;
}

.thumbnail {
 width:100px;
 height:auto;
}

.icon {
  width:50px;
  height:50px;
  margin:5px;
  border-radius:10px;
  float:left;
}

@media screen and (min-width: 896px) {
  .embed-youtube {
    width: 100% !important;
    height: 512px !important;
  }
  .embed-contents {
    width: 768px !important;
    <!-- height: 432px !important; -->
  }
  .canvas {
    width: 512px !important;
    height: auto !important;
  }
  .resize-contents {
    width: 512px !important;
   }
}

@media screen and (max-width: 896px) {



  .embed-contents {
    width:100% !important;
    height: auto !important;
    <!-- height: 250px !important; -->
  }
  .embed-youtube {
    width: 100% !important;
    height: 320px !important;
  }
  
  .canvas {
    width:100% !important;
    height: auto !important;
  }
  .resize-contents {
    width:100% !important;
   }

}
.embed-xvideos,.embed-pornhub {
  -ms-filter: blur(4px);
  filter: blur(4px);
}

.scrollbar-hidden {
  overflow: hidden;
  -ms-overflow-style: none; /* IE, Edge 対応 */
  scrollbar-width: none; /* Firefox 対応 */
}
/* Chrome, Safari 対応 */
.scrollbar-hidden::-webkit-scrollbar {
  display: none;
}

.button a {
  text-decoration: none;
}



  @media (prefers-color-scheme: dark){
  body {
    background-color: #333 !important;
    color: #ffffff !important;
    
  } 
  .inline {
    background-color: #1E1E1E !important;
  }
  .modal-content{
    background-color: #1E1E1E !important;
  }
  .bg-light {
    background-color: #1E1E1E !important;
  }
  .bg-primary {
    background-color: #1E1E1E !important;;
  }
  .text-primary {
    color: #fff !important;;
  }

  font { color:#ffffff; !important;}
  a:link   { color:#ffffff; }
  a:visited{ color:#ffffff; }
  active { color:#ffffff; }
  .name    { color:#ffffff; }
  .quote   { color:#ffffff; }
  .comment { color:#ffffff; }
  .reference { color:#ffffff; }
  .error   { color:#ffffff; }



  hr {
    background-color: $ccc;
  }

  .progress {
    border: none;
    background-color: hotPink; /* -moz- 用 */
  }

  .progress::-webkit-progress-bar {
    background-color: red;
  }

  /* バーの進捗率の表示を変える */
  .progress::-moz-progress-bar {
    background-color: red;
  }

  .progress::-webkit-progress-value {
    background-color: blue;
  }

  #good {
    background-color:#ccc;
    color:black;
    text-align:center;
    padding:10px;
    border-radius:5px;
  }
  #bad {
    background-color:#ccc;
    color:black;
    text-align:center;
    padding:10px;
    border-radius:5px;
  }

  .button{
    background-color:#ccc;;
    color:#000;
    padding-right:3px;
    padding-left:3px;
    border:1px outset #999;
    border-radius:4px;
    -webkit-border-radius:4px;
  }
  .button a {
    color:#000;
    text-decoration: none;
  }

  .navbar {
    background-color: #1E1E1E !important;
  }
  .navbar a,.navbar button{
    color: #fff !important;;
  }
  .navbar-light .navbar-nav .nav-link {
    color: #fff !important;
  }
  .navbar-light .navbar-toggler {
    border-color: #fff !important;
  }
  .navbar-light .navbar-nav .nav-link.active,
  .navbar-light .navbar-nav .show > .nav-link,
  .navbar-light .navbar-toggler-icon {
    color: #fff !important;
  }
}


@media (prefers-color-scheme: no-preference){


body {
	margin:10px 0px 0px 0px;
	padding0;
	background-color:#ffffff;
}

hr {
  background-color: #f42528;
}

.name    { color:#000000; }
.cap     { color:#ffae00; }
.quote   { color:#dcbc18; }
.reference { color:; }


.progress {
  border: none;
   background-color: hotPink; /* -moz- 用 */
}

.progress::-webkit-progress-bar {
  background-color: red;
}

/* バーの進捗率の表示を変える */
.progress::-moz-progress-bar {
  background-color: red;
}

.progress::-webkit-progress-value {
  background-color: blue;
}

#good {
  background-color:#00BBBB;
  color:white;
  text-align:center;
  padding:10px;
  border-radius:5px;
}
#bad {
  background-color:#CC0102;
  color:white;
  text-align:center;
  padding:10px;
  border-radius:5px;
}
h1{
font-weight: initial;
background-color: initial;
}
.button{
  background-color:#eee;
  padding-right:3px;
  padding-left:3px;
  border:1px outset #999;
  border-radius:4px;
  -webkit-border-radius:4px;
}


}

body {
background-image: url("//2chl.nl/miiverse.png");
background-repeat: repeat;
}
.threads {
margin-bottom: 10px;
}