body {

     cursor: crosshair;
     display: flex;
     flex-direction: column;
     justify-content: center;
     align-items: center;
     position: relative;
     background-color: #785c66;
     background-image: url("https://i.postimg.cc/vZ2N2JTs/cream-paper.png");
     background-repeat: repeat;
     font-size: 15px;
     color: #000000;

     font-family: "Jacquard 24", system-ui;
     font-weight: 400;
     font-style: normal;

   }

   /* unvisited link */
   a:link {
     color: #3e1624;

     cursor: crosshair;
   }

   /* visited link */
   a:visited {
     color: #3e1624;

     cursor: crosshair;
   }

   /* mouse over link */
   a:hover {
     color: #785c66;

     cursor: crosshair;
   }

   /* selected link */
   a:active {
     color: #3e1624;

     cursor: crosshair;
   }

   

   li {
     display: inline;

   }

   li {
     display: inline-block;


   }

   a {

     background-color: transparent;
     text-decoration: none;
     font-size: 12px;


   }

   p {
    font-family: monospace;
   }

   ul {
     list-style-type: none;
     margin: 43;
     padding: 0;
     overflow: hidden;
     justify-content: center;
     display: flex;
   }

   li a {
     display: block;
     padding: 8px;
     background-color: transparent;
     font-size: larger;



   }

   h1 {
     color: #3e1624;
     margin: 10px;
     font-family: "Jacquard 24", system-ui;
     font-size: x-large;
   }

   h2 {
     display: flex;
     justify-content: flex-end;
     color: #3e1624;
     margin: 10px;
     font-family: "Jacquard 24", system-ui;
     font-size: 18px;
   }

   h3 {

     margin: 10px;

     color: #3e1624;

     font-family: "Jacquard 24", system-ui;
     font-size: 19px;
   }

   .header {
     display: flex;
     align-items: center;
     border: none;
     color: #3e1624;
     margin: 23px;
     font-family: "Jacquard 24", system-ui;
     font-size: 64px;
     padding: 0;
   }

   .nav {
     display: flex;
     width: 400px;
     justify-content: center;
     background-color: transparent;
   }

   .container {
     font-family: Georgia, 'times new roman', times, serif;
     font-size: small;
     padding: 10px;
    

   }

   .footer {
     text-align: center;
     font-size: 15px;
     padding: 20px;
     background-color: transparent;
     bottom: 0;
     margin: 0;
     width: 400px;
     position: static;
     box-sizing: border-box;
   }

   .imgcoffee {
     position: absolute;
     margin-top: 300px;
     margin-left: -900px;
     height: 295px;
     width:auto;
   }

   .imgmoth {
     position: absolute;
     margin-top: -250px;
     margin-left: 950px;
     transform: rotate(0deg);
     height: 295px;
     width: auto;
   }

img{
  width: 100px;
  height:auto;
}


   /* =======================
   NAVIGATION & DROPDOWN
======================= */
#navigation {
  text-align: center;
  background-color: var(--bg-2);
  padding: 3px;
  margin-bottom: 10px; 
  border: 1px dotted var(--border-1);
  font-family: monospace;
  padding-bottom: 50px;
}

.dropdown {
  float: left;
  overflow: hidden;
  background: transparent;
}
.dropdown .dropbtn {
  color: var(--link-color);
  font-family: var(--font-family);
  border: none;
  margin-left: 5px;
  background: transparent;
}
.navbar a:hover,
.dropdown:hover .dropbtn {
  background-color: var(--bg-2);
}

.dropdown-content {
  display: none;
  position: absolute;
  z-index: 1;
  min-width: 100px;
  background-color: var(--bg-2);
  border: 1px dotted var(--border-1);
}
.dropdown-content a {
  display: block;
  padding: 2px;
  color: var(--text-color);
  text-align: left;
  border-bottom: 1px dotted var(--border-2);
}
.dropdown-content a:hover {
  background-color: var(--link-color);
  color: var(--bg-2);
  letter-spacing: 1px;
}
.dropdown:hover .dropdown-content { display: block; }

.update { margin-left: 5px; }

::selection {
  background-color: #000;
  color: #e5e6e7;
}

::-webkit-scrollbar {
  width: 7px;
 
}
::-webkit-scrollbar-thumb {
  border: 1px dotted;
  background-color: var(--bg-2);
  border-radius: 5px;
  transition: 0.25s;
  
}
::-webkit-scrollbar-thumb:hover {
  background-color: var;
}

 .broider {
    border-image:  url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABUAAAAVCAYAAACpF6WWAAAA9klEQVR4AaSS3Q7CMAhGp+//zrMHcxrYZm1TUwJ8f+PC9zH3O+dkX9U19MkM9mpyemvx8gxQ9hwKcTVjEKOzU3m++QyV0MDObOUQMTo6OTr7YWgHmhKCvY1/Hzr0COnsPRQQoBMAk3Xzeal+BM4rvfgM5cKVkKHW0PKloWNMxnGGjqVzLIEcdxoKMGf9rYrARr8IJVCgYVuPnPhLMRi8laiZS5kJpu8Wx8Wlu0HZH8d5qUR8yWWhF18OheBL9IW8A33xGSpBWBEADOrRZ2gOysJrHlzGHn2GIlRAZ6dyCDMcHc4SoweWQwE6wdIq78wE0htVXsE+AAAA//9mLPRiAAAABklEQVQDAJXmNCrxAuzLAAAAAElFTkSuQmCC") 7 /  7px / 0 round;
    border-width:  7px;
    border-style:  solid;
}