body{

    padding: auto;
    margin: auto;
    font:normal 27px/1.5 'Built Titling Lt', serif;

    background-image: url(AG1.jpg);
    background-size: cover;
    background-position: center;
    background-attachment: fixed;
    letter-spacing: 2px;

}
#navbar{
    background-color: #839788;
    width: 100%;
    height: 35px;
}
#navlink{
    text-decoration: none;
    font-family: 'Courier New', Courier, monospace;
    font-size: 20px;
    font-weight: bold;
    transition: all 0.3s ease-in-out;
}
#tnm{   
    background-color: #000000;
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
    position: absolute;
    top: -5px;
    left: 45%;
    font-family: 'Built Titling Lt';
    font-size: 30px;
    font-weight: 500;
    font-style: normal;
    font-display: swap;}



#h2{background: linear-gradient(to top right, #ffffff, #a4c4ff);
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent; 
letter-spacing: 5px;}
#text{background: linear-gradient(to top right, #ffffff, #a4c4ff);
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent}
#email{background: linear-gradient(to top right, #ffffff, #a4c4ff);
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent}
#category{background: linear-gradient(to top right, #ffffff, #a4c4ff);
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent}
#number{
    background: linear-gradient(to top right, #ffffff, #a4c4ff);
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent}
#EdgeText{
    font:normal 25px/1 'Built Titling Lt', serif;background: linear-gradient(to top right, #ffffff, #a4c4ff);
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent}
#con{
    font:normal 25px/1 'Built Titling Lt', serif;
    background: linear-gradient(to top right, #ffffff, #a4c4ff);
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent}
#button{
    position: absolute;
    top: 70%;
    left: 40%;
}

    @font-face {
        font-family: 'Built Titling Lt';
        src: url('BuiltTitlingLt-Regular.woff2') format('woff2'),
            url('BuiltTitlingLt-Regular.woff') format('woff');
        font-weight: 300;
        font-style: normal;
        font-display: swap;
    }
#positie{
    position: absolute;
    transform: translate(-50%, -50%);
    text-align: center;
    z-index: 100;

}
@media screen and (max-width: 2000px) {
    #positie {
        top: 23%;
        left: 38%;

    }}
    @media screen and (max-width: 800px){
        #positie {
            top: 23%;
            left: 20%;
        }}

#ag{
    background-color: rgba(0, 0, 0, 0.629);
    position: absolute;
    border-radius:10px 100px 10px 100px;
    width: 450px;   
    height: 480px;
    z-index: -100;
}
#body1{
    border-radius: 10px;
    background-image: linear-gradient(to top right,#007ca2,#839788 );
    background-attachment: fixed;
    width: 200px;
    height: 75px;
    position: absolute;
    top: -3%;
    left: 70%;
    rotate: 38deg;

}
#body1:hover{
animation-name:rotate, gradient;
animation-iteration-count: infinite;
animation-duration: 3s;


}
@keyframes rotate{
    0%{
        rotate: 38deg;
    }
    50%{
        rotate: -28deg;
     }
    100%{
        rotate: 38deg;
    }
}
@keyframes gradient{
    0%{
        background-image: linear-gradient(to top right,#007ca2,#839788 );
    }
    10%{
        background-image: linear-gradient(to bottom right,#839788 ,#007ca2 );
    }
    20%{
        background-image: linear-gradient(to bottom left,#007ca2,#839788 );
    }
    30%{
        background-image: linear-gradient(to top left,#839788 ,#007ca2 );
    }
    40%{
        background-image: linear-gradient(to top right,#007ca2,#839788 );
    }
    50%{
        background-image: linear-gradient(to bottom right,#839788 ,#007ca2 );
    }
    60%{
        background-image: linear-gradient(to bottom left,#007ca2,#839788 );
    }
    70%{
        background-image: linear-gradient(to top left,#839788 ,#007ca2 );
    }





}
    
#h3{
    position: absolute;
    top: -16px;
    left: 49px;
    text-align: center;
   font-family: serif;
   letter-spacing: 0px;
}

#ostreep{
    background-color: rgb(0, 0, 0);
    width: 110px;
    height: 2px;
    position: absolute;
    top: 19px;
    left: 45px;
}
#onstreep{
    background-color: black;
    width: 110px;
    height: 1px;
    position: absolute;
    top: 57px;
    left: 45px;
}
#sstreep{
    background-color: rgb(0, 0, 0);
    width: 2px;
    height: 20px;
    position: absolute;
    top: 29px;
    left: 34px;
}
#scstreep{
    background-color: black;
    width: 2px;
    height: 22px;
    position: absolute;
    top: 28px;
    left: 164px;
}
#a{
    position: absolute;
    top: -3px;
    left: 21px;

    rotate: 179deg;
}
#b{
    position: absolute;
    top: 37px;
    left: 23px;

    rotate: 82deg;
}
#c{
    position: absolute;
    top: -4px;
    left: 150px;

    rotate: 260deg;
}
#d{
    position: absolute;
    top: 37px;
    left: 151px;

    rotate: 9deg;
}