@font-face {
    src:url("../fonts/AriBlk.TTF");
    font-family:ablack;
}

@font-face {
    font-family: xirod;
    src:url("../fonts/xirod.ttf");
}

@font-face {
    font-family:basic;
    src:url("../fonts/personifieduxregular_1.ttf");
}

:root {--lightpink:#ff9bcf;}

::selection {
  background: #fc4b7f;
  color: #ffffff; /* WebKit/Blink Browsers */
  /*text-shadow: 0px 0px 5px black, 0px 0px 15px black, 0px 0px 5px black;*/
}
::-moz-selection {
  background: #fc4b7f;
  color: #ffffff; /* Gecko Browsers */
  /*text-shadow: 0px 0px 5px black, 0px 0px 15px black, 0px 0px 5px black;*/
}

::-webkit-scrollbar-track {background:#fc4b7f;}::-webkit-scrollbar-thumb {background:#ffffff;}
@supports not selector(::-webkit-scrollbar) {
  * {
    scrollbar-color: #ffffff #fc4b7f;
  }
}

body {
  margin:0px;
  /*background:#222222;*/
  background:url("../images/804772-c-ncp-nac.jpg"); /*arithmatic coding a JPEG greatly reduces it's size but it will not load properly*/
  /*background-repeat:repeat;*/ 
  background-size:cover;
  background-position: center;
  background-attachment:fixed;
}

div#topnav{
  height:50px;
  width:100%;
  position: fixed;
  top:0px;
  /*background: black;*/
  /*border-bottom: 1px solid #ff0000;*/
  background: rgb(255,255,255);
  background: url("../images/flowers-50perc.png"), linear-gradient(180deg, rgba(255,255,255,1) 0%, rgba(170,170,255,1) 100%); 
  border-bottom:2px outset #7777ff;
  background-size:350px;
  background-position:center;
  z-index: 100;
}

/*div#contentWrapper{
  display:flex;
  width:100%;
  height:auto;
  min-height:100vh;
  justify-content: center;
  justify-self: center;
}

div#contentBox{
  display:flex;
  width:100%;
  max-width:calc(100% - 500px);
  height:auto;
  justify-content: center;
  justify-self: center;
}*/

div#contentWrapper{
  display:flex;
  width:100%;
  height:auto;
  /*min-height:100vh;*/
  justify-content: center;
  justify-self: center;
}

div#content{
  display:block;
  max-width:calc(100% - 510px);
  min-width:700px;
  width:100%;
  height:auto;
  
  /*background:#111111;
  border-left:1px solid #ff0000;
  border-right:1px solid #ff0000;
  box-shadow: 0px 0px 5px black, 0px 0px 7px black, 0px 0px 10px black, 0px 0px 15px black, 0px 0px 20px black, 0px 0px 20px black, 0px 0px 20px black;*/
  box-shadow: 0px 0px 5px black, 0px 0px 7px black, 0px 0px 10px black;
  background: url("../images/flowers-50perc.png"), #0000ffaa; 
  background-position: center top;
  background-size:800px;
  border-bottom:2px outset #7777ff;
  backdrop-filter: blur(20px);
  
  padding-top:60px;
  padding-left:20px;
  padding-right:30px;
  color:white;
  
  overflow-wrap:break-word;
  flex-wrap: wrap;
}

@media (min-width:1921px) {
  div#content {
  max-width:1403px;}
}

div#footer{
  display:flex;
  max-width:calc(100% - 120px);
  min-width:700px;
  width:100%;
  min-height:150px;
  
  /*background:#111111;
  border-left:1px solid #ff0000;
  border-right:1px solid #ff0000;
  box-shadow: 0px 0px 5px black, 0px 0px 7px black, 0px 0px 10px black, 0px 0px 15px black, 0px 0px 20px black, 0px 0px 20px black, 0px 0px 20px black;*/
  box-shadow: 0px 0px 5px black, 0px 0px 7px black, 0px 0px 10px black;
  background: url("../images/roc-metro-sc-ncp.png"), #3e36ab; 
  background-position: right calc(100% - 11px);
  background-size:145px; /*300px*/
  background-repeat:no-repeat;
  backdrop-filter: blur(20px);
  
  padding-top:30px;
  padding-bottom:30px;
  padding-left:60px;
  padding-right:60px;
  color:white;
  
  z-index:1; /*fixes bug on chrome*/
}

div.footerColumn {
  /*background:white;*/ /*test bounding boxes*/
  height:100%;
  width:200px;
  margin-right:10px;
  padding-right:10px;
}

div.footerColumn:not(.last) {
  border-right:1px solid #fc4b7f;
}

#topnavLogo {display:none;}

#topnavLogoText {font-family:ablack;height: calc(100% - 12px);padding-top: 6px;padding-bottom: 6px;margin-left: 12px;float: left;color: white;-webkit-text-stroke: 2px black;font-size: 36px;margin-top: -8.25px;}

div#artBanner {
  display:block;
  background:url("../images/channels4_banner.jpg");
  width:100%;
  background-repeat:no-repeat;
  background-position: center;
  height:200px;
  border:5px solid #fc4b7f;
  border-radius:20px;
  box-shadow:0px 0px 15px inset #000000;
}

div#contentWrapper > div#content > #article {
  display:block;
  background:#3e36ab;
  width:calc(100% - 60px);
  background-position: center;
  height:auto;
  min-height: 400px;
  border:5px solid #fc4b7f;
  border-radius:20px;
  box-shadow:0px 0px 15px inset #000000;
  padding:30px;
  margin-top:30px;
  margin-bottom:30px;
}

.vCenterAllText {
  text-justify: center;
}

.hCenterAllText {
  text-align: center;
}

.headerFont {
  font-family: ablack !important;
  font-size:64px;
  line-height: 52px;
}

.subheaderFont {
  font-family: xirod !important;
  font-size:32px;
  line-height: 32px;
}

.defaultFont, div#content {
  font-family:basic !important;
  line-height: 1em;
}

hr {color:#fc4b7f;}

div#ownerSocialIcons {
  justify-content: center;
  align-content: center;
}

div#ownerSocialIcons .socialIcon {
  width:auto;
  height:auto;
  font-size:30px;
  margin-left:10px;
  padding-right:10px;
  color:white;
  transition-duration: 0.3s;
}

div#ownerSocialIcons > a:hover > .socialIcon {
  width:auto;
  height:auto;
  font-size:30px;
  margin-left:10px;
  padding-right:10px;
  color:#fc4b7f;
}

div#ownerSocialIcons .socialIcon:not(.last) {
  border-right:1px solid #fc4b7f;
}

/* Tooltip container */
.tooltip {
  position: relative;
  display: inline-block;
  transition-duration:0.3s;
}

/* Tooltip text */
.tooltip .tooltiptext {
  opacity:0.0;
  transform: scale(0.0);
  width: auto;
  max-width: 400px;
  background-color: #3e36ab;
  color: #fff;
  text-align: center;
  padding: 5px 0;
  border-radius: 7.5px;
  transition-duration:0.3s;
  font-size:16px;
  padding:5px;
  pointer-events: none;
  border-left:3px solid #000000;
  box-shadow:0px 0px 0px #ffffff;
  margin-left:5px;
 
  /* Position the tooltip text - see examples below! */
  position: absolute;
  z-index: 1;
}

/* Show the tooltip text when you mouse over the tooltip container */
.tooltip:hover .tooltiptext {
  opacity:1.0;
  transform: scale(1.0);
  transition-duration:0.3s;
  border-left:3px solid #fc4b7f;
  box-shadow:0px 0px 10px #ffffff;
}

.tooltipUnderline {border-bottom:3px double #fc4b7f;}

/*move these to a wrapper so you can have multiple of them*/
.bannerWarning {
  display:block;
  width:100%;
  max-width:calc(100% - 120px);
  padding-left:60px;
  padding-right:60px;
  height:50px;
  position: fixed;
  top:52px;
  z-index: 1;
  background:#fc4b7f;
  transition-duration: 0.3s;
  color:white;
  box-shadow: 0px -0px 15px inset black;
  line-height: 45px;
}

.bannerWarning::selection {
  background: #ffffff;
  color:black;
  text-shadow: none;
}
.bannerWarning::-moz-selection {
  background: #ffffff;
  color:black;
  text-shadow: none;
}

.bannerWarningParent {
  margin-top: 50px;
}

.bannerWarningClose {
  float:right;
  height:50px;
  width:50px;
  margin-right:-60px;
  background:transparent;
  border:none;
  color:white;
  font-size: 28px;
  transition-duration: 0.1s;
}

.bannerWarningClose:hover {
  color:black;
  text-shadow: 0px 0px 5px white, 0px 0px 5px white, 0px 0px 5px white, 0px 0px 5px white;
  cursor: pointer;
}

.bannerWarningClose:active {
  color:white;
  text-shadow: 0px 0px 5px black, 0px 0px 5px black, 0px 0px 5px black, 0px 0px 5px black;
  cursor: pointer;
}

a.textLink {
  border-bottom: 1px dotted #ffffff;
  text-shadow: 0px 0px 2.5px #ffffff77;
  color:white;
}

a.textLink:hover {
  border-bottom: 1px solid #fc4b7f;
  text-shadow: 0px 0px 10px #fc4b7f, 0px 0px 3px #fc4b7f, 0px 0px 3px #fc4b7f;
  color:white;
  cursor:pointer;
}

a.textLink:active {
  border-bottom: 1px solid #fc4b7f;
  text-shadow: 0px 0px 10px white, 0px 0px 3px white, 0px 0px 3px white;
  color:#ac0b4f;
  cursor:pointer;
}

a.textLink:visited {color:inherit;}

iframe.discordServerFooterEmbed {
  height:400px;
  width:500px;
}

div.discordServerFooterColumn {
  height:auto !important;
  width:500px !important;
}
/*outdated because my stupid ass deleted the file by accident*/