body{
    background-color: #252525;
    margin: 0;
    overflow: hidden;

}
/* prevent selection */
img {
  /* Safari */
  -webkit-user-select: none;
  /* IE 10 and IE 11 */
  -ms-user-select: none;
  /* Standard syntax */
  -khtml-user-select: none;
  -moz-user-select: none;
  -o-user-select: none;
  user-select: none;
	-webkit-user-drag: none;
	-moz-user-select: none;
}
@font-face {
    font-family: 'Drawin';
    src: url('misc/Handodle-rg38A.ttf') format('truetype'); /* Chrome 4+, Firefox 3.5, Opera 10+, Safari 3—5 */
}  
@font-face {
    font-family: 'Pencil';
    src: url('misc/Pencil\(sRB\).TTF') format('truetype'); /* Chrome 4+, Firefox 3.5, Opera 10+, Safari 3—5 */
} 
.container {
  display: grid;
  grid-template-areas:
    "menu content blank"
    "menu content blank"
    "menu content blank"
    "footer content blank";
  grid-template-columns: 1fr 3fr 1fr;
  grid-template-rows: 30vh auto auto auto;
  gap: 3px;
}
.container div.header {
  grid-area: header;
  text-align: center;
  display: flex;
  justify-content: center;
  align-items: flex-end;
}
.container div.header h1 {
    color: #9ec2d8;
    font-family: Drawin;
    font-size: 7vw;
    margin-right: 1vw;
    margin-bottom: 0;
}
.indicator{
  position: absolute;
  width: 5vw;
  height: 5vw;
  transform: translate(20vw, 1vw) rotate(-25deg);
}
.container div.header #Vanpigeon {
    width: 10vw;
    height: 10vw;
    margin: 1vw;
    margin-bottom: 0;
    border-radius: 25%;
}
.container div.menu {
  grid-area: menu;
  display: flex;
  flex-direction: column;
  align-items: end;
  margin-top: 10vh;
}
.container div.menu span{
  display: flex;
  justify-content: center;
  align-items: center;
}
.container div.menu span img{
  width: 8vw;
}
/* Make pigeons shake on hover */
.container div.menu span img:hover {
  animation: shake 0.5s;
}
@keyframes shake {
  0% { transform: translate(1px, 1px) rotate(0deg); }
  10% { transform: translate(-1px, -2px) rotate(-1deg); }
  20% { transform: translate(-3px, 0px) rotate(1deg); }
  30% { transform: translate(3px, 2px) rotate(0deg); }
  40% { transform: translate(1px, -1px) rotate(1deg); }
  50% { transform: translate(-1px, 2px) rotate(-1deg); }
  60% { transform: translate(-3px, 1px) rotate(0deg); }
  70% { transform: translate(3px, 1px) rotate(-1deg); }
  80% { transform: translate(-1px, -1px) rotate(1deg); }
  90% { transform: translate(1px, 2px) rotate(0deg); }
  100% { transform: translate(1px, -2px) rotate(-1deg); }
}
.container div.upper {
    grid-area: upper;
    display: flex;
    justify-content: center;
    align-items: center;
    height: 30%;
}
.container div.upper span{
    margin: 1vw;
    border: 1px solid #949494;
    border-radius: 15px;
    color: #949494;
    display: flex;
    justify-content: center;
    align-items: center;
    transition: background-color 0.5s linear;
}
.container div.upper span:hover{
    background-color: #313131;
}
.container div.upper p{
    margin: 1vw;
}
.container div.upper span img{
    width: 2.5vw !important;
    margin-left: 0.2vw;
}
.container div.upper img{
    margin-left: 0.2vw;
    width: 8vw;
}
.container div.lower {
  grid-area: lower;
  display: grid;
  margin-bottom: 5%;
  width: 85%;
}
.container div.content {
  grid-area: content;
  display: flex;
  flex-direction: column;
  align-items: center;
}
.container div.footer {
  grid-area: footer;
  text-align: center;  
}
.container div.blank {
  grid-area: blank; 
  min-height: 100vh;
}
/* Slider */
.fix{
  position: fixed;
}
#pigeonmail{
  position: absolute;
  bottom: -3vh;
  right: 9vh;
  width: 10vw;
}
#slider{
  position: absolute;
  background-color: #141414;
  min-height: 100vh;
  width: 25vw;
  margin-left: 25vw;
  transition: 0.5s;
  border-left: 1vw solid transparent;
  border-image: url(img/Border.png) 30 round;
  border-image-outset: 0.5;
  display: flex;
  flex-direction: column;
}
#slider #ApiContent{
  display: flex;
  flex-direction: column;
}
#slider #ApiContent a{
  color: #9ec2d8;
  font-family: Pencil;
  margin: 0 1vw 0 1vw;
  width: 17vw;
  text-align: center;
}
#slider #ApiContent img{
  margin-top: 20vh;
  width: 17vw;
  border-radius: 15px;
}
#slider p{
  color: #9ec2d8;
  font-family: Pencil;
}
/* Slider icon */
#lineicon{
  position: absolute;
  margin-top:2vw;
  margin-left: 4vw;
  width: 5vw;
  height: 5vw;
}
#lineicon1{
  position: absolute;
  width: 100%;
  height: 20%;
  transition: 0.5s;  
}
#lineicon2{
  position: absolute;
  margin-top: 25%;
  width: 100%;
  height: 20%;
  transition: 0.5s;
}
#lineicon3{
  position: absolute;
  margin-top: 50%;
  width: 100%;
  height: 20%;
  transition: 0.5s;  
}
/* Animations */
.animated #slider{
  transform: translate(-100%);
}
.animated #lineicon1{
  transform: translate(0, 125%) rotate(45deg);
}
.animated #lineicon2{
  width: 0%;
  margin-left: 50%;
}
.animated #lineicon3{
  transform: translate(0, -125%) rotate(-45deg);
}
/* Drag */
#dragdiv{
  overflow: hidden;
  position: absolute;
  z-index: 9;
  width: 80vw;
  height: 80vh;
  background-color: #252525;
  border: 1lh solid transparent;
  border-image: url(img/Border.png) 30 round;
  border-image-outset: -1;
}
#dragdiv #dragdivheader{
  display: flex;
  background-color: #181818;
  font-size: 1.5vh;
  color: #9ec2d8;
  font-family: Drawin;
  align-items: center;
}
#dragdiv #dragdivheader .title{
  display: flex;
  margin: 0;
  width: 50%;
  align-items: center;
  justify-content: left;
}
#dragdiv #dragdivheader .title h1{
  margin-left: 1.5vw;
}
#dragdiv #dragdivheader .img{
  display: flex;
  margin: 0;
  width: 50%;
  align-items: center;
  justify-content: right;
}
#dragdiv #dragdivheader img{
  width: 5.5vh;
  margin-right: 1vw;
}
#dragdivdown{
  display: flex;
  gap: 2vw;
  height: 72vh;
}
.dragupload{
  width: 26.6vw;
}
.dragdefaults{
  height: 100%;
  width: 26.6vw;
  display: grid;
  grid-template-columns: repeat(2, 50%);
  grid-template-rows: repeat(4, 25%);
  background-color: #272727;
  justify-content: center;
  align-content: center;
}
.dragdefaults button{
  display: flex;
  background-color: #252525;
  border: none;
  justify-content: center;
  align-items: center;
  font-size: 3em;
}
.selected{
  background-color: #3b3b3b !important;
  border: 1px solid #9ec2d8 !important;
  z-index: 2 !important;
}
.dragdefaults div{
  justify-content: center;
  align-items: center;
}
.dragperso{
  width: 26.6vw;
}
h1{
  color: #9ec2d8;
  font-family: Drawin;
  font-size: 1vw;
}
.dragperso input{
  background-color: #252525;
  border: 0.5lh solid transparent;
  border-image: url(img/Border.png) 30 round;
  color: #9ec2d8;
  font-family: Pencil;
}
.dragperso button{
  background-image: url(img/dodlebg.png);
  background-size: 100%;
  border: 0.5lh solid transparent;
  border-image: url(img/Border.png) 30 round;
  color: black;
  font-family: Pencil;
  margin-top: auto;
}
.dragperso #size{
  display: grid;
  grid-template-areas:
    "width width blank heigth heigth"
    "twidth twidth button theigth theigth";
}
button{
  z-index: 1;
}
button:hover{
  scale: 1.05;
  z-index: 0;
}