*:not(dialog){
    position: relative;
    margin: 0;
    padding: 0;
    line-height: 1;
    box-sizing: border-box;
}
a, a:active, a:visited{
    text-decoration: none;
    color: inherit;
    display: inline-block;
}
body{
    background-color: rgb(255, 255, 255);
    font-family: sans-serif;
}

@media screen and (min-device-width: 901px){
    html{
        font-size: calc(100vw / 192);
    }
    
    .container, h2.title{
        width: 120rem;
        padding: 0 3rem;
    }
    .title{
        color: rgb(30, 30, 30);
        font-size: 4rem;
        font-weight: 700;
        line-height: 5rem;
    }
    main, section{
        width: 100%;
    }
    .section{
        display: flex;
        justify-content: center;
        padding: 4.5rem 0;
        flex-wrap: wrap;
    }
    .container--gray-bg{
        background-color: rgb(240, 240, 240);
        margin-bottom: -4.5rem;
        padding-bottom: 4.5rem;
    }
    .container--black-bg{
        background-color: rgb(30, 30, 30);
        margin-bottom: -4.5rem;
        padding-bottom: 4.5rem;
    }
    .container--gradient-bg{
        background: linear-gradient(139.64deg, rgb(30, 30, 30) 0.789%,rgb(30, 30, 30) 40.466%,rgb(62, 1, 22) 69.001%,rgb(113, 5, 43) 89.694%);
        margin: -4.5rem 0;
        padding: 4.5rem 3rem;
        display: flex;
        justify-content: space-between;
        gap: 2rem;
        flex-wrap: wrap;
    }
    .title--gray-bg{
        margin-top: -4.5rem;
        padding-top: 4.5rem !important;
        background-color: rgb(240, 240, 240);
    }
    .title--center-align{
        text-align: center;
    }
    .title--gradient-bg{
        width: 100%;
        /* padding: 4.5rem 0 !important; */
        color: white;
        text-align: center;
        flex-shrink: 0;
    }
    .title--black-bg{
        margin-top: -4.5rem;
        padding-top: 4rem !important;
        padding-bottom: 4rem !important;
        color: white;
        background-color: rgb(30, 30, 30);
    }
}

@media screen and (min-device-width: 320px) and (max-device-width: 900px)  {
    html{
        font-size: calc(100vw / 36);
    }
    .container, h2.title{
        width: 100%;
        padding: 0 3rem;
    }
    h2.title{
        font-size: 4rem;
        line-height: 5rem;
        padding: 2rem 3rem;
    }
    .container--gray-bg{
        background-color: rgb(240, 240, 240);
        /* margin-bottom: -4.5rem;
        padding-bottom: 4.5rem; */
    }
    .container--black-bg{
        background-color: rgb(30, 30, 30);
        /* margin-bottom: -4.5rem;
        padding-bottom: 4.5rem; */
    }
    .container--gradient-bg{
        background: linear-gradient(139.64deg, rgb(30, 30, 30) 0.789%,rgb(30, 30, 30) 40.466%,rgb(62, 1, 22) 69.001%,rgb(113, 5, 43) 89.694%);
        /* margin: -4.5rem 0;
        padding: 4.5rem 3rem; */
        display: flex;
        justify-content: space-between;
        gap: 2rem;
        flex-wrap: wrap;
    }
    .title--gray-bg{
        /* margin-top: -4.5rem;
        padding-top: 4.5rem !important; */
        background-color: rgb(240, 240, 240);
    }
    .title--center-align{
        text-align: center;
    }
    h2.title--gradient-bg{
        width: 100%;
        color: white;
        text-align: center;
        flex-shrink: 0;
        padding-left: 0;
        padding-right: 0;
        font-size: 3rem !important;
    }
    .title--black-bg{
        /* margin-top: -4.5rem;
        padding-top: 4rem !important;
        padding-bottom: 4rem !important; */
        color: white;
        background-color: rgb(30, 30, 30);
    }
}