I'm trying to create a HTML page, but everything goes to the top

So i'm trying to make a HTML page, however after I added the style, everything just stays at the very top of the screen, when removing the style, everything works perfectly fine

the style is

<style>
@font-face {
    font-family: 'Open Sans';
    src: url("./fonts/Open_Sans/OpenSans-VariableFont_wdth,wght.ttf");
}
* {
    margin: 0;
    padding: 0;
}
html, body{
    margin: 0px;
    width: 100%;
    height: 100%;
}
body {
    display: flex;
    justify-content: center;
}
.index{
    
    align-items: center;
}
.main-div{
    max-width: 390px;
    margin-left: auto;
    margin-right: auto;
}
#main-title {
    width: 390px;
    height: 124px;
}
#main-title h1 {
    font-family: 'Open Sans';
    font-style: normal;
    font-weight: 600;
    font-size: 48px;
    line-height: 130%;
    /* or 62px */

    text-align: center;
    letter-spacing: 0.02em;

    color: #000000;
    width: 390px;
    height: 124px;
}
#main-title h1 span {
    color: #2E66A7;
}
#main-image {
    margin-top: 48px;
    width: 310px;
    height: 239px;
}
#main-image img{
    width: 310px;
    height: 239px;
}
#main-input {
    margin-top: 40px;
    width: 340px;
}
#main-input p {
    font-family: 'Open Sans';
    font-style: normal;
    font-weight: 400;
    font-size: 16px;
    line-height: 22px;
    color: #000000;
    width: 41px;
    height: 22px;
    margin-left: 4px;
}

.text input{
    margin-top: 4px;
    border: 1px solid #C1D3E8;
    border-radius: 10px;
    width: 320px;
    height: 59px;
    font-family: 'Open Sans';
    font-style: normal;
    font-weight: 400;
    font-size: 20px;
    line-height: 27px;
    padding-left: 20px;
}
#main-input-submit{
    margin-top: 16px;
    display: flex;
    width:100%;
    justify-content: center;

}
#main-input-submit input{
    background-color: #2E66A7;
    color: white;
    width: 340px;
    height: 59px;
    border-radius: 10px;
    font-family: 'Open Sans';
    font-style: normal;
    font-weight: 700;
    font-size: 20px;
    line-height: 27px;

    color: #FFFFFF;
}
.subscribe-title {
    margin-top: 235px;
    width: 649px;
    height: 116px;
    margin-left: auto;
    margin-right: auto;
}
.subscribe-title h1{
    font-family: 'Open Sans';
    font-style: normal;
    font-weight: 700;
    font-size: 48px;
    line-height: 130%;
    /* or 62px */

    text-align: center;
    letter-spacing: 0.02em;

    color: #000000;
}
.subscribe-subtitle {
    width: 982px;
    height: 26px;
}
.subscribe-subtitle h2{
    font-family: 'Open Sans';
    font-style: normal;
    font-weight: 700;
    font-size: 20px;
    line-height: 130%;
    /* identical to box height, or 26px */

    text-align: center;
    letter-spacing: 0.02em;

    color: #000000;
}
.subscribe-subtitle h2 a{
    color: #2E66A7;
    text-decoration: none;
}
</style>

I have tried removing some parts of the code and/or adding some, but it has mostly resulted in the exact same thing, I've tried asking my friend but they haven't been able to answer and I'm not sure what happened myself (yes this is related to a school project).