@font-face {
    font-family: 'MyFont';
    src: url('fonts/LiberationSerif-Regular.ttf') format('truetype');
}
:root {
    --mycolor:darkorange;
	--mycolor2: oldlace;
	--shade: #A5432A;
	--text: black;
}
html {
margin:0;
scrollbar-gutter: auto;
}
.truncate {
max-width: 100px;
overflow: hidden;
white-space: nowrap;
text-overflow: ellipsis;
}
body {
      margin: 0;
		padding: 0px;
      border: 0px;
      }

* {
font-family: 'MyFont';      
      }
	#link text tspan {
    color: blue;
    fill: blue;
    text-decoration: underline;
    cursor: pointer;
}
      b, option, select, label, a, textarea {
      font-size:18px;
      }
      input {
		font-size: 18px;
		width:6ch;
      }
      input[type="checkbox"] {
		font-size: 18px;
		width:16px;
		height:16px;
      }
      h2 {
      font-size:20px;
      text-align: left;
      }
      div {
		overflow: hidden;
      gap:0px;
      box-sizing: border-box;
      margin: 0px;
      padding: 0px;
      border: 0px;
      }
      #cellz, #cellz td{
      border-color: black;
      border-width: 0.15mm;
      padding: 2px;
		margin: 0px;
		background-color: white;
		font-size:5px;
		white-space:nowrap;
		border-collapse:collapse;      
      }
	.txt, #hidpanel img{
    display: block;
    width: 100%;
    box-sizing: border-box;
    margin: 0;
}
#hidpanel{
width:35px;
background-color: var(--mycolor);
}
.thepanel img{
border: 10px solid black;
text-align: center;
justify-conent:center;
}
      #wrapper {
      align-items: end;
      justify-content: center;
      display: flex;
      flex-wrap: wrap;
      }
      #tabs {
      color: var(--text);
      transform: rotate(90deg);
  		transform-origin: bottom left;
      background-color:transparent;
      padding: 0px;
      align-items: start;
      display: flex;
      flex-wrap: wrap;
		position: absolute;
  		top: 0;
  		left: 0;
  		gap:5px;
  		cursor: pointer;
      }
      .tab {
		background-color:var(--shade);
		padding:5px;
		margin:0px;
		text-align: center;
		height:32px;
	}
	.tab b, .tab-picked b{
			padding:3px;
	}
		.tab-picked {
		background-color:var(--mycolor);
		padding:5px;
		margin:0px;
		text-align: center;
		height:32px;
      }
      #panel {
      background-color:var(--mycolor);
		background: linear-gradient(100deg, black 0%, brown 30%, var(--mycolor) 70%);
      min-width:550px;
      padding: 10px;
      position: relative;
      height: 100vh;
      }
      #three-container {
      min-width: 344px;
      height:100vh;
      flex: 1;
      position: relative;
		overflow: hidden;
      }
		#spectext, #zoombuts {
		float: bottom;
		margin: 20px;
      position: absolute;
		bottom: 0;
		background-color:transparent;
      }
		#zoombuts {
		right:0;
      }
		#zoombuts button {
		width:60px;
		height:60px;
		margin-left: 20px;
		font-size: 30px;
      }
		#spectext p {
		font-size: 20px;
		text-align: left;
		}
      td {
      border:0px solid black;
      text-align: left;
      }
		#top {
		position: absolute;
      }
      #front{
 		justify-content:center;
 		text-align: center;
} 		
 		#front img{
 			width: 100%;
 			max-width: 400px;
 		}
      #buts table{
  		background-color:transparent;
  		width: 96%;
		position: absolute;
		bottom: 0;
		left: auto;
		padding:10px;
		}
		#buts td {
		text-align: center;
      }
      #buts img {
		height:70px;
      }
      .eye {
		width: 30px;
		height: 28px;
		font-size: 15px;
      }
   	img {
   	padding: 0px;
		margin: 0px;
   	}
      table {
      overflow: hidden;
      border-radius: 8px;
      border:0px dotted black;
      width: 100%;
      padding:5px;
      margin-top: 5px;
		background-color:var(--mycolor2);
      }
   button {
white-space: nowrap;
	box-shadow: 4px 4px 4px 0 rgba(0,0,0,0.5);
  	background-color: white;
  	border-color: gray;
  	border-radius: 8px;
  	color: black;
	font-size: 18px;
	width:100%;
	height:40px;
}

button:hover {
box-shadow: 0 0px 10px greenyellow;
filter: brightness(1.5);
}

#gen {
height:80px;
width:160px;
font-size: 28px;
}

@media (max-width: 1000px) {
	#buts {width: 90vw;}
	b,input,label,select {font-size: 12px;}
	#gen {width: 40vw; font-size: 20px;}
	button{font-size: 14px;}
	h2 {font-size: 18px;}
	#three-container {height: 100vh; width: 100vw}
	#panel {min-width: 100vw}
	#tabs {width: 100vw;transform: rotate(0deg);justify-content: center;}
	}

@keyframes spin {
0% { transform: rotate(-45deg); }
100% { transform: rotate(315deg); }
}

.countdown {
width: 1px;
height: 1px;
border: 15px solid gold;
border-top: 15px solid orangered;
border-radius: 100%;
margin: auto;
animation: spin 3s linear infinite;
}

p, h3{
margin:0px;
text-align: center;
}

#picked {
height: 30px;
border: 3px solid white;
}
.swatch option{
font-size: 30px;
}
.swatch {
color:dimgray;
}
text, tspan {
  fill: black;
  stroke: none;
}
.cutlist b{
font-size: 16px;
}
.cutlist {
z-index: 99999;
font-size: 16px;
border-collapse: collapse;
border-radius: 0px;
border: 1px solid black;
width:100px;
height:50px;
background-color: floralwhite;
}
.cutfront {
background-color: cornsilk;
color: var(--shade);
}
.cutlist td{
border: 1px solid black;
padding: 2px;
white-space: nowrap;
}
.canva {
position:absolute;
inset:0;
margin: 10mm;
margin-bottom: 140px;
display: flex;
flex-wrap: wrap;
justify-content: center;
justify-items:center;
}
.canva .qr {
	width: 50mm;
	height: 50mm;
margin-left: auto;
}

#gate, #mainplan {
background: radial-gradient(ellipse farthest-corner at center, chocolate 0%, #551133 35%, #000033 70%, black 100%);
justify-items:center;
text-align: center;
}
#mainplan {
display: flex;
height: 100vh;
align-items: center;
justify-content: center;
}
#kuono{
width: 600px;
object-fit: contain;
max-width: 70vw;
}