html {
  scroll-behavior: smooth;
}

.entry {
     display: flex;
     margin-bottom: 1em;
     border: 1px solid #09090940;
     background: #e5c094;
     text-decoration: none;
     color: #3c3733;
     box-shadow: 0 0 0.5em rgba(0, 0, 0, 0.05), 0 0.2em 0.5em rgba(0, 0, 0, 0.05);
     transform: rotate(-2deg);
     width:300px;
}
 .entry.beta>.stub {
     background: #ff000087;
}
 .entry:hover {
     margin-top: -0.1em;
     margin-bottom: 1.1em;
     box-shadow: 0 0.25em 0.5em rgba(0, 0, 0, 0.05), 0 0.45em 0.5em rgba(0, 0, 0, 0.05);
     transform:rotate(4deg) scale(1.1);
     transition:transform .3s ease-in-out;
}
 .entry:hover .cutout {
     border: 1px solid #888;
     border-right: transparent;
}
 .entry:active {
     border: 1px solid #888;
     transition: none;
     margin-top: 0.1em;
     margin-bottom: 0.9em;
     box-shadow: none;
}
 .entry:active .cutout {
     box-shadow: none;
}
 .entry .info {
     flex: 1;
     padding: 0.5em;
     overflow: hidden;
     background: rgba(0, 0, 0, 0.05);
     margin: 0.3em;
     border: 2px dashed rgba(0, 0, 0, 0.20);
     border-radius: 0.25em;
     border-right: none;
}
 .entry .title {
     font-weight: bold;
     font-size: 1.25em;
     display: flex;
     align-items: center;
     margin-bottom: 0.25em;
     display: flex;
}
 .entry .title .text {
     white-space: nowrap;
     overflow: hidden;
     font-size: 0.75em;
     text-overflow: ellipsis;
}
 .entry .playerCount {
     font-size: 0.6em;
     margin-left: 0.5em;
     background: #0000001f;
     padding: 0.25em 0.5em;
     border-radius: 1em;
}
 .entry .playing {
     font-size: smaller;
     text-overflow: ellipsis;
     white-space: nowrap;
     overflow: hidden;
}
 .entry .stub {
     width: 3.5em;
     border-left: 2px dashed #7c606082;
     display: flex;
     align-items: center;
     position: relative;
}
 .entry .cutout {
     width: 1em;
     height: 2em;
     position: absolute;
     right: -2px;
     border-radius: 1em 0 0 1em;
     background: #445061;
     border: 1px solid #09090960;
     border-right: transparent;
}
 .entry .code {
     white-space: nowrap;
     transform: rotate(-90deg);
     font-weight: bold;
     transform-origin: center;
     color: rgba(0, 0, 0, 0.3);
     margin-left: -0.25em;
     background: #5a555321;
     font-family: monospace;
     padding: 0 0.25em;
     font-size: 20px;
}
 html, body {
     width:100%;
     padding:0;
     margin:0;
     background:#445061;
}
 body {
     color:white;
}
 .half {
     width:calc(50% - 50px);
     height:calc(100% - 50px);
     display:flex;
     align-items:center;
     justify-content:center;
     flex-direction:column;
     margin:0;
     padding:25px;
     vertical-align:top;
}
 .full {
     width:calc(100% - 50px);
     height:calc(75% - 50px);
     margin:0;
     padding:25px;
     vertical-align:top;
     font-family:Ubuntu;
     color:black;
     text-align:center;
}
 .wrapper {
     margin:0;
     padding:0;
     display:flex;
     width:100%;
     height:75vh;
}

.hidden {
  display: none;
}

#toast-message {
  position: fixed;
  bottom: 20px;
  left: 50%;
  transform: translateX(-50%);
  padding: 10px 20px;
  background-color: #333;
  color: #fff;
  border-radius: 5px;
  font-size: 16px;
}

    .card {
      width: 300px;
      background-color: #e5c094;
      border-radius: 5px;
      transform: rotate(-2deg);
      margin: 15px;
      padding: 20px;
      box-sizing: border-box; vertical-align:top;
      display:inline-block;
    }

    .cardd {
      width: 300px;
      background-color: lime;
      border-radius: 5px;
      margin: 15px;
      padding: 20px;
      box-sizing: border-box; vertical-align:top;
      display:inline-block;
    }

    .card .icon {
      font-size: 18px; line-height:18px; padding:0; margin:0;
      display:inline-block; vertical-align:top;
    }

    .card span {
      font-size: 18px; line-height:18px; padding:0; margin:0;
      font-weight:600;
    }

.card .com {
font-size:12px;
opacity:0.6;
}

i {
vertical-align:top;
}

    .card p {
      font-size: 14px;
      line-height: 1.2;
    }

    .discord-button {
      display: inline-block;
      background-color: #7289da;
      color: #fff;
      text-decoration: none;
      padding: 10px 20px;
      border-radius: 4px;
      font-family: Arial, sans-serif;
      font-weight: bold;
      margin:8px;
      transition:background-color .3s ease-in-out;
    }

    .discord-button:hover {
      background-color: #5a6b8e;
    }


 @media only screen and (max-width: 767px) {
    /* Styles for mobile devices */
     .wrapper {
         flex-direction:column-reverse;
    }
     .half {
         width:calc(100% - 50px);
         height:calc(50% - 50px);
    }
}


.unique {
  position: relative;
}

.unique:after {
  content: 'only on tobybot!';
  display: inline-block;
  text-align: center;
  background-color: #986425;
  color:white;
  padding: 6px;
  font-size: 14px;
  line-height: 1;
  position: absolute;
  top: 0;
  right: -12px;
  transform: rotate(8deg);
  transform-origin: top right;
}