body {
    background-color: darkslategray;
    margin: 0;
    padding: 0;
    background-image: url(noise.png), url(background.png);
}


img {
    width: 5vh;
    height: 5vh;
}

#bar {
    width: 100%;
}
.container {
    display: flex;
    justify-content: space-evenly;
    backdrop-filter: blur(6px);
    padding: 1% 0;
    width: 90vw;
    height: 5vh;
    margin-left: auto;
    margin-right: auto;
    background-color: rgba(54, 56, 120, 0.1);
    border-radius: calc((1vh-1vw)/2);
    position: fixed;
    left: 5vw;
    top: 5vh;
    border-radius: 1vw;
    z-index: 1000;
    color: aliceblue;
    font-family: fantasy;
}

.sponsorMessage {
    position: relative;
    width: 100%;
    top: 10vmax;
    text-align: center;
    font-family: "Montserrat", sans-serif;
    font-weight: 900;
    font-size: 5vmax;
    text-shadow: 0px 0px 2vmax #EB0028; 
    color: #EB0028;
}

.gold_title {
    position: relative;
    width: 100%;
    top: 10vmax;
    text-align: center;
    font-family: "Montserrat", sans-serif;
    font-weight: 900;
    font-size: 4vmax;
    text-shadow: 0px 0px 2vmax #EB0028; 
    color: #EB0028;
    padding-top: 4vmax;
}

.gold {
    position: relative;
    display: flex;
    top: 13vmax;
    left: 20vmax;
    background-size: cover;
    height: 20vmax;
    width: 60vmax;
    text-align: center;
    font-family: "Montserrat", sans-serif;
    font-weight: 900;
    font-size: 6vmax; 
    justify-content: space-evenly;
}

.silver_title {
    position: relative;
    width: 100%;
    top: 10vmax;
    text-align: center;
    font-family: "Montserrat", sans-serif;
    font-weight: 900;
    font-size: 4vmax;
    text-shadow: 0px 0px 2vmax #EB0028; 
    color: #EB0028;
    padding-top: 5vmax;
}

.silver {
    position: relative;
    display: flex;
    top: 13vmax;
    left: 20vmax;
    background-size: cover;
    height: 20vmax;
    width: 60vmax;
    text-align: center;
    font-family: "Montserrat", sans-serif;
    font-weight: 900;
    font-size: 6vmax; 
    justify-content: space-evenly;
}

.bronze_title {
    position: relative;
    width: 100%;
    top: 10vmax;
    text-align: center;
    font-family: "Montserrat", sans-serif;
    font-weight: 900;
    font-size: 4vmax;
    text-shadow: 0px 0px 2vmax #EB0028; 
    color: #EB0028;
    padding-top: 11vmax;
}

.bronze {
    position: relative;
    display: flex;
    top: 13vmax;
    left: 18vmax;
    background-size: cover;
    height: 20vmax;
    width: 64vmax;
    text-align: center;
    font-family: "Montserrat", sans-serif;
    font-weight: 900;
    font-size: 6vmax; 
    justify-content: space-evenly;
}

.filgud {
    width: 20vmax;
    aspect-ratio: 1;
    background-image: url(logofilgud.jpg);
    background-size: cover;
}

.craft {
    width: 20vmax;
    aspect-ratio: 1;
    background-image: url(logo_craft.png);
    background-size: cover;
}

.horeca {
    width: 20vmax;
    aspect-ratio: 1;
    background-image: url(Horeca-Gold.png);
    background-size: cover;
}

.aqua {
    width: 20vmax;
    aspect-ratio: 1;
    background-image: url(aqua.png);
    background-size: cover;
}

.dacris {
    width: 20vmax;
    aspect-ratio: 1;
    background-image: url(dacris.png);
    background-size: cover;
}

.eti {
    width: 20vmax;
    aspect-ratio: 1;
    background-image: url(eti.png);
    background-size: cover;
}

.red {
    width: 20vmax;
    aspect-ratio: 1;
    background-image: url(red2.png);
    background-size: cover;
}

.prisum {
    width: 20vmax;
    aspect-ratio: 1;
    background-image: url(prisum.png);
    background-size: cover;
}
.sloop {
    width: 20vmax;
    aspect-ratio: 1;
    background-image: url(sloop.png);
    background-size: cover;
}


@media only screen and (max-aspect-ratio: 1) {

    .sponsorMessage {
        position: relative;
        width: 100%;
        top: 33vmin;
        text-align: center;
        font-family: "Montserrat", sans-serif;
        font-weight: 900;
        font-size: 10vmin;
        text-shadow: 0px 0px 2vmin #EB0028; 
        color: #EB0028;
    }

    .gold_title {
        position: relative;
        width: 100%;
        top: 10vmin;
        text-align: center;
        font-family: "Montserrat", sans-serif;
        font-weight: 900;
        font-size: 4vmin;
        text-shadow: 0px 0px 2vmin #EB0028; 
        color: #EB0028;
        padding-top: 38vmin;
    }
    
    .gold {
        position: relative;
        display: flex;
        top: 13vmin;
        left: 20vmin;
        background-size: cover;
        height: 20vmin;
        width: 60vmin;
        text-align: center;
        font-family: "Montserrat", sans-serif;
        font-weight: 900;
        font-size: 6vmin; 
        justify-content: space-evenly;
    }
    
    .silver_title {
        position: relative;
        width: 100%;
        top: 10vmin;
        text-align: center;
        font-family: "Montserrat", sans-serif;
        font-weight: 900;
        font-size: 4vmin;
        text-shadow: 0px 0px 2vmin #EB0028; 
        color: #EB0028;
        padding-top: 5vmin;
    }
    
    .silver {
        position: relative;
        display: flex;
        top: 13vmin;
        left: 20vmin;
        background-size: cover;
        height: 20vmin;
        width: 60vmin;
        text-align: center;
        font-family: "Montserrat", sans-serif;
        font-weight: 900;
        font-size: 6vmin; 
        justify-content: space-evenly;
    }
    
    .bronze_title {
        position: relative;
        width: 100%;
        top: 10vmin;
        text-align: center;
        font-family: "Montserrat", sans-serif;
        font-weight: 900;
        font-size: 4vmin;
        text-shadow: 0px 0px 2vmin #EB0028; 
        color: #EB0028;
        padding-top: 11vmin;
    }
    
    .bronze {
        position: relative;
        display: flex;
        top: 13vmin;
        left: 0vmin;
        background-size: cover;
        height: 20vmin;
        width: 100vmin;
        text-align: center;
        font-family: "Montserrat", sans-serif;
        font-weight: 900;
        font-size: 6vmin; 
        justify-content: space-evenly;
    }
    
    .filgud {
        width: 20vmin;
        aspect-ratio: 1;
        background-image: url(logofilgud.jpg);
        background-size: cover;
    }
    
    .craft {
        width: 20vmin;
        aspect-ratio: 1;
        background-image: url(logo_craft.png);
        background-size: cover;
    }
    
    .horeca {
        width: 20vmin;
        aspect-ratio: 1;
        background-image: url(Horeca-Gold.png);
        background-size: cover;
    }
    
    .aqua {
        width: 20vmin;
        aspect-ratio: 1;
        background-image: url(aqua.png);
        background-size: cover;
    }

    .red {
        width: 20vmin;
        aspect-ratio: 1;
        background-image: url(red2.png);
        background-size: cover;
    }

    .prisum {
        width: 20vmin;
        aspect-ratio: 1;
        background-image: url(prisum.png);
        background-size: cover;
    }
    .sloop {
        width: 20vmin;
        aspect-ratio: 1;
        background-image: url(sloop.png);
        background-size: cover;
    }
    

}