@import url('https://cdn.jsdelivr.net/npm/bootstrap@4.6.1/dist/css/bootstrap.min.css');
@import url('https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.1.1/css/all.css');
@import url('https://fonts.googleapis.com/css?family=Roboto');

body{
	font-family: 'Roboto', sans-serif;
}
* {
	margin: 0;
	padding: 0;
}
i {
	margin-right: 10px;
}

/*----------bootstrap-navbar-css------------*/
.navbar-logo{
	padding: 15px;
	color: #fff;
}
.navbar-mainbg{
	background-color: #aca9a9;
	padding: 0px;
}
#scene-container{
    border: medium solid rgb(83, 83, 83);
    border-top-left-radius: 1px;
    border-bottom-left-radius: 1px;
    border-bottom-right-radius: 1px;

    -webkit-box-shadow: 0px -14px 5px -6px rgba(0,0,0,0.67);
    -moz-box-shadow: 0px -14px 5px -6px rgba(0,0,0,0.67);
    box-shadow: 0px -14px 5px -6px rgba(0,0,0,0.67);
}
#about-container{
    width: 100%;
    height: 100%;
    position: absolute;

    padding-right: 200px;
    overflow: scroll;
    box-sizing: content-box;

    -webkit-box-shadow: 0px -14px 5px -6px rgba(0,0,0,0.67);
    -moz-box-shadow: 0px -14px 5px -6px rgba(0,0,0,0.67);
    box-shadow: 0px -14px 5px -6px rgba(0,0,0,0.67);
}
#project-container{
    width: 100%;
    height: 100%;
    position: absolute;

    -webkit-box-shadow: 0px -14px 5px -6px rgba(0,0,0,0.67);
    -moz-box-shadow: 0px -14px 5px -6px rgba(0,0,0,0.67);
    box-shadow: 0px -14px 5px -6px rgba(0,0,0,0.67);
}

#navbarSupportedContent{
	overflow: hidden;
	position: relative;
}
#navbarSupportedContent ul{
	padding: 0px;
	margin: 0px;
}
#navbarSupportedContent ul li a i{
	margin-right: 10px;
}
#navbarSupportedContent li {
	list-style-type: none;
	float: left;
}
#navbarSupportedContent ul li a{
	color: rgba(255,255,255,0.5);
    text-decoration: none;
    font-size: 15px;
    display: block;
    padding: 20px 20px;
    transition-duration:0.6s;
	transition-timing-function: cubic-bezier(0.68, -0.55, 0.265, 1.55);
    position: relative;
}
#navbarSupportedContent>ul>li.active>a{
	color: white;
    text-shadow: 0 0 10px #eeeeee, 0 0 15px #fff, 0 0 20px #fff, 0 0 25px #fff;

	background-color: transparent;
	transition: all 0.7s;
}
#navbarSupportedContent>ul>li>a:hover{
    color: white;
    background-color: transparent;
    transition: all 0.4s;
}
#navbarSupportedContent a:not(:only-child):after {
	content: "\f105";
	position: absolute;
	right: 20px;
	top: 10px;
	font-size: 14px;
	font-family: "Font Awesome 5 Free";
	display: inline-block;
	padding-right: 3px;
	vertical-align: middle;
	font-weight: 900;
	transition: 0.5s;
}
#navbarSupportedContent .active>a:not(:only-child):after {
	transform: rotate(90deg);
}
.hori-selector{
	display:inline-block;
	position:absolute;
	height: 100%;
	top: 0px;
	left: 0px;
	transition-duration:0.6s;
	transition-timing-function: cubic-bezier(0.68, -0.55, 0.265, 1.55);
	background-color: rgb(83, 83, 83);
	border-top-left-radius: 15px;
	border-top-right-radius: 15px;
	margin-top: 10px;
}
.hori-selector .right,
.hori-selector .left{
	position: absolute;
	width: 25px;
	height: 25px;
	background-color: rgb(83, 83, 83);;
	bottom: 10px;
}
.hori-selector .right{
	right: -25px;
}
.hori-selector .left{
	left: -25px;
}
.hori-selector .right:before,
.hori-selector .left:before{
	content: '';
    position: absolute;
    width: 50px;
    height: 50px;
    border-radius: 50%;
    background-color: #aca9a9
}
.hori-selector .right:before{
	bottom: 0;
    right: -25px;
}
.hori-selector .left:before{
	bottom: 0;
    left: -25px;
}
.display-container {
    background-color: gray;
}

.github {
    display: inline-block;
    width: 42px;
    height: 42px;
    background-size: 42px 42px;
    background-position: center;
    margin-top: 5px;
    margin-left: 8px;
    padding: 2px;
    background-image: url(/assets/images/github-1.svg);
}
.github:hover,
.github.active {
    background-image: url(/assets/images/github-h.svg);
}

.linkedin {
    display: inline-block;
    width: 42px;
    height: 42px;
    background-size: 42px 42px;
    background-position: center;
    margin-top: 5px;
    margin-left: 8px;
    padding: 2px;
    background-image: url(/assets/images/linkedin.svg);
}
.linkedin:hover {
    background-image: url(/assets/images/linkedin-h.svg);
}

.mail {
    display: inline-block;
    width: 42px;
    height: 42px;
    background-size: 42px 42px;
    background-position: center;
    margin-top: 5px;
    margin-left: 8px;
    padding: 2px;
    background-image: url(/assets/images/mail.png);
}
.mail:hover {
    background-image: url(/assets/images/mail-h.png);
}

.resume {
    display: inline-block;
    width: 42px;
    height: 42px;
    background-size: 42px 42px;
    background-position: center;
    margin-top: 5px;
    margin-left: 8px;
    padding: 2px;
    background-image: url(/assets/images/document-2.png);
}
.resume:hover {
    background-image: url(/assets/images/document-2-h.png);
}

.sci-fi-button {
    display: inline-block;
    width: 42px;
    height: 42px;
    background-size: 110px 110px;
    background-position: center;
    margin-top: 5px;
    margin-left: 8px;
    padding: 2px;
    background-image: url(/assets/images/sci-fi-button1-neutral.png);
}
.sci-fi-button:hover,
.sci-fi-button.active {
    background-image: url(/assets/images/sci-fi-button1.png);
}

.character-sheet {
    z-index: 10;
    /* background-image: url(/assets/images/futuristic-blue-bg.jpg); */
    background-color: slategrey;
    opacity: 0.92;
    height: fit-content;

    border-radius: 10px;

    padding-bottom: 30px;
    width: 90%;

    -webkit-box-shadow: #FFF 0 -1px 4px, rgb(11, 226, 241) 0 -2px 10px, #4c8bc5 0 -5px 10px, rgb(0, 17, 255) 0 -8px 20px, -32px -16px 6px -3px rgba(0,0,0,0); 
    box-shadow: #FFF 0 -1px 4px, rgb(11, 226, 241) 0 -2px 10px, #4c8bc5 0 -5px 10px, rgb(0, 17, 255) 0 -8px 20px, -32px -16px 6px -3px rgba(0,0,0,0);
}
.character-sheet .row {
    margin: auto;
    /* padding-top: 30px; */
}

#portrait-container {
    display: block;
    height: 150px;
    width: 150px;
    margin-left: 20px;

    position: relative;
    /* border: 2px solid gold; */

    -webkit-box-shadow: #FFF 0 -1px 4px, rgb(188, 245, 245) 0 -2px 10px, #5ff3f3 0 -10px 20px, rgb(53, 141, 255) 0 -18px 40px, -7px 3px 6px 3px rgba(0,0,0,0.26); 
    box-shadow: #FFF 0 -1px 4px, rgb(188, 245, 245) 0 -2px 10px, #5ff3f3 0 -10px 20px, rgb(53, 141, 255) 0 -18px 40px, -7px 3px 6px 3px rgba(0,0,0,0.26);
}
#portrait {
    height: 100%;
    width: 100%;
    background: url(/assets/images/chase_and_morty.jpg) no-repeat;
    background-position: center;
}

#character-section {
    justify-content: left;
}
#character-name-label {
    display: block;
    padding: 5px 0;
    border-bottom: 1px solid gray;

    margin-left: 15px;
    margin-bottom: auto;

    font-size: 25px;

    width: 300px;
}

.sheet-container {
    background-color: black;
    color: white;
    border: 2px solid #678faf;
    border-radius: 40px 10px 40px 10px;
    opacity: 0.95;

    margin-bottom: 20px;

    /* display: flex; */

    /* -webkit-box-shadow: -12px -8px 6px -3px rgba(0,0,0,0.65); 
    box-shadow: -12px -8px 6px -3px rgba(0,0,0,0.65); */

    -webkit-box-shadow: #FFF 0 -1px 4px, rgb(188, 245, 245) 0 -2px 10px, #5ff3f3 0 -10px 20px, rgb(53, 141, 255) 0 -18px 40px, -7px 3px 6px 3px rgba(0,0,0,0.26); 
    box-shadow: #FFF 0 -1px 4px, rgb(188, 245, 245) 0 -2px 10px, #5ff3f3 0 -10px 20px, rgb(53, 141, 255) 0 -18px 40px, -7px 3px 6px 3px rgba(0,0,0,0.26);
}
.sheet-container-title {
    display: block;
    margin-bottom: auto;
    margin-left: 40px;
    font-family: "Rajdhani";
    font-size: x-large;
}
.sheet-container-content {
    display: flex;
    justify-content: left;
    align-items: center;

    margin: 20px;
    width: 90%;
    max-width: 90%;
}

#experience-bar {
    width: 100%;
    margin-bottom: 10px;
    overflow: hidden;
    color: lightgrey;
    padding-top: 15px;
}
#experience-bar .active {
    color: white;
    /* text-shadow: 0 -5px 7px #eeeeee, 0 -15px 15px #fff, 0 -10px 20px #fff */
}
#experience-bar li {
    list-style-type: none;
    font-size: 10px;
    width: 20%;
    float: left;
    position: relative;
    font-weight: 400;
    padding-top: 10px;

    text-align: center;
}
#experience-bar li:before {
    width: 35px;
    height: 35px;
    line-height: 30px;
    display: block;
    font-size: 25px;
    font-family: "Font Awesome 5 Free";
    content: "\f1c9";
    color: #ffffff;
    background: lightgray;
    border-radius: 50%;
    margin: 0 auto 10px auto;
    padding: 2px 2px 2px 8px;
}
#experience-bar li:after {
    content: '';
    width: 100%;
    height: 2px;
    background: lightgray;
    position: absolute;
    left: 0;
    top: 15px;
    z-index: -1;
    margin-top: 10px;
    padding-top: 5px;
}
#experience-bar li.active:before,
#experience-bar li.active:after {
    background: rgb(245, 181, 5);

    -webkit-box-shadow: #FFF 0 -1px 2px, rgb(245, 236, 188) 0 -1px 2px, #fdfb5d 0 -3px 4px;
    box-shadow: #FFF 0 -1px 2px, rgb(245, 236, 188) 0 -1px 2px, #fdfb5d 0 -3px 4px;
}

#languages-section {
    margin-top: 10px;
}

.progress {
    height: 20px;
    margin-bottom: 30px;
    margin-left: 20px;
    margin-right: 35px;

    -webkit-box-shadow: #FFF 0 -1px 2px, rgb(188, 245, 245) 0 -2px 4px, #5ff3f3 0 -6px 8px;
    box-shadow: #FFF 0 -1px 2px, rgb(188, 245, 245) 0 -2px 4px, #5ff3f3 0 -6px 8px;
}
.progress-bar {
    background-color: #25ca4e;
}

.class-container {
    display: block;
    box-sizing: border-box;
    margin-left: 20px;

    height: 120px;
    width: 100px;

    position: relative;
    border: 2px solid gold;

    -webkit-box-shadow: #FFF 0 -1px 4px, rgb(188, 245, 245) 0 -1px 5px, #5ff3f3 0 -5px 10px, rgb(53, 141, 255) 0 -9px 20px, -7px 3px 6px 3px rgba(0,0,0,0.26); 
    box-shadow: #FFF 0 -1px 4px, rgb(188, 245, 245) 0 -1px 5px, #5ff3f3 0 -5px 10px, rgb(53, 141, 255) 0 -9px 20px, -7px 3px 6px 3px rgba(0,0,0,0.26);
}
#stats-section .class-container{
    margin-left: 0;
    width: 100px;
    height: 100px;
}

.bullet-item-container {
    align-items: center;
    display: flex;
    margin-bottom: 5px;
}
.bullet-item-proficiency {
    align-items: center;
    display: flex;
    padding-left: 3px;
    cursor: pointer;
}
.bullet-item-skill {
    border-bottom: 1px solid #d8d8d8;
    font-family: Roboto Condensed,Roboto,Helvetica,sans-serif;
    font-size: 12px;
}
.bullet-item-modifier {
    align-items: center;
    background-color: transparent;
    border: 1px solid #bfccd6;
    border-radius: 4px;
    box-sizing: border-box;
    color: #394b59;
    cursor: pointer;
    display: inline-flex;
    justify-content: center;
    margin-left: 5px;
    padding: 3px;
}

.quest-item-container {
    align-items: center;
    display: flex;
    margin-bottom: 5px;
}
.quest-item-status {
    align-items: center;
    display: flex;
    padding-left: 3px;
    cursor: pointer;
}
.quest-item-description {
    font-family: Roboto Condensed,Roboto,Helvetica,sans-serif;
    font-size: 18px;
}

#character-details-section {
    display: flex; 
    justify-content: left; 
    align-items: center; 
    margin-top: 10px;
}
.character-details-subsection {
    margin-left: 20px;
    margin-right: 20px;
}

.background-section-container {
    display: flex; 
    justify-content: left; 
    padding: 20px 20px 20px 20px;
    width: 100%; 
    border-bottom: 2px solid white;
}
.background-icon-container {
    display: block; 
    height: 32px; 
    width: 32px; 
    position: relative;

    margin-top: 10px; 
    margin-right: 10px;
}
.background-icon {
    height: 100%;
    width: 100%;
    min-width: 32px; 
    margin-right:10px;
}
#intellisoft-icon{
    background-image: url(/assets/images/intellisoft-icon.png);
}
#infor-icon {
    background-image: url(/assets/images/infor-icon.ico);
}
#clemson-icon {
    background-image: url(/assets/images/clemson-icon.jpg);
}

#character-class-icon {
    background-image: url(/assets/images/wizard_class_image.png);
    width: 100%;
    height: 100%;
    background-position: center;
    background-size: 100% 100%;
}
.character-class-label {
  position: absolute;
  bottom: 0;
  left: 50%;
  transform: translateX(-50%);
  background: rgba(0, 0, 0, 0.6);
  color: white;
  font-weight: bold;
  padding: 2px 8px;
  border-radius: 4px 4px 0 0;
  font-size: 12px;
  width: 100%;
  text-align: center;
}

#character-level-icon {
    background-image: url(/assets/images/4_level_image.png);
    width: 100%;
    height: 100%;
    background-position: center;
    background-size: 100% 100%;
}

#character-employment-icon {
    background-image: url(/assets/images/openart-portal-background.jpg);
    width: 100%;
    height: 100%;
    background-position: center;
    background-size: 100% 100%;
}
.character-employment-label {
  position: absolute;
  bottom: 0;
  left: 50%;
  transform: translateX(-50%);
  background: rgba(0, 0, 0, 0.6);
  color: white;
  font-weight: bold;
  padding: 2px 8px;
  border-radius: 4px 4px 0 0;
  font-size: 12px;
  width: 100%;
  text-align: center;
}

/* html, body { margin: 0; padding:0; overflow: hidden; }	 */
html, body { height: 100%; }
div h1 { color:white; position:absolute; top:50%; z-index:100; width:100%; text-align: center; transform: translate(0,-100%); font-family: 'Raleway', sans-serif; font-weight: 100; letter-spacing: 40px; text-transform: uppercase; font-size: 16px; }	
#videoBacker {  background-size: cover; object-fit: cover; z-index: 9; opacity:.3; position: absolute; top:0px; left:0px; width:100vw; height: 100vh; transition: 1s opacity ease-in-out; }			
.bar-top { background-color: black; height:100px; position: absolute; top:0; left:0;z-index: 100; width:100vw;}
.bar-bottom { background-color: black; height:100px; position: absolute; bottom:0; left:0; z-index: 100; width:100vw;}

#blocker {
    position: absolute;
    width: 100%;
    height: 100%;
    background-color: rgba(0,0,0,0.5);
}

#scene-container {
    position: absolute;
    width: 100%;
    height: 100%;
}

#instructions {
    width: 100%;
    height: 100%;

    display: -webkit-box;
    display: -moz-box;
    display: box;

    -webkit-box-orient: horizontal;
    -moz-box-orient: horizontal;
    box-orient: horizontal;

    -webkit-box-pack: center;
    -moz-box-pack: center;
    box-pack: center;

    -webkit-box-align: center;
    -moz-box-align: center;
    box-align: center;

    color: #ffffff;
    text-align: center;
    font-family: Arial;
    font-size: 14px;
    line-height: 24px;

    cursor: pointer;
}

.container-background-sheet {
    padding: 30px;
    background-image: url(/assets/images/portal_background_only_portal.png);

    z-index: 200;

    opacity: 1;
    min-height: 100%;
    background-attachment: fixed;
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;

    position: relative;
}

.body-background {
    background-image: url(/assets/images/portal_background_only_portal.png);

    z-index: 200;

    min-height: 100%;
    background-attachment: fixed;
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;

    position: relative;
}

.body-content {
    background-image: url(/assets/images/starry-night-sky.png);

    z-index: 0;

    background-attachment: fixed;
    background-position: center center;
    background-repeat: no-repeat;
    background-size: cover;
    position: relative;

    overflow-x: hidden;
    overflow-y: hidden;
}

.background-container {
    position: absolute; /* or static, as needed */
    width: 100%;
    height: 100%;
    background-image: url(/assets/images/starry-night-sky.png);
    background-size: cover;
    background-attachment: fixed; /* Keep the background fixed */
    background-position: center center; /* Center the background */

    overflow-x: hidden;
    overflow-y: hidden;
}

.body-container {
    /* background-image: url(/assets/images/navigation-bar.jpg) !important; */
    background-size: cover;
    position: absolute;
    top: 5%;

    z-index: 3;

    height: 100%;
    width: 100%;
    background-color: #2c3e50; /* Background color */
    background-position: center;
    border: 2px solid #1abc9c; /* Border color */
    border-radius: 10px; /* Rounded corners */
    box-shadow: 0 0 10px rgba(0, 0, 0, 0.5); /* Box shadow */
    /* padding: 10px 20px; Padding */
    color: #fff; /* Text color */
    font-family: 'Arial', sans-serif; /* Font */
    opacity: 0.5;

    -webkit-box-shadow: 10px 7px 5px 0px rgba(0,0,0,0.75);
    -moz-box-shadow: 10px 7px 5px 0px rgba(0,0,0,0.75);
    box-shadow: 10px 7px 5px 0px rgba(0,0,0,0.75);
}

.navbar {
    /* background-image: url(/assets/images/black-carbon-fiber.jpg),
        url(/assets/images/metallic_navbar_background_texture.jpg); */

    border: solid 1em transparent;
    border-radius: 0 0 10px 10px;
    /* background-color: rgb(0, 0, 0, 1.0); */

    background-origin: border-box;
    background-clip: content-box, border-box;
    border-top: 0;
    /* border-bottom: 5px solid; */
    border-left: 0;
    border-right: 0;
    top: 50%;

    background: linear-gradient(to bottom, #000000, #3a3a3a);
    opacity: 0.98;
    background-blend-mode: overlay;
    border-bottom: 2px solid rgba(0, 255, 255, 0.1);
    box-shadow: 0 2px 4px rgba(0, 255, 255, 0.05);

    /* -webkit-box-shadow: 10px 7px 5px 0px rgba(0,0,0,0.75);
    -moz-box-shadow: 10px 7px 5px 0px rgba(0,0,0,0.75);
    box-shadow: 10px 7px 5px 0px rgba(0,0,0,0.75); */
}

.border-icon-container {
    background-image: url(/assets/images/brushed_metallic_texture.jpg),
        url(/assets/images/metallic_navbar_background_texture.jpg);
    border: solid 1em transparent;
    border-radius: 0px 10px 55px 10px;
    background-origin: border-box;
    background-clip: content-box, border-box;
    border-top: 0;
    border-bottom: 0;
    border-left: 0;

    /* border-radius: 30px; */
    position: fixed;
    top: 0; 
    width: 30%;
    min-width: 300px;
    z-index:101;

    -webkit-box-shadow: 10px 7px 5px 0px rgba(0,0,0,0.75);
    -moz-box-shadow: 10px 7px 5px 0px rgba(0,0,0,0.75);
    box-shadow: -5px 7px 5px 0px rgba(0,0,0,0.75);
}

.metal-container {
    /* background-image: url(/assets/images/cartoon_metal_texture_2.jpg); */
    /* border-image: url(/assets/images/cartoon_metal_texture_2.jpg) 27 27 27 27 / 35px 35px 35px 35px / 1rem round; */
    z-index: 200;
    border-style: solid;
    border-radius: 10px;

    padding: 30px 30px 30px 30px !important;
}

.metal-container::before {
    box-shadow: inset 0 0 0 5px #000;
    top: -5px; /* Adjust top position to control inner border thickness */
    left: -5px; /* Adjust left position to control inner border thickness */
    right: -5px; /* Adjust right position to control inner border thickness */
    bottom: -5px; /* Adjust bottom position to control inner border thickness */
}

.cloud-container {
    position: fixed;
    top: 30%; /* Adjust vertical position as needed */
    left: 0;
    transform: translateY(-50%);
    width: 100%;
}

.cloud {
    background-image: url(/assets/images/cloud.png);
    background-repeat: no-repeat;
    display: block;
    margin: 0 auto;
    animation: moveCloud 40s linear infinite;

    min-height: 400px;
    min-width: 1000px;

    background-position: center;

    position: absolute;
    z-index: 0;

    transform: translateY(-50%);
}

.background-section-content {
    display: inline-flex;
    position: relative; 
    top: 0; 
    border: 1px solid silver; 
    width: 100%;

    padding: 5px;
    
    box-shadow: -11px 10px 37px -2px rgb(135,135,135, 0.35) inset;
    -webkit-box-shadow: -11px 10px 37px -2px rgb(135,135,135, 0.35) inset;
    -moz-box-shadow: -11px 10px 37px -2px rgb(135,135,135, 0.35) inset;
}

.background-section-content-title {
    position: relative; 
    top: 0; 
    left: 0; 
    border-bottom: 1px solid silver;
}

.background-section-content-title > p {
    color: lightblue; 
    margin-bottom: 5px;
}

.background-section-inner-content {
    position: relative; 
    top: 0; 
    width: 75%; 
    margin: 0 10px 10px 10px;
    padding: 5px; 
}

.container-title {
    margin-top: 10px;
}

#stats-section .sheet-container-content {
    display: grid; 
    grid-template-columns: repeat(3, 1fr); 
    gap: 10px;
}

#stats-section .sheet-container-content .class-container {
    width: 100%;
    min-width: 100%;
    border: none;
    box-shadow: none;
}

.strength-stat {
    background-image: url(/assets/images/stat_icon_strength.png);
    background-size: contain;
    background-repeat: no-repeat;
    background-position: 30px 0;
}

.wisdom-stat {
    background-image: url(/assets/images/stat_icon_wisdom.png);

    background-size: contain;
    background-repeat: no-repeat;
    background-position: 30px 0;
}

.dexterity-stat {
    background-image: url(/assets/images/stat_icon_dexterity.png);

    background-size: contain;
    background-repeat: no-repeat;
    background-position: 30px 0;
}

.intelligence-stat {
    background-image: url(/assets/images/stat_icon_intelligence.png);

    background-size: contain;
    background-repeat: no-repeat;
    background-position: 30px 0;
}

.charisma-stat {
    background-image: url(/assets/images/stat_icon_charisma.png);

    background-size: contain;
    background-repeat: no-repeat;
    background-position: 30px 0;
}

.constitution-stat {
    background-image: url(/assets/images/stat_icon_constitution.png);

    background-size: contain;
    background-repeat: no-repeat;
    background-position: 30px 0;
}


@keyframes moveCloud {
    0% {
        left: -1000px;
        top: 400px;
    }
    100% {
        left: calc(100% - 100px);
        top: 400px;
    }
}

@keyframes moveImage {
    0% {
        transform: translateX(0);
    }
    100% {
        transform: translateX(calc(100vw - 100px)); /* Adjust distance to move */
    }
}

/* ---- Extracted and Structured Inline Styles ---- */
.navbar__nav--custom0 { position: fixed; top: 0; width: 100%; z-index: 100; min-height: 50px; justify-content: flex-end;  }
.cloud_container__div--custom1 { height: 100%; width: 100%; }
.body_background__div--custom2 { min-height: 80px; }
.container_sheet_1__div--custom3 { box-shadow: #FFF 0 -1px 4px, rgb(11, 226, 241) 0 -4px 20px, #84bef5 0 -25px 20px, rgb(123, 131, 236) 0 -16px 40px, -32px -32px 6px -3px rgba(0,0,0,0); }
.metal_container__div--custom4 { width: 100%; }
.row__div--custom5 { padding-top: 5px; }
.col_sm_12__h3--custom6 { display: contents; font-weight: 600; letter-spacing: 3px; }
.col_sm_12__p--custom7 { margin-top: 10px; }
.body_background__div--custom8 { min-height: 100%; }
.container_sheet_2__div--custom9 { box-shadow: #FFF 0 -1px 4px, rgb(11, 226, 241) 0 -4px 20px, #84bef5 0 -25px 20px, rgb(123, 131, 236) 0 -16px 40px, -32px -32px 6px -3px rgba(0,0,0,0); }
.metal_container__div--custom10 { width: 100%; }
.character-sheet-details-area { margin-bottom: 50px; }
.sheet_container_content__div--custom12 { margin: 0px 20px 20px 20px; }
.active__li--custom13 { width: 20%; margin: auto; }
.active__li--custom14 { width: 20%; margin: auto; }
.active__li--custom15 { width: 20%; margin: auto; }
.active__li--custom16 { width: 20%; margin: auto; }
.experience_bar__li--custom17 { width: 20%; margin: auto; padding-left: 10px; }
.tools-equipment-stats-languages-wrap { display: flex; flex-wrap: wrap; justify-content: left; }
.col-tools-equipment { padding-left: 0; padding-right: 0; }
.col-stats-languages { padding-left: 0; padding-right: 0; }
.quest_log_section__div--custom21 { margin-top: 10px; }
.col_sm_12__div--custom22 { padding: 0; }
.sheet_container__div--custom23 { margin-top: 20px; }
.sheet_container_content__div--custom24 { width: 100%; margin-top: 10px; }
.container_title__div--custom25 { position: relative; top: 0; color: rgb(202, 200, 40); }
.container_description__div--custom26 { position: relative; font-size: medium; }
.radial_connections_container_intellisoft__div--custom27 { width: 20%; }
.container_title__div--custom28 { position: relative; top: 0; color: rgb(202, 200, 40); }
.container_description__div--custom29 { position: relative; font-size: medium; }
.radial_connections_container_infor__div--custom30 { width: 20%; }
.background_icon_container__div--custom31 { margin-top: 10px; }

@media (max-width: 760px) {
    /* Simplify navbar */
    .navbar {
        border-bottom: 1px solid black;
        background: linear-gradient(to bottom, #a1a0a0, #3a3a3a);
        opacity: 0.99;
        background-blend-mode: overlay;

        border-bottom: 2px solid rgba(0, 0, 0, 0.1);
        box-shadow: 0 2px 4px rgba(0, 0, 0, 0.05);
    }

    /* Hide right-side location indicators*/
    .navbar-expand-custom .navbar-brand {
        display: none;
    }

    .border-icon-container {
        background-color: rgba(248, 248, 248, 0.0);
        background-image: none;
        max-height: 50px;
        box-shadow: none;
        -webkit-box-shadow: none;
        width: 100%;
    }

    .border-icon-container .navbar-brand {
        height: fit-content;
        width: fit-content;
    }

    .border-icon-container .navbar-brand span {
        height: 35px;
        width: 35px;
        background-size: 35px 35px;
    }

    .container-background-sheet {
        padding: 20px;
    }
    .character-sheet {
        font-size: small;
        padding: 20px 15px 30px 15px !important;
    }
    #greeting-section .row {
        padding-top: 5px;
        padding-bottom: 5px;
    }

    .background-section-container {
        padding: 10px 0 10px 0;
        margin: 5px 5px 0 0;
    }

    .container_description__div--custom26,
    .container_description__div--custom29 {
        font-size: small;
    }

    .sheet_container__div--custom23 .sheet-container-content {
        margin-top: 5px !important;
        margin-left: 0 !important;
        margin-right: 0 !important;
        width: 100%;
        max-width: 98%;
    }
}

@media (max-width: 650px) {
    #portrait-container {
        display: none;
    }
}

@media (max-width: 540px) {
    #class-level-employment-sheet-container .class-container {
        /* min-width: 50px;
        min-height: 60px; */

        height: 60px;
        width: 50px;
    }
}

@media (max-width: 516px) {
    .character-sheet-details-area {
        max-width: 90% !important;
        width: 90% !important;
    }
    #character-name-label {
        font-size: 20px;
        max-width: 100%;
    }

    .sheet-container-title {
        font-size: large;
    }
}

@media (max-width: 368px) {
    #character-name-label {
        font-size: 17px;
    }

    #tools-section, #languages-section,
    #frameworks-section {
        font-size: xx-small;
    }
}

@media (max-width: 1240px) {
    .background-section-inner-content {
        width: 100%;
    }

    .radial-connections-container-intellisoft,
    .radial-connections-container-infor {
        display: none;
        width: 0;
    }
}

@media (min-width: 1200px) {
    .col-tools-equipment {
        padding-right: 20px;
    }
}

/* @media (max-width: 767px) {
    #scene-container,
    #about-container,
    #project-container {
        position: relative;
        width: auto;
        padding-right: 0;
        -webkit-box-shadow: none;
        -moz-box-shadow: none;
        box-shadow: none;
    }

    .navbar-logo {
        padding: 10px;
    }

    #portrait-container,
    .class-container {
        width: 100px;
        height: 100px;
        margin-left: 10px;
    }

    #character-name-label {
        width: auto;
        margin-left: 10px;
        font-size: 20px;
    }

    .sheet-container {
        width: 95%;
        margin-left: auto;
        margin-right: auto;
    }

    #experience-bar li {
        width: auto;
        float: none;
        text-align: center;
        font-size: 8px;
    }

    .bullet-item-proficiency,
    .quest-item-status {
        padding-left: 0;
    }

    .background-section-container {
        padding-left: 0;
    }

    .container-background-sheet {
        padding: 20px;
    }

    .body-background,
    .background-container,
    .body-container,
    .navbar,
    .border-icon-container,
    .metal-container {
        background-size: auto;
    }

    .body-content {
        background-size: cover;
    }

    .border-icon-container {
        width: 100%;
        min-width: auto;
        border-radius: 0;
    }

    .cloud {
        min-width: 500px;
    }

    .character-sheet > .row > .col-sm-3, 
    .character-sheet > .row > .col-sm-4,
    .character-sheet > .row > .col-sm-6 {
        max-width: 100%;
        flex: 0 0 100%;
    }

    #row-2 > .col-sm-8 {
        max-width: 100%;
        flex: 0 0 100%;
    }

    #row-2 > .col-sm-4 {
        max-width: 100%;
        flex: 0 0 100%;
    }
} */

/* Adjust link styles for larger screens */
/* @media (min-width: 768px) {
    .navbar-nav {
        margin-left: auto;
    }
} */

/* @media (min-width: 768px) and (max-width: 991px) {
    #scene-container,
    #about-container,
    #project-container {
        padding-right: 100px;
    }

    .navbar-logo {
        padding: 12px;
    }

    .container-background-sheet {
        padding: 30px;
    }

    .navbar {
        background-size: 40% auto;
    }

    .border-icon-container {
        width: 40%;
        min-width: 300px;
    }

    .cloud {
        min-width: 700px;
    }

    .character-sheet > .row > .col-sm-3, 
    .character-sheet > .row > .col-sm-4,
    .character-sheet > .row > .col-sm-6 {
        max-width: 100%;
        flex: 0 0 100%;
    }

    #row-2 > .col-sm-8,
    #row-2 > .col-sm-6 {
        max-width: 100%;
        flex: 0 0 100%;
    }
} */

/* @media (min-width: 992px) {
    .navbar-expand-custom {
        -ms-flex-flow: row nowrap;
        flex-flow: row nowrap;
        -ms-flex-pack: start;
        justify-content: flex-start;
    }

    .navbar-expand-custom .navbar-nav {
        -ms-flex-direction: row;
        flex-direction: row;
    }

    .navbar-expand-custom .navbar-toggler {
        display: none;
    }

    .navbar-expand-custom .navbar-collapse {
        display: -ms-flexbox !important;
        display: flex !important;
        -ms-flex-preferred-size: auto;
        flex-basis: auto;
    }

    .container-background-sheet {
        padding: 50px;
    }

    .body-background,
    .background-container,
    .body-container,
    .navbar,
    .border-icon-container,
    .metal-container {
        background-size: cover;
    }

    .body-content {
        background-size: cover;
    }

    .border-icon-container {
        width: 30%;
        min-width: 300px;
    }

    .cloud {
        min-width: 1000px;
    }

    .character-sheet > .col-sm-3 {
        max-width: 25%;
        flex: 0 0 25%;
    }

    .character-sheet > .col-sm-4 {
        max-width: 33%;
        flex: 0 0 33%;
    }
} */