@font-face {
        font-family: Valorant;
        src: url(Valorant\ Font.ttf);
    }
    
    html {
        scroll-behavior: smooth;
    }
    
    .headline {
        font-family: 'Valorant';
        background-color: rgb(255, 70, 85);
        text-align: center;
        padding: 10px;
        width: fit-content;
        align-self: center;
        margin-top: 3%;
        font-size: 40px;
        border-radius: 20px;
        box-shadow: -5px 5px 5px;
    }
    
    h1 {
        font-family: 'Valorant';
        font-size: 40px;
        background-color: rgb(255, 70, 85);
        padding: 8px;
        border-radius: 20px;
        box-shadow: -5px 5px 5px;
        width: fit-content;
        align-self: center;
    }
    
    h2 {
        font-family: 'Valorant';
        font-size: 30px;
        background-color: rgb(255, 70, 85);
        padding: 8px;
        border-radius: 20px;
        box-shadow: -5px 5px 5px;
        width: fit-content;
        align-self: center;
    }
    
    h3 {
        font-family: 'Valorant';
        font-size: 25px;
        background-color: rgb(255, 70, 85);
        padding: 8px;
        border-radius: 20px;
        box-shadow: -5px 5px 5px;
        width: fit-content;
        align-self: center;
    }
    
    .p {
        background-color: white;
        font-size: 20px;
        box-shadow: -5px 5px 5px;
        border-radius: 20px;
        padding: 7px;
        margin-top: 0;
        margin-left: 10%;
        margin-right: 10%;
    }
    
    p a {
        color: rgb(255, 70, 85);
    }
    
    a:hover.head {
        text-decoration: none;
    }
    
    .Spiel {
        list-style-type: none;
        align-self: center;
        display: flex;
        flex-direction: row;
        font-family: 'Valorant';
    }
    
    .Spiel div {
        display: flex;
        flex-direction: column;
        text-align: center;
    }
    
    .hover a {
        font-size: 25px;
        text-decoration: none;
        position: relative;
        background-color: white;
        padding: 8px;
        color: rgb(255, 70, 85);
    }
    
    .popup {
        display: flex;
        flex-direction: column;
        font-size: 20px;
        text-decoration: none;
        color: black;
        background-color: white;
        padding: 8px;
        visibility: hidden;
        box-shadow: -5px 5px 5px;
        margin-top: 0;
    }
    
    .hover .popup::after {
        content: "";
        position: absolute;
    }
    
    .hover:hover .popup {
        visibility: visible;
    }
    
    a:hover {
        text-decoration: underline;
    }
    
    .Orbs {
        justify-content: space-between;
        align-self: center;
    }
    
    img {
        align-self: center;
    }
    
    .Abb {
        align-self: center;
        background-color: white;
        font-size: 20px;
        box-shadow: -5px 5px 5px;
        border-radius: 20px;
        padding: 7px;
        margin-top: 10px;
        margin-left: 10%;
        margin-right: 10%;
    }
    
    .Abb1 {
        margin-top: 50px;
    }
    
    .Spikes {
        display: flex;
        flex-direction: row;
        align-self: center;
        align-content: space-between;
    }
    
    .Spike {
        display: flex;
        flex-direction: column;
        margin-left: 150px;
    }