/* * is a special css element that effects everything */

.sociallinks {
    margin: auto;
}

.sociallinks img {
    width: 30px;
    height: 30px;
    border-radius: 100%;
    padding: 0px;
    border: black;
    border-style: solid;
}
.sociallinks img:hover {
    /* Define styles for when hovering over the image */
    border-color: #c9c9c9; /* Change border color */
    box-shadow: 0 0 5px rgb(255 255 255); /* Add shadow effect */
}

.container {
  position: relative;
  width: 100%;
  max-width: 400px;
}

.container img {
  width: 100%;
  height: auto;
}

.modslist {
    display: flex; /* flex stuff, confusing */
    flex-direction: row; 
    flex-wrap: wrap;
    align-content: flex-start;
    justify-content: flex-start;
    align-items: center;
    padding: 8px;
    width: 70%;
    margin: auto;
}

/*.modslist a {   
    margin-left: 20px;
}*/

.mod {
  padding: 3%;
}

.mod a {
  padding: 3%;
}

.mod img {
    width: 180px; /* Width of the element */
    margin-left: 0px; /* Margin Left, is the margin for the left side of the content */
    height: 180px;
    border: black;
    border-style: solid;
}

.mod .img-container {
  text-align: center;
  padding: 5%;
  position: relative;  /* ← required for obj positioning */
  display: inline-block;
  width: 180px;
  height: 180px;
}

.mod .img-container img {
  width: 180px;
  height: 180px;
  border: solid black;
}

.mod .img-container:hover {
  cursor: zoom-in;
}

.mod .img-container .btn-group {
  text-align: center;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  display: flex;
  gap: 8px; /* space between buttons */
}

.mod p {
    height: 0px;
    width: 190px;
    text-align: center;
    text-overflow: ellipsis;
}

.mod p a {
    margin-left: 0px !important;
}

div.scrollmenu {
  width: min(720px, 92vw); /* ← fits any screen */
  overflow-y: auto;
  white-space: nowrap;
  justify-content: center; /* Centers horizontally */
}

div.scrollmenu a {
  display: inline-block;
  color: white;
  text-align: center;
  padding: 9px;
  text-decoration: none;
}

ul.a {list-style-type: circle;}
ul.b {list-style-type: disc;}
ul.c {list-style-type: square;}

ol.d {list-style-type: upper-roman;}
ol.e {list-style-type: lower-roman;}
ol.f {list-style-type: lower-alpha;}
ol.g {list-style-type: decimal;}