@font-face {
    font-family: 'Courier-Prime-Bold';
    src: url('../fonts/courier-prime/Courier_Prime_Bold.ttf') format('truetype');
}

@font-face {
    font-family: 'Courier-Prime-Italic';
    src: url('../fonts/courier-prime/Courier_Prime_Italic.ttf') format('truetype');
}

@font-face {
    font-family: 'Courier-Prime';
    src: url('../fonts/courier-prime/Courier_Prime.ttf') format('truetype');
}


body {
    background: url('../images/fondo01.jpg') center center;
    animation: animacion-fondo 80s alternate infinite;
}

.wrapper {
    background: linear-gradient(90deg, rgba(118, 0, 157, .8) 5%, rgba(214, 85, 252, .8) 10%, rgba(214, 85, 252, .8) 90%, rgba(118, 0, 157, .8) 95%)
}

@keyframes animacion-fondo {
    0% {
        background-position: 0% 0%;
    }
    100% {
        background-position: 0% 100%;
    }
}


nav {
    position: sticky !important;
    top: 0;
    border-bottom: #000000 1px solid;
    font-family: 'Courier-Prime-Bold';
    padding-bottom: 10px;
    font-size: 18px;
    z-index: 4;
    background:rgba(0, 0, 0, 0.6)
}
.nav-link, .nav-link:active, .nav-link:visited, .nav-link:focus{
    color:rgb(161, 161, 161)!important;
}
.nav-link.active{
    color:rgb(175, 0, 219)!important
}
.nav-link:hover{
    color:rgb(175, 0, 219)!important
}
.nav-link.show{
    color:rgb(175, 0, 219)!important
}

.navbar-toggler {
    transform: scale(0.5)
}

.alert-primary {
    background: #333333;
    border: 1px solid #000;
    color: #b3b3b3;
}

img {
    border-radius: 10px
}

img[alt='sobre mí'] {
    border-radius: 50%;
    width: 14rem;
    height: 14rem;
}

h1 {
    font-family: 'Courier-Prime-Bold';
    border-bottom: 0.6px solid #757575;
}

h1:not('#sobre_mi') {
    font-family: 'Courier-Prime-Bold';
    border-bottom: 0.6px solid #757575;
    color: #000000;
}

h3 {
    font-family: 'Courier-Prime-Italic';
    text-indent: 15px;
    text-decoration-line: underline;
}

footer {
    border-top-left-radius: 3rem;
    border-top-right-radius: 3rem;
    padding-top: 1rem;
    padding-left: 1rem;
    padding-right: 1rem;
    background: #4a0058;
    color: #CCCCCC;
}

.card {
    box-shadow: 0px 2px 6px 5px #585858;
    min-height: 100%;
    transition: transform 0.2s ease-in-out;
    transform: scale(0.9);
}

.card:hover {
    transform: scale(1.1);
}

.card-header {
    background: rgb(170, 0, 215);
    background: linear-gradient(360deg, rgb(0, 0, 0) 2%, rgb(46, 46, 46) 5%, rgba(120, 120, 120, 1) 30%, rgba(90, 90, 90, 1) 36%);
}

.card-header>h5 {
    font-weight: 200;
    font-family: 'Courier-Prime';
    color: #CCCCCC;
    text-shadow: #252525 1px 2px 3px;
}

.card-body {
    background: #000;
    color: #949494
}



.alert-default {
    background: rgb(120, 120, 120);
    color: rgb(220, 220, 220);
    text-shadow: #000 1px 1px 0px;
}
.alert-secondary {
    background: rgb(128, 0, 139);
    color: rgb(180, 180, 180);
    border: 1px solid rgb(87, 0, 95);
    text-shadow: #000 1px 1px 0px;
}

#sobre_mi {
    border-radius: 20px;
    background: rgb(0, 0, 0);
    background: radial-gradient(circle, rgba(0, 0, 0, 1) 0%, rgba(0, 0, 0, 1) 15%, rgba(0, 0, 0, 1) 60%, rgba(0, 0, 0, 1) 88%, rgba(92, 92, 92, 1) 95%);
    color: #949494;
}

.text-justify {
    text-align: justify;
}

.wrapper {
    display: grid;
    grid-template-rows: 1fr auto;
    min-height: 100dvh;
}

#contacto a {
    color: rgb(0, 0, 0);
    text-shadow: #CCCCCC 1px 1px 0px;
    animation: brillo 5s infinite;
}

#contacto a,
#contacto a:hover {
    font-size: 20px;
    text-decoration: none;
}

#contacto a:nth-child(1) {
    animation-delay: 1s;
}

#contacto a:nth-child(2) {
    animation-delay: 2s;
}

#contacto a:nth-child(3) {
    animation-delay: 3s;
}

#contacto a:hover {
    color: rgb(230, 230, 230);
    text-shadow: #000000 1px 1px 0px;
    animation: none;
}

@keyframes brillo {
    0% {
        color: rgb(230, 230, 230);
        text-shadow: #000000 1px 1px 0px;
    }

    50% {
        color: rgb(0, 0, 0);
        text-shadow: #ffffff 1px 1px 0px;
    }

    100% {
        color: rgb(230, 230, 230);
        text-shadow: #000000 1px 1px 0px;
    }
}

@media (max-width:996px) {
    .navbar-collapse {
        position: absolute;
        top: 80px;
        right: 0px;
        padding-left: 1rem;
        padding-right: 16rem;
        border: 1px solid #DDD;
        background:rgba(0, 0, 0,.8); 
    }
    .navbar-toggler{
        color:rgb(255, 255, 255)!important; 
        border: 1px solid #DDD;
        padding:5px 10px;
        font-size:1.5rem;
    }
}

@media (max-width:768px) {
    .navbar-collapse {
        position: absolute;
        top: 80px;
        right: 0px;
        padding-left: 1rem;
        padding-right: 16rem;
        border: 1px solid #DDD;
        background:rgba(0, 0, 0,.8); 
    }
    .navbar-toggler{
        color:rgb(255, 255, 255)!important; 
        border: 1px solid #DDD;
        padding:5px 10px;
        font-size:1.5rem;
    }
}

@media (max-width:320px) {
    .navbar-collapse {
        position: absolute;
        top: 120px;
        left: 0px;
        padding-left: 1rem;
        padding-right: 5rem;
        border: 1px solid #DDD;        
        background:rgba(0, 0, 0,.8);
    }
    .navbar-toggler{
        color:rgb(255, 255, 255)!important; 
        border: 1px solid #DDD;
        padding:5px 10px;
        font-size:1.5rem;
    }

    h1 {
        text-indent: 0;
        padding: 0;
        margin: 0;
        font-size: 1.5rem;
    }

    h3 {
        text-indent: 0;
        padding: 0;
        margin: 0;
        font-size: 1.1rem;
    }

    img[alt='sobre mí'] {
        width: 10rem;
        height: 10rem;
    }

    #contacto a,
    #contacto a:hover {
        font-size: 14px;
    }

    .card {
        transform: scale(0.9);
    }

    .card:hover {
        transform: scale(1);
    }

    p {
        font-size: 0.8rem;
    }
}