@font-face{
   font-family: gothic;
   src: url("../public/fonts/alagard.ttf");
}
@font-face{
   font-family: alkimia;
   src: url("../public/fonts/Alkhemikal.ttf");
}
@font-face{
   font-family: lcd;
   src: url("../public/fonts/The Led Display St.ttf");
}
@font-face{
   font-family: filosofo;
   src: url("../public/fonts/Philosopher-Regular.ttf");
}

body {
  background-color: #222;
  color: #DDD;
  font-family: Verdana;
  line-height: 1.6;
  background-image: url("../public/img/background-index.png");
   background-size: 100% auto;
   margin: 0;
   padding: 0;
}

#defaultFont
span, a, h1, h2, h3, h4, h5, li, p{
   font-family: filosofo;
}

.font-gothic{
   font-family: gothic;
}
.font-lcd{
   font-family: lcd;
}
.font-alkimia{
   font-family: alkimia;
}
.present{
   font-size: 24px;
}
h1{
   font-size: 60px;
}
header{
   margin: 0 0 1rem 0;
}
a:hover {
    color: #A8D1FF;
}
a {
    color: #4FC1FF;
}
a:visited {
    color: #B180D7;
}
header{
   display: flex;
   justify-content: center;
   background-image: linear-gradient(
            rgba(52, 97, 32, 0.2),
            rgba(86, 191, 41, 0.4)
        ), url("../public/img/led.webp");
   opacity: 0.88;
   margin: 0;
}
.container,.container-fluid{
   position: relative;
}
main{
   background-color: rgba(1,5,63,.4);
   border-radius: 10px;
   position: relative;
}
main::before {
    content: "";
    position: absolute;
    inset: -15px;
    background: inherit;
    filter: blur(15px);
    z-index: -1;
}

img.avatar{
   width: 11rem;
   height: 13rem;
   border-radius: 5px;
   border: 1px #333;
}
.crt {
    position: relative;
    display: inline-block;
    overflow: hidden;
    border-radius: 8px;

    box-shadow:
        inset 0 0 80px rgba(0,0,0,.5),
        inset 0 0 30px rgba(255,255,255,.05);
}

.crt img {
    display: block;
    width: 100%;
    height: auto;
    filter:
        contrast(1.15)
        saturate(1.1);
}

/* Scanlines */
.crt::before {
    content: "";
    position: absolute;
    inset: 0;
    pointer-events: none;

    background:
        repeating-linear-gradient(
            to bottom,
            rgba(255,255,255,0.03) 0px,
            rgba(255,255,255,0.03) 1px,
            rgba(0,0,0,0.15) 2px,
            rgba(0,0,0,0.15) 3px
        );

    animation: scanlines 8s linear infinite;
}

/* Parpadeo CRT */
.crt::after {
    content: "";
    position: absolute;
    inset: 0;
    pointer-events: none;

    background: rgba(255,255,255,0.02);

    animation: flicker 0.15s infinite;
}

@keyframes scanlines {
    from {
        transform: translateY(0);
    }
    to {
        transform: translateY(6px);
    }
}

@keyframes flicker {
    0%   { opacity: 0.95; }
    50%  { opacity: 1; }
    100% { opacity: 0.92; }
}
.crt-vignette {
    position: absolute;
    inset: 0;
    pointer-events: none;

    background:
        radial-gradient(
            circle,
            transparent 60%,
            rgba(0,0,0,.35) 100%
        );
}
.crt-sweep {
    position: absolute;
    inset: 0;
    pointer-events: none;

    background:
        linear-gradient(
            to bottom,
            transparent,
            rgba(255,255,255,.08),
            transparent
        );

    height: 200%;
    animation: sweep 5s linear infinite;
}

@keyframes sweep {
    from {
        transform: translateY(-100%);
    }
    to {
        transform: translateY(100%);
    }
}

footer .mountains{
   height: 100%;
   width: 100%;
   align-content: baseline;
   display: block;
}