/*==================================
  GETHOMEPAGE CSS WIZARD
  Generated: 6/11/2025, 10:12:41 PM
==================================*/

/*==================================
  GITHUB REPOSITORY
  https://github.com/10mfox/Gethomepage-Custom-Css
  If you find this tool helpful, please consider starring the repo!
==================================*/

/*==================================
  CSS VARIABLES
==================================*/
:root {
  --tabs-border-color: #9141ac;
  --widgets-border-color: #9141ac;
  --cards-border-color: #9141ac;
  --bookmarks-border-color: #9141ac;
  --hover-border-color: #33d17a;
  --border-width: 2px;
  --border-radius: 1rem;
  --animation-time: 5s;
}

/*==================================
  ELEMENT STYLES
==================================*/

/* Static Borders - tabs */
button[id$="-tab"] {
  border: var(--border-width) solid var(--tabs-border-color);
  border-radius: var(--border-radius);
  
  transition: border-color 0.3s ease;
}

/* Static Borders - widgets */
#information-widgets {
  border: var(--border-width) solid var(--widgets-border-color);
  border-radius: var(--border-radius);
  
  transition: border-color 0.3s ease;
}

/* Static Borders - bookmarks */
.bookmark {
  border: var(--border-width) solid var(--bookmarks-border-color);
  border-radius: var(--border-radius);
  
  transition: border-color 0.3s ease;
}

/* Static Borders - cards */
.service-card {
  border: var(--border-width) solid var(--cards-border-color);
  border-radius: var(--border-radius);
  
  transition: border-color 0.3s ease;
}

/*==================================
  INTERACTIVE STYLES
==================================*/

/* Static Hover Effects */
button[id$="-tab"]:hover,
.service-card:hover,
.bookmark:hover {
  border-color: var(--hover-border-color);
  transform: translateY(-1px);
  transition: all 0.3s ease;
}

/*==================================
  LAYOUT STYLES
==================================*/

.service-title,
.bookmark-text {
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
  text-align: center !important;
  width: 100% !important;
}
.information-widget-resource {
  width: auto !important;
  padding-left: 1em !important;
}
.information-widget-greeting {
  width: auto !important;
  justify-content: center !important;
  padding-left: 4.5em !important;
  padding-right: 10em !important;
}
#footer {
  display: none !important;
}

/*==================================
  LIST STYLES
==================================*/
/* Recently Added Section */

/* Be Sure To Add (id: list) to custom api in services.yaml like this
- Recently Added:
     - Movies:
        icon: mdi-filmstrip
        id: list
        widget:
          type: customapi */

#list > div > div.relative.flex.flex-row.w-full.service-container > div > div {
  display: block;
  text-align: right;
}
#list > div > div.relative.flex.flex-row.w-full.service-container > div > div > div.flex.flex-row.text-right > div:nth-child(1),
#list > div > div.relative.flex.flex-row.w-full.service-container > div > div > div.flex.flex-row.text-right > div:nth-child(2) {
  white-space: wrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
#list > div > div.relative.flex.flex-row.w-full.service-container > div > div > div.flex.flex-row.text-right > div:nth-child(1) {
  text-align: left;
  margin-left: .5rem;
}
#list > div > div.relative.flex.flex-row.w-full.service-container > div > div > div.flex.flex-row.text-right > div:nth-child(2) {
  text-align: right;
  margin-left: auto;
}

/*==================================
  RESPONSIVE STYLES
==================================*/

@media screen and (max-width: 768px) {
  #myTab {
    padding: 5px;
    background: none;
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 10px;
  }

  button[id$='-tab'] {
    padding: 10px;
    margin: 0;
    width: calc(50% - 5px);
    justify-content: center;
  }
}

@media screen and (max-width: 850px) and (orientation: landscape) {
  #widgets-wrap,
  .service-card {
    gap: 1em;
  }

  .information-widget-resource {
    margin-left: 20px;
    margin-right: 20px;
    flex-wrap: wrap;
    justify-content: center;
  }
}

@media screen and (max-width: 480px) and (orientation: portrait) {
  #widgets-wrap,
  .service-card {
    gap: 1em;
  }

  .information-widget-resource {
    margin-left: 20px;
    margin-right: 20px;
    flex-wrap: wrap;
    justify-content: center;
  }
}