/*
writing-mode: vertical-lr; for background image thing
 */
@media only screen and (min-width: 769px) {
  /* For desktop: */
  .col-1 {width: 8.33%;}
  .col-2 {width: 16.66%;}
  .col-3 {width: 25%;}
  .col-4 {width: 33.33%;}
  .col-5 {width: 41.66%;}
  .col-6 {width: 50%;}
  .col-7 {width: 58.33%;}
  .col-8 {width: 66.66%;}
  .col-9 {width: 75%;}
  .col-10 {width: 83.33%;}
  .col-11 {width: 91.66%;}
  .col-12 {width: 100%;}

  /* Finer column spacing: */
  .fcol-1 {width: 4%;}
  .fcol-2 {width: 8%;}
  .fcol-3 {width: 12%;}
  .fcol-4 {width: 16%;}
  .fcol-5 {width: 20%;}
  .fcol-6 {width: 24%;}
  .fcol-7 {width: 28%;}
  .fcol-8 {width: 32%;}
  .fcol-9 {width: 36%;}
  .fcol-10 {width: 40%;}
  .fcol-11 {width: 44%;}
  .fcol-12 {width: 48%;}
  .fcol-13 {width: 52%;}
  .fcol-14 {width: 56%;}
  .fcol-15 {width: 60%;}
  .fcol-16 {width: 64%;}
  .fcol-17 {width: 68%;}
  .fcol-18 {width: 72%;}
  .fcol-19 {width: 76%;}
  .fcol-20 {width: 80%;}
  .fcol-21 {width: 84%;}
  .fcol-22 {width: 88%;}
  .fcol-23 {width: 92%;}
  .fcol-24 {width: 96%;}
  .fcol-25 {width: 100%;}
}

.row::after {
  content: "";
  clear: both;
  display: table;
}

.row {
  --bs-gutter-x: 0px;
}

.flip {
    -webkit-rtl-ordering: logical;
  }


.dna-container {
  display: flex;
  justify-content: center;
  align-items: center;
  height: 100vh;
}

.double-helix {
  width: 150px;
  height: 150px;
  fill: none;
  stroke: blue;
  stroke-width: 2;
}

@keyframes rotate {
  0% {
    transform: rotate(0deg);
  }
  100% {
    transform: rotate(360deg);
  }
}


/* If the screen size is 601px or more, set the font-size of <div> to 80px *
@media only screen and (min-width: 601px) {
  div.article {
    font-size: 80px;
  }
}

/* If the screen size is 600px or less, set the font-size of <div> to 30px *
@media only screen and (max-width: 600px) {
  div.article {
    font-size: 30px;
  }
}
*/

 /*body {
    padding-top: 0px;
    margin: 0;
    text-align: center;
    color: #888;
    background-color: #0e0e0e;
    background-image: url("/images/butterflybg5.png");
    background-repeat: repeat;
    overflow-x: hidden; /* Prevent scroll on narrow devices

new CSS gradient0 using var
    :root {
  --grad-1: rgb(128,179,171);
  --grad-2: rgb(30,41,58);
}

#gradient {
  position: absolute;
  left: 0;
  top: 0;
  right: 0;
  bottom: 0;
  background: rgb(128,179,171);
  background: linear-gradient(45deg, var(--grad-1) 0%, var(--grad-2) 100%);
}
} */

html {
  /* flex: 1 0 auto;  Prevent Chrome, Opera, and Safari from letting these items shrink to smaller than their content's default minimum size. */
  height: 100%;
  padding: 0;
}


body {
  background: #0c0f0b url(../images/body_bg.gif) left no-repeat;
  background-position-x: left;
  display: flex;
  flex-direction: column;
  padding-top: 0;
  margin: 0;
  text-align: center;
  z-index: 3;

  color: #b5b5b5;
/* 	background: #0e0e0e url(../images/butterflybg5.png) repeat-y; */
  /* background: linear-gradient(-60deg, #59006b, #0e0e0e, #2b5b59, #0e0e0e, #2e0215); */
  /* background: radial-gradient(circle, rgba(43,0,36,1) 0%, rgba(36,124,0,1) 50%, rgba(0,0,0,1) 100%), radial-gradient(at 70% 60%, #0e0e0e, rgba(101,0,41,1) 30%), radial-gradient(at 0 100%, #335340, rgba(21,0,28,1) 70%), linear-gradient(135deg, rgba(69,0,138,1) 75%, #0e0e0e), linear-gradient(90deg, #59006b, #2b5b59 17%, #e49129 74%, #2e0215); */
  /* background-blend-mode: screen, hue, color, overlay; */
  /* background-size: 1200% 1200%; */
/*	animation: gradient 120s ease infinite; */
}

@keyframes gradient {
	0% {
		background-position: 0% 50%;
	}
	50% {
		background-position: 100% 50%;
	}
	100% {
		background-position: 0% 50%;
	}
}

/* Opacity Shifts */
.opacity-0 {
	opacity:0!important;
}
.opacity-1 {
	opacity:0.2!important;
}
.opacity-2 {
	opacity:0.4!important;
}
.opacity-3 {
	opacity:0.5!important;
}
.opacity-4 {
	opacity:0.6!important;
}
.opacity-5 {
	opacity:0.7!important;
}
.opacity-6 {
	opacity:0.8!important;
}
.opacity-7 {
	opacity:0.9!important;
}
.opacity-8 {
	opacity:1!important;
}

/* Support Hover Opacity Shifts */
.opacity-0h5 {
	opacity:0!important;
	transition: opacity .25s ease-in-out!important;
	-moz-transition: opacity .25s ease-in-out!important;
	-webkit-transition: opacity .25s ease-in-out!important;
}
.opacity-0h5:hover {
	opacity:1!important;
}
/* End Opacity Shifts */

.blur {
  filter: blur(8px)
}

img {
  max-width: 100%;
  max-height: 100%;
}

#license {
  font-size: 10.5px;
  text-align: right;
}

#mainContent {
  max-width: 100%;
  margin: auto;
}
/*
canvas {
    display: block;
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 1010;
}*/

.iframe-box {
  position: relative;
  overflow: hidden;
  width: 100%;
  height: 500px;
/*padding-top: 56.25%; /* 16:9 Aspect Ratio (divide 9 by 16 = 0.5625) */
/*padding-top: 62.5%; /* 8:5 Aspect Ratio */
/*padding-top: 66.66%; /* 3:2 Aspect Ratio */
/*padding-top: 75%; /* 4:3 Aspect Ratio */
/*padding-top: 100%; /* 1:1 Aspect Ratio */
}

.iframe {
  position: absolute;
  top: 0;
  left: 0;
  bottom: 0;
  right: 0;
  width: 100%;
  height: 100%;
  border: 0;
  scrolling: 0;
}

p.look {
    text-decoration: underline;
    text-decoration-color: red;
    text-decoration-thickness: 1px;
    text-transform: uppercase;
    font-size: x-large;
    padding-left: 4%;
    text-align: start;
}

ul.lefty {
    text-align: start;
}

.lefty {
    text-align: start;
}

.red {
  text-decoration: underline;
  text-decoration-color: red;
  text-decoration-thickness: 1px;
}

.bd-placeholder-img {
  font-size: 1.125rem;
  text-anchor: middle;
  -webkit-user-select: none;
  -moz-user-select: none;
  user-select: none;
}

@media (min-width: 768px) {
  .bd-placeholder-img-lg {
    font-size: 3.5rem;
  }
}

.fbl {
  align-self: center;
}

/* social bar */
.sticky-container{
    padding: 0;
    margin: 0;
    position: fixed;
    right: -130px;
    top: 90px;
    width: 210px;
    z-index: 1100;
}
.sticky li{
    list-style-type: none;
    background-color: transparent;
    color: #efefef;
    height: 43px;
    padding: 0;
    margin: 0 0 1px 0;
    -webkit-transition: all 0.25s ease-in-out;
    -moz-transition: all 0.25s ease-in-out;
    -o-transition: all 0.25s ease-in-out;
    transition: all 0.25s ease-in-out;
    cursor: pointer;
}
.sticky li:hover{
    margin-left: -205px;
}
.sticky li img{
    float: left;
    margin: 5px 4px;
    margin-right: 5px;
}
.sticky li p{
    padding-top: 5px;
    margin: 0;
    line-height: 16px;
    font-size: 11px;
}
.sticky li p a{
    text-decoration: none;
    color: #b5b5b5;
}
.sticky li p a:hover{
    text-decoration: underline;
}

#rememberme {
	position: inherit;
}

.container {
  padding-top: 30px;
}

.der-box {
  border: 1px solid #90b5ff;
  box-shadow: 0 0 13px 2px rgba(144, 181, 255, 0.30);
  border-radius: 1px;
  margin-bottom: 0;
  padding: 12px;
  background: #0e0e0e;
/*  background-image: url("../images/body_bg.gif");
  background-size: 85%;
  background-repeat: repeat;*/
}

.der-alert {
  border: 1px solid #ff0000;
  box-shadow: 0 0 13px 2px rgba(255, 0, 0, 0.30);
  border-radius: 1px;
  margin-bottom: 0;
  padding: 12px;
  background: #0e0e0e;
/*  background-image: url("../images/body_bg.gif");
  background-size: 85%;
  background-repeat: repeat;*/
}

/* .glow {
  background: 50% 100%/50% 50% no-repeat radial-gradient(ellipse at bottom, #fff, transparent, transparent);
  font: url("https://fonts.googleapis.com/css?family=Montserrat:400,700,400italic");
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  font-size: 10vw;
  font-family: "Source Sans Pro", sans-serif;
  -webkit-animation: reveal 3000ms ease-in-out forwards 200ms, glow 2500ms linear infinite 2000ms;
          animation: reveal 3000ms ease-in-out forwards 200ms, glow 2500ms linear infinite 2000ms;
}
@-webkit-keyframes reveal {
  80% {
    letter-spacing: 8px;
  }
  100% {
    background-size: 300% 300%;
  }
}
@keyframes reveal {
  80% {
    letter-spacing: 8px;
  }
  100% {
    background-size: 300% 300%;
  }
}
@-webkit-keyframes glow {
  40% {
    text-shadow: 0 0 8px #fff;
  }
}
@keyframes glow {
  40% {
    text-shadow: 0 0 8px #fff;
  }
}
*/
/** profile **/

.profile-header {
  transform: translateY(7rem);
  z-index: 100;
}

.img-thumbnail {
    width: 150px;
    height: 150px;
    object-fit: cover;
}

.avatar-edit {
  text-align-last: center;
  margin-bottom: 10px;
}

.profile-cover {
    background-image: url('../assets/images/profile_banner.png');
    background-color: transparent;
    background-position: top;
    background-size: auto;
    max-width: 25%;
}

.tattoo_style {
    margin-top: 50px;
    margin-bottom: 150px;
}

.card {
  border: none;
  background-color: transparent;
}

.card-img-profile {
  max-width: 100%;
  max-height: 100%;
}

/*.gallery {
  justify-content: center;
}*/

/* For mobile phones: */
@media only screen and (max-width: 768px) {
[class*="col-"] {
  width: 100%;
  float: left;
  padding: 1px;
/* layout debug
  border: 1px solid 999; */
}
}

/* Scale Images */

/* For mobile phones: */
@media only screen and (max-width: 450px) {
a.gallery {
  width: 25%!important;
  height: auto!important;
  float: center;
  padding: 1px;
  margin: 1px;
}
.inlineFuck {
  visibility: hidden;
}
.slider {
  visibility: hidden;
}
.slider-label {
  visibility: hidden;
}
.slider-controls {
  visibility: hidden;
}
}

:root {
  --scaleImage: 13vh;
}

.gallery {
  display: flex;
  flex-wrap: wrap;
  padding: 5px;
  justify-content: center;
}

a.gallery {
  width: auto;
  height: var(--scaleImage);
  /* height: 30vh;*/
  float: center;
  border: 1px;
  border-radius: 1px;
  padding: 2px;
  margin: 2px;
}

img.gallery {
  cursor: pointer;
}

.gallery a:hover img {
  -webkit-transform: scale(1.05);
  -moz-transform: scale(1.05);
  -o-transform: scale(1.05);
  -ms-transform: scale(1.05);
  transform: scale(1.05);
  z-index: 5;
}

#topBtn {
  display: none; /* Hide by default */
  position: fixed; /* Fix position */
  bottom: 20px; /* Put button at bottom */
  right: 30px; /* Put button 30px from right */
  z-index: 99; /* Set to front layer */
  border: none; /* no border */
  outline: none; /* no outline */
  background-color: white;
  color: #000; /* Text color */
  padding: 0px 10px;
  border-radius: 10px; /* round corners */
  font-size: 28px;
}

#topBtn:hover {
  background-color: #555; /* Add dark-grey background on hover */
}

.clear {
  clear: both;
  float: none;
  width: 100%;
}

.output {
  display: none;
}

.slider-controls {
  display: flex;
  justify-content: space-between;
}

.slider-label {
  font-size: .75rem;
  font-style: normal;
  font-weight: 300;
}

.slider {
  -webkit-appearance: none;
  width: 100%;
  height: 1rem;
  margin: 3px;
  border-radius: .25rem;
  background: #dee7ec;
  outline: none;
}

.slider::-webkit-slider-thumb {
  -webkit-appearance: none;
  appearance: none;
  width: 1.75rem;
  height: 1.75rem;
  border-radius: 50%;
  background: #456bd9;
  cursor: pointer;
}

.slider::-moz-range-thumb {
  width: 1.75rem;
  height: 1.75rem;
  margin: 3px;
  border-radius: 50%;
  background: #456bd9;
  cursor: pointer;
}

.slider::-webkit-slider-thumb:active {
  cursor: -webkit-grabbing;
}

.slider::-moz-range-thumb:active {
  cursor: -moz-grabbing;
}

/* Map Highlight */
path {
  transition: 0.6s fill;
  fill: #d3d3d3;
}

path:hover {
  fill: #22aa22;
}