@font-face {
    font-family: Pacifico;
    src: url(/src/assets/font/Pacifico-Regular.ttf);
}

@font-face {
    font-family: Varela;
    src: url(/src/assets/font/VarelaRound-Regular.ttf);
}

@font-face {
    font-family: Roboto;
    src: url(/src/assets/font/Roboto-Regular.ttf);
}

b,
summary {
    font-family: Varela;

    font-size: x-large;
    font-weight: bolder;
}

.svg {
    max-width: 40px;
    padding-top: 0px;
}
.svg-color {
    max-width: 40px;
    margin: 5px;
    transform: translateY(25%);
}

i {
    font-style: italic;
}

p,
del,
i,
li,
u,
sub,
sup, 
details {
    font-family: Varela;

    font-size: larger;
    font-weight: normal;
}

a {
    font-family: Varela;

    font-size: larger;
    font-weight: bold;

    text-decoration: underline;
}

h1,
h2,
h3,
h4,
h5,
h6 {
    font-family: Varela;
    color: var(--text-color);
}

h1 {
    font-size: xx-large;
    font-weight: bolder;
}

h2 {
    font-size: x-large;
    font-weight: bolder;
}

h3,h4,h5,h6{
    font-size: larger;
    font-weight: bold;
}

p,
b,
del,
i,
li,
u,
sub,
sup,
details,
pre {
    color: var(--text-color);
}

hr {
    border-color: var(--text-color);

    width: 85%;

    margin-block-start: 0;
    margin-block-end: 0;

    margin-top: 25px;
    margin-bottom: 25px;

    text-align: center;

    border-width: 1px;
}

hr.large {
    margin-top: 125px;
    margin-bottom: 125px;
}

hr.extra {
    margin-top: 250px;
    margin-bottom: 250px;
}

a,
summary,
li::marker {
    color: var(--link-color);
}

.background-clip {
    background-repeat: repeat !important;

    background-clip: text !important;
    -webkit-background-clip: text !important;

    color: transparent !important;
    background: var(--gradient-color-all);

    background-size: 400% 400%;
    animation: animate 30s ease-in-out infinite;
}

.background-clip-text {
    color: var(--text-color);
    font-size: 10vw;
    font-weight: bolder;
    font-family: Arial;

    max-width: 100%;

    margin: 24px;

    -webkit-text-stroke-width: 0.25vw;
    -webkit-text-stroke-color: var(--text-color);
    text-shadow: 0px 0px 20px var(--background-color);
}

@keyframes animate {
    0% {
        background-position: 0% 50%;
    }

    50% {
        background-position: 100% 50%;
    }

    100% {
        background-position: 0% 50%;
    }
}