@font-face { font-family: Century Gothic; src: url('./Images/Century\ Gothic.ttf'); }

body {
    display: flex;
    justify-content: center;
    align-items: center;
    background-color: #272932;
    font-family: Century Gothic;
}
.button-container {
    position: absolute;
    top: 15%;
    height: 50%;
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    width: 70%;
    left: 16.5%;
}

.button1,
.button2,
.button3 {
    width: 20vw; /* Adjust the width as needed */
    max-width: 20vw; /* Limit the maximum width for larger screens */
    top: 10%; /* Keep the same top position */
    border-radius: 2vw;
    cursor: pointer;
    transition: all 0.2s;
    border: 0.25vw solid;
}

.button1 {
    left: 0%; /* Use percentages for left position */
}

.button2 {
    right: 0%; /* Use percentages for right position */
}

.button3 {
    right: 0%; /* Use percentages for right position */
}

.button1:hover,
.button2:hover,
.button3:hover {
    width: 20vw; /* Adjust the width as needed */
    max-width: 20vw; /* Limit the maximum width for larger screens */
    top: 10%; /* Keep the same top position */
    border-radius: 2vw;
    cursor: pointer;
    transition: all 0.2s;
    border: 0.25vw solid;
    filter: brightness(80%);
}

.header {
    color: #ffffff;
    font-family: Century Gothic;
    font-size: 4vw; /* Responsive font size based on the viewport width */
    transition: all 0.7s;
    position: absolute;
    top: -2vw; /* Use percentages for top position */
}