/*==================================
  GETHOMEPAGE CSS WIZARD
  Generated: 14.06.2026, 00:16:07
==================================*/

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

/*==================================
  FONT FAMILY
==================================*/
:root {
  --my-font: "DejaVu Sans Mono", monospace;
}

/*==================================
  CSS VARIABLES
==================================*/
:root {
  --focus-border-color: #0b5941;
  --border-width: 5px;
  --border-radius: .375rem;
  --animation-time: 10s;
}

/*==================================
  BASE STYLES
==================================*/

/* Global Styles */
* {
  font-family: var(--my-font) !important;
  color: #00e5a0 !important;
}

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

/* Static Focus Effects */
button[id$="-tab"]:focus {
  border-color: var(--focus-border-color);
  outline: none;
  transition: all 0.3s ease;
}

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

@media screen and (max-width: 768px) {
  #myTab {
    padding: 5px;
    background: none;
    backdrop-filter: 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;
  }
}