@import url('https://fonts.googleapis.com/css2?family=Lora:ital,wght@0,400..700;1,400..700&display=swap');
body {
    margin: 0;
    display: grid;
    place-items: center; /* Centers both horizontally and vertically */
    min-height: 100vh; /* Ensures the body takes up the full screen height */
    align-items: center; /* Centers content vertically */
    font-family: 'Lora', sans-serif;
    color: #fcdf03;

}

body.gradient {
    background: #2d5b69;
    background: radial-gradient(circle, rgba(45, 91, 105, 1) 0%, rgba(15, 14, 92, 1) 10%, rgba(3, 0, 13, 1) 100%);
    background-repeat: no-repeat;
    background-size: cover;
    background-position: center;
    min-height: 100vh;
}

h1 {
    /*font-size: clamp(1.5rem, 4vw + 1rem, 3rem);*/
}

p {
    text-align: center;
    font-size: 1.1rem;
}

#logo-section img {
    width: 300px;
    height: auto;
    max-width: 80vw;
}

#top-section {
    padding: 0 1rem;
}

#middlesection {
    padding: 0 1rem;
}

@media (max-width: 768px) {
    h1 {
        font-size: 1.75rem;
        text-align: center;
    }
}