// Font Sizes

@for $i from 1 through 6{
    h#{$i}{
        font-size: var(--h#{$i}-size);
    }
}

.title{
    font-size: var(--title-size);
}

.font-size-huge{
    font-size: var(--huge-font-size);
}

// Font Weight

$weights: bold, bolder, light, lighter, normal;

@each $weight in $weights{
    .font-weight-#{$weight}{
        font-weight: var(--font-#{$weight}-weight);
    }
}

// Links

a{
    color: var(--link-color);
    text-decoration: none;
    transition: var(--transition-time) all ease;
    cursor: pointer;

    &:hover{
        color: var(--accent-color);
    }
}


// Custom Smooth Marquee

.marquee{
    white-space: nowrap;
    overflow: hidden;
}

.marquee *{
    animation: marquee 15s linear infinite;
}

@keyframes marquee {
    from{
        transform: translateX(100%);
    }

    to{
        transform: translateX(-160%);
    }
}

// Text Styles
.code{
    background: rgba(var(--accent-color-triad), 0.25);
    padding: 0.1rem 0.5rem;
    margin: 0 0.2rem;
    border-radius: var(--border-radius);
}

.quote{
    background: rgba(var(--accent-color-triad), 0.25);
    border-left: 5px solid var(--accent-color);
    padding: 1rem;
    margin: var(--default-top-bottom-margin) 0;

    a{
        text-decoration: underline;
        color: var(--text-color);
    }

    a:hover{
        color: var(--accent-color);
    }
}

p{
    position: relative;
    margin: var(--default-top-bottom-margin) 0;
    line-height: var(--defualt-line-height);
}

.accent-text{
    color: var(--accent-color);
}


.icon-text{
    display: flex;
    align-content: center;

    i{
        margin-right: 0.5rem;
    }
}