:root {
    --background :  rgba(232,232,232,1.00);
    --text-colour:  rgba(032,032,032,1.00);
    --highlight  :  rgba(232,000,000,1.00);
}

body {
    background-color: var(--background);
}

@font-face {
    font-family: 'PP Radio Grotesk';
    src: url(../fonts/PPRadioGrotesk-Regular.woff);
    font-weight: normal;
}
@font-face {
    font-family: 'PP Radio Grotesk';
    src: url(../fonts/PPRadioGrotesk-Black.woff);
    font-weight: bold;
}

@font-face {
    font-family: 'PP Fraktion Mono';
    src: url(../fonts/PPFraktionMono-Regular.woff);
    font-weight: normal;
}

.mono {
    font-family: 'PP Fraktion Mono', 'Courier New', Courier, monospace;
    font-weight: regular;
}

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

.tags {
    color: var(--highlight);
    border: none;
}

.light {
    color: var(--background);
}

.btn-img-primary {
    background-color: transparent;
    text-decoration: underline;
    border: none;
    border-radius: none;
    margin: 0;
    padding: 0;
    transition: all 0,2s ease;
}

.navbar-toggler {
    border: none;
    border-radius: 0;
    background-color: transparent;
    transition: all 0.2s ease;
}

.bg-blur {
    background-color: rgba(232,232,232,0.9);
    backdrop-filter: blur(12px);
}

.bounce {
    animation: bounce 1s alternate ease infinite;
}

.click-me {
    animation: clickMe 4s normal ease infinite;
}

@keyframes bounce {
    from {transform: translateY(0px);}
    to {transform: translateY(12px);}
}

@keyframes clickMe {
    0% {transform: rotate(45deg);}
    10% {transform: rotate(-45deg);}
    20% {transform: rotate(45deg);}
    30% {transform: rotate(-45deg);}
    40% {transform: rotate(45deg);}
    50% {transform: rotate(0);}
}

a {
    color: var(--text-colour);
    background-color: transparent;
    text-decoration: none;
    transition: all 0.2s ease;
}

a:hover, a:active {
    color: var(--background);
    background-color: var(--highlight);
}

h1 {
    font-weight: bold;
}

.display-1 {
    font-family: 'PP Radio Grotesk', Arial, Helvetica, sans-serif;
    font-weight: bold;
}


.form-switch .form-check-input:checked {
    background-color: var(--highlight);
    border-color: var(--highlight);
}

.vh-50 {
    height: 50vh;
}

/* .display-1 {
    font-size: 8rem;
} */

.about-me {
    position: absolute;
    bottom: 0;
    left: 10%;
    width: 80%;
}

.pos-relative {
    position: relative;
}