@font-face {
    font-family: 'Monts';
    src: url(../fonts/static/Montserrat-Bold.ttf);
}
@font-face {
    font-family: 'BoldMonts';
    src: url(../fonts/static/Montserrat-ExtraBold.ttf);
}
@font-face {
    font-family: 'LeMilk';
    src: url(../fonts/lemonmilk/LEMONMILK-Bold.otf);
}
@font-face {
    font-family: 'LmMilk';
    src: url(../fonts/lemonmilk/LEMONMILK-Medium.otf);
}
body {
    margin: 0px;
     /* background-image: url(../images/code.png);  */
     background-color: rgb(0, 0, 0);
    /* backdrop-filter: blur(8px); */
    /* temporary */
    /* backdrop-filter: invert(90%);  */
    /* backdrop-filter: sepia(10%); */
    /* color:#F5F5F5; */
}

header {
    text-align: center;
}

main {
    margin: 0px;
}
.headfoot{
    /* margin: 20px; */
    /* border: 2px solid whitesmoke; */
}
header{
    border-bottom: 3.5px solid whitesmoke;
}
footer{
    border-top: 2px solid whitesmoke;
    padding-top: 1%;
    margin-top: 3%;
}
.navbar ul .headgrid{
    list-style-type: none;
    /* background-image: linear-gradient(orangered ,whitesmoke); */
    margin: 0px;
    padding: 10px;
    overflow: hidden;
}
.active0 {
    text-decoration: none;
    /* font-size: 10px; */
    /* height: 124px; */
    color: whitesmoke;
    font: 800 190% 'LmMilk';
  /* -webkit-text-fill-color: whitesmoke;
  -webkit-text-stroke: 1.5px; */
    display: inline-block;
    padding: 10px;

}
.active0:hover {
    /* text-decoration: underline rgb(243, 67, 67) 4px; */
    transition: 2s;
    /* font-size: 10px; */
    /* height: 124px; */
    color: whitesmoke;
    /* font: 800 220% 'LmMilk'; */
  /* -webkit-text-fill-color: whitesmoke;
  -webkit-text-stroke: 1.5px; 
    display: block;
    padding: 10px; */

}

.navbar a:active{
    transform: translateY(2px);
}

.navbar li {
    float: right;
    margin: 10px;
}
.navbar li > h2{
    float: left;
    margin: 10px;
}
.navbar div {
    text-align: center;
}
#active1{
    /* color: rgb(90, 89, 89); */
    /* text-decoration: underline rgb(243, 67, 67) 4px; */
    transition: 1.5s;
}
#active1:hover{
    /* color: rgb(90, 89, 89); */
    /* text-decoration: underline rgb(243, 67, 67) 4px; */
    /* position: relative; */
    transition: 1.5s;
}

#active1:after {
    content: '';
    position: relative;
    left: var(--after-left, 50%);
    width: var(--after-width, 50%);
    height: 4.5px;
    display: block;
    background:rgb(243, 67, 67) 4px;
    transition: var(--transtion, 700ms);
  }
  
  /* .active1:hover:after {
    left: 0%;
    width: 50%;
  } */

#active2{
    /* color: rgb(90, 89, 89); */
    transition: 1.5s;
}

#active2:after {
    content: '';
    position: relative;
    left: var(--after-left, 100%);
    width: var(--after-width, 0%);
    height: 4.5px;
    display: block;
    background:rgb(243, 67, 67) 4px;
    transition: var(--transtion, 700ms);
  }
  
/* #active2:hover:after {
    left: 50%;
    width: 50%;
  } */

.cv{
    border: 2px solid whitesmoke;
    /* width: 20px; */
    background-color: rgb(30, 31, 31);
}
/* .cv:hover{
} */
.cv:active{
    transform: translateY(2px);
}
/* .dot {
    width: 105px;
    height: 45px;
    text-decoration: none; 
    background-color: orangered ;
    border: solid 4px whitesmoke ;   
    border-radius: 1px;
    /* box-shadow: whitesmoke 6px 6px; */
    /* box-shadow: whitesmoke 0px 6px; */
/* } */
/* .dot:hover { */
   /* text-decoration: none; */
/* }
.dot:active {
    /* width: 110px;
    height: 50px; 
    box-shadow: 0px 5px #dbd5d5;
    transform: translateY(4px);
} */
.spangroot{ 
    color: whitesmoke;
    float: left;
    margin: 25px;
    /* font-size: 90px; */
font: 800 36px 'LmMilk';
  /* -webkit-text-fill-color: whitesmoke;
  -webkit-text-stroke: 2.75px; */

}
.spangroot:hover{
    text-decoration: underline rgb(243, 67, 67) 4px;
    color: whitesmoke;
    transition: 2s;
}
.nav_logo{
    margin: -2px;
    float: left;
}
.nav_logo:hover{
    margin: -2px;
    float: left;
    /* text-decoration: underline; */
}
.footer ul {
    list-style-type: none;
    /* background-image: linear-gradient(orangered ,whitesmoke); */
    margin: 0px;
    padding: 10px;
    position: relative;
    bottom: 0;
    overflow: hidden;
}

.footer a {
    text-decoration: none;
    font-size: 10px;
    /* height: 124px; */
    color: whitesmoke;
    font-size: larger;
    font: 800 20px 'LmMilk';
  /* -webkit-text-fill-color: whitesmoke;
  -webkit-text-stroke: 1.5px; */
    display: block;
    padding: 10px;
}
.footer a:active{
    transform: translateY(4px);
    transition: 2s;
    text-decoration: underline rgb(243, 67, 67) 4px;
}
.footer a:hover{
    transform: translateY(2px);
    transition: 2s;
    text-decoration: underline rgb(243, 67, 67) 4px;
}

.footer li {
    float: right;
    /* margin: 10px; */
}
.footer li > h2{
    float: left;
    /* margin: 10px; */
}
.footer div {
    text-align: center;
}
.spanklein{
    font-size: 1.35em;
   /* font: 800 36px 'LmMilk'; */
}
@media only screen and (max-width: 451px){
    .navbar .headgrid{
        display: grid;
        grid-template-columns: repeat(3,0.5fr);
        place-items: center;
    }
.spangroot{
    font-size: 220%;
    /* margin-right: 30%; */
    margin: 0px;
}
.spangroot :hover{
    font-size: 280%;
}
.navbar li{
    float: left;
}
.active0{
    font-size: 90%;
}
.active0 :hover{
    font-size: 140%;
}
.footer ul{
    display: grid;
    grid-template-columns: repeat(1,1fr);
    grid-template-rows: repeat(0,1fr);
    place-items: center;
}
.spanklein{
    text-align: center;
    float: right;
}
}