/* =======================
   FONT IMPORT
======================= */  

@font-face {                  
font-family: 'AMORIA';
src: url(https://crverave.neocities.org/fonts/AMORIA.otf);
font-weight: normal;
font-style: normal;
}   
   
body {
     display: flex;
     flex-direction: column;
     justify-content: center;
     align-items: center;
     position: relative;
     background-color: #606c38;
     background-image: url("https://i.postimg.cc/vZ2N2JTs/cream-paper.png");
     background-repeat: repeat;
  
}

 .header {
     
     color: #acc164;
     margin: 23px;
     font-family: 'AMORIA';
     font-size: 64px;
     padding: 0;
   }


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

   h1 {
     color: #3e1624;
     margin: 10px;
     font-family: 'AMORIA';
     font-size: x-large;
   }

   h2 {
     display: flex;
     justify-content: flex-end;
     color: #3e1624;
     margin: 10px;
     font-family: 'AMORIA';
     font-size: 18px;
   }

   h3 {
     margin: 10px;
     color: #3e1624;
     font-family: 'AMORIA';
     font-size: 19px;
   }

   /* =======================
   NAVIGATION & DROPDOWN
======================= */
#navigation {
  text-align: center;
  background-color: var(--bg-2);
  padding: 3px;
  margin-bottom: 20px; 
  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: #acc164;
  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;
}


.broider {
    border-image:  url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABUAAAAVCAYAAACpF6WWAAAA+ElEQVR4AazPgY3CQAxE0bs0dk1cCZRFCTRBZaBnyStjZcNGCpJle2b8s2w/C7/H8/ZaiI3IB3TvmPb/d//V86rOtL4PKKMfO0hNt6s6790FNI08sJuzKiQ1XS493U4PaBUYdua3kpOX0+3mgBoI1aCt1N7dgAII6Ger3wXUC8+CjvIB7V86Ojjy8nEBPQqueoAepwfUsHo8yyVQ3wAN+uxgVceR3QyAOuGKir9/FdDjPCqghisqH/cBzS+d/UC/G1CGL+lnoPL9LqBpgPUAbVazu4BWUA12GK9qs7uACmZAt6sKMfN0XlZqemoDSqhG33mAOq9W194AAAD///DiV5kAAAAGSURBVAMAp9jO+5pS/w4AAAAASUVORK5CYII=") 7 /  7px / 0 round;
    border-width:  7px;
    border-style:  solid;
}

 

.container{
    display: grid;
    grid-template-columns: auto auto auto auto;
    padding: 10px;
    gap: 20px;
    background-color: #606c38;
    background-image: url("https://i.postimg.cc/vZ2N2JTs/cream-paper.png");
    background-repeat: repeat;
}
::-webkit-scrollbar {
  width: 7px;
 
}
::-webkit-scrollbar-thumb {
  border: 1px dotted;
  background-color: #acc164;
  border-radius: 5px;
  transition: 0.25s;
  
}
::-webkit-scrollbar-thumb:hover {
  background-color: var;
}
.image-container{
    width: 200px;
    height: 200px;
    margin-bottom: 1px;
}
.image-container img{
    width: 100%;
    height: 100%;
    object-fit: cover;
}