/*
 * This is a manifest file that'll be compiled into application.css, which will include all the files
 * listed below.
 *
 * Any CSS (and SCSS, if configured) file within this directory, lib/assets/stylesheets, or any plugin's
 * vendor/assets/stylesheets directory can be referenced here using a relative path.
 *
 * You're free to add application-wide styles to this file and they'll appear at the bottom of the
 * compiled file so the styles you add here take precedence over styles defined in any other CSS
 * files in this directory. Styles in this file should be added after the last require_* statement.
 * It is generally better to create a new file per style scope.
 *


 */

svg {
  fill: var(--accent);
  /*	stroke: var(--accent-light); */
  /*  fill: red;
stroke: yellow; */
}

svg.tslogo {
  fill: var(--text);
  /* Add your styles here */
}

.sn_logo {
  display: inline;
  margin: 0 auto;
  height: 1em;
  width: 1em;
  vertical-align: middle;
}

a.sn_link {
  box-shadow: inset 0 0 0 0 var(--accent);
  margin: 0 -0.25rem;
  padding: 0 0.25rem;
  display: inline-block;
  vertical-align: middle;
  text-decoration: none;
  transition: color 0.3s ease-in-out, box-shadow 0.3s ease-in-out;
}

a.sn_link:hover {
  box-shadow: inset 300px 0 0 0 var(--accent);
  color: var(--bg);
}

.center {
  margin-left: auto;
  margin-right: auto;
}

h1,
h2,
h3,
h4,
p {
  text-align: center;
}

#bottom-nav-bar {
  font-size: 0.7em;
}

img.final-picture {
  border-radius: 0;
  margin-top: 30px;
  border-width: 10px;
  border-color: black;
  filter: drop-shadow(-10px 10px 10px #111);
}

img.sqimg {
  border-radius: 0;
}

img.responsive-img {
  width: 80%;
  height: auto;
  max-width: 100%;
}

/* Light theme override */
[data-theme="light"] {
  --bg: #fff;
  --accent-bg: #f5f7ff;
  --text: #212121;
  --text-light: #585858;
  --border: #d8dae1;
  --accent: #0d47a1;
  --accent-light: #90caf9;
  --accent-dark: #89a5d0;
  --code: #d81b60;
  --preformatted: #444;
  --marked: #ffdd33;
  --disabled: #efefef;
}

/* Dark theme override */
[data-theme="dark"] {
  --bg: #212121;
  --accent-bg: #2b2b2b;
  --text: #dcdcdc;
  --text-light: #ababab;
  --border: #666;
  --accent: #ffb300;
  --accent-light: #ffecb3;
  --accent-dark: #785501;
  --code: #f06292;
  --preformatted: #ccc;
  --disabled: #111;
}
label.dmtoogle {
  width: 50px;
  height: 20px;
  position: relative;
  display: block;
  background: #ebebeb;
  border-radius: 20px;
  box-shadow: inset 0px 5px 15px rgba(0, 0, 0, 0.4),
    inset 0px -5px 15px rgba(255, 255, 255, 0.4);
  cursor: pointer;
  transition: 0.3s;
}
label.dmtoogle:after {
  content: "";
  width: 18px;
  height: 18px;
  position: absolute;
  top: 1px;
  left: 1px;
  background: linear-gradient(180deg, #ffcc89, #d8860b);
  border-radius: 18px;
  box-shadow: 0px 5px 10px rgba(0, 0, 0, 0.2);
  transition: 0.3s;
}
input.dmtoogle {
  width: 0;
  height: 0;
  visibility: hidden;
}
input.dmtoogle:checked + label {
  background: #242424;
}
input.dmtoogle:checked + label:after {
  left: 49px;
  transform: translateX(-100%);
  background: linear-gradient(180deg, #777, #3a3a3a);
}

label.dmtoogle:active:after {
  width: 26px;
}

.background {
  width: 100vw;
  height: 100vh;
  background: #fff;
  z-index: -1;
  position: absolute;
  transition: 0.3s;
}

input.dmtoogle:checked + label.dmtoogle + .background {
  background: #242424;
}

label.dmtoogle svg {
  position: absolute;
  width: 12px;
  top: 4px;
  z-index: 100;
}
label.dmtoogle svg.sun {
  left: 4px;
  fill: #fff;
  transition: 0.3s;
}
label.dmtoogle svg.moon {
  left: 34px;
  fill: #7e7e7e;
  transition: 0.3s;
}
input.dmtoogle:checked + label svg.sun {
  fill: #7e7e7e;
}
input.dmtoogle:checked + label svg.moon {
  fill: #fff;
}

span.ig_account_name {
  font-style: italic;
  color: var(--accent);
  opacity: 0.4;
  font-size: 0.9em;
}