@font-face {
    font-family: "verre";
    src:
    url("https://www.wizardtrick.com/asset/font/VerreSansSerif.ttf") format("ttf"),
    url("https://www.wizardtrick.com/asset/font/VerreSansSerifTest.otf") format("otf"),
    url("https://www.wizardtrick.com/asset/font/VerreSansSerif.woff2") format("woff2");
}

* {
    transition: all 1s;
    font: "verre";
}

::selection {
        color:white;
        text-shadow: 0 0 4px #ff000000;
        background-color:transparent;
    }

::selection:hover {
    text-shadow: 0 0 4px #ff0000ff;
}

body {
    display:flex;
    background-color: #400002;
    background-image: url("https://www.wizardtrick.com/asset/image/tile.jpg");
    background-size: 8rem 8rem;
    background-position: 1rem 1rem;
    text-shadow: 0 0 0 #00000000;
}

@keyframes flipAnimation {
  0% { transform: perspective(400px) rotateY(360deg); }
  50% { transform: perspective(400px) rotateY(0); }
  51% { transform: perspective(400px) rotateX(0); }
  100% { transform: perspective(400px) rotateX(360deg); }
}

#TheWiz {
    display:flex;
    filter:brightness(75%) sepia(100%);
    animation-name: flipAnimation;
    animation-duration: 3s;
    animation-timing-function: ease;
    animation-iteration-count: infinite;
    animation-direction: normal;
    animation-fill-mode: both;
}

header{
    justify-content:center;
    align-content:center;
    display:flex;
}

h1 {
    font-size:6em;
    color:NavajoWhite;
}

ul {
    list-style-type:none;
    margin:0;
    padding:0;
    display:flex;
}

ul li a {
    display:block;
    min-height:2em;
    min-width:2em;
    margin:2px;
    padding:1em;
    border-radius: 2em 1em 2em 1em;
    background-color:#00000066;
    text-shadow: 0 0 0 #00aaff00;
    align-content:center;
    justify-content:center;
    text-align:center;
}

ul li a:hover {
    color:#00aaff;
    text-shadow: 0 0 4px #00aaffff;
}