/* External Style Sheet for Kniraven site.
   Author:   Nickolas Patino
   Created: 04/17/2019
   Updated: 03/15/2024
*/
@charset "UTF-8";
/*************************************************
 * Add 5ths to Bootstrap            *
 *************************************************/

.col-xs-5ths,
.col-sm-5ths,
.col-md-5ths,
.col-lg-5ths {
    position: relative;
    min-height: 1px;
    padding-right: 15px;
    padding-left: 15px;
}

.col-xs-5ths {
    width: 20%;
    float: left;
}

@media (min-width: 768px) {
    .col-sm-5ths {
        width: 20%;
        float: left;
    }
}

@media (min-width: 992px) {
    .col-md-5ths {
        width: 20%;
        float: left;
    }
}

@media (min-width: 1200px) {
    .col-lg-5ths {
        width: 20%;
        float: left;
    }
}

/*************************************************
 * Add 7ths to Bootstrap            *
 *************************************************/
.col-sevenths,
.col-sm-sevenths,
.col-md-sevenths,
.col-lg-sevenths,
.col-xl-sevenths {
    position: relative;
    min-height: 1px;
    padding-right: 15px;
    padding-left: 15px;
}

.col-xs-sevenths {
    width: 14.2%;
    float: left;
}

@media (min-width: 768px) {
    .col-sm-sevenths {
        width: 14.2%;
        float: left;
    }
}

@media (min-width: 992px) {
    .col-md-sevenths {
        width: 14.2%;
        float: left;
    }
}

@media (min-width: 1200px) {
    .col-lg-sevenths {
        width: 14.2%;
        float: left;
    }
}

.separator{margin-bottom: 5px; border-bottom: 1px solid; padding-bottom: 5px;}

/*MEGA-MENU START*/
.navbar .megamenu{ padding: 1rem; }
.col-megamenu h6 {margin: 5px; border-bottom: 1px solid; padding-bottom: 3px;}
.dropdown-item{
    font-size: 0.8rem!important;
}
/* ============ desktop view ============ */
@media all and (min-width: 576px)
{
  .navbar .has-megamenu{position:static!important;}
  .navbar .megamenu{left:0; right:0; width:100%!important; margin-top:0;  }
}
/* ============ desktop view .end// ============ */
/* ============ mobile view ============ */
@media(max-width: 575px)
{
  .navbar.fixed-top .navbar-collapse, .navbar.sticky-top .navbar-collapse
  {
      overflow-y: auto;
      max-height: 90vh;
      margin-top:10px;
  }
}
/* ============ mobile view .end// ============ */
/*MEGA-MENU END*/

.container{max-width: 1200px;}
@media print
{
  .noprint, .noprint * {display:none;}
  * {max-width:100%;color:#000;background-color: #fff;} 
  div, .nobreak {page-break-inside: avoid;}
  .pagebreak {page-break-after: always;}
  hr{display:none;}
}

.unseen {
    position: absolute;
    left: -1000px;
}
img {
  max-width: 100%;
}

.card-img-top {
  text-align: center;
  padding: 10px 10px 0px 10px;
}

.ycard {
  height:92%;
}
img.round {
  border-radius: 50%;
}


.nav-tabs .nav-item.show .nav-link, .nav-tabs .nav-link.active {
    color: #495057;
    background-color: #fff;
    border-color: #dee2e6 #dee2e6 #fff;
}

.nav-link {
    display: block;
    padding: .5rem 1rem;
    color: magenta;
    text-decoration: none;
    transition: color .15s ease-in-out,background-color .15s ease-in-out,border-color .15s ease-in-out;
    font-size: 0.9rem!important;
}

.nav-link:hover{
  color:violet;
  background-color: #101214;
}
.nav-tabs .nav-link {
    background-color: gray;
}

.nav-pills .nav-link {
    border-radius: 20px 20px 0 0;
    border-right: 2px solid grey;
    border-top: 1px solid grey;
    width: 100%;
}
.nav-pills {
    margin-right: 40px;
}
.nav-pills .nav-link.active, .nav-pills .show>.nav-link {
    color: #fff;
    background-color: #212529;
    border-right: 5px solid grey;
}
.tab-content {
  color: #fff;
  background-color: #212529;
}
.circleborder {
  border: solid 2px white;
}
.tab-pane {
  min-height: 280px;
}
.text-indent {
    text-indent: 2em;
}

/* SOCIAL MEDIA BUTTONS */
.discord-button {
    display: inline-block;
    background: radial-gradient(circle, #7289DA 0%, #4E548C 100%);
    color: white;
    padding: 10px 10px;
    border-radius: 5px;
    text-decoration: none;
    font-size: clamp(8px, 1.3vw,14px);
    font-weight: bolder;
    transition: background-color 0.2s, transform 0.1s;
    box-shadow: 0 2px 4px rgba(0,0,0,0.2);
    width: 100%;
}

.discord-button img {
    vertical-align: middle;
    margin-right: 10px;
}

.discord-button:hover {
    color: white;
    background: radial-gradient(circle, #5B6EAE 0%, #2E3150 100%);
}

.discord-button:active {
    transform: translateY(2px); /* Simulates the button being pressed down */
}


.youtube-button {
    display: inline-block;
    background: radial-gradient(circle, red 0%, #B20000 100%);
    color: white;
    padding: 10px 10px;
    border-radius: 5px;
    text-decoration: none;
    font-size: clamp(8px, 1.3vw,14px);
    font-weight: bolder;
    transition: background-color 0.2s, transform 0.1s;
    box-shadow: 0 2px 4px rgba(0,0,0,0.2);
    width: 100%;
}

.youtube-button img {
    vertical-align: middle;
    margin-right: 10px;
}

.youtube-button:hover {
    color: white;
    background: radial-gradient(circle, darkred 0%, #7A0000 100%);
}

.youtube-button:active {
    transform: translateY(2px); /* Simulates the button being pressed down */
}

.twitch-button {
    display: inline-block;
    background: radial-gradient(circle, #6441A5 0%, #2A0D65 100%);
    color: white;
    padding: 10px 10px;
    border-radius: 5px;
    text-decoration: none;
    font-size: clamp(8px, 1.3vw,14px);
    font-weight: bolder;
    transition: background-color 0.2s, transform 0.1s;
    box-shadow: 0 2px 4px rgba(0,0,0,0.2);
    width: 100%;
}

.twitch-button img {
    vertical-align: middle;
    margin-right: 10px;
}

.twitch-button:hover {
    color: white;
    background: radial-gradient(circle, #4F2191 0%, #1E0841 100%);
}

.twitch-button:active {
    transform: translateY(2px); /* Simulates the button being pressed down */
    box-shadow: 0 1px 2px rgba(0,0,0,0.2); /* Adjusts shadow for pressed effect */
}

.twitter-button {
    display: inline-block;
    background: radial-gradient(circle, #1DA1F2 0%, #124D82 100%);
    color: white;
    padding: 10px 10px;
    border-radius: 5px;
    text-decoration: none;
    font-size: clamp(8px, 1.3vw,14px);
    font-weight: bolder;
    transition: background-color 0.2s, transform 0.1s;
    box-shadow: 0 2px 4px rgba(0,0,0,0.2);
    width: 100%;
}

.twiterh-button img {
    vertical-align: middle;
    margin-right: 10px;
}

.twitter-button:hover {
    color: white;
    background: radial-gradient(circle, #1A91DA 0%, #103D62 100%);
}

.twitter-button:active {
    transform: translateY(2px); /* Simulates the button being pressed down */
    box-shadow: 0 1px 2px rgba(0,0,0,0.2); /* Adjusts shadow for pressed effect */
}

.instagram-button {
    display: inline-block;
    background: linear-gradient(to right, #833AB4 0%, #FD1D1D 25%, #F56040 50%, #F77737 75%, #FCAF45 100%);
    color: white;
    padding: 10px 10px;
    border-radius: 5px;
    text-decoration: none;
    font-size: clamp(8px, 1.3vw,14px);
    font-weight: bolder;
    transition: background-color 0.2s, transform 0.1s;
    box-shadow: 0 2px 4px rgba(0,0,0,0.2);
    width: 100%;
}

.instagram-button img {
    vertical-align: middle;
    margin-right: 10px;
}

.instagram-button:hover {
    color: white;
    background: linear-gradient(to right, #653987 0%, #E11919 25%, #D2553A 50%, #D66A35 75%, #D98E41 100%);
}

.instagram-button:active {
    transform: translateY(2px); /* Simulates the button being pressed down */
    box-shadow: 0 1px 2px rgba(0,0,0,0.2); /* Adjusts shadow for pressed effect */
}

.tiktok-button {
    display: inline-block;
    background: radial-gradient(circle at 30% 107%, #EE1D52 0%, #000000 55%);
    color: white;
    padding: 10px 10px;
    border-radius: 5px;
    text-decoration: none;
    font-size: clamp(8px, 1.3vw,14px);
    font-weight: bolder;
    transition: background-color 0.2s, transform 0.1s;
    box-shadow: 0 2px 4px rgba(0,0,0,0.2);
    width: 100%;
}

.tiktok-button img {
    vertical-align: middle;
    margin-right: 10px;
}

.tiktok-button:hover {
    color: white;
    background: radial-gradient(circle at 30% 107%, #C3113D 0%, #000000 55%);
}

.tiktok-button:active {
    transform: translateY(2px); /* Simulates the button being pressed down */
    box-shadow: 0 1px 2px rgba(0,0,0,0.2); /* Adjusts shadow for pressed effect */
}

.aspect-ratio-16-9 {
    position: relative;
    width: 100%;
    padding-top: 56.25%; /* 16:9 Aspect Ratio */
}
  
#twitch-embed {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
}

.gugi {
    font-family: "Gugi", sans-serif;
    font-weight: 400;
    font-style: normal;
}

.monodisplay {
    font-family: "Major Mono Display", monospace;
    font-weight: 400;
    font-style: normal;
}

.unicode-icon {
    color: transparent;
    text-shadow: 0 0 0 white;
}