@font-face {
    font-family: bitcountSingle;
    src: url("fonts/BitcountSingle-VariableFont_CRSV,ELSH,ELXP,slnt,wght.ttf") format("truetype");
    font-style: normal;
    font-weight: 1 1000;
}

@font-face {
    font-family: EBGaramond;
    src: url("fonts/EBGaramond-VariableFont_wght.ttf") format("truetype");
    font-style: normal;
    font-weight: 1 1000;
}

html, body {
    overflow-x: hidden;
    overflow-y: auto;
}

body {
    margin:0;
    background:#121212;
    color:#fff;
    min-height: 100vh;
    position: relative;
}

#stars {
    position: fixed;
    inset: 0;
    width: 100%;
    height: 100%;
    z-index: 0;
    overflow: hidden;
    pointer-events: none;
}

.title-wrap {
    position: relative;
    z-index: 1;
    isolation: isolate;
}

.star {
    position: absolute;
    width: 1px;
    height: 1px;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.95);
    box-shadow: 0 0 4px rgba(255, 255, 255, 0.7);
    opacity: 0.2;
    animation: twinkle var(--duration, 2.5s) ease-in-out infinite alternate;
}

@keyframes twinkle {
    from {
        opacity: 0.15;
        transform: scale(0.8);
    }
    to {
        opacity: 1;
        transform: scale(1.2);
    }
}

h1 {
    font-family:bitcountSingle;
    font-size: clamp( 0%, 10vw, 500%);
    font-weight:300;
    margin:0;
    text-align:center;
}

p {
    font-family: EBGaramond;
    font-size: clamp(14px, 2.5vw, 125%);
    opacity: 100;
    text-align:center;
    margin: 0;
}

a {
    color: #fff;
    text-decoration: none;
}

.icon-descriptions {
    margin: 20px 0;
    font-size: clamp(14px, 2.5vw, 90%);
}

#titleSection {
    padding-top: 45vh;
    padding-bottom: 45vh;
}

#titleDescription {
    margin-left: 20%;
    margin-right: 20%;
}

#scrollIndicator {
    padding-top: 40px;
    font-size: clamp(14px, 2.5vw, 125%);
    animation: fadeText 5s ease-in-out infinite;
}

@keyframes fadeText{
  0%, 100% { opacity: 1; }
  50% { opacity: 0; }
}

#adblockerDisclaimer {
    margin-left: 10%;
    margin-right: 10%;
}

#disclaimers {
    border-radius: 20px;
    /* box-shadow: 0px 0px 5px #00ff4038; */
    margin-left: 15%;
    margin-right: 15%;
    margin-top: 15px;
    padding: 10px;
    background: #141414;
}

.resource {
    display: grid;
    grid-template-columns: auto;
    justify-content: center;
    align-items:center;
    gap: 20px;
    border: 1px solid transparent;
    border-radius: 20px;
    margin-left: 10px;
    margin-right: 10px;
    margin-top: 15px;
    padding-top: 10px;
    padding-bottom: 10px;
    padding-left: 50px;
    padding-right: 50px;
    background: #141414;
    cursor: pointer;
    transition: border-color 0.2s ease, box-shadow 0.2s ease;
}

.resource.is-hovered {
    border-color: #4da3ff;
    /* box-shadow: 0 0 18px rgba(77, 163, 255, 0.7); */
}

.resourceCategoryName {
    font-family: bitcountSingle;
    font-size: clamp( 0%, 5vw, 300%);
    font-weight:300;
    margin:0;
    text-align:center;
    padding-top: 50px;
}

.resourceName {
    font-family: EBGaramond;
    font-size: clamp( 25px, 5vw, 30px);
    font-weight:200;
    margin:0;
    text-align:center;
}

#linkIcon {
    font-size: clamp(14px, 2.5vw, 125%);
    margin-left: 5px;
    justify-self: center;
}

footer {
    margin-top: 100px;
    padding-bottom: 50px;
    text-align: center;
}

footer p {
    font-family: bitcountSingle;
    font-weight: 300;
    font-size: clamp(20px, 2.5vw, 125%);
    margin: 0;
}

#sectionItems{
  display: grid;
  padding-left: 15%;
  padding-right: 15%;
  grid-template-columns: auto auto auto;
}

@media (max-width: 1499px) {
  #sectionItems{
    grid-template-columns: auto auto;
    padding-left: 10%;
    padding-right: 10%;
  }
}

@media (max-width: 1000px) {
  #sectionItems{
    grid-template-columns: auto;
    padding-left: 10%;
    padding-right: 10%;
  }
}