@font-face {
    font-family: Doto;
    src: url("./Doto-VariableFont_ROND.ttf");
}

:root{
    --main-color: rgb(255, 0, 0);
}

::selection{
    background-color: rgba(0, 153, 255, 0.505);
    color: white;

    text-shadow: 0 0 2px white, 0 0 4px white;
}

html{

    margin: 0;
    padding: 0;
    background-color: #000000;
    color: var(--main-color);
    text-shadow: var(--main-color) 0px 0px 7px, var(--main-color) 0 0 25px, var(--main-color) 0 0 40px;
    font-family: Doto;
    overflow-x: hidden;
}

body{
    margin-left: 5vh;
    margin-right: 5vh;

}

pre{
    font-family: Doto;
    font-weight: 500;
    font-size: large;
}
button, a{
    font-family: Doto;
    font-weight: 600;

    border: none;

    background-color: transparent;
    color: var(--main-color);
    text-shadow: var(--main-color) 0px 0px 7px, var(--main-color) 0 0 25px, var(--main-color) 0 0 40px;

    font-size: large;

    text-decoration: underline;

    cursor: pointer;
}

button:hover, a:hover{
    background-color: color-mix(in srgb, var(--main-color), transparent 80%);
}

.selected:hover{
    background-color: var(--main-color);
}

button:active, .selected, a:active{
    background-color: var(--main-color);
    color: #000000;

    box-shadow: var(--main-color) 0px 0px 10px;
}

h1{
    font-size: x-large;

    margin: 0;
    padding-left: 1vh;

    background-color: color-mix(in srgb, var(--main-color), transparent 90%);
    border: var(--main-color) solid 1px;
}

h2{
    line-height: 0;
    font-size: xx-large;
}

h3{
    color: var(--main-color);
}

h4{
    margin: 10px;

    line-height: 0;
    margin-right: 0px;
    margin-left: 0px;
}

hr{
    margin: 0;
    border-color: var(--main-color);

    box-shadow: color-mix(in srgb, var(--main-color), transparent 80%) 0px 0px 6px 6px;
}

em{
    line-height: 1;
    color: color-mix(in srgb, var(--main-color), transparent 40%);

    font-weight: 600;
}

p{
    font-weight: 600;
}

div{
    background-color: color-mix(in srgb, var(--main-color), transparent 95%);
    padding: 1vh;
    border: var(--main-color) solid 1px ;
    margin-bottom: 20px;
}



.MainDiv{
    border: var(--main-color) solid;
    padding: 2vh;
}

.collapsable{
    line-height: 0;
}

.crt-effect::before{
    content: ' ';
    display: block;
    position: absolute;
    top: 0;
    left: 0;
    bottom: 0;
    right: 0;
	background: linear-gradient(rgba(18, 16, 16, 0) 50%, rgba(0, 0, 0, 0.25) 50%),
		linear-gradient(90deg, rgba(255, 0, 0, 0.06), rgba(0, 255, 0, 0.02), rgba(0, 0, 255, 0.06));
    z-index: 15;
    background-size: 100% 2px, 3px 100%;
    pointer-events: none;
}




.BlogPost div{
    border: none;
}

.collapsible{
    text-decoration: none;
}

.content{
    display: none;
    overflow: hidden;
}