html,
body {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

body {
    background-color: #03224b;
    color: #FFF;
    display: flex;
    flex-direction: column;
    min-height: 100vh;
}

header {
    width: 100vw;
    margin: 0;
    top: 0px;
    left: 0px;
    height: clamp(55px, 15vh, 125px);
    position: fixed;

    background: linear-gradient(0deg, rgba(255, 255, 255, 0) 0%, #03224b 100%);
    z-index: 100;
}

#logoBG {
    margin-top: clamp(7px, 2vh, 17px);
    height: calc(clamp(55px, 17vh, 22vw)*1.1);
    left: 50%;
    transform: translate(-50%, 0);
    position: fixed;
    aspect-ratio: 4.3;
    max-width: 90vw;
}

#logoBG>img {
    width: 100%;
    height: 100%;
}

#logo {
    padding: clamp(7px, 2vh, 17px);
    padding-top: clamp(14px, 4vh, 40px);
    height: clamp(55px, 15vh, 20vw);
    left: 50%;
    transform: translate(-92%, 0);
    position: fixed;
}

#HGPLogo {
    display: block;
    margin-left: auto;
    margin-right: auto;
    height: 80%;
    display: inline-block;
}

#titleText {

    font-family: "GFS-Didot", serif;
    font-size: clamp(44px, 13vh, 18vw);
    font-weight: 300;
    display: inline-block;
    top: clamp(11px, 3vh, 28px);
    position: fixed;
    transform: scaleX(0.9);
}

#verticalLine {
    background-color: #FFF;
    width: 2px;
    height: 60%;
    padding-top: 2vh;
    border-radius: 2px;
    display: inline-block;
    margin-left: 1vw;
    margin-right: 1vw;
}

.radialButton {
    margin: clamp(4px, 1vh, 2vw);
    border: #FFD800 solid min(1vw, 10px);
    height: clamp(55px, 10vh, min(10vw, 125px));
    border-radius: 100%;
    display: inline-block;
    position: fixed;
    aspect-ratio: 1;

    background: #8D2645;
    z-index: 101;
}

#content {
    flex: 1;
    margin-top: clamp(80px, calc(18vh + 50px), min(300px, 25vw));
    padding-left: clamp(55px, 15vw, 300px);
    padding-right: clamp(55px, 15vw, 300px);
    text-align: justify;
    font-family: "Crimson Text", serif;
    font-weight: 400;
    font-size: large;
}

footer {
    background-color: #8D2645;
    width: 100%;
    margin-top: 25px;
    bottom: 0px;
    position: relative;
    border-top: #FFD800 2px solid;
}

#footerContent {
    font-family: "Crimson Text", serif;
    font-size: medium;
    padding: 25px 0px;
    margin: auto;
    width: 50%;
    text-align: justify;
}

nav {
    width: 95%;
    border: rgb(218, 218, 218) solid min(1vw, 10px);
    padding: 20px;
    border-radius: min(1vw, 10px);
    display: inline-block;

    margin-bottom: 25px;

    background: radial-gradient(rgb(255, 255, 255) 0%, rgb(218, 218, 218) 100%);
    z-index: 101;
}