/* BODY ELEMENT: Styling own chosen selectors and values. */

body {
    font-family: Arial, Helvetica, sans-serif;
    background: linear-gradient(to right, #710462, #2B1055 70%);
    min-height: 100vh;
}

/* MAIN ELEMENT: Styling own chosen selectors and values. */

main {
    background-color: rgba(255, 255, 255, 0.96);
    border: 2px solid transparent;
    border-radius: 30px;
    box-shadow: 5px 5px 50px #E77A94;
    margin: 5% auto;
    max-width: 700px;
    }

/* H1 ELEMENT: Styling selector with own chosen values. */

h1 {
    font-size: 2rem;
    font-weight: 700;
    padding-bottom: 10px;
    text-shadow: 0 1px 4px rgba(250, 93, 20, 0.65);
    color:#2D105A;
}

/* SECTION ELEMENT WITH .LIST-STYLING class selector: Styling own chosen selectors and values. */

.list-styling {
    padding: 25px;
    max-width: 100%;
    text-align: center;
    width: 80%;
}

/* .TODO-LIST CLASS SELECTOR: Styling FCC selector with own chosen values. */

.todo-list>li {
    line-height: 1.5;
    list-style-type: none;
    background: linear-gradient(to bottom, #FFD2A6, #F5A3A8) padding-box,
    linear-gradient(180deg, #FFD2A6, #F5A3A8) border-box;
    border: 2px solid transparent;
    border-radius: 10px;
    box-shadow: 2px 2px 20px #F5A3A8;
    color: #3A1C5A;
    margin: 12px auto; 
    padding: 15px 20px;
}

/* .SUB-ITEM CLASS SELECTOR: Styling FCC selector with own chosen values. */

.sub-item {
    margin-top: 7px;
    padding-right: 50px;
    padding-bottom: 5px;
}

.sub-item li {
    color: #710462;
    line-height: 1.5;
    list-style-type: none;
    margin: 5px auto;
}

/* ANCHOR ELEMENTS */

/* .SUB-ITEM-LINK CLASS SELECTOR: Styling FCC selectors with own chosen values. */

a {
    text-decoration: none;
}

a.sub-item-link:link
{
    color: #C94A00;
}

a.sub-item-link:visited {
    color: rgba(250, 93, 20, 0.65);
}

a.sub-item-link:hover {
    color: #B7003F;
}

a.sub-item-link:active {
    color: rebeccapurple;
}

a.sub-item-link:focus {
    color: #3A1C5A;
    outline: 1px 1px #3A1C5A;
}

/* FOOTER ELEMENT: Styling selector with own chosen values. */

footer {
    color: rgba(255, 255, 255, 0.96);
    font-size: 0.9rem;
    margin: 20px auto;
    padding: 10px 0;
    text-align: center;  
}

footer p {
    margin: 0;
}