/*  ---fonts---  */
@font-face {
    font-family: 'dottedfont';
    src: url('../fonts/dottedfont/BitcountGridSingle-VariableFont_CRSV\,ELSH\,ELXP\,slnt\,wght.ttf') format('truetype');
    font-weight: normal;
    font-style: normal;
}

@font-face {
    font-family: 'pixelfont_1';
    src: url('../fonts/pixelfont_1/Jersey10-Regular.ttf') format('truetype');
    font-weight: normal;
    font-style: normal;
}

@font-face {
    font-family: 'layerfont';
    src: url('../fonts/layerfont/Sixtyfour-Regular-VariableFont_BLED\,SCAN.ttf') format('truetype');
    font-weight: normal;
    font-style: normal;
}

/*  ---General formatting---  */
a {
    text-decoration: none;
    color: inherit;
}

html {
    font-family: dottedfont, Arial, sans-serif;
    font-size: 20px;
    color: #39FF14;
}

body {
    margin: 20px;
    background-color: rgb(12, 12, 12);
    overflow-x: hidden;
}

h1 {
    text-decoration: underline;
    font-size: 80px;
}

h2 {

    font-size: 25px;
}
h3 {
    text-decoration: underline;
    font-size: 20px;
}
nav{
    border: 1px, dashed, #39FF14;
    color: #39FF14;
}
nav a:hover {
    color: red;
    text-decoration: underline;
    transform: scale(1.1);
}

/*  ---specific elements---  */
.element {
    transition: transform 0.2s ease;
    overflow: hidden;
    /*background-color: #39FF14;*/
}

.element:hover {
    transform: scale(1.04);
    border: 1px dashed #39FF14;
    background-color: #21de0056;
}

.element p:not(#quoteauthor)::before {
    content: "[";
}

.element p:not(#quoteauthor)::after {
    content: "]";
}
@keyframes blink {
    0%, 50% {
        opacity: 1;
    }
    50.01%, 100% {
        opacity: 0;
    }
}
.cursor {
    animation: blink 1.4s infinite;
}
    
.devnote{
    font-size: 18px;
    width: fit-content;
    height: fit-content;
    max-width: 1200px;
    word-wrap: break-word;
    transition: all 0.1s;
}

.devnote:hover{
    background-color: #21de0056;
    padding: 3px;
    margin: -3px;
}