@font-face { font-family: Corbel; src: url('/static/fonts/Corbel.ttf'); } 
@font-face { font-family: Corbel; font-weight: bold; src: url('/static/fonts/Corbel Bold.ttf');}
@font-face { font-family: Corbel; font-style: italic; src: url('/static/fonts/Corbel Italic.ttf');}
@font-face { font-family: Corbel; font-weight: bold; font-style: italic; src: url('/static/fonts/Corbel Bold Italic.ttf');}
@font-face { font-family: Angelface; src: url('/static/fonts/Angelface.otf'); } 

html {
margin: 0rem;
}

body {
    background: #bcd3f5;
    color: #333333;
    margin-top: 0rem;
    padding-top: 70px;
  }
  
h1, h2, h3, h4, h5, h6 {
  color: #444444;
}

.brand-font-1 {
  font-family: Corbel;
}

.brand-font-2 {
  font-family: Angelface;
}

/*
canvas { */
  /* Safari 3-4, iOS 1-3.2, Android 1.6- 
  -webkit-border-radius: 25px; */

  /* Firefox 1-3.6 
  -moz-border-radius: 25px;*/ 
  
  /* Opera 10.5, IE 9, Safari 5, Chrome, Firefox 4, iOS 4, Android 2.1+ 
  border-radius: 25px; */

  /*border: solid windowtext 1.0pt;*/
/*}*/

.disabled label {
  color: #cccccc
}

.bg-steel {
  background-color: #5f788a;
}

.site-header .navbar-nav .nav-link {
  color: #cbd5db;
}

.site-header .navbar-nav .nav-link:hover {
  color: #ffffff;
}

.site-header .navbar-nav .nav-link.active {
  font-weight: 500;
}

.footer {
  position: relative;
  bottom: 0;
  width: 100%;
  /* Set the fixed height of the footer here */
  height: 100%;
  background-color: #858585;
}
.content-section {
  background: #ffffff;
  padding: 10px 20px;
  border: 1px solid #dddddd;
  border-radius: 3px;
  margin-bottom: 20px;
}

.article-title {
  color: #444444;
}

a.article-title:hover {
  color: #428bca;
  text-decoration: none;
}

.article-content {
  white-space: pre-line;
}

.article-img {
  height: 65px;
  width: 65px;
  margin-right: 16px;
}

.article-metadata {
  padding-bottom: 1px;
  margin-bottom: 4px;
  border-bottom: 1px solid #e3e3e3
}

.article-metadata a:hover {
  color: #333;
  text-decoration: none;
}

.article-svg {
  width: 25px;
  height: 25px;
  vertical-align: middle;
}

.account-img {
  height: 125px;
  width: 125px;
  margin-right: 20px;
  margin-bottom: 16px;
}

.account-heading {
  font-size: 2.5rem;
}

canvas {
  border-color: gray; 
  width: 100%;
  height: auto;
  touch-action: none;
  }

.slidecontainer {
  width: 100%; /* Width of the outside container */
}

/* The slider itself */
.slider {
  -webkit-appearance: none;  /* Override default CSS styles */
  appearance: none;
  width: 100%; /* Full-width */
  height: 15px; /* Specified height */
  border-radius: 5px;
  background: #d3d3d3; /* Grey background */
  outline: none; /* Remove outline */
  opacity: 0.7; /* Set transparency (for mouse-over effects on hover) */
  -webkit-transition: .2s; /* 0.2 seconds transition on hover */
  transition: opacity .2s;
}

/* Mouse-over effects */
.slider:hover {
  opacity: 1; /* Fully shown on mouse-over */
}

/* The slider handle (use -webkit- (Chrome, Opera, Safari, Edge) and -moz- (Firefox) to override default look) */ 
.slider::-webkit-slider-thumb {
  -webkit-appearance: none; /* Override default look */
  appearance: none;
  width: 25px; /* Set a specific slider handle width */
  height: 25px; /* Slider handle height */
  border-radius: 50%;
  background: #4CAF50; /* Green background */
  cursor: pointer; /* Cursor on hover */
}

.slider::-moz-range-thumb {
  width: 25px; /* Set a specific slider handle width */
  height: 25px; /* Slider handle height */
  border-radius: 50%;
  background: #4CAF50; /* Green background */
  cursor: pointer; /* Cursor on hover */
}

.watermark-container {
  position: absolute; 
  width: 100%; 
  height: 80%; 
  top:0; 
  left: 0;
}

.watermark {
  font-size: 48pt;
  font-weight: bolder;
  text-align: center;
  font-family: Arial, Helvetica, sans-serif;
  color: #858585;
  opacity: 0.1;
}
.watermark-md {
  font-size: 24pt;
  font-weight: bolder;
  text-align: center;
  font-family: Arial, Helvetica, sans-serif;
  color: #858585;
  opacity: 0.1;
}

.watermark-sm {
  font-size: 16pt;
  font-weight: bolder;
  text-align: center;
  font-family: Arial, Helvetica, sans-serif;
  color: #858585;
  opacity: 0.1;
}


.shadowtext {
  text-shadow: 1px 10px 100px #000;
}

.actionitem {
  width: 500%;
  height: 500%;
}

.fa.fa-instagram {
  color: transparent;
  background: radial-gradient(circle at 30% 107%, #fdf497 0%, #fdf497 5%, #fd5949 45%, #d6249f 60%, #285AEB 90%);
  background: -webkit-radial-gradient(circle at 30% 107%, #fdf497 0%, #fdf497 5%, #fd5949 45%, #d6249f 60%, #285AEB 90%);
  background-clip: text;
  -webkit-background-clip: text;
}