body {
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  font-family: 'Assistant', sans-serif;
}

.font-custom {
  font-family: 'Montserrat', sans-serif;
}


main {
  flex: 1;
}
.transition-transform {
  transition: transform 0.3s ease-in-out; /* Adjust the duration and easing as needed */
}

.container-register {
  height: 100%;}
  @media (max-width: 1000px) {
    .container-register{
      display: inline-block;
      display: flex;
      flex-grow: 1;
      min-height: 170%;
    }
  }

.col>div.register {
  margin-left: 100px;
  width: 500px;
}
h8 {
  color: #ff0000;
  font-size: large;
}

.centered {
  position: absolute;
  font-size: 20px;
  top: 26%;
  left: 50%;
  transform: translate(-50%, -50%);
  text-align: center;
}

.img-fluid {
  min-width: 600px;
}

.img-full {
  width: 100%;
}

.img-full-height {
  width: 100%;
  height: 92%;
}

.img-ads {
  display: inline-block;
  margin: 0 10px;
  margin-top: 10px;
  width:150px;
  height:150px;
  border-radius: 20px;
}
.img-ads:hover {
  border: 2px solid red;

}
.imageDiv {
  height: 100%;}
  @media (max-width: 1000px) {
    .imageDiv{
      display: inline-block;
      display: flex;
      flex-grow: 1;
    }
  }

.flexbox {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  /* fraction*/
}

.centered-btn {
  position: absolute;
  font-size: 20px;
  top: 35%;
  left: 50%;
  transform: translate(-50%, -50%);
  text-align: center;
}

.btn-secondary {
  margin-top: 5px;
  border-width: 3px;
  background-color: #65606b;
  border-color: #ff0000
}

.btn-secondary:hover {
  background-color: #C8B1E4;
  border-color: #ff0000;
  border-style: solid;
  border-width: 3px;
  color: white;
}

.container-lg {
  border: 4px solid black;
  text-align: center;
}

.col {
  border: none;
  border-radius: 15px;
}

.container-bottom {
  height: 65px;
}

.start-50 {
  border-radius: 15px;
  background-color: white;
  min-width: 450px;
}

.min-width {
  min-width: 750px;
}

.container-reg {
  border: 4px solid #ff0000;
  border-radius: 15px;
  margin-top: 20px;
  width: 430px;
  padding: 10px;
  text-align: center;
  display: inline-block;
}

.infoStatement {
  padding: 20px;
  text-align: center;
  font-size: x-large;
  display: inline;
  margin-bottom: 30px;
}

.min-width {
  min-width: 200px;
  margin-top: 20px;
}

.min-width2 {
  min-width: 550px;
  margin-top: 20px;
}

.boxFormat {
  height: 100%;
  border-radius: 15px;
  background-color: #ff0000;
  min-width: 100px;
}

.footer {
  background-color: #FFF;
  /*#C8B1E4;*/
  height: 50px;
}

.footer a {
  text-decoration: none;
  color: black;
}

.archived {
  border-color: #532B88;
  border-style: solid;
  background-color: rgb(213, 209, 209);
  border-radius: 15px;
  width: 200px;
  position: relative;
  min-height: 200px;
}

.archiveBtn {
  background-color: #c09deb;
  border-color: #532B88;
  border-style: solid;
  border-width: 3px;
  border-radius: 10px;
  ;
  color: white;
  height: 45px;
}

.archiveBtn:hover {
  background-color: #C8B1E4;
  border-color: #532B88;
  border-style: solid;
  border-width: 3px;
  border-radius: 10px;
  ;
  color: white;
  height: 45px;
}

#sidebar {
  float: left;
  width:15%;
  min-width: 200px;
  border: 1px solid black;
  background-color: rgb(255, 255, 255);
  padding: 20px;
  padding-top: 100px;
  height:110%;
  margin-bottom: 600px;
}
@media (max-width: 890px) {
  #sidebar {
    display: inline-block; /* display the boxes inline */
    width:110%;
    border: 1px solid black;
    background-color: rgb(255, 255, 255);
    padding: 40px;
    padding-top: 50px;
    height:100%;
  }
}

.filter-desktop{
  min-height:200px;
}
@media (max-width: 890px) {
  .filter-desktop {
    min-height:0px;
  }
  
}


ul {
  list-style: none; /* remove default list styling */
  margin: 0; /* remove default margins */
  padding: 0; /* remove default padding */
}

li {
  display: block; /* change list items to block elements */
}

.ad {
  display: inline-block; /* display the boxes inline */
  width: 100%; /* set the width of the boxes */
  height: 150px; /* set the height of the boxes */
  background-color: rgb(252, 249, 249); /* add a background color */
  margin: 10px; /* add some margin between the boxes */
}
@media (max-width: 890px) {
  .ad {
    display: inline-block; /* display the boxes inline */
    display: grid; /* Enable grid layout */
    place-items: center; /* Center the div both horizontally and vertically */
    width: 100%; /* set the width of the boxes */
    height: 150px; /* set the height of the boxes */
    background-color: rgb(252, 249, 249); /* add a background color */
    margin: 10px; /* add some margin between the boxes */
  }
}
.ads-list{
  display: inline-block; /* display the boxes inline */
  width:80%;
  padding: 30px;;
  padding-top:50px;
margin: 0;
}
@media (max-width: 890px) {
  .ads-list {
    display: inline-block; /* display the boxes inline */
    width:100%;
    padding: 30px;;
    padding-top:50px;
  margin: 0;
  }
}

.ad-hover:hover{
  background-color: #f3f1f1;
}

.img-ads {
  border: 1px solid black;
  max-width: 200px;
  height: auto;
}

.img-ads:hover {
  border-color: red;
}
.images-container {
  display: flex;
  flex-wrap: wrap;
  justify-content: center; /* centers the items horizontally */
  gap: 10px; /* adds some space between the items */
}

#page-navigation {
  display: flex;
  justify-content: center;
  margin-top: 20px;
}

#page-navigation ul {
  display: flex;
  list-style: none;
  margin: 0;
  padding: 0;
}

#page-navigation ul li {
  margin-right: 5px;
}

#page-navigation ul li a {
  display: block;
  padding: 5px;
  background-color: #eee;
  border-radius: 5px;
}

#page-navigation ul li.active a {
  background-color: #007bff;
  color: #fff;
}

@keyframes spin {
  0% { transform: rotate(0deg); }
  100% { transform: rotate(360deg); }
}
.spin-hover:hover {
  animation: spin 1s linear infinite;
}

@keyframes flip {
  0% { transform: rotateY(0deg); }
  100% { transform: rotateY(180deg); }
}
.flip-hover:hover {
  animation: flip 0.6s forwards;
}