@import url('https://fonts.googleapis.com/css2?family=Rubik+Broken+Fax&family=Syne+Mono&display=swap');

:root {
    --primary: #e20421;
    --background: #02030c;
    --rubik: "Rubik Broken Fax", system-ui;
    --syneMono: "Syne Mono", sans-serif;
}

html,body,div,span,applet,object,iframe,h1,h2,h3,h4,h5,h6,p,blockquote,pre,a,abbr,acronym,address,big,cite,code,del,dfn,em,img,ins,kbd,q,s,samp,small,strike,strong,sub,sup,tt,var,b,u,i,center,dl,dt,dd,ol,ul,li,fieldset,form,label,legend,table,caption,tbody,tfoot,thead,tr,th,td,article,aside,canvas,details,embed,figure,figcaption,footer,header,hgroup,menu,nav,output,ruby,section,summary,time,mark,audio,video{margin:0;padding:0;border:0;font-size:100%;font:inherit;vertical-align:baseline}article,aside,details,figcaption,figure,footer,header,hgroup,menu,nav,section{display:block}body{line-height:1}ol,ul{list-style:none}blockquote,q{quotes:none}blockquote:before,blockquote:after,q:before,q:after{content:'';content:none}table{border-collapse:collapse;border-spacing:0}

/* * {
    outline: 1px solid rgb(56, 56, 56);
} */
html{
    background:var(--background);
    font-family:sans-serif;
    z-index: 1;
}


h1, h2, h3{
    text-transform: uppercase;
    font-family: var(--syneMono);
}

a{
    text-decoration: none;
    color: var(--primary);

    &:hover{
        color: #ffffff;
        filter: drop-shadow(0px 0px 5px #ffffff);
        transition: ease-in 0.15s;
    }
}

.wrapper, .menu-wrapper{
    max-width: 1024px;
    margin: 20px auto;
    background-color: #ffffff;
    border:4px solid var(--primary);
    position: relative;
    z-index: 3;
    /* filter: drop-shadow(0px 0px 5px var(--primary)); */

}

.background-box,
.background-overlay{
    /* background:#e2042273; */
    position: absolute;
    /* z-index:2; */
  left: 0;
  top: 0;
  right: 0;
  bottom: 0;
}

.background-box{
    background-image:url(../lucasnemeth.net/images/background.png);
      -webkit-filter: blur(5px);
  -moz-filter: blur(5px);
  -o-filter: blur(5px);
  -ms-filter: blur(5px);
  filter: blur(5px);
}


header{
    background-color: var(--background);
    h1{
        font-size: 46px;
        text-align: center;
        padding: 20px;
        color: var(--primary);
        font-family: var(--rubik);
        filter: drop-shadow(0px 0px 5px var(--primary));
    }
    h3{
        color: var(--primary);
        text-align: center;
        padding: 0 20px 20px 20px;
    }
    nav{
        /* background-color:red; */
        ul{
            display: flex;
            justify-content: space-evenly;
        }  
        li{
            text-transform: uppercase;
            padding: 10px;
            font-family: var(--syneMono);
            font-size: 22px;
        }
    }
}
main{
    padding: 20px;
}

section{

    &:not(:last-of-type){
        margin-bottom: 20px;
        border-bottom: 2px solid var(--background);
        padding-bottom: 20px;
    }
    h2{
        font-size: 22px;
        margin-bottom: 10px;
    }

}

.menu-wrapper{
    max-width: 425px;
}

.mobile-menu{
    flex-direction: column;
    text-align: center;
    padding-bottom: 20px;
}