@font-face {
font-family: 'CT';
src:
 url('https://rawgit.com/nicolejonasson/CollaborativeTypeface/gh-pages/Type/CT-Regular.ttf');
}


html {
  height: 100%;
  -webkit-user-select: none; }

body {
  /* background: linear-gradient(rgb(255, 224, 232), white, rgb(255, 224, 232)); */
  /* background: linear-gradient(rgb(215, 255, 160), white, rgb(215, 255, 160)); */
  /* background: radial-gradient(rgb(215, 255, 160), white, rgb(215, 255, 160)); */
  margin: 0;
  width: 110%;
  height: 100%;
  position: relative;
}

#head-bar{
  z-index: 1000;
  padding: 5px;
  width: 3100px;
  letter-spacing: 10px;
  font-family: "CT";
  position: fixed;
  margin: 0px;
  left: 0;
  top:0;
  font-size: 15px;
  color: black;
  background: rgba(250, 250, 250, 0.5);
  box-shadow:  5px 5px 20px rgba(0, 0, 0, 0.1);
}

#exit{
  padding-top: 50px;
  z-index: 100;
  background: rgba(250, 250, 250, 0.5);
  box-shadow:  5px 5px 20px rgba(0, 0, 0, 0.1);
  height: 3000px;
  letter-spacing: 10px;
  font-family: "CT";
  position: fixed;
  width: 30px;
  line-height: 30px;
  /* position: absolute; */
  top: 0;
  left: 0;
  font-size: 15px;
  color: black;
  writing-mode: vertical-rl;

}

#change{
  text-align: center;
  padding: 20px;

  font-family: "ct";
  font-size: 20px;
  letter-spacing: 10px;

}


#grad{
  text-align: center;
  margin-top: 200px;
  margin-left: 100px;
  height: 150px;
  width: 400px;
  border-radius: 15px;
  background: rgb(250,250,250, 0.5);
  box-shadow:  10px 10px 20px rgba(0, 0, 0, 0.1);
}


#grad:hover .colors{
  visibility: visible;

}


.colors{
  padding: 20px;
  font-size: 15px;
  position: absolute;
  background: rgb(220,220,220, 0.5);
  box-shadow:  10px 10px 20px rgba(0, 0, 0, 0.1);
  border-radius: 15px;
  visibility: hidden;
}

span{
  font-family: "ct";
}



.drag{
    margin-top: 100px;
    -webkit-text-stroke: 0.8px white;
    position: absolute;
    font-family: "CT";
    font-size: 60px;
    z-index: 10;
    text-align: center;
    cursor: -webkit-grabbing;
    cursor: grabbing;
    -webkit-user-select: none;
}

#drag-0{
  left:5%;
  top:95%;
}

#drag-1{
  left:10%;
  top:90%;
}

#drag-2{
  left:15%;
  top:95%;
}

#drag-3{
  left:20%;
  top:90%;
}

#drag-4{
  left:25%;
  top:95%;
}

#drag-5{
  left:30%;
  top:90%;
}

#drag-6{
  left:35%;
  top:95%;
}

#drag-7{
  left:40%;
  top:90%;
}

#drag-8{
  left:45%;
  top:95%;
}

#drag-9{
  left:50%;
  top:90%;
}

#drag-10{
  left:55%;
  top:95%;
}

#drag-11{
  left:60%;
  top:90%;
}

#drag-12{
  left:65%;
  top:95%;
}

#drag-13{
  left:70%;
  top:90%;
}

#drag-14{
  left:75%;
  top:95%;
}

#drag-15{
  left:80%;
  top:90%;
}

#drag-16{
  left:85%;
  top:95%;
}

#drag-17{
  left:90%;
  top:90%;
}

#drag-18{
  left:95%;
  top:95%;
}

#drag-19{
  left:100%;
  top:90%;
}


#drag-20{
  left:105%;
  top:95%;
}

#drag-21{
  left:110%;
  top:90%;
}

#drag-22{
  left:115%;
  top:95%;
}

#drag-23{
  left:120%;
  top:90%;
}

#drag-24{
  left:125%;
  top:95%;
}

#drag-25{
  left:130%;
  top:90%;
}

#drag-26{
  left:140%;
  top:95%;
}

#drag-27{
  left:145%;
  top:90%;
}

#drag-28{
  left:150%;
  top:95%;
}















#draggable-0{
  left:35%;
  top:168%;
}

#draggable-1{
  left:35%;
  top:250%;
}

#draggable-2{
  left:85%;
  top:168%;
}

#draggable-3{
  left:85%;
  top:250%;
}



i {
    border: solid black;
    border-width: 0 3px 3px 0;
    display: inline-block;
    padding: 3px;
}

.right {
    transform: rotate(-45deg);
    -webkit-transform: rotate(-45deg);
    padding: 15px;
    float: right;
    margin-top: 10px;
    margin-right: 10px;
}

.left {
    transform: rotate(135deg);
    -webkit-transform: rotate(135deg);
    padding: 15px;
    float: left;
    margin-top: 10px;
    margin-right: 10px;
}




.box{

  -webkit-user-select: none;
  cursor: cell;
  width: 500px;
  height: 50px;
  line-height: 50px;
  padding: 20px;
  font-family: "CT";
  border-radius: 15px;
  color: black;
  text-align: center;
  background: rgba(255, 255, 255, 0.5);
  box-shadow:  10px 10px 20px rgba(0, 0, 0, 0.1);
  letter-spacing: 10px;
}

.box-head{
  -webkit-user-select: none;
  cursor: cell;
  width: 500px;
  height: 50px;
  line-height: 50px;
  padding: 20px;
  font-family: "CT";
  border-radius: 15px;
  color: black;
  text-align: center;
  background: rgba(255, 255, 255, 0.5);
  box-shadow:  10px 10px 20px rgba(0, 0, 0, 0.1);
  letter-spacing: 10px;
}

.box-head:hover{
  background: rgba(200,200,200,0.5);
}

.box:hover{
  background: rgba(200,200,200,0.5);
}

#head{
  /* margin-right:20%; */
  width: 100%;
  height: 100%;

  display: grid;
  position: relative;
  top: 10%;
  left: 5%;
  /* transform: translate(-50%, -50%); */
  grid-template-columns: repeat(6, 1fr);
  grid-template-rows: repeat(8, 1fr);
}



#head-1{
  z-index: 1;
  font-size: 30px;
  grid-column: 1;
  grid-row:1;

}

#head-2{
  /* margin-top:100px; */
  margin: 0px;
  /* writing-mode: vertical-rl;
  text-align: left;
  height: 300px;
  width: 50px; */
  z-index: 1;
  font-size: 30px;
  grid-column: 2;
  grid-row:2;

}

#head-3{
  z-index: 1;
  font-size: 30px;
  grid-column: 1;
  grid-row:3;
}




#head-4{
  z-index: 0;
  font-size: 20px;
  grid-column: 3;
  grid-row:3;
  visibility: hidden;

}

#head-5{
  z-index: 0;
  font-size: 20px;
  grid-column: 2;
  grid-row:4;
  visibility: hidden;

}

#head-6{
  z-index: 1;
  font-size: 15px;
  /* line-height: normal; */
  letter-spacing: 10px;
  grid-column: 1;
  grid-row:5;
  visibility: hidden;

}

#head-7{
  z-index: 1;
  font-size: 15px;
  /* line-height: normal; */
  letter-spacing: 5px;
  grid-column: 2;
  grid-row:6;
  visibility: hidden;
}


#head-8{
  z-index: 1;
  font-size: 15px;
  /* line-height: normal; */
  letter-spacing: 10px;
  grid-column: 3;
  grid-row:7;
  visibility: hidden;

}

#head-9{
  z-index: 1;
  font-size: 15px;
  /* line-height: normal; */
  letter-spacing: 5px;
  grid-column: 2;
  grid-row:8;
  visibility: hidden;
}

#head-10{
  z-index: 1;
  font-size: 15px;
  /* line-height: normal; */
  letter-spacing: 10px;
  grid-column: 5;
  grid-row:6;
  visibility: hidden;

}

#head-11{
  z-index: 1;
  font-size: 15px;
  /* line-height: normal; */
  letter-spacing: 5px;
  grid-column: 5;
  grid-row:7;
  visibility: hidden;
}










#heading{
  margin-left: 20%;
  margin-top: 20%;
  /* margin-bottom: -400px; */
  letter-spacing: 20px;
  font-family: "CT";
  font-size: 40px;
  text-align: center;
}

#drawing-container{
  width: 60%;
  left: 30%;
  position: relative;
  /* left: 20%; */
  margin-top: 80px;
  display: grid;
  grid-column:3 1fr;
  grid-row: 5 1fr;
}

.ramme{
  -webkit-user-select: none;
  text-align: center;
  position: relative;
  margin: 5px;
  font-family: "CT";
  letter-spacing: 10px;
  font-size: 10px;
}


#canvasContainer{
  cursor: cell;
  margin: 0px;
  padding: 10px;
  /* background: black; */
  grid-column: 2;
  grid-row: 2;
}

#top-frame{
  margin-left: 0px;
  grid-column: 2;
  grid-row: 1;
  margin-left: -300px;

}

#bottom-frame{
  margin-left: -300px;
  grid-column: 2;
  grid-row: 3;


}

#left-frame{
  writing-mode: vertical-rl;
  grid-column: 1;
  grid-row: 2;
  /* margin-bottom: -675px; */
  /* margin-bottom: -40%;
  margin-left: 20%; */
}

#right-frame{
  writing-mode: vertical-rl;
  margin-right: 280px;
  grid-column: 2;
  grid-row: 2;

  /* margin-bottom: -675px; */
  /* margin-bottom: -40%;
  margin-left: 78%; */
}


#pop-rect{
  z-index: 1000;
  margin: -100px;
  /* visibility: hidden; */
}

#top-frame:hover #pop-rect{
  visibility: visible;
}



#list{
  grid-column: 2;
  grid-row: 5;

}

#mid{
  margin: 50px;
  grid-column: 2;
  grid-row: 4;
  text-align: center;
  margin-left: -300px;

}
#button{
  margin-top: -50px;
  margin: 50px;
  z-index: 1;

}

.pop-up{
  padding: 20px;
  font-size: 15px;
  position: absolute;
  background: rgb(220,220,220, 0.5);
  box-shadow:  10px 10px 20px rgba(0, 0, 0, 0.1);
  border-radius: 15px;
  visibility: visible;
  visibility: hidden;
}

#pop-1{
  grid-column: 2;
  grid-row: 4;
  margin-left: 10%

}

#pop-2{
  grid-column: 2;
  grid-row: 4;
  margin-left: 70%
}


#mid:hover .pop-up{
  visibility: visible;
}


#drawingList{
  margin-left: 150px;
  border-radius: 20px;
  padding: 20px;
  width: 630px;
  background: rgba(250, 250, 250, 0.5);
  box-shadow:  10px 10px 20px rgba(0, 0, 0, 0.1);
  -webkit-user-select: none;
  position:relative;
  list-style: none;
  text-decoration: none;
  letter-spacing: 20px;
  font-family: "CT";
  font-size: 15px;
  line-height: 1.5;
  color: black;
  text-align: center;
  text-transform: lowercase;
}


#text{
  margin-left: -250px;
  margin-bottom: 50px;
  font-family: "CT";
  letter-spacing: 10px;
  font-size: 20px;
  text-align: center;
}

a {
    color: black;
}

button{
  margin: 10px;
  cursor:pointer;
  padding: 5px;
  width: auto;
  height: auto;
  font-family: "CT";
  letter-spacing: 5px;
  font-size: 15px;
  /* box-shadow:  10px 10px 20px rgba(0, 0, 0, 0.1); */
}




















}