:root {
    --bluebackground: #47B5FF;
    --blue_hover: #72c7ff;
    --greybackground: #F3F3F3;
    --side_padding: 15%;
    --shadow: 0 2px 5px rgb(99, 99, 99);
    font-family: Arial, Helvetica, sans-serif;
    scroll-behavior: smooth;
}

h1 {
    font-size: 2vw;
}

h2 {
    font-size: clamp(25px, 2.5vw, 60px) !important;
    margin: 5vw 0 1vw 0 !important;
}

h3 {
    color: white;
    font-size: clamp(25px, 2.1vw, 55px) !important;
    white-space: pre-line;
    text-align: center;
}

h4 {
    font-size: clamp(16px, 1.4vw, 30px) !important;
    margin-bottom: 2px !important;
}

h5 {
    font-size: clamp(15px, 1.5vw, 40px) !important;
    margin-bottom: 2px !important;
}


p {
    font-size: clamp(13px, 1.3vw, 30px) !important;

}

b {
    font-size: clamp(15px, 1.3vw, 30px) !important;
}

li {
    cursor: pointer;
}

a {
    font-size: clamp(13px, 1.7vw, 20px) !important;
    font-weight: bold;
    color: black;
    text-decoration: none;
    cursor: pointer;
}

button {
    color: white;
    border: none;
    background-color: var(--bluebackground);
    cursor: pointer;
}

button:hover {
    background-color: var(--blue_hover);
}

@media screen and (max-width: 800px) {
    :root {
        --side_padding: 10%;
    }

    h3 {
        font-size: clamp(18px, 3vw, 25px) !important;
    }

    p {
        font-size: clamp(10.8px, 2vw, 16px) !important;
    }

}

@media screen and (max-width: 480px) {
    :root {
        --side_padding: 2%;
    }

    h2 {
        margin-bottom: 10px !important;
    }

    h3 {
        color: var(--bluebackground);
        white-space: normal !important;
        padding-bottom: 10px !important;
        font-size: clamp(20px, 7vw, 30px) !important;
    }

    p {
        font-size: clamp(15px, 5vw, 20px) !important;
    }

}