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

body {
    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%, rgb(255, 255, 255) 100%);
    z-index: 100;
}

#logo {
    padding: clamp(7px, 2vh, 17px);
    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: "Sofia Sans Extra Condensed", sans-serif;
    font-size: clamp(44px, 13vh, 18vw);
    font-weight: 300;
    display: inline-block;
    top: 1vh;
    position: fixed;
}

#verticalLine {
    background-color: #000;
    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: rgb(218, 218, 218) solid min(1vw, 10px);
    height: clamp(55px, 10vh, min(10vw, 125px));
    border-radius: 100%;
    display: inline-block;
    position: fixed;
    aspect-ratio: 1;

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

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

footer {
    background-color: rgb(218, 218, 218);
    width: 100%;
    margin-top: 25px;
    bottom: 0px;
    position: relative;
}

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

#editorContainer {
    padding-left: clamp(55px, 15vw, 125px);
    padding-right: clamp(55px, 15vw, 125px);
}

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;
}

#upload {

    margin: clamp(4px, 1vh, 2vw);
    border: rgb(218, 218, 218) solid min(1vw, 10px);
    height: clamp(55px, 10vh, min(10vw, 125px));
    border-radius: min(1vw, 10px);
    display: inline-block;

    aspect-ratio: 2;

    background: radial-gradient(rgb(255, 255, 255) 0%, rgb(218, 218, 218) 100%);

    font-size: clamp(10px, 15vw, 25px);
}