@import url('https://fonts.googleapis.com/css2?family=Vollkorn:wght@700&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Asul:wght@400;700&display=swap');

body {
    display: flex;
    justify-content: center;
    align-items: center;
    height: 100vh;
    margin: 0;
    background-color: #000;
}
.container {
    width: 60%;
    display: block;
    flex-wrap: wrap; /* Allow items to wrap to the next line */
    justify-content: space-between;
    align-items: center; /* Center items vertically */
    height: 80%; /* Set a height for the container */
}
.container a {
    font-family: 'Vollkorn', serif;
    font-weight: normal;
    font-size: 8vw; /* Adjust size dynamically based on viewport width */
    color: #77f; /* Text color */
    text-decoration: none; /* Remove underline */
    text-align: center; /* Center text */
    cursor: pointer;
    display: block; /* Use flexbox for centering */
    justify-content: center; /* Center horizontally */
    align-items: center; /* Center vertically */
    height: 25%; /* Each link takes up 25% of the container height */
}
h1 {
    font-family: 'Asul', Verdana, Tahoma, sans-serif;
    font-weight: bold;
    font-size: 6vw; /* Adjust size as needed */
    color: #77f; /* Text color */
    text-align: center; /* Center the title */
}
.container p {
    font-family: 'Asul', Verdana, Tahoma, sans-serif;
    font-size: 2vw; /* Adjust size dynamically based on viewport width */
    color: #ccc;
    line-height: 1.5; /* Increase line height for better readability */
    width: 80%; /* Set width to 80% */
    margin: 0 auto; /* Center the paragraph */
    padding-bottom: 40px; /* Add padding to the bottom of the container */
}