/*PARENTS*/
    html{
        margin: 0px auto auto auto;
        background-color: #252138;
        max-width: 800px;
    }
    body {
        background-color: #252138;
        border-radius: 10px;
        font-family: Arial, Helvetica, sans-serif;
        vertical-align: middle;
        color: #231942;
        box-shadow: 3px 3px 0 0 rgba(0, 0, 0, 0.8);
    }
/*FILLABLES, INTERACTABLES*/
    button {
        margin: 10px;
        padding: 3px;
        border-radius: 10px;
        background-color: #e0b1cb;
        font-weight: bold;
        font-size: 18px;
        text-align: center;
        color: #231942;
        /*The transition CSS property is used to create smooth animations on elements when a specific action occurs, like when a user hovers over them.*/
        transition: background-color 0.20s;
    }
    /*in order for us to activate a transition on an element, we need to set a trigger like hover.  hover triggers the transition when we move our cursor over the linked element*/
    button:hover {
        background-color: #e0ccd7;
    }
    a {
        margin: 10px;
        display: block;
        text-align: center;
        border-radius: 10px;
        background-color: #e0b1cb;
        padding: 5px;
        font-weight: bold;
        color: #231942;
        transition: background-color 0.20s;
    }
    a:hover {
        background-color: #e0ccd7;
    }
    .result {
        margin: 10px;
        font-weight: bold;
        font-style: italic;
        text-align: center;
        border: solid 5px #e0b1cb;
        border-radius: 50px;
        background-color: #e0b1cb;
        padding: 3px 0 3px 0;
        height: 18px;
    }
    input, select {
        margin: 10px;
        padding: 5px;
        border-radius: 10px;
        background-color: #e0b1cb;
        color: rgb(110, 0, 101);
        transition: background-color 0.20s;
    }
    select:hover, input:hover {
        background-color: #e0ccd7;
    }
    textarea {
        margin: 10px;
        padding: 5px;
        border-radius: 10px;
        background-color: #e0b1cb;
        width: 75%;
        max-width: 500px;
        transition: background-color 0.20s;
    }
    textarea:hover {
        background-color: #e0ccd7;
    }
    .dropBtn {
        margin: 0px;
        padding: 10px;
        border-radius: 5px;
        border: solid 1px;
        flex: 1 1 auto;
    }
    .dropdown {
        position: relative;
        display: inline-block;
        flex: 1 1 auto;
    }
    .dropContent {
        visibility: hidden;
        position: absolute;
        width: 100%;
        opacity: 0;
        box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.4);
        z-index: 1;
        transition: opacity 0.15s ease-in-out, transform 0.15s ease-in-out;
        transform: scaleY(0);
        transform-origin: top;
    }
    .dropdown:hover .dropContent {
        visibility: visible;
        opacity: 1;
        transform: scaleY(1);
    }
/*TEXT*/
    h1 {
        text-align: left;
        padding: 3px 0 3px 0;
        margin: 0 10px 5px 10px;
    }
    h2 {
        text-align: center;
        border-radius: 25px;
        padding: 3px;
    }
    p {
        margin: 0 10px 5px 10px;
        border-radius: 10px;
        padding: 5px;
    }
    ul {
        columns: 2;
        margin: 20px 0 20px 0;
    }
    .raise {
        position: relative;
        bottom: 10px;
    }
/*SOURCES*/
    img {
        width: 75%;
        border-radius: 10px;
    }

    .paragraphImgRight {
        margin: 5px 0 5px 0;
        float: right;
        width: 30%;
    }

    .paragraphImgLeft {
        float: left;
        width: 30%;
    }

    .profileImg {
        width: 60%;
        max-width: 200px;
        margin: 0 10px 5px 10px;
    }
/*FLEX BOX*/
    .colCont {
        display: flex;
        flex-direction: column;
        background-color: #be95c4;
        padding: 5px;
        margin: 1px;
        border-radius: 5px;
    }

    .rowCont {
        display: flex;
        background-color: #be95c4;
        padding: 5px;
        margin: 1px;
        border-radius: 5px;
        align-items: center;
    }
    .rowItem1 {
        flex: 0 2 auto;
    }
    .rowItem2 {
        flex: 1 1 auto;
    }

    .dir {
        display: flex;
        justify-content: space-between;
        align-content: flex-start;
        flex-wrap: wrap;
    }
    .dirButton {
        margin: 0px;
        padding: 10px;
        border-radius: 5px;
        border: solid 1px;
        flex: 1 1 auto;
    }
/*MODAL IMAGE FORM*/
    .thumbnail {
        cursor: pointer;
        transition: transform 0.2s;
    }
    .thumbnail:hover {
        transform: scale(1.01);
    }
    #modal {
        display: none;
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        background-color: rgba(0, 0, 0, 0.8);
        z-index: 10;
    }
    #modalContent {
        position: absolute;
        top: 50%;
        left: 50%;
        max-width: 90%;
        max-height: 90%;
        transform: translate(-50%, -50%);
    }
    #modalClose {
        position: absolute;
        top: 5px;
        right: 15px;
        color: white;
        font-size: 30px;
        cursor: pointer;
    }