:root {
			--background: #ffffff;
			--primaryfont: #ffffff;
			--secondaryfont: #804070;
			--accent1: #000000;
		}

		#background-gif {
			display: block;
		}

		body {
			background-color: var(--background);
			color: var(--primaryfont);
			font-family: 'Source Code Pro', monospace;

			position: relative;
			margin:0px;
			padding:0px;
			width:100%;
			height:100%;
			
    		background-image: url('background-2.svg');
    		background-repeat: no-repeat;
    		background-attachment: fixed;
    		background-size: cover;

			overflow-x: hidden;
		}
		
		@media only screen and (max-device-width: 600px) {
          body {
            background-image: url('background-2-mobile.png');
          }
        }

/* navigation bar */

		.header {
			width: 100%;
			padding-top: 15px;
			font-size: 1.2em;
		}
		.nav-name{
            width: 700px;
    	}
    	
		@media only screen and (max-device-width: 600px) {
    		.header {
    			width: 100%;
    			padding-top: 15px;
    			font-size: 2em;
    		}
    		.nav-name{
        		display: none;
    		}
        }

		
		.nav-list-start {
    		margin: auto;
    		width: 30%;
		}
		.nav-list-item-start {
    		display: table;
    		margin: auto;
    		font-size: 1.8em;
    		padding-top: 10px;
		}
		@media only screen and (max-device-width: 600px) {
    		.nav-list-start {
    		    font-size: 2em;
        		width: 50%;
    		}
        }
		
		.nav-list {
			margin: 0 auto;
			padding-right: 15px;
			max-width: 95%;
			overflow: hidden;
			display: flex;
			flex-wrap: wrap;
			column-gap: 40px;
			justify-content: flex-end;
			align-items: center;
		}
		.nav-title {
			display: flex;
			align-items: center;
			margin-right: auto;
		}
		.nav-list-item {
			max-width: 100%;
		}

		.nav-link {
			cursor: pointer;
			position: relative;
			font-weight: normal;
		}
		.nav-link.active-page {
			font-weight: bold;
		}
		.nav-link.active-page:after {
  			content: '';
  			position: absolute;
  			width: 100%;
  			transform: scaleX(1);
  			height: 1px;
  			bottom: 0;
  			left: 0;
  			background-color: var(--primaryfont);
		}
		.nav-link:after {
  			content: '';
  			position: absolute;
  			width: 100%;
  			transform: scaleX(0);
  			height: 1px;
  			bottom: 0;
  			left: 0;
  			background-color: var(--primaryfont);
  			transform-origin: bottom left;
  			transition: transform 0.2s ease-out;
		}
		.nav-link:hover:after {
			height: 1px;
			transform: scaleX(1);
			transform-origin: bottom left;
		}

/* tag changes */

		a:link {
  			color: inherit;
			text-decoration: none;
		}
		a:visited {
  			color: inherit;
			text-decoration: none;
		}
		a:hover {
  			color: inherit;
			text-decoration: none;
		}
		a:active {
  			color: inherit;
			text-decoration: none;
		}
		
		a.outside-link {
    		text-decoration: underline;
    		text-underline-offset: 5px;
    		text-decoration-thickness: 1px;
		}

		h1 {
			font-size: 2.5em;
			margin-bottom: 10px;
		}
		@media only screen and (max-device-width: 600px) {
    		h1 {
    			font-size: 4em;
    		}
        }
		h2 {
			font-size: 1.3em;
			letter-spacing:4px;
			font-weight: normal;
		}

		::-webkit-scrollbar {
    		-webkit-appearance: none;
    		-webkit-overflow-scrolling: auto;
  			width: 10px;
			cursor: pointer;
		}
		::-webkit-scrollbar-thumb {
  			border: 2px solid var(--primaryfont);
			border-radius: 5px;
		}
		@media only screen and (max-device-width: 600px) {
    		::-webkit-scrollbar{
        		-webkit-overflow-scrolling: auto;
        		min-width: 30px;
      			width: 30px !important;
                border: 2px solid var(--primaryfont) !important; 
                border-radius: 5px !important;
    		}
    		::-webkit-scrollbar-thumb:window-inactive {
               border: 2px solid var(--primaryfont) !important; 
               border-radius: 5px !important;
             }
            ::webkit-scrollbar-track {
               border: 2px solid var(--primaryfont) !important; 
               border-radius: 5px !important;
            }
        }
		::-webkit-scrollbar-thumb:hover {
  			background-color: rgba(255, 255, 255, 0.5);
		}

/* page content */

        .page-title {
    		text-align: center;
    		margin: auto;
    		width: 50%;
        }
		.page-title.index {
			padding-top: 100px;
			padding-bottom: 10px;
		}

		.page-content {
			max-height: 75vh;
			width: 50%;
			min-width: 500px;
			overflow: visible;
			overflow-x: hidden;
			overflow-y: scroll;
			margin: auto;
			padding: 15px;
			text-align: center;
		}
		@media only screen and (max-device-width: 600px) {
    		.page-content {
                width: 90%;
    		}
        }
		.page-content.grid {
			align-items: flex-start;
			justify-content: center;
  			display: flex;
  			gap: 30px;
  			flex-direction: row;
  			flex-wrap: wrap;
			max-width: 70%;
			width: 75%;
			overflow-y: scroll;
			height: 65%;
		}
		@media only screen and (max-device-width: 600px) {
    		.page-content.grid {
        		max-width: 100%;
        		width: 100%;
                height: 78%;
    		}
        }
		.art-frame {
    		width: 330px;
    		font-style: italic;
    		text-align: center;
    		position: relative;
		}
		.artwork {
    		border: 2px solid white;
    		padding: 10px;
    		margin: 10px;
    		width: 300px;
    		float: center;
		}
		.artwork2{
    		border: 2px solid white;
    		padding: 10px;
    		margin: 10px;
    		float: center;
    		width: 400px;
		}
		@media only screen and (max-device-width: 600px) {
    		.artwork {
        		width: 550px;
    		}
    		.artwork2{
        		width: 650px;
    		}
    		.art-frame {
        		width: 650px;
        		font-size: 1.7em;
    		}
        }
		.artwork-link {
    		float: left;
		}
		@media only screen and (max-device-width: 600px) {
    		.artwork-link {
        		float: none;
        		text-align: center;
        		margin: auto;
        		width: 650px;
    		}

        }
        
        .sale-overlay{
            position: absolute;
            display: flex;
            justify-content: center;
            align-items: center;
            left: 10px;
            bottom: 55px;
            padding: 8px;
            margin: 10px;
            height: 25px;
            background-image: url('sale-sign.png');
            background-size: cover;
            border-radius: 10px;
            box-shadow: 0 0 0 2pt white;
        }
        		@media only screen and (max-device-width: 600px) {
            		.sale-overlay{
            		    bottom: 95px;
            		    left: 30px;
            		    border-radius: 15px;
            		    font-size: 1.2em;
            		}
                }
        
        .hidden-item{
            display: none;
        }
        .displayed-item{
            display: block;
        }
        

        		@media only screen and (max-device-width: 600px) {
            		.resumes{
                		width: 600px;
                		height: 70%;
                	}
                }
		
		
		.headshot {
    		width: 250px;
    		padding: 10px;
    		margin: 25px;
    		margin-bottom: 10px;
    		border: 2px solid white;
    		float: left;
		}
		@media only screen and (max-device-width: 600px) {
    		.headshot{
    		    width: 350px;
    		}
        }
		
		.icon {
    		width: 20px;
    		padding: 2px;
    		margin-right: 10px;
    		float: left;
		}
		@media only screen and (max-device-width: 600px) {
    		.icon{
    		    width: 40px;
                padding: 2px;
                margin-right: 20px;
    		}
        }
		
		.paragraph {
    		text-align: left;
    		margin: 10px;
		}
		@media only screen and (max-device-width: 600px) {
    		.paragraph {
                font-size: 2em;
    		}
        }
        
        .art-info {
            font-size:1.3em;
            position: relative;

        }

        		@media only screen and (max-device-width: 600px) {
            		.art-info {
                		font-size:1.5em;
                        width: 650px;
                        margin: auto;
                        position: relative;
                        bottom: none;
            		}
                }

                
.table-header {
    width: 70%;
    margin: auto;
    padding: 5px;
}
		@media only screen and (max-device-width: 600px) {
    		.table-header {
                width: 85%;
                font-size: .8em;
    		}
        }
.table-header2 {
    width:50%; 
    margin: auto;
    padding: 0px;
}
		@media only screen and (max-device-width: 600px) {
    		.table-header2 {
                width: 90%;
                margin:auto;
    		}
        }
        
/* toggle */

.nsfw-toggle{
    width: 100px;
    font-style: italic;
    float: right;
}
		@media only screen and (max-device-width: 600px) {
    		.nsfw-toggle {
                font-size: 2.7em;
                width: 200px;
    		}
        }

.switch {
  position: relative;
  display: inline-block;
  vertical-align: middle;
  width: 38px;
  height: 24px;
}
		@media only screen and (max-device-width: 600px) {
    		.switch {
                width: 64px;
                height: 40px;
    		}
        }

/* Hide default HTML checkbox */
.switch input {
  opacity: 0;
  width: 0;
  height: 0;
}

/* The slider */
.slider {
  position: absolute;
  cursor: pointer;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-color: #ccc;
  -webkit-transition: .4s;
  transition: .4s;
}

.slider:before {
  position: absolute;
  content: "";
  height: 15px;
  width: 15px;
  left: 4px;
  bottom: 4px;
  background-color: white;
  -webkit-transition: .4s;
  transition: .4s;
}
		@media only screen and (max-device-width: 600px) {
    		.slider:before {
                width: 26px;
                height: 26px;
                left: 6px;
                bottom: 6px;
    		}
        }

input:checked + .slider {
  background-color: #940056;
}

input:focus + .slider {
  box-shadow: 0 0 1px #940056;
}

input:checked + .slider:before {
  -webkit-transform: translateX(15px);
  -ms-transform: translateX(15px);
  transform: translateX(15px);
}
		@media only screen and (max-device-width: 600px) {
    		input:checked + .slider:before {
                  -webkit-transform: translateX(26px);
                  -ms-transform: translateX(26px);
                  transform: translateX(26px);
    		}
        }

/* Rounded sliders */
.slider.round {
  border-radius: 24px;
}

.slider.round:before {
  border-radius: 50%;
}