@font-face{
    font-family: 'myFont';
    src:url('fonts/baguet-script-regular.otf') format('opentype');
}


        h1 {
            text-align: center;
            font-size: 110px;
            font-family: 'myFont';
            color: #000000; /* Set text color to black */
            text-shadow: 
                -1px -1px 0 #ffffff,  
                1px -1px 0 #ffffff,
                -1px 1px 0 #ffffff,
                1px 1px 0 #000000; /* White shadow with a slight offset to create an outline effect */
            
            padding: 20px;
   
        }
        h2 {
                text-align: center;
                font-size: 25px;
                
            }
        h3 {
                text-align: center;
                font-size: 35px;
                text-shadow:
                -1px -1px 0 #000000,  
                1px -1px 0 #ffffff,
                -1px 1px 0 #bb01e0,
                1px 1px 0 #ffffff;
                
                color: rgb(153, 0, 255);
            }
            h4 {
                text-align: center;
                font-size: 90px;
            }
            h5 {
                text-align: center;
                font-size: 20px;
            }
            u {
                text-align: center;
            }
            .rankings {
                column-count: 2;
                column-gap: 115px;
            }
        body {
                margin: 0;
        padding: 0;
        background: linear-gradient(to right, #d30000f8, white, #f1e320);
            }
            ul {
    list-style: none;
    margin: 0;
    padding: 0;
    width: 100%;
}

ul li {
    display: inline-block;
    position: relative;
}

ul li a {
    display: block;
    padding: 20px 25px;
    color: white;
    text-decoration: none;
    text-align: center;
    font-size: 25px;
}

ul li a:hover {
    background: rgb(196, 194, 105);
}

ul li:hover ul.dropdown {
    display: block;
}

li {
    margin-left: 10px;
    font-size: 18px;
    font-weight: bold;
    color: white;
}

.content-container {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    padding: 30px;
    gap: 20px; /* Add some gap between elements */
}

.side-text {
    width: 100%;
}

.content-box {
    width: 35%;
    border: 4px solid rgb(36, 61, 90);
    border-radius: 20px;
    box-shadow: 0px 4px 15px rgba(255, 255, 255, 0.5);
    text-align: center;
    padding: 30px;
}

ul.open {
    display: block;
}

@media (max-width: 768px) {

  body {
    background-attachment: scroll;
  }

  h1 {
    font-size: 60px;
  }

  h2 {
    font-size: 18px;
  }

  ul li {
    display: block;
    margin-left: 0;
  }

  ul li a {
    font-size: 20px;
    padding: 12px;
  }

  .content-container {
    flex-direction: column;
    padding: 15px;
  }

  .content-box {
    width: 100%;
  }

  .rankings {
    column-count: 1;
  }


  background-image:
    radial-gradient(white 1px, transparent 1px),
    radial-gradient(white 2px, transparent 2px),
    radial-gradient(white 1.5px, transparent 1.5px);
  background-size: 120px 120px, 200px 200px, 160px 160px;
  animation: snowFall 28s linear infinite;
}