@font-face {
  font-family: 'Roboto Black';
  src: url('assets/Roboto Black.ttf') format('truetype');
}

@font-face {
  font-family: 'Roboto Light';
  src: url('assets/Roboto Light.ttf') format('truetype');
}

@font-face {
  font-family: 'Roboto Thin';
  src: url('assets/Roboto Thin.ttf') format('truetype');
}

@font-face {
  font-family: 'Roboto Medium';
  src: url('assets/Roboto Medium.ttf') format('truetype');
}

@font-face {
  font-family: 'SpaceMono Regular';
  src: url('assets/SpaceMono-Regular.ttf') format('truetype');
}

@font-face {
  font-family: 'SpaceMono Bold';
  src: url('assets/SpaceMono-Bold.ttf') format('truetype');
}


html,
body {
  width: 100%;
  height: 100%;
  margin: 0;
  padding: 0;
  position: absolute;
  left: 0;
  top: 0;
  overflow: hidden;
  font-family: Roboto Light;
  background-color: rgb(41, 0, 80);
  user-select: none;
}

canvas {
  display: block;
  cursor: grab;
  z-index: 1;
}

canvas:active {
  cursor: grabbing;
}
#loading-screen {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: rgba(0, 0, 0, 0.7);
  display: flex;
  justify-content: center;
  align-items: center;
  z-index: 9999;
}

#loading-message {
  color: white;
  font-size: 24px;
} 
#topBar {
  width: 100%;
  height: 50px;
  position: absolute;
  background-color: black;
  display: flex;
  top: 0%;
  left: 0%;
  display: flex;
  justify-content: space-between;
  z-index: 2;
  border-top: 5px solid transparent;
  border-image: linear-gradient(to right, #4400ff, #2b0261) 1;
  box-sizing: border-box;
}

#bottomBar{
  display: none;
}

.topGrid {
  width: 100%;

  display: flex;

  justify-content: center;
  align-items: center;

}


#inputDiv1 {
  width: 350px;
}
#inputDiv2 {
  width: 100%;
  background-color: rgb(51, 1, 1);
  justify-content: space-around;
}

#inputDiv3 {
  width: 350px;
}

#styleButton {
  width: 100px;
}

#exampleButton {
  width: 250px;
}

#editButton {
  width: 250px;
}

#mockupButton {
  width: 100px;
}


#leftBlock {
  position: absolute;
  float: left;
  top: 50px;
  left: 0;
  display: flex;
  width: auto;
  height: 100%;
  background-color: black;
  z-index: 2;
}



#styleLibrary {
  width: 100px;
  height: 100%;
  text-align: center;
  justify-content: start;
  position: relative;
  float: right;

  display: block;

  z-index: 2;
  color: white;
  overflow: hidden;
  overflow-y: auto;
  border: solid 1px rgba(255, 255, 255, 0.3);

  box-sizing: border-box;
  /* Add box-sizing property */
}


#styleWrapper {
  background-color: rgb(7, 7, 7);
}


#exampleLibrary {
  width: 250px;
  height: 100%;
  overflow-y: auto;
  position: relative;

  display: block;

  z-index: 2;
  border: solid 1px rgba(255, 255, 255, 0.3);
  box-sizing: border-box;
  /* Add box-sizing property */

  padding: 10px;
}


#rightBlock {
  width: auto;
  height: 100%;

  position: absolute;
  float: right;
  top: 50px;
  right: 0;
  display: flex;

  overflow-y: auto;
  z-index: 2;

}


#controllers {
  width: 250px;
  height: 100%;
  overflow-y: auto;
  position: relative;

  display: block;
  flex-direction: column;
  background-color: rgb(20, 20, 20);
  z-index: 2;
  color: white;

  border: solid 1px rgba(255, 255, 255, 0.3);
  box-sizing: border-box;
  /* Add box-sizing property */

  gap: 15px;
  font-size: 14px;
}

#glyphBoolDiv{
  display: flex;
  justify-content: space-around;
  padding:5px;
}

.editHeader {
  background-color: black;
  height: 40px;
  width: calc(100%-10px);
  display: flex;
  position: relative;
  align-items: center;
  cursor: pointer;
  padding-left: 10px;
  transition: .2s;
  border-bottom: solid 1px rgb(0, 0, 0);
  box-sizing: border-box;
  /* Add box-sizing property */

}

.editHeader:hover {
  background-color: rgb(54, 0, 9);
  transition: .2s;
}


#mockupLibrary {
  width: 100px;
  height: 100%;
  text-align: center;

  position: relative;

  z-index: 2;
  display: block;

  gap: 4px;

  background-color: rgb(20, 20, 20);

  color: white;
  overflow: hidden;
  overflow-y: auto;
  border: solid 1px rgba(255, 255, 255, 0.3);
  box-sizing: border-box;
  /* Add box-sizing property */

}
.exampleBlock {
  display: block;
 aspect-ratio: 16/9;
  width: 100%;

  background-size: contain;
  /* This makes the background image cover the entire div */
  /*background-image: url('examples/bubbles.png');*/
  background-repeat: no-repeat;
  background-position: center;
  background-color: rgb(0, 0, 0);
  cursor: pointer;
  scale: 1;
 
 
  transition: .3s;
  margin-top: 2px;

}
.exampleBlock:hover {
  opacity: 1;
  scale: 1;
  overflow: hidden;
  transition: .3s;
  border: solid 7px rgb(81, 7, 255);
  box-sizing: border-box;
  /* Add box-sizing property */
  background-color: rgb(38, 0, 255);

}


.mockupDiv {
  display: block;
  aspect-ratio: 1;
  width: 100%;

  background-size: cover;
  /* This makes the background image cover the entire div */
  background-repeat: no-repeat;
  background-position: center;
  background-color: rgb(0, 0, 0);
  cursor: pointer;
  scale: 1;
  opacity: .7;
  overflow: hidden;
  transition: .3s;
  margin-top: 2px;

}

.mockupDiv.selected {
  opacity: 1;
  /* Add your selected styles here */
  /* For example: */
  border-color: red;
  box-shadow: 0 0 5px rgba(255, 0, 0, 0.7);
  background-color: blue;
}

.mockupDiv:hover {
  opacity: 1;
  scale: 1;
  overflow: hidden;
  transition: .3s;
  /* border: solid 7px rgb(81, 7, 255);
  box-sizing: border-box; */
  /* Add box-sizing property */
  background-color: rgb(38, 0, 255);

}
#colorDiv{
gap:5px;
display: flex;
flex-direction: column;
}
#colorBlock{
 
  display: flex;
  justify-content: space-between;
 
}
.colorModule{
  width:100%;
  height: 40px;
  display: flex;
}

#colorSwatchTab{
  width:100%;
  height: auto;
  background-color: red;
  cursor: pointer;
}


#colorSwatchTitle{
  
  width:100%;
  height: 30px;
  display: flex;
  text-align: center;
 justify-content: center;
 align-items: center;
 transition: .2;
 cursor: pointer;
 background-color: rgb(37, 37, 37);
 border: solid 1px grey;
 box-sizing: border-box;
}
#colorSwatchTitle:hover{

transition: .2;
  background-color: black;
}

.colDiv {
  width: 100%;
 height: 25px;
  border: 1px solid rgb(250, 250, 250);
  box-sizing: border-box;
}
.colModule{
  display: flex;
  transition: .1s;
}

.colModule:hover{
 border: solid;
 border: 1px solid rgb(4, 0, 255);
 
 transition: .1s;
}


#boolDiv{
 

  justify-content: space-around; 
  display: flex;
  color:white;
  padding: 20px  0px 20px 0px;
 
}
.checkContainer{
  display:flex;
  flex-direction:column;
  justify-content:center;
  align-items :center;
 
    }



.boolBox{
  width:20px;
  height:20px;
}

#sketchPad {
  width: 100%;
  height: 100%;
  background-color: rgb(0, 0, 43);
  display: flex;
  justify-content: center;
  align-items: center;
  /* Center the canvas horizontally and vertically */
}

.sliderBlock {
  color: rgb(54, 4, 4);
  width: 92%;
  height: 20px;
  display: flex;
  justify-content: start;
  align-items: center;
  color: grey;
  border: solid 1px rgb(37, 37, 37);
  padding: 10px;
}

.textField {
  width: 98%;
  height: 96%;
  border-radius: 0px;
  font-size: 20px;
  text-align: center;
  border: none;
  font-family: SpaceMono Regular;
 
}

#exportBlock {
  background-color: black;
  width: 20%;
  height: 50px;
  left: 40%;
  bottom: 50px;
  position: absolute;
  float: left;
  z-index: 2;
  align-items: center;
  justify-content: center;
  display: flex;
 
}

#creditDiv {
  position: absolute;
  width: 50%;
  display: block;
  height: 20px;
  float: left;
  left: 25%;
  bottom: 5px;
  text-align: center;
  color: rgba(255, 255, 255, 0.356);
  z-index: 2;
  font-size: 12px;
  padding-top: 10px;
  letter-spacing: 1.5px;
}

#canvasBlock {
  position: absolute;
  width: 250px;
  height: 100px;
  float: left;
  left: 25%;
  bottom: 100px;
  background-color: black;
  justify-content: center;
  align-items: center;
  z-index: 2;
  display: flex;
}


.popup {
  z-index: 3;
  display: flex;
  justify-content: center;
  align-items: center;
  position: absolute;
  float: left;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 40%;
  aspect-ratio: 16/9;
  background-color: black;
  border: solid 1px rgb(43, 60, 77);
  gap: 5px;
  color: white;
  flex-direction: column;
 
}

#saveWrapper{
  height:60px;display: flex; width:80%; 
}

#surveyForm{
  position: absolute;
float: left;
z-index: 3;
background-color: rgb(27, 27, 27);
  width:45%;
  height:85%; 
   transform: translate(60%,15%);  
  display: block;
  overflow: hidden;
 
}

.closeButton{
  aspect-ratio: 1;
  position: absolute;
  width: 40px;
  background-color: black;
  color: white;
  float:right;
  right:0%;
  top:0%;
  font-size: 20px;
  border: none;
  transition: .2s;
  cursor: pointer;
  background-color: black;
  border: solid 1px rgba(43, 60, 77, 0.486);

}

.closeButton:hover{
  background-color: red;
  transition: .2s;
}

.smallButton {
  width: 100%;
  padding: 0px;
  height: 60px;

  color: white;
  background-color: black;
  font-size: 15px;
  transition: .2s;
  border: none;
  cursor: pointer;
  border-radius: 0px;
  border: solid 1px rgba(255, 255, 255, 0.205);
}

.smallButton:hover {

  color: white;
  background-color: rgb(61, 7, 255);
  transition: .2s;
}

.dropDown {
  width: 100%;
  background-color: rgb(20, 20, 20);
  color: white;
  font-size: 15px;
  padding: 8px;
  cursor: pointer;
  border: none;
}

.sName{
  text-align:left;
  padding-left:10px;
width:30%;
}
.sClass{
  width:70%;
}
.sValue{
  width:15%;
  text-align:center ;
}

/* Styling for the scrollbar track (the background behind the thumb) */
div::-webkit-scrollbar {
  width: 10px;
  /* Width of the scrollbar */
}

/* Styling for the scrollbar thumb (the draggable handle) */
div::-webkit-scrollbar-thumb {
  background-color: #888;
  /* Color of the thumb */
  border-radius: 3px;
  /* Rounded corners for the thumb */
}

/* Optional styling for the scrollbar track on hover */
div:hover::-webkit-scrollbar-track {
  background-color: #000000;
}

/* Optional styling for the scrollbar thumb on hover */
div:hover::-webkit-scrollbar-thumb {
  background-color: #555;
}

/* Styling for the scrollbar track and thumb in Internet Explorer */
/* Note: For IE, the scrollbar styling is defined using the scrollbar pseudo-elements */
div::-ms-scrollbar {
  width: 10px;
}

div::-ms-scrollbar-thumb {
  background-color: #888;
  border-radius: 3px;
}


.tabButton {
  width: 100%;
  height: 100%;
  background-color: black;
  font-size: 14px;
  border: solid 1px rgba(255, 255, 255, 0.3);
  box-sizing: border-box;
  /* Add box-sizing property */
  color: white;
  transition: .2s;
  font-family: SpaceMono Regular;
  cursor: pointer;
}

.toggle {
  background-color: rgb(32, 32, 32);
}

.export {
  background-color: rgb(0, 81, 255);
}

.tabButton:hover {
  background-color: blue;
  color: white;
  transition: .2s;
}

@media screen and (max-width: 1000px) {

#topBar {
  height: 80px;
}
.tabButton {
  font-size: 24px;
}

#bottomBar {
  width: 100%;
  height: 100px;
  position: absolute;
  background-color: rebeccapurple;
  display: flex;
  bottom: 0%;
  left: 0%;
  display: flex;
  justify-content: space-between;
  z-index: 2;
}


#leftBlock{
top:80px;
width:100%;
height:auto;
display: block;
}


#styleLibrary {
  width: 100%;
  height: 150px;
  text-align: center;
  justify-content: start;
  position: relative;
  float: right;

  display: block;

  z-index: 2;
  color: white;
  overflow: hidden;
  overflow-x: auto;
  border: solid 1px rgba(255, 255, 255, 0.3);

  box-sizing: border-box;
  /* Add box-sizing property */
}

#styleWrapper {
  height: 100%;

  display: inline-flex;
  overflow-y: hidden;
  overflow-x: auto;
}


.checkContainer{

  flex-direction:row-reverse;
gap: 30px;
  align-items :center;
 
    }



.boolBox{
  width:60px;
  height:60px;
}


#glyphBoolDiv{
 
  padding:20px;
}

#colorBlock{
 
  display: flex;
  justify-content: center;
 gap:10px;
 padding:30px;
}
.colorModule{
  width:180px;
  height: 80px;
  display: flex;
}



#exampleLibrary {
  width: 100%;
  height: 250px;
 
display: flex;
flex-direction: row;
flex-wrap: nowrap;
background-color: rgb(12, 12, 12);
 
text-align: center;
}

.exampleBlock {
  display: inline-flex;
 margin:2px;
 aspect-ratio: 16/9;
width:200px;
 
  background-size: contain;
  /* This makes the background image cover the entire div */
  /*background-image: url('examples/bubbles.png');*/
  background-repeat: no-repeat;
  background-position: center;
  background-color: rgb(0, 0, 0);
  cursor: pointer;
  scale: 1;
 
 
  transition: .3s;
  margin-top: 2px;

}


#rightBlock{
  top:unset;
  bottom:100px;
  width:100%;
  height:auto;
  display: flex;
  flex-direction: column;
}


#controllers {
  width: 100%;
 height: 600px;
  overflow-y: auto;
  position: relative;

  display: block;
  flex-direction: column;

  z-index: 2;
  color: white;

  border: solid 1px rgba(255, 255, 255, 0.3);
  box-sizing: border-box;
  /* Add box-sizing property */

  gap: 15px;
  font-size: 30px;
}



#mockupLibrary {
  width: unset;
  height: 150px;
 overflow-y: hidden;
  overflow-x: auto;
}


#mockupWrapper{
  display: inline-flex;
 height: 100%;
 
}

#exportBlock {
  background-color: black;
  width:100%;
  height: 80px;
  left:unset;
  bottom: unset;
  position: relative;
  
}

.sliderBlock {
  color: rgb(54, 4, 4);
  width: 100%;
  height: 80px;
  display: flex;
  justify-content: center;
  align-items: center;
  color: grey;
  border: solid 1px rgb(37, 37, 37);
 
}
.smallButton{
  font-size: 30px;
}
.editHeader{
  height:90px;
}
.dropDown {
  width: 80%;
  height: 80px;
padding: 20px;
 
  color: white;
  font-size: 30px;
 
  cursor: pointer;
}
.closeButton{
  width:80px;
font-size: 30px;
}
#surveyPopup{
  width:90%;
  font-size: 25px;
}
#surveyForm{
  position: absolute;
float: left;
z-index: 3;
background-color: rgb(27, 27, 27);
  width:90%;
  height:75%; 
   transform: translate(5%,15%);  
  display: block;
  overflow: hidden;
 
}

#inputDiv1 {

   
  width:55%;
}
#inputDiv3 {
  width:100%;
}

#inputDiv3 {
  width:55%;
}

#styleButton {
  width:100%;
}

#exampleButton {
  width:100%;
}

#editButton {
  width:100%;
}

#mockupButton {
  width:100%;
}

.textField {
 
  font-size: 30px;
 
}

.sName{
  text-align:left;
  padding-left:10px;
width:30%;
}
.sClass{
  width:70%;
}
.sValue{
  width:30%;
  text-align:center ;
}

#creditDiv {
 
  display: block;
  height: 20px;
  float: left;
  left: unset;
  bottom: unset;
  bottom: 50%;
  left:5px;
  text-align: center;
  color: rgba(255, 255, 255, 0.356);
  z-index: 2;
  font-size: 16px;
 
  letter-spacing: 1.5px;
  transform-origin: 50% 50%; /* Set the rotation origin to the top left corner */
  transform: translate(  -45%,     0%) rotate(-90deg);
 

}
.emptyCell{
  display: none;
}

#colorSwatchTitle{
 
  height: 90px; 
  font-size: 30px;
}

#colorSwatchTab{
  width:60%;
  margin-left: 20%;
  justify-content: center;
  align-items: center;
 left:10%;  
  height: auto;
  background-color: blue;
  cursor: pointer;
}
.colDiv {
  width: 100%;
 height: 80px;
  border: 2px solid rgb(250, 250, 250);
  box-sizing: border-box;
  justify-content: center;
  align-items: center;

}
 

}