/* general */

html{
    font-family: 'Open Sans', sans-serif;
    font-size: 18pt;
    color: rgb(64, 59, 100);
    background-image: linear-gradient(180deg, rgba(181, 173, 230, 0.3), rgba(181, 173, 230, 0.2));
}


.container{
    margin-top: -5%;
    margin-left: 10%;
    margin-right: 10%;
    padding: 5%;
    background-image: linear-gradient(180deg, rgba(181, 173, 230, 0.4), rgba(181, 173, 230, 0.3));

}

.style-section{
    margin-top: 50px;
    padding-top: 10px;
    padding-left: 20px;
    padding-right: 20px;
    padding-bottom: 20px;
    border-radius: 20px;
    background-image: linear-gradient(180deg, rgba(181, 173, 230, 0.5), rgba(181, 173, 230, 0.3));
}

.section-label{
    padding-left: 20px;
    padding-top: 10px;
    padding-bottom: 10px;
    font-size: 0.8em;
    font-weight: 700;
}

.type-style{
    padding-top: 2px;
    padding-bottom: 20px;
    padding-left: 20px;
    margin-top: 10px;
    border-radius: 10px;
    background-image: linear-gradient(180deg, rgba(181, 173, 230, 1), rgba(181, 173, 230, 0.5));
}

.label{
    font-size: 0.6em;
    font-weight: 300;
    margin-top: 20px;
    margin-bottom: 5px;
}


/* header div */

.header{
    padding-left: 30px;
}

h1{
    font-size: 40pt;
    margin-bottom: 5px;
}

h2{
    padding-left: 10px;
    font-size: 15pt;
    margin-bottom: -10px;
}


/* font weight div */

#weight-300{
    font-weight: 300;
}

#weight-400{
    font-weight: 400;
}

#weight-500{
    font-weight: 500;
}

#weight-600{
    font-weight: 600;
}

#weight-700{
    font-weight: 700;
}

#weight-800{
    font-weight: 800;
}


/* font style div */

#style-normal{
    font-style: normal;
}

#style-italic{
    font-style: italic;
}

/* letter-spacing div */

#spacing-normal{
    letter-spacing: normal;
}

#spacing-wide{
    letter-spacing: 0.5em;
}

#spacing-narrow{
    letter-spacing: -0.1em;
}

/* text transfrom div */

#transform-none{
    text-transform: none;
}

#transform-uppercase{
    text-transform: uppercase;
}

#transform-lowercase{
    text-transform: lowercase;
}

#transform-capitalize{
    text-transform: capitalize;
}


/* text decoration div */

#decoration-none{
    text-decoration: none;
}

#decoration-underline{
    text-decoration: underline;
}

#decoration-linethrough{
    text-decoration:line-through;
}

#decoration-overline{
    text-decoration: overline;
}