:root {
    --buttonsUnhovered: rgb(140, 147, 182);
    --buttonsHovered: rgba(65, 85, 173, 0.468);
}

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

.pt-serif-regular {
    font-family: "PT Serif", serif;
    font-weight: 400;
    font-style: normal;

    margin: 7px;
    padding: 10px;
    padding-top: 8px;
    border-radius: 7px;

    color: white;
    font-family: "PT Serif";
    font-weight: 400;
    font-style: normal;
    font-size: 25px;
    text-decoration: none;
    text-align: center;
}

.normal {
    background-color: var(--buttonsUnhovered);
    box-shadow: 0px -2px 0px -1px rgba(255, 255, 255, 0.39);
    transition: box-shadow 0.3s, background-color 0.3s;
}

.normal:hover {
    background-color: var(--buttonsHovered);
    box-shadow: 0px -2px rgb(255, 255, 255);
}

#play {
    max-width: fit-content;
}

h1 {
    margin: 10px;

    font-family: "PT Serif", serif;
    font-weight: 400;
    font-style: normal;
    
    color:white;

    font-size: clamp(40px, calc(20px + (400 - 20) * (100vw - 768px)/(1920 - 768)), 90px);
}

h2 {
    margin: 10px;

    font-family: "PT Serif", serif;
    font-weight: 400;
    font-style: normal;
    
    color:rgb(255, 255, 255);

    font-size: clamp(25px, calc(20px + (100 - 20) * (100vw - 768px)/(1920 - 768)), 50px);
}

p {
    margin: 1%;

    font-style: normal;
    font-size: large;
    color:rgb(255, 255, 255);
    
    width: 60%;
}

.pt-serif-bold {
  font-family: "PT Serif", serif;
  font-weight: 700;
  font-style: normal;
}

.footer {
    color: rgb(17, 14, 14);

    margin: auto;
    padding: 4px;
}