body{
    width:90%;
    margin-left: auto;
    margin-right: auto;
    font-family: 'Franklin Gothic Medium', 'Arial Narrow', Arial, sans-serif;
}
.nav a {
    color:#fff;
    text-decoration: none;
    padding:6px;
    background-color: #4f8697;
    margin-bottom: 50px;
}
.nav  :hover{
    background-color: #90cbdd;
}
.stlthumb{
    height:250px;
    aspect-ratio: 1/1;
}
.stllink{
    border: 1px  dashed black;
    padding: 6px
}
.birdgallery{
    display: flex;
    justify-content: space-around;
    flex-wrap: wrap;
    align-content: center;
    gap:30px
}
.birds{
    max-height:350px;
}

/* #region loading*/
#loader {
    animation: rotate 2s linear infinite;
    z-index: 2;
    position: absolute;
    top: 50%;
    left: 50%;
    margin: -25px 0 0 -25px;
    width: 50px;
    height: 50px;
}
.path {
    stroke: none; 
    stroke-linecap: round;
    animation: dash 1.5s ease-in-out infinite;
}

@keyframes rotate {
    100% {
        transform: rotate(360deg);}
}
@keyframes dash {
    0% {
        stroke-dasharray: 1, 150;
        stroke-dashoffset: 0;}
    50% {
        stroke-dasharray: 90, 150;
        stroke-dashoffset: -35;}
    100% {
        stroke-dasharray: 90, 150;
        stroke-dashoffset: -124;}
}

/* #endregion */

/* #region ---------------------------------------------------ART */
 #gallery {
    display: none;
     width: 100%;
     margin-top: 30px;
     margin-left: auto;
     margin-right: auto;
     columns: 4;
     column-width: 1rem;
     text-align: justify-all;
 }
 #gallery img{
    box-sizing: border-box;
    border: 3px solid var(--text-color);
    pointer-events: none;
 }
 .imgContainer {
     display: inline-block;
 }
.animate-bottom {
  position: relative;
  -webkit-animation-name: animatebottom;
  -webkit-animation-duration: 1s;
  animation-name: animatebottom;
  animation-duration: 1s
}

@-webkit-keyframes animatebottom {
  from { bottom:100px; opacity:0 } 
  to { bottom:0px; opacity:1 }
}

@keyframes animatebottom { 
  from{ bottom:100px; opacity:0 } 
  to{ bottom:0; opacity:1 }
}
 .imgContainer:after {
     content: "";
     display:inline-block;
     width: 100%;
     height: 0;
 }

 .imgContainer img {
     width: 88%;
     display: block;
     float: right;
 }

 .hidden {
     display: none;
 }
/*#endregion*/