@charset "UTF-8";

/* theme colors */
:root {
    --bkg1: #160a22;/*#160a22*/
    --bkg2: #250944;
    --text: #cccccc;
    --link: #8d02d3;/*#9621ff*/
    --hover: #926CAF;
    --grad1: #2c0b4c;
    --grad2: #500f8c;
    --input: #6410c7;/*662d91*/
}

* {
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
}

html, body {
  height: 100%; line-height: 1.7;
  font-size: 16px;
}

body {
  background-color: var(--bkg1);
  color:var(--text);
}

h1 {font-size: 1.5rem;}
  @media (min-width: 576px) {h1 {font-size:2rem;}}

a {text-decoration: none;}

/* -- navigation -- */
.navbar {background: linear-gradient( to right, var(--grad1),var(--grad2),var(--grad1)); border-bottom: 2px solid var(--grad2);}
.navbar ul a {color:var(--text);}
.navbar ul a:hover, .navbar ul a:focus {background:var(--bkg1); color:var(--text);}
.navbar .navbar-toggler { border: 0px solid var(--hover);}
.navbar .navbar-toggler-icon { background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 30 30'%3e%3cpath stroke='rgb(204,204,204)' stroke-linecap='round' stroke-miterlimit='10' stroke-width='2' d='M4 7h22M4 15h22M4 23h22'/%3e%3c/svg%3e");}
.navbar .navbar-toggler-icon:hover { background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 30 30'%3e%3cpath stroke='rgb(146,108,175)' stroke-linecap='round' stroke-miterlimit='10' stroke-width='2' d='M4 7h22M4 15h22M4 23h22'/%3e%3c/svg%3e");}
.navbar .dropdown-menu {border: 2px solid var(--grad2); background: linear-gradient( to bottom, var(--grad1),var(--grad2),var(--grad1)); border-bottom: 2px solid var(--grad2);}
.navbar .dropdown-toggle {border: none; color: var(--text);}
.navbar .dropdown-toggle:hover {border: none; color: var(--hover);} 
@media screen and (min-width: 768px) {
  .navbar .dropdown:hover>.dropdown-menu { display: block; }
  .navbar .dropdown>.dropdown-toggle:active { pointer-events: none; }
}
.navbar .navbar-brand:hover { 
  animation: shake 75ms infinite;
  animation-timing-function: linear;
  animation-iteration-count: 10;
}
@keyframes shake {
  0% { transform: rotate(1deg); }
  50% { transform: rotate(-1deg); }
  100% { transform: rotate(1deg); }
}

.btn-zoom:hover {transform: scale(1.1); transition: transform .4s;}

.border-pink{ border: 1px solid var(--input);}
.border-purple{ border-bottom: 1px solid var(--input);}

.modal-header {border-bottom:1px solid var(--grad2);}
.modal-content {background:var(--bkg2);}
.modal-footer {border-top:1px solid var(--grad2);}

footer {background:var(--bkg2);border-top: 2px solid var(--grad2);}
footer a{color: var(--text);text-decoration:none;}
footer a:hover {color: var(--hover);text-decoration:none; }

::-webkit-input-placeholder {
  color: var(--text) !important;
  font-style: italic;
  font-size: 14px;
}

::-moz-placeholder {
  color: var(--text) !important;
  font-style: italic;
  font-size: 14px;
}

/* chrome scroll bar - doesn't work on moz based browsers */
::-webkit-scrollbar { width: 10px; }
::-webkit-scrollbar-track { border-radius: 10px; }
::-webkit-scrollbar-thumb { background: var(--grad2); border-radius: 10px; }
::-webkit-scrollbar-thumb:hover { background: var(--link); }


.discord {color: var(--text);}
.discord:hover {color: var(--hover); transform: scale(1.1); transition: transform .4s;}

.card-1 {
  /*background-color: var(--bkg1);*/
  background: radial-gradient(45vw 80% at 90% 40%,rgba(162,50,255,.3),rgba(44,11,76,0) 95%),linear-gradient(
    90deg
    ,rgba(44,11,76,.9),rgba(80,15,131,.5) 60%,rgba(44,11,76,.9)),linear-gradient(
    35deg
    ,rgba(44,11,76,.3),rgba(80,15,131,.3) 37%,rgba(44,11,76,.3) 0,rgba(80,15,131,.3) 76%,rgba(44,11,76,.3) 0,rgba(80,15,131,.3)),linear-gradient(
    90deg
    ,#2c0b4c,#500f83 60%,#2c0b4c);border-radius:20px;border: 1px solid #5c2786;
    color: var(--text);
}
.card-2 {
  color:var(--text);
  background: linear-gradient(to bottom right, var(--bkg2), var(--grad1));
}

.card .btn{
  background-color: var(--grad1);
  color: var(--text);
  border: 1px solid var(--input);
}
.card .btn:hover{
  background-color: var(--bkg1);
}

.cardzoom:hover {
 transform: scale(1.02); transition: transform .4s;
}
.card-header {
  border-bottom: 1px solid var(--link);
}
.card-footer {
  border-top: 1px solid var(--link);
}
.card a {color:var(--text);}

.text-darken { filter: brightness(65%);}

#tools .feature {
  background: linear-gradient( to bottom, var(--grad1),var(--grad2),var(--grad1)); font-size: 250%; 
  margin-top: -2.75rem !important;
  border: 1px solid var(--input);
  padding: 1em; color: var(--text);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  height: 4rem;
  width: 4rem;
  font-size: 2rem;
}

#tools .form-control{
  color: var(--input);
}

#tools .form-switch .form-check-input {
  background-color: var(--hover);
  border-color: var(--hover);
  border: none;
  background-image: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='-4 -4 8 8'%3e%3ccircle r='3' fill='rgba(255,255,255,0.5)'/></svg>");
}

#tools .form-switch .form-check-input:checked {
  background-color: var(--hover);
  border-color: var(--hover);
  border: none;
  background-image: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='-4 -4 8 8'%3e%3ccircle r='3' fill='rgba(255,255,255,1.0)'/></svg>");
}

#pagination .btn{
  background-color: var(--grad2);
}
#pagination .btn:hover{
  background-color: var(--grad1);
}