body {
		background-image: url("textures/wood.jpg");
		background-size: 200px;
		display: block;
		background-color: #eb9834;
	}

h1.blog {
	color: black;
}

#buttonsleft {
	float: left;
}

#buttonsright {
	float: right;
}

span{
	font-family: b612 regular, arial, sans-serif;
}

#tabbuttonnew1 {
		background-image: url("tabs/Yellow.svg") !important; 
		border-radius: 0px !important;
		background-size: 70px !important;
		width: 70px;
		height: 42px;
		border-style: none;
		border-width: 0px;
		margin-top: -52px;
		box-shadow: 0px 0px 0px #333 !important;
		transform: skew(20deg);
	}
	
	#tabbuttonnew1:hover {
	  filter: brightness(85%);
	 /* background-color: #ffcd00; */
	}
	
		#tabbuttonnew2 {
		background-image: url("tabs/Pink.svg") !important;
				border-radius: 0px !important;
		background-size: 70px !important;
		width: 70px;
		height: 42px;
		border-style: none;
		border-width: 0px;
		margin-left: -25px;
		margin-top: -52px;
		box-shadow: 0px 0px 0px #333 !important;
		transform: skew(20deg);
		/* background-color: #f47d9b; */
	}
	
			#tabbuttonnew2:hover {
		filter: brightness(85%);
	}
	
		#tabbuttonnew3 {
		background-image: url("tabs/Purple.svg") !important;
				border-radius: 0px !important;
		background-size: 70px !important;
		width: 70px;
		height: 42px;
		border-style: none;
		border-width: 0px;
		margin-left: -25px;
		margin-top: -52px;
		box-shadow: 0px 0px 0px #333 !important; 
		transform: skew(20deg);
		/*background-color: #6b00ff; */
	}
	
			#tabbuttonnew3:hover {
		filter: brightness(85%);
	}
	
			#tabbuttonnew4 {
		background-image: url("tabs/Brorange.svg") !important;
				border-radius: 0px !important;
		background-size: 70px !important;
		width: 70px;
		height: 42px;
		border-style: none;
		border-width: 0px;
		margin-left: -25px;
		margin-top: -52px;
		box-shadow: 0px 0px 0px #333 !important; 
		transform: skew(20deg);
		/* background-color: #eb9834; */
	}
	
				#tabbuttonnew4:hover {
		filter: brightness(85%);
	}
	
			#tabbuttonnew5 {
		background-image: url("tabs/DarkBlue.svg") !important;
				border-radius: 0px !important;
		background-size: 70px !important;
		width: 70px;
		height: 42px;
		border-style: none;
		border-width: 0px;
		margin-left: -25px;
		margin-top: -52px;
		box-shadow: 0px 0px 0px #333 !important;
		transform: skew(20deg);
		/* background-color: blue; */
	}
	
				#tabbuttonnew5:hover {
		filter: brightness(85%);
	}
	
			#tabbuttonnew6 {
		background-image: url("tabs/Green.svg") !important;
				border-radius: 0px !important;
		background-size: 70px !important;
		width: 70px;
		height: 42px;
		border-style: none;
		border-width: 0px;
		margin-left: -25px;
		margin-top: -52px;
		box-shadow: 0px 0px 0px #333 !important;
		transform: skew(20deg);
		/* background-color: green; */
	}
	
				#tabbuttonnew6:hover {
		filter: brightness(85%);
	}
	
			#tabbuttonnew7 {
		background-image: url("tabs/LightBlue.svg") !important;
				border-radius: 0px !important;
		background-size: 70px !important;
		width: 70px;
		height: 42px;
		border-style: none;
		border-width: 0px;
		margin-left: -25px;
		margin-top: -52px;
		box-shadow: 0px 0px 0px #333 !important;
		transform: skew(20deg);
		/* background-color: aqua; */
	}
	
				#tabbuttonnew7:hover {
		filter: brightness(85%);
	}
	
				#tabbuttonnew8 {
		background-image: url("tabs/Red.svg") !important;
				border-radius: 0px !important;
		background-size: 70px !important;
		width: 70px;
		height: 42px;
		border-style: none;
		border-width: 0px;
		margin-left: -25px;
		margin-top: -52px;
		box-shadow: 0px 0px 0px #333 !important; 
		transform: skew(20deg);
		/* background-color: red; */
	}
	
					#tabbuttonnew8:hover {
		filter: brightness(85%);
	}

#lowertabbuttonnew1 {
		background-image: url("tabs/Yellow.svg") !important; 
		border-radius: 0px !important;
		background-size: 70px !important;
		width: 70px;
		height: 42px;
		border-style: none;
		border-width: 0px;
		box-shadow: 0px 0px 0px #333 !important;
		float: left;
	}
	
	#lowertabbuttonnew1:hover {
	  filter: brightness(85%);
	}
	
		#lowertabbuttonnew2 {
		background-image: url("tabs/Pink.svg") !important;
				border-radius: 0px !important;
		background-size: 72px !important;
		width: 70px;
		height: 42px;
		border-style: none;
		border-width: 0px;
		box-shadow: 0px 0px 0px #333 !important;
		flaot: left;
	}
	
			#lowertabbuttonnew2:hover {
		filter: brightness(85%);
	}
	
		#lowertabbuttonnew3 {
		background-image: url("tabs/Purple.svg") !important;
				border-radius: 0px !important;
		background-size: 72px !important;
		width: 70px;
		height: 42px;
		border-style: none;
		border-width: 0px;
		box-shadow: 0px 0px 0px #333 !important; 
		float: left;
	}
	
			#lowertabbuttonnew3:hover {
		filter: brightness(85%);
	}
	
			#lowertabbuttonnew4 {
		background-image: url("tabs/Brorange.svg") !important;
				border-radius: 0px !important;
		background-size: 72px !important;
		width: 70px;
		height: 42px;
		border-style: none;
		border-width: 0px;
		box-shadow: 0px 0px 0px #333 !important;
		float: left;
	}
	
				#lowertabbuttonnew4:hover {
		filter: brightness(85%);
	}
	
			#lowertabbuttonnew5 {
		background-image: url("tabs/DarkBlue.svg") !important;
				border-radius: 0px !important;
		background-size: 72px !important;
		width: 70px;
		height: 42px;
		border-style: none;
		border-width: 0px;
		box-shadow: 0px 0px 0px #333 !important; 
	}
	
				#lowertabbuttonnew5:hover {
		filter: brightness(85%);
	}
	
			#lowertabbuttonnew6 {
		background-image: url("tabs/Green.svg") !important;
				border-radius: 0px !important;
		background-size: 72px !important;
		width: 70px;
		height: 42px;
		border-style: none;
		border-width: 0px;
		box-shadow: 0px 0px 0px #333 !important; 
	}
	
				#lowertabbuttonnew6:hover {
		filter: brightness(85%);
	}
	
			#lowertabbuttonnew7 {
		background-image: url("tabs/LightBlue.svg") !important;
				border-radius: 0px !important;
		background-size: 72px !important;
		width: 70px;
		height: 42px;
		border-style: none;
		border-width: 0px;
		box-shadow: 0px 0px 0px #333 !important; 
	}
	
				#lowertabbuttonnew7:hover {
		filter: brightness(85%);
	}
	
				#lowertabbuttonnew8 {
		background-image: url("tabs/Red.svg") !important;
				border-radius: 0px !important;
		background-size: 72px !important;
		width: 70px;
		height: 42px;
		border-style: none;
		border-width: 0px;
		box-shadow: 0px 0px 0px #333 !important; 
	}
	
					#lowertabbuttonnew8:hover {
		filter: brightness(85%);
	}


.tooltip {
  position: relative;
  display: inline-block;

}
.tooltiptab {transform: skew(-20deg);
}

.tooltip .tooltiptext {
  visibility: hidden;
  width: 120px;
  background: linear-gradient(#fff, #ccc);
  border-color: #555;
  border-style: solid;
  border-width: 2px;
  color: #000;
  text-align: center;
  font-family: b612 regular, arial, sans-serif;
  border-radius: 4px;
  padding: 5px 0;
  position: absolute;
  z-index: 1;
  top: 150%;
  left: 50%;
  margin-left: -60px;
}

.tooltip .tooltiptext::after {
  content: "";
  position: absolute;
  bottom: 100%;
  left: 50%;
  margin-left: -10px;
  border-width: 10px;
  border-style: solid;
  border-color: transparent transparent #555 transparent;
}

.tooltip:hover .tooltiptext {
  visibility: visible;
}
</style>

@media (prefers-color-scheme: light) {
h1.blog {
	color: black;
}

	body {
		background-image: url("textures/wood.jpg");
	}

	button {
		display: inline-block;
		background: linear-gradient(#f1f1f1, #c7c7c7);
		border-style: solid;
		border-width: 1px;
		border-color: #999;
		border-radius: 24px;
		padding: 6px;
		box-shadow: 0px 0px 2.5px #333;
		margin: 4px;
	}
	
		button:hover {
		display: inline-block;
		background: linear-gradient(#fff, #ddd);
		border-style: solid;
		border-width: 1px;
		border-color: #000;
		border-radius: 24px;
		padding: 6px;
		box-shadow: 0px 0px 15px #ffcd00;
		margin: 4px;
	}
	
		input {
		display: inline-block;
		background: linear-gradient(#fff, #eee);
		border-style: solid;
		border-width: 1px;
		border-color: #999;
		border-radius: 24px;
		padding: 6px;
		box-shadow: 0px 0px 2.5px #333;
		margin: 4px;
	}
	
		input:hover {
		display: inline-block;
		background: linear-gradient(#fff, #e5e5e5);
		border-style: solid;
		border-width: 1px;
		border-color: #000;
		border-radius: 24px;
		padding: 6px;
		box-shadow: 0px 0px 15px #6b00ff;
		margin: 4px;
	}
}

	button {
		display: inline-block;
		background: linear-gradient(#f1f1f1, #c7c7c7);
		border-style: solid;
		border-width: 1px;
		border-color: #999;
		border-radius: 4px;
		padding: 6px;
		box-shadow: 0px 0px 2.5px #333;
		margin: 4px;
	}
	
		button:hover {
		display: inline-block;
		background: linear-gradient(#fff, #ddd);
		border-style: solid;
		border-width: 1px;
		border-color: #000;
		border-radius: 4px;
		padding: 6px;
		box-shadow: 0px 0px 15px #ffcd00;
		margin: 4px;
	}
	
		input {
		display: inline-block;
		background: linear-gradient(#fff, #eee);
		border-style: solid;
		border-width: 1px;
		border-color: #999;
		border-radius: 4px;
		padding: 6px;
		box-shadow: 0px 0px 2.5px #333;
		margin: 4px;
	}
	
		input:hover {
		display: inline-block;
		background: linear-gradient(#fff, #e5e5e5);
		border-style: solid;
		border-width: 1px;
		border-color: #000;
		border-radius: 4px;
		padding: 6px;
		box-shadow: 0px 0px 15px #6b00ff;
		margin: 4px;
	}

@media (prefers-color-scheme: dark) {
	button {
		display: inline-block;
		background: linear-gradient(#111, #333);
		border-style: solid;
		border-width: 1px;
		border-color: #000;
		border-radius: 4px;
		padding: 6px;
		box-shadow: 0px 0px 2.5px #333;
		margin: 4px;
		color: white !important:
	}

		button:hover {
		display: inline-block;
		background: linear-gradient(#222, #444);
		border-style: solid;
		border-width: 1px;
		border-color: #999;
		border-radius: 4px;
		padding: 6px;
		box-shadow: 0px 0px 15px #ffcd00;
		margin: 4px;
		color: white !important:
	}
	
		input {
		display: inline-block;
		background: linear-gradient(#000, #222);
		border-style: solid;
		border-width: 1px;
		border-color: #000;
		border-radius: 4px;
		padding: 6px;
		box-shadow: 0px 0px 2.5px #333;
		margin: 4px;
		color: white;
	}

		input:hover {
		display: inline-block;
		background: linear-gradient(#000, #222);
		border-style: solid;
		border-width: 1px;
		border-color: #999;
		border-radius: 4px;
		padding: 6px;
		box-shadow: 0px 0px 15px #6b00ff;
		margin: 4px;
		color: white;
	}

#tabbutton:hover {
		background-image: url("textures/brushedmetaldark.webp") !important; 
		border-color: #555 !important;
}

#tabbutton {
		background-image: url("textures/brushedmetaldark.webp") !important; 
		border-color: #555 !important;
	}
	
	#footerbutton:hover {
		background-image: url("textures/brushedmetaldark.webp") !important; 
		border-color: #555 !important;
		margin-top: 16px;
}

#footerbutton {
		background-image: url("textures/brushedmetaldark.webp") !important; 
		border-color: #555 !important;
		margin-top: 16px;
	}
	
	
h1.blog {
	color: white;
}

	body {
		background-image: url("textures/darkwoodtexture.webp");
		background-size: 200px;
	}
	
	table {
		font-family: b612 regular, arial, sans-serif;
	}

	td, th {
		border: 1px solid #444 !important;
		color: #ffffff !important;
	}

	tr:nth-child(even) {
		background-color: #000000 !important;
		background: linear-gradient(#222, #333);
	}

	tr:nth-child(odd) {
	background-color: #222 !important;
	background: linear-gradient(#000000, #111);
	}
}

	#content {
		display: block;
		position: center;
		padding: 16px;
    display: flex;
    width: 1450px !important;
    flex-direction: row;
    flex-wrap: nowrap;
    justify-content: center;
    align-items: flex-start;
    margin-left: auto;
    margin-right: auto;
	}
	
		#footerbutton:hover {
		margin-top: 16px;
}

		#footerbutton {
		margin-top: 16px;
	}
		
	
@media (prefers-color-scheme: light) {	
	table {
		font-family: b612 regular, arial, sans-serif;
	}

	td, th {
		border: 1px solid #999;
	}

	tr:nth-child(even) {
		background-color: #ffffff;
		background: linear-gradient(#ffffff, #eeeeee);
	}

	tr:nth-child(odd) {
		background-color: #dddddd;
		background: linear-gradient(#dddddd, #cccccc);
		color: #000;
	}
}

table {
	font-family: b612 regular, arial, sans-serif;
	border-collapse: collapse;
	width: 100%;
}

td, th {
	border: 1px solid #999999;
	text-align: left;
	padding: 4px;
}

tr:nth-child(even) {
  background-color: #ffffff;
}

tr:nth-child(odd) {
  background-color: #dddddd;
}

#tabs {
	display: flex;
}

#lowertabs {
	display: grid;
	float: right;
}

@media (prefers-color-scheme: light) {
#tabbutton:hover {
		background-image: url("textures/brushedmetal.webp");
}

#tabbutton {
		background-image: url("textures/brushedmetal.webp");

}

#footerbutton:hover {
		background-image: url("textures/brushedmetal.webp");
}

#footerbutton {
		background-image: url("textures/brushedmetal.webp");

}
}

#tabbutton:hover {
		display: inline-block;
		background-image: url("textures/brushedmetal.webp");
		border-style: solid;
		border-width: 1px;
		border-color: #999;
		border-radius: 12px;
		padding: 4px;
		height: 52px;
		box-shadow: 0px 0px 15px #ffcd00;
		margin-left: 12px;
		width: 72px;
		margin-top: -24px;
}

#tabbutton {
		display: inline-block;
		background-image: url("textures/brushedmetal.webp");
		border-style: solid;
		border-width: 1px;
		border-color: #999;
		border-radius: 12px;
		padding: 4px;
		height: 48px;
		box-shadow: 0px 0px 15px #333;
		margin-left: 12px;
		width: 64px;
		margin-top: -24px;
}

#footerbutton:hover {
		display: inline-block;
		background-image: url("textures/brushedmetal.jxl");
		background-image: url("textures/brushedmetal.jpg");
		border-style: solid;
		border-width: 1px;
		border-color: #999;
		border-radius: 12px;
		padding: 4px;
		height: 52px;
		box-shadow: 0px 0px 15px #ffcd00;
		margin-left: 12px;
		width: 72px;
		margin-top: 24px;
}

#ClygroLogo {
			display: inline-block;
		background-image: url("logos/Clygro logo.svg") !important;
		background-image: url("logos/Clygro logo48.jpg") !important;
		border-style: solid;
		border-width: 1px;
		border-color: #999;
		border-radius: 12px;
		padding: 0px;
		height: 48px;
		box-shadow: 0px 0px 15px #333;
		margin-left: 12px;
		width: 48px;
		margin-top: -24px;
		background-size: 100%;
}

#footerbutton {
		display: inline-block;
		background-image: url("textures/brushedmetal.webp");
		border-style: solid;
		border-width: 1px;
		border-color: #999;
		border-radius: 12px;
		padding: 4px;
		height: 48px;
		box-shadow: 0px 0px 15px #333;
		margin-left: 12px;
		width: 64px;
		margin-top: 24px;
}

#main {
	background-color: #fcf8cc;
	background: url("textures/paper.jpg");
	width: 1230px !important;
}

@media (prefers-color-scheme: light) {
	#main {
		background-image: url("textures/smoothpaper.jpg");
		color: black;
		background-color: #ddd;
	}
}

	#main {
		position: center;
		background-image: url("textures/smoothpaper.webp");
		background-repeat: repeat-y;
		background-size: 800px;
		position: center;
		padding: 20px;
		border-radius: 2.5px;
		box-shadow: 0px 0px 5px #000;
		border-width: 1px;
		border-color: #999;
		border-style: solid;
		margin-left: auto;
		marign-right: auto;
	}

@media (prefers-color-scheme: dark) {
	#main {
		background-image: url("textures/smoothpaperdark.webp");
		color: white;
	}
}

#ClygroLogo {
		border-color: #555;
}

#content {
	display:flex;
	width: 100%;
}

p {
		font-family: b612 regular;
}

@font-face {
	font-family: b612 regular;
	src: url("typefaces/B612-Regular.ttf");
}

@font-face {
	font-family: Iosevka;
	src: url("typefaces/Iosevka-Regular.ttf");
}

h1, h2, h3, h4, h5, h6 {
	font-family: b612 regular, arial, sans-serif;
	margin-bottom: 5px;
	margin-top: 5px;
}

#blogpost {
	background-color: #ffcd00;
	padding: 6px;
	background: linear-gradient(#ffcd00, #cca400);
	border-radius: 2.5px;
	color: black;
	box-shadow: 0px 0px 15px #000;
	margin: 6px;
	width: 40% !important;
	float: left;
	display: block;
	height: auto;
}

#blogbox {
	width: 100%;
    overflow-y: auto;
    white-space: nowrap;
	height: 300px;
}
#blogbox h2, #blogbox h3, #blogbox h4, #blogbox p {
	display:grid;
	white-space: wrap;
} 

	#paperback {
		background-image: url("textures/brushedmetal.webp");
		padding: 10px;
		border-radius: 15px;
		width: 300px;
		border-width: 2px;
		border-color: #555;
		border-style: solid;
		box-shadow: 0px 0px 25px #000;
		margin-right: 10px;
		color: white;
		margin-top: 32px;
	}

@media (prefers-color-scheme: light) {
	#paperback {
		background-image: url("textures/brushedmetal.webp");
		background-color: #ccc;
	}

	#paperback1 {
		background-image: url("textures/brushedmetal.webp");
		background-color: #ccc;
	}
}

	#paperback1 {
		margin-left: auto !important;
		margin-right: auto !important;
		background-color: #ccc;
	}
		#paperback {
		float: right !important;
		background-color: #ccc;
	}

@media (prefers-color-scheme: dark) {
	#paperback {
		background-image: url("textures/brushedmetaldark.webp");
		border-color: #555;
	}

	#paperback1 {
		background-image: url("textures/brushedmetaldark.webp") !important;
		border-color: #555;
	}
}

	#paperback1 {
		background-image: url("textures/brushedmetal.webp");
		padding: 10px;
		border-radius: 15px;
		width: 1280px !important;
		border-width: 2px;
		border-color: #555;
		border-style: solid;
		box-shadow: 0px 0px 25px #000;
		margin-right: 10px;
		float: left;
		margin-top: 32px;
	}


	#gallery {
		display: block;
		position: left;
		float: left;
		width: 300px;
		margin-top: 32px;
	}

	#galleryphoto {
		display: block;
		position: left;
		background-image: url("textures/smoothpaper.webp");
		width: 300px;
		height: 275px;
		padding: 10px;
		box-shadow: 0px 0px 25px #000;
		border-width: 1px;
		border-color: #999;
		border-style: solid;
		border-radius: 2.5px;
		margin-bottom: 10px;
		float: left;
		margin-bottom: 10px;
		margin-left: 10px;
	}

@media (prefers-color-scheme: light) {
	#galleryphoto {
		background-image: url("textures/smoothpaper.webp");
	}
}
@media (prefers-color-scheme: dark) {
	#galleryphoto {
		background-image: url("textures/smoothpaperdark.webp");
		border-color: #000;
	}
	
			#paperback {
		float: right !important;
	}
}

hr {
	color: #999;
	box-shadow: 0px 0px 5px #999;
}

	#footer {
		color: black;
		font-family: B612-Regular;
	}

@media (prefers-color-scheme: light) {
	a:hover {
		color: white;
	}
	a:visited {
		color: #f47d9b;
	}

	a:active {
		color: #f47d9b;
	}

	a:link {
		color: #f47d9b;
	}

	#footer {
		color: black !important;
	}
	
::-webkit-scrollbar {
  width: 16px;
}

::-webkit-scrollbar-track {
  background: linear-gradient(#999, #888);
  box-shadow: 0px 0px 25px #000;
}

::-webkit-scrollbar-thumb {
	background: linear-gradient(#555, #666);
	border-width: 2px;
	border-color: #777;
	border-style: solid;
	border-radius: 16px;
	box-shadow: 0px 0px 25px #000;
}

::-webkit-scrollbar-thumb:hover {
	background: linear-gradient(#444, #333);
	border-width: 3px;
	border-color: #555;
	box-shadow: 0px 0px 25px #fff;
	}
	
	kbd {
		background-color: #fff;
		padding: 2px;
		border-color: #999;
		border-style: solid;
		border-width: 2px;
		border-radius: 4px;
		margin-left: 2px;
		margin-right: 2px;
		font-family: Iosevka, B612 Mono, JetBrains Mono;
	}
}

@media (prefers-color-scheme: dark) {

.tooltip {
  position: relative;
  display: inline-block;
  border-bottom: 1px dotted black;
}

.tooltip .tooltiptext {
  visibility: hidden;
  width: 120px;
  background: linear-gradient(#000, #222);
  border-color: #555;
  border-style: solid;
  border-width: 2px;
  color: #fff;
  text-align: center;
  font-family: b612 regular, arial, sans-serif;
  border-radius: 4px;
  padding: 5px 0;
  position: absolute;
  z-index: 1;
  top: 150%;
  left: 50%;
  margin-left: -60px;
}

.tooltip .tooltiptext::after {
  content: "";
  position: absolute;
  bottom: 100%;
  left: 50%;
  margin-left: -10px;
  border-width: 10px;
  border-style: solid;
  border-color: transparent transparent #555 transparent;
}

.tooltip:hover .tooltiptext {
  visibility: visible;
}

	a:hover {
		color: white;
	}
	a:visited {
		color: #ffcd00;
	}

	a:active {
		color: #ffcd00;
	}

	a:link {
		color: #ffcd00;
	}

	#footer {
		color: white !important;
	}
	
	kbd {
		background-color: #222;
		padding: 2px;
		border-color: #111;
		border-style: solid;
		border-width: 2px;
		border-radius: 8px;
		margin-left: 2px;
		margin-right: 2px;
		font-family: Iosevka, B612 Mono, JetBrains Mono;
	}

::-webkit-scrollbar {
	width: 16px;
}

::-webkit-scrollbar-track {
	background: #111;
	box-shadow: 0px 0px 25px #000;
}

::-webkit-scrollbar-thumb {
	background: linear-gradient(#888, #999);
	border-width: 2px;
	border-color: #666;
	border-style: solid;
	border-radius: 16px;
	box-shadow: 0px 0px 25px #000;
}

::-webkit-scrollbar-thumb:hover {
	background: #fff;
	border-width: 3px;
	border-color: linear-gradient (#888, #999);
	box-shadow: 0px 0px 25px #fff;
}

	#galleryphotocontainer {
		display: flex;
		width: 100%;
		flex-wrap: wrap;
		justify-content: center;
	}
  
    #eebytotop {
    padding-top: 8px;
    justify-content: center;
    display: flex;
    padding-bottom: 8px;
  }
  
  #eebyto {
    padding-top: 0px;
    justify-content: center;
    display: flex;
  }
  
  #appsmall {
display: block;
  position: left;
  width: 116px;
  height: 275px;
  padding: 10px;
  box-shadow: 0px 0px 25px #000;
  border-width: 1px;
  border-color: #999;
  border-style: solid;
  border-radius: 2.5px;
  margin-bottom: 10px;
  float: left;
  margin-bottom: 10px;
  margin-left: 10px;
    }
    
    #appcontain {
      display: flex;
    width: 100%;
    flex-wrap: wrap;
    justify-content: left;
      }
    
  .appiconsmall {
    display: flex;
    border-radius: 20px;
    box-shadow: 0px 0px 15px #6b00ff;
    }
    
    .installbutton {
      background-color: green;
      display: flex;
      border-radius: 8px;
      height: 24px;
      }
	  
}

#left, #right {
width: 48%;
float: left;
}

#right {
margin-left: 4%;
}


# leather https://www.flickr.com/photos/horiavarlan/5245029308
# background https://www.patternpictures.com/water-line-reed/
# paper https://www.wallpaperuse.com/vien/TboRbh/
# smooth paper https://unsplash.com/photos/k4Lt0CjUnb0
# brushed metal https://www.flickr.com/photos/webtreatsetc/4724731217
# sticky note https://unsplash.com/photos/yellow-and-white-color-illustration-YIy1cd3xN4w
# new wiid https://www.deviantart.com/free-3dtextureshd/art/Wood-Seamless-3d-texture-PBR-High-Resolution-free-907399774