/* CSS is how you can add style to your website, such as colors, fonts, and positioning of your
   HTML content. To learn how to do something, just try searching Google for questions like
   "how to change link color." */


body {
  font-family: Courier, Monospace;
  background-image: url("https://external-content.duckduckgo.com/iu/?u=https%3A%2F%2F64.media.tumblr.com%2F96bfcda9ab211b730d680a052d19f83d%2Ftumblr_o7w2veChcr1runoqyo4_540.gifv&f=1&nofb=1&ipt=fce55679f5c821f04b10eb58e44e6af8aa3308a48b71786d92535c6cbde62d41");
  background-size: cover;
  background-repeat: no-repeat;
  background-position: center center;
  overflow: hidden;
  font-size: 1rem;
}

#first {
  height: 45vh;
  width: 99vw;
  display: flex;
  padding: 2%;
  justify-content: center;
  flex-direction: column;
  align-items: center;
}

#second {
  height: 45vh;
  width: 99vw;
  display: flex;
  padding: 2%;
  justify-content: center;
  flex-direction: column;
  align-items: center;
}

header {
 text-align: center; 
}




a:link {
  color: #E9E9F2; 
}


a:visited {
  color: #0D0D1F; 
}


a:hover {
  color: #BDBDD9; 
}


a:active {
  color: #1212C7;
}

.headerstickies {
  display: block;
}



#thing {
  top: 20px;
 height: 180px;
 left: -200px;
 position: absolute;
 
}

#commq {
  position: absolute;
  font-size: 1.5rem;
  left: -60px;
  font-weight: 900;
  top: -19px;
  width: 230px;
  z-index: 20;
}


#headingthing{
  box-sizing: border-box;
  display: flex;
  height: 20vh;
  width: 20vw;
  position: relative;
}

#everythingdraggable{
  box-sizing: border-box;
  display: flex;
  height: 20vh;
  width: 20vw;
  position: relative;
  z-index: 30;
}  
  
#pricing {
  box-sizing: border-box;
  display: flex;
  width: 20vw;
  position: absolute;
  left: -40%;
  top: 50%;
  z-index: 30;
}

#pricingbox {
  min-width: 250px;
  min-height: 100px;
  width: 20vw;
  max-height: 40vh;
  overflow-y: auto;
  font-family: courier, monospace;
  font-size: 1em;
  z-index: 30;
}

#pricingtext {
  font-family: courier, monospace;
  font-size: 1.5em;
}

.bold {
  font-weight: bold;
}

#sketchesdoodles {
  color: #769997;
}

#flatrender {
  color: #4B53A6;
}

#fullrender {
  color: #997678;
}

#misc {
  color: #999776
}

#tos {
  max-height: 350px;
  width: 385px;
  display: flex;
  overflow: hidden;
  box-sizing: border-box;
  overflow-y: auto;
  flex-direction: column;
  padding: 5px;
  font-size: 1rem;
  font-family: Courier, monospace;
  left: -250%;
  z-index: 30;
}

#toswindow {
  max-height: 385px;
  left: -190%;
  top: 10%;
  z-index: 30;
}

#examples {
  max-height: 350px;
  height: 550px;
  width: 550px;
  display: flex;
  box-sizing: border-box;
  flex-direction: column;
  position: absolute;
  font-family: Courier, monospace;
  z-index: 30;
  left: 90%;
  top: -20%;
  font-size: 1rem;
}


#scrollthing {
  overflow-y: auto;
}

.boxholder {
  display: flex;
  overflow: hidden;
  box-sizing: border-box;
  overflow-y: auto;
  flex-direction: row;
  margin: 10px;
  gap: 10px;
}

.imagebox {
  display: flex;
  overflow: hidden;
  box-sizing: border-box;
  flex-direction: column;
  border: 2px dashed black;
  justify-content: center;
  width: 250px;
  padding: 4px;
}


#sticky {
  position: sticky;
  justify-content: center;
  top: 0; 
  z-index: 23;
}

.tablinks {
  height: 30px;
  justify-content: center;
  width: 130px;
  max-width: 25vw;
}

.longimagebox{
  display: flex;
  overflow: hidden;
  box-sizing: border-box;
  flex-direction: column;
  border: 2px dashed black;
  justify-content: center;
  width: 500px;
  max-width: 80vw;
  padding: 4px;
}

.vertimagebox{
  display: flex;
  overflow: hidden;
  box-sizing: border-box;
  flex-direction: column;
  border: 2px dashed black;
  justify-content: center;
  width: 250px;
  max-height: 800px;
  padding: 4px;
}

.bigimagebox{
  display: flex;
  overflow: hidden;
  box-sizing: border-box;
  flex-direction: column;
  border: 2px dashed black;
  justify-content: center;
  width: 500px;
  height: 550px;
  padding: 4px;
}

#homebutton {
  position: absolute;
  left: 40%;
}