body{
   background-color: #69306D;
   -webkit-transition: background-color 1s ease;
   -moz-transition: background-color 1s ease;
   -o-transition: background-color 1s ease;
   transition: background-color 1s ease;
   font-family: monospace
}

.row{--bs-gutter-x: 0;}
.top-buttons{
   background-color: #A5668B;
}

.content-container{
   padding: 1%;
   background-color: white;
   box-shadow:
      0 1px 1px hsl(0deg 0% 0% / 0.075),
      0 2px 2px hsl(0deg 0% 0% / 0.075),
      0 4px 4px hsl(0deg 0% 0% / 0.075),
      0 8px 8px hsl(0deg 0% 0% / 0.075),
      0 16px 16px hsl(0deg 0% 0% / 0.075)
    ;
}

.content-container-secondary{
   padding: 1%;
   background-color: white;
   box-shadow:
      0 1px 1px hsl(0deg 0% 0% / 0.075),
      0 2px 2px hsl(0deg 0% 0% / 0.075),
      0 4px 4px hsl(0deg 0% 0% / 0.075),
      0 8px 8px hsl(0deg 0% 0% / 0.075),
      0 16px 16px hsl(0deg 0% 0% / 0.075)
    ;
}

.content-container-with-header{
   padding: 1%;
   padding-left: 0%;
   background-color: white;
}

.with-box-shadow{
   box-shadow:
   0 1px 1px hsl(0deg 0% 0% / 0.075),
   0 2px 2px hsl(0deg 0% 0% / 0.075),
   0 4px 4px hsl(0deg 0% 0% / 0.075),
   0 8px 8px hsl(0deg 0% 0% / 0.075),
   0 16px 16px hsl(0deg 0% 0% / 0.075)
 ;
}

.content{
   padding: 40px;
}
.content-secondary{
   padding: 40px;
}
.content-with-header{
   padding: 0px 40px 40px 30px;
}


#module {
   font-size: 1rem;
   line-height: 1.5;
 }
 
 
 #module #collapseExample.collapse:not(.show) {
   display: block;
   height: 3rem;
   overflow: hidden;
 }
 
 #module #collapseExample.collapsing {
   height: 3rem;
 }
 
 #module a.collapsed::after {
   content: '+ Show More';
 }
 
 #module a:not(.collapsed)::after {
   content: '- Show Less';
 }

 .nav-link{
    color:white;
 }

 .hexvalue{
      width: fit-content;
      top: 0;
      padding: 2px;
      background-color: rgba(255,255,255,0.3);
      position: absolute;
      cursor:pointer;
}
 
.collapse{
   box-shadow: inset 0 0 0 1000px rgba(255, 255, 255, 0.8);
}

.accordion-button:not(.collapsed){
   background-color: white;
   box-shadow: inset 0 -1px 0 rgba(255, 255, 255, 0);
}

.section-wrapper{
   padding: 1%;
}

.section-wrapper-inverse{
   padding: 1%;
   
}
/* .section-wrapper-inverse-title{
   display: none;
}
 */
.main-page-div{
   min-height: 100vh;
}

.skills-box-cover{
   height: 100%;
   width: 100%;
   z-index: 5;
   opacity: 100%;
   background-color: #000000;
   box-shadow: inset 10px 10px 10px #000000;
}

a {
   text-decoration: none !important;
 }

 #mobile-nav-container{
   position: fixed;
   bottom: 0;
   width: 100%;
 }

 /* show desktop */
@media only screen and (min-width: 768px) {
   #top-nav-container{display: block;}
   #mobile-nav-container{display:none;}
   .art-piece-col{display: block;}
   .small-art-piece-col{display:none;}
   .show-on-mobile{display:none;}
   .show-on-desktop{display:block;}
 }
 /* show mobile */
 @media only screen and (max-width: 768px) {
    #top-nav-container{display: none;}
   #mobile-nav-container{display:block;}
   .art-piece-col{display: none;}
   .small-art-piece-col{display:block;}
   .show-on-mobile{display:block;}
   .show-on-desktop{display:none;}
}

.grid-sizer,
.grid-item {
  width: 33.333%;
}

#artBoxModal .modal-dialog{
   max-width: max-content !important;
}
#artBoxModal .modal-body {
	display: flex;
}
#artBoxModal .btn-close{
   right:0; 
   position: absolute; 
   background-color: aquamarine;
}
#artBoxModal #modalImage {
	object-fit: contain;
	max-height: 90vh;
}