Контейнер не отображается

@import url('https://fonts.googleapis.com/css2?family=Montserrat:ital,wght@0,100..900;1,100..900&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Montserrat:ital,wght@0,100..900;1,100..900&family=Poppins:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;0,800;0,900;1,100;1,200;1,300;1,400;1,500;1,600;1,700;1,800;1,900&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Montserrat:ital,wght@0,100..900;1,100..900&family=Poppins:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;0,800;0,900;1,100;1,200;1,300;1,400;1,500;1,600;1,700;1,800;1,900&family=Raleway:ital,wght@0,100..900;1,100..900&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Fredoka:[email protected]&family=Karla:ital,wght@0,200..800;1,200..800&family=Montserrat:ital,wght@0,100..900;1,100..900&family=Poppins:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;0,800;0,900;1,100;1,200;1,300;1,400;1,500;1,600;1,700;1,800;1,900&family=Raleway:ital,wght@0,100..900;1,100..900&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Fredoka:[email protected]&family=Karla:ital,wght@0,200..800;1,200..800&family=Montserrat:ital,wght@0,100..900;1,100..900&family=Nunito+Sans:ital,opsz,wght@0,6..12,200..1000;1,6..12,200..1000&family=Poppins:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;0,800;0,900;1,100;1,200;1,300;1,400;1,500;1,600;1,700;1,800;1,900&family=Raleway:ital,wght@0,100..900;1,100..900&display=swap');

body{
    background-color: #000;
    height: 2000px;
}

svg{
    width: 500px;
    height: 500px;
}

h1{
    text-align: center;
    font-weight: bold;
    font-size: 50px;
    color: white;
}

#svg{
    display: flex;
    justify-content: center;
    align-items: center;
    border: 3px;
    border-color: hsl(0, 0%, 40%);
}

#fon{
    background-repeat:no-repeat;
    background-attachment:fixed;
    background-position:40px 40px;
}

.glow{
    position: fixed;    
    top: calc(9% - 0px);
    left: calc(75% - 50px);
    border-radius: 50%;
    background-color: #dfaef6;
    box-shadow:
      0 0 60px 20px #ffffff,
      0 0 100px 35px #f0f,
      0 0 140px 50px #0ff;
    filter: blur(4px);
    animation:  moveGlowtwo 30s infinite ease-in-out;
    z-index: 10

}

.unglow{
    animation: fadeIn 1.5s ease-in-out;
}

.glow1{
    position: fixed;
    top: calc(50% - 20px);
    left: calc(50% - 20px);
    border-radius: 50%;
    background-color: #dfaef6;
    box-shadow:
      0 0 60px 20px #ffffff,
      0 0 100px 35px #f0f,
      0 0 140px 50px #0ff;
    filter: blur(4px);
    animation: moveGlow 25s infinite ease-in-out;
    z-index: 10
}

.unglow1{
    animation: fadeIn 2s ease-in-out;
}

.glow2{
    position: fixed;
    top: calc(50% - 20px);
    left: calc(5% - 10px);
    border-radius: 50%;
    background-color: #dfaef6;
    box-shadow:
      0 0 60px 20px #ffffff,
      0 0 100px 35px #f0f,
      0 0 140px 50px #0ff;
    filter: blur(4px);
    animation: moveglowthree 45s infinite ease-in-out;
    z-index: 1
}

.unglow2{
    animation: fadeIn 1s ease-in-out;
}

.links{
    display: flex;
    justify-content: center;
}

.buttonl{
    top: 5px;
    font-size: 20px;
    font-family: Montserrat;
    user-select: none;
    cursor: pointer;
    padding: 10px;
    text-decoration: none;
    color: white;
    position: relative;
    animation: links 1s ease;
    transition: 0.20s;
}

.buttonl::after{
    position: absolute;
    width: 100%;
    content: '';
    transform: scaleX(0);
    height: 3px;
    bottom: -2px;
    left: 0;
    background-color: #22314d;
    border-radius: 3px;
    transform-origin: bottom center;
    transition: transform 0.20s ease-out;
}

.buttonl:hover::after{
    transform: scale(1.1) scale(1);
    transform-origin: bottom center;
}

.logo {
    position: absolute;
    top: 0;
    left: 100px;
    width: 50px;
    margin: 0;
    padding: 0;
    padding-top: 20px;
    animation: links 1.2 ease-out;
}

#logo {
    width: 40px;
    height: auto;
    cursor: pointer;
    animation: links 1.2 ease-out;
}

#ets2, #terraria, #valorant{
    height: 450px;
    width: 350px;
    border: #22314d 4px solid;
    border-radius: 15px;
    color: white;
    z-index: 15;
    position: relative;
    backdrop-filter: blur(75px);
    transition: 0.40s;
    overflow: hidden;
    max-height: 520;
}

#products{
    display: flex;
    justify-content: center;
    justify-content: space-around;
    margin-top: 70px;
    margin-left: 250px;
    margin-right: 250px;
    user-select: none;
}

.games{
    text-align: center;
    font-family: "Poppins", sans-serif;
    font-size: 17px;
}

.imgets, .imgterraria, .imgvalorant{
    width: 300px;
    border:#22314d 2px solid;
    border-radius: 10px;
    display: flex;
    justify-content: center;
}

#imges{
    display: flex;
    justify-content: center;
}

.functions{
    text-align: center;
    font-family: "Poppins", sans-serif;
}

#ets2:hover, #terraria:hover, #valorant:hover{
    height: 500px;
}

.tableets2{
    text-align: center;
    font-family: "Poppins", sans-serif;
    margin: none;
}

#tableets2{
    display: flex;
    justify-content: center;
}

.up{
    width: 100%;
    height: 70px;
    backdrop-filter: blur(75px);
    position: sticky;
    top: 0;
    z-index: 100;
}

.et2p, .acona{
    font-family: "Montserrat", sans-serif;
    font-optical-sizing: auto;
    font-weight: 300;
    font-style: normal;
    text-align: center;
    margin-bottom: -20px
}

.aconadiv{
    margin-left: 20px;
    margin-right: 20px;
}

#ets2p{
    width: 50px;
    margin-left: 25px;
    z-index: 10;
    background-color: blue;
}

#trial{
    font-size: 38px;
    margin-bottom: 100px;
    text-align: left;
    margin-left: 20px;
    font-family: "Montserrat", sans-serif;
    opacity: .4;
}

.down{
    width: 350px;
    height: 100px;
}

#click{
    height: 20px;
    width: 50px;
    background-color:blue;
}

#blue-container {
    width: 200px; /* Задайте нужную ширину */
    height: 100px; /* Задайте нужную высоту */
    background-color: blue; /* Синий фон */
    margin-left: 20px; /* Отступ слева для отделения от trial */
    display: inline-block; /* Расположение рядом с другим контейнером */
    vertical-align: top; /* Выравнивание по верхнему краю */
}

@keyframes fadeIn {
    from {
      opacity: 0;
    }
    to {
      opacity: 1;
    }
}

@keyframes links {
    0%{
        top: -100px;
    }

    100%{
        top: 5px;
    }
}

@keyframes fade {
    0%{
        opacity: .100;
    }

    100%{
        opacity: .1;
    }
}
  

@keyframes moveGlow {
    0% {
        top: 50;
        left: 20;
    }
    25% {
        top: 40;
        left: calc(10% - 20px);
    }
    50% {
        top: calc(70% - 100px);
        left: calc(40% - 200px);
    }
    60% {
        top: calc(100% - 50px);
        left: 50;
    }
    100% {
        top: 50;
        left: 20;
    }
}

@keyframes moveGlowtwo {
    0% {
        top: 5;
        left: 10;
    }
    20% {
        top: calc(50% - 40px);
        left: calc(100% - 50px);
    }

    50% {
        top: calc(60% - 60px);
        left: 100;
    }
    75% {
        top: calc(70% - 60px);
        left: calc(20% - 90px);
    }
    100% {
        top: 5;
        left: 10;
    }
}

@keyframes moveglowthree {
    0% {
        top: calc(50% - 20px);
        left: calc(5% - 10px);
    }
    25% {
        top: calc(60% - 20px);
        left: calc(70% - 50px);
    }
    50% {
        top: 50;
        left: 10;
    }
    75% {
        top: calc(30% - 30px);
        left: calc(40% - 20px);
    }
    100% {
        top: calc(50% - 20px);
        left: calc(5% - 10px);
    }
}

@keyframes track {
    0%{
        top: 40%;
        left: -1000px;
    }
    60%{
        top: 40%;
        left: -1000px;
    }
    100%{
        top: 50%;
        left: -50px;
    }
}

<!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <link rel="website icon" href="SVG/Asset 7.svg">
        <link rel="stylesheet" href="style.css">
        <title>Blecus</title>
    </head>
            <div>
                <div class="unglow" id="fon">
                    <div class="glow"></div>
                </div>
                <div class="unglow1" id="fon">
                    <div class="glow1"></div>
                </div>
                <div class="unglow2" id="fon">
                    <div class="glow2"></div>
            </div>
        <div class="up">
            <div class="links">
                <a href="BLECUS.HTML" class="buttonl">about</a>
                <a href="products.html" class="buttonl">products</a>
                <a href="https://www.donationalerts.com/r/offerrand" class="buttonl" target="_blank">support the project</a>
                <div class="logo">
                    <svg id="logo" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 476.65 560.75">
                        <a xlink:href="index.html">
                        <defs>
                          <style>
                            .cls-1 {
                              fill: #e2e2e2;
                              opacity: .62;
                              stroke: #fff;
                              stroke-miterlimit: 10;
                            }
                          </style>
                        </defs>
                        <g id="Layer_1-2" data-name="Layer_1">
                          <path class="cls-1" d="M412.14,62.56c17.24,7.16,68.92,67.78,53.68,130.46-15.32,62.99-56.69,76.44-51.79,78.59,6.05,2.66,53.49,37.05,58.83,82.28,4.16,35.25,9.88,55.47-21.68,110.13-31.56,54.66-103.26,70.22-103.26,70.22l-145.68-2.87c-.07,0-.13.06-.13.13v28.65c0,.06-.06.11-.12.09-29.2-7.87-61.51-27.9-61.51-27.9,0,0-50.14-24.63-88.11-80.64C14.4,395.69-7.91,333.99,3.48,241.42,14.87,148.86,80.73,88.27,80.73,88.27c24.98-33.77,83.73-59.57,83.73-59.57,0,0,46.39-26.9,120.24-28.16,73.85-1.26,126.83,29.54,126.83,29.54l.6,32.49ZM403.47,170.03c.04-1.88.13-3.75.28-5.62,1.09-13,.25-75.15-115.95-73.07l-86.56.04.49,150.81,139.41-.71s0,0,0,0c0,0,61.1-16.74,62.33-71.47ZM202.38,302.44v164.95l142.17-1.63s66.48-11.58,67.96-80.85c0,0-4.05-72.26-68.93-80.85l-141.2-1.63Z"/>
                        </g>
                      </svg>
                </div>
            </div>
        </div>
        <div id="products">
            <div id="ets2">
                <h1 class="games">Euro Track Simulator 2</h1>
                <div id="imges">
                    <img src="ets.png" class="imgets">
                </div>
                <p class="functions">about functions</p>
                <div class="aconadiv">
                    <p class="acona">In this script there are functions for fun, such as fake lag, speedhack and other functions that are used for fun. You will be able to change the buttons to activate the function. While there is an opportunity to test the cheat for free, and find bugs while the cheat is still under development.</p>
                </div>
                <div class="down">
                    <h1 id="trial">Free trial</h1>
                    <div id="trial">Free trial</div>
                    <div id="blue-container"></div>
                </div>
            </div>
            <div id="terraria">
                <h1 class="games">Terraria</h1>
                <div id="imges">
                    <img src="terraria.png" class="imgterraria">
                </div>
                    <p class="functions">about functions</p>
                    <div class="aconadiv">
                        <p class="acona">In this script there are functions for fun, such as fake lag, speedhack and other functions that are used for fun. You will be able to change the buttons to activate the function. While there is an opportunity to test the cheat for free, and find bugs while the cheat is still under development.</p>
                    </div> 
                    <h1 id="trial">Free trial</h1>
            </div>
            <div id="valorant">
                <h1 class="games">Valorant</h1>
                <div id="imges">
                    <img src="valorant.png" class="imgvalorant">
                </div>
                <p class="functions">about functions</p>
                <div id="valp">
                    <p class="et2p">In this script there are functions for fun, such as fake lag, speedhack and other functions that are used for fun. You will be able to change the buttons to activate the function. While there is an opportunity to test the cheat for free, and find bugs while the cheat is still under development.</p>
                </div>
                    <h1 id="trial">Free trial</h1>
            </div>
        </div>
    </body>
</html>