* {
    /* background-color: rgb(212, 202, 221); */

}
@font-face {
    font-family: myFirstFont;
    src: url('./Fruktur-Regular.ttf');
  }

  #about {
    font-family: myFirstFont;
  }


.c1 {
    border: 5px solid coral;
    background-color: rgb(204, 184, 172);

}


.c3 {
    font-family: Impact, Haettenschweiler, 'Arial Narrow Bold', sans-serif;
    text-align: center;
    
}
.button {
    padding: 15px 25px;
    font-size: 24px;
    text-align: center;
    cursor: pointer;
    outline: none;
    color: rgb(25, 10, 65);
    font-family: myFirstFont;
    background-color: #d8ac1d;
    border: none;
    border-radius: 15px;
    box-shadow: 0 9px #999;
  }

  .flexible{
      display: flex;
      justify-content: center;
      align-items: center;
  }
  .flexible div {
      margin: 1rem;
     
  }
  .flexible div a{
    padding: 1rem;
    font-weight: 600;
  }
  .button:hover { background-color: #133cf5;}
  
  .button:active {
    background-color: #1cc4f7;
    box-shadow: 0 5px #666;
    transform: translateY(4px);
  }
  .btns {
     text-align: center;
     margin-bottom: 105px;
  }
.l1{

    font-family: monospace;
}

#video {
    border: 2px solid rgb(230, 22, 22);
    width: 25%;
   display:block;
   margin:0 auto;
}
  /*   header      */



  body {
      box-sizing:border-box;
      padding:0;
      margin:0;

  }


.flexWrapper {
    display: flex;
    padding: 0 0 0 1rem;
    background-color: #a08484!important;
    clip-path: polygon(0 0, 96% 11%, 92% 76%, 0% 100%);
    font-family: myFirstFont;

}

.sub-flexbox{
    display:flex;
}

.sub-flexbox div {
    padding: 0 0 0 2rem;
}

header {
    /* box-shadow: 10px 10px 5px 0px rgba(0,0,0,0.75);
-webkit-box-shadow: 10px 10px 5px 0px rgba(0,0,0,0.75);
-moz-box-shadow: 10px 10px 5px 0px rgba(0,0,0,0.75); */
background-color:yellow;
   
}

.takepicture button{
    width:30%;
    height: 10%;
    padding: 15px 25px;
    font-size: 24px;
    text-align: center;
    cursor: pointer;
    outline: none;
    color: rgb(25, 10, 65);
    font-family: myFirstFont;
    background-color: #d8ac1d;
    border: none;
    border-radius: 15px;
    box-shadow: 0 9px #999;
}

.takepicture button:hover{
    background-color: #133cf5;
}
.takepicture button:active {
    background-color: #1cc4f7;
    box-shadow: 0 5px #666;
    transform: translateY(4px);
}

.takepicture {
    display: flex;
    justify-content: center;
    margin-top: 4%;
}
.canvas canvas {
   
    border: 2px solid rgb(230, 22, 22);
    width: 25%;
    height: 20%;
}

.canvas {
    display: flex;
    justify-content:center;

   
}

#el {
    background-color:yellow;
    box-shadow:2px 3px 6px grey;
    text-decoration:none;
    color:currentColor;
}

#el:hover {
    box-shadow:8px 6px 2px grey; 
    color:rgb(214, 55, 55);
}
.save {
    display:flex;
    justify-content:center;
}

@media (max-width: 768px) {
    .takepicture button {
        width: 23%;
        margin-top: 7%;
        height: 10%;
    }
    .btns {
        text-align: center;
        margin-bottom: 54px;
    }
}
.additional-features {
  
    display:flex;
    justify-content:center;
    align-items:center;
    margin-top:1.5em;
    padding:0.3em;
    
  
}
.additional-features a:hover {
    box-shadow: 15px 15px 20px rgb(0 0 0 / 40%);
    transition: box-shadow 0.5s,font-size 0.5s;
    color:red;
    font-size:1.2em;
}

.additional-features a {
    background-color:#ffff00;
    text-decoration:none;
    font-family: myFirstFont;
    padding:0.35em;
}


.aboutProject:hover {
background-color:#b1d60b;
border: 2px solid red;
/* transform: rotateX(53deg); */
box-shadow: 2px 4px 9px yellow;

transition: all 0.5s ease;
font-size:1.5rem;
}

.aboutit {
display: flex;
justify-content: center;
align-items: center;
}