body {
    /*text-align: center;*/
    height: 100%;
    margin: 0;
    background-color: #D3D3D3 !important;
    /*color: #D4AF37;*/
    /*font-family: 'Montserrat', Arial, sans-serif !important;*/
    font-family: 'Montserrat', sans-serif !important;
    padding-top: 115px; /* Adjust based on the height of your navbar 'Poetsen',*/
    padding-bottom: 60px; /* Adjust based on the height of your footer */
    overflow: auto; /* Hide the scrollbar */
    overflow-y: scroll; /* Allow vertical scrolling */
    /* Hide scrollbar for IE, Edge and Firefox */
    -ms-overflow-style: none;  /* IE and Edge */
    scrollbar-width: none;  /* Firefox */
}

/* Hide scrollbar for Chrome, Safari and Opera */
/*body::-webkit-scrollbar {*/
/*    display: none;*/
/*}*/
        
        
/* Hide scrollbar for WebKit-based browsers */
body::-webkit-scrollbar {
    display: none;
}

/* Hide scrollbar for Firefox */
html {
    scrollbar-width: none;
}

/* Hide scrollbar for IE and Edge */
body {
    -ms-overflow-style: none;  /* IE and Edge */
}

/* Ensure the body can still scroll */
body {
    overflow: auto;
}

#body {
    display: flex;
    flex-direction: column;
    min-height: 82vh;
}

main {
    flex-grow: 1;
}

button {
    font-family: inherit;
    background-color: #222222;
    /*color: #D4AF37;*/
    padding: 10px 20px;
    border: none;
    border-radius: 5px;
    cursor: pointer;
    font-size: 18px;
    margin: 5px;
}

button:hover {
    background-color: #333333;
}

.card-header {
    background-color: #ffffff74;
    padding: 20px;
    text-align: center;
}

.card-title {
    font-size: 24px;
    margin: 0;
}

/*.navbar {*/
/*    background-color: transparent !important;*/
/*}*/

/*.card{*/
/*    color: inherit;*/
/*}*/

.btn-custom{
    color: #57A6A1;
}

/* Add this class to make the card 50% transparent */
.custom-card-bg {
    background-color: rgb(113, 121, 126); /* 50% transparent white background */
}

.vh-100 {
    height: 90vh;
}

#viewport {
    width: 800px; /* Adjust viewport size as needed */
    height: 400px;
    perspective: 1000px; /* Deeper perspective */
    margin: 50px auto;
    display: flex;
    flex-wrap: wrap;
    /*justify-content: center;*/
    position: relative; /* Allows absolute positioning of items */
    
    /*display: flex;*/
    /*flex-wrap: wrap;*/
    /* justify-content: space-between; Adjust spacing between cards */
    /* margin: 0 auto;Center the container */
    max-width: 1000px; /* Adjust based on your design */
}

.spinningItem {
  width: 100px;
  height: 100px;
  background-color: transparent; /* Customize the item */
  position: relative; /* Allows positioning for rotation */
  transform-style: preserve-3d; /* Ensures children are 3D */
}

.spinningItem.escapeMode {
  background-color: #007bff; /* Blue */
  box-shadow: 0 0 15px 5px #007bff; /* Glow effect */
}


.participant-card {
    flex: 1 0 18%; /* Adjust the width to fit 5 cards per row */
    margin: 10px; /* Add some margin for spacing */
    box-sizing: border-box; /* Ensure padding and border are included in the width */
}

/*.animate__zoomOutDown {*/
/*    animation-duration: .5s;*/
/*    animation-fill-mode: forwards;*/
/*}*/

/* font */
@font-face {
    font-family: "Poetsen";
    src: url("resources/Poetsen_One/PoetsenOne-Regular.ttf");
}

@font-face {
    font-family: "RegularBrush";
    src: url("resources/RegularBrush/RegularBrush.otf");
}

@font-face {
  font-family: 'Montserrat';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url("resources/Montserrat/Montserrat-VariableFont_wght.ttf") format('ttf');
}

/*// <uniquifier>: Use a unique and descriptive class name*/
/*// <weight>: Use a value from 100 to 900*/

/*.montserrat-600 {*/
/*  font-family: "Montserrat", sans-serif;*/
/*  font-optical-sizing: auto;*/
/*  font-weight: 600;*/
/*  font-style: normal;*/
/*}*/


/*@keyframes spin {*/
/*    0% {*/
/*        transform: rotateY(0deg);*/
/*    }*/
/*    100% {*/
/*        transform: rotateY(360deg);*/
/*    }*/
/*}*/

/*.spin-card {*/
/*    animation: spin 1s ease-in-out;*/
/*}*/