h1 {
    font-family: "Zalando Sans SemiExpanded", sans-serif;
    font-weight: medium;
    font-style: normal;
    text-decoration: none;
    text-align: center;
    list-style-type: none;
    color: linear-gradient(180deg, #AC7FCA 0%, #553B7E 100%);
}

h2 {
    font-family: "Alexandria", sans-serif;
    font-weight: normal;
    font-style: normal;
    color:rgb(76, 49, 140);
    text-decoration: none;
    list-style-type: none;
    padding-bottom: 10px;
    padding-top: 20px;
}

h3 {
    font-family: "Alexandria", sans-serif;
    font-weight: normal;
    font-style: normal;
    color:rgb(115, 80, 157);
    list-style-type: none;
    text-decoration: none;
    line-height: 1px;
    padding-top: 5px;
    padding-bottom: 10px;
}

h4 {
    font-family: "Alexandria", sans-serif;
    font-weight: normal;
    font-style: normal;
    color:rgb(117, 83, 158);
    list-style-type: none;
    text-decoration: none;
}

h5 {
    font-family: "Alexandria", sans-serif;
    font-weight: normal;
    font-style: normal;
    color:rgb(144, 113, 181);
    list-style-type: none;
    text-decoration: none;
    line-height: 1px;
}

h2 h3 {
    line-height: 1;
}

#spacing {
    margin-bottom: 40px;
}

img {
    border-radius: 10px;
    display: block;
    margin-left: auto;
    margin-right: auto;
    max-width: 100%
}

li {
    list-style-type: none;
}


p {
    font-family: "Alexandria", sans-serif;
    font-weight: 300;
    font-style: normal;
    color:rgb(92, 67, 122);
    padding-bottom: 10px;
}

body {
    background: radial-gradient(50% 50% at 50% 50%, #FDFAFF 0%, #F4E7FF 45.67%, #EBD9FB 76.44%, #E9D3FF 100%);
    margin: auto;
    max-width: 600px;
    padding-left: 20px;
    padding-right: 20px;
}


footer {
    display: block;
    background: linear-gradient(180deg, #D5BBEB 0%, #d0abf0 68.75%, #bd8ce8 100%);
    padding-bottom: 40px;
    padding-top: 20px;
    margin-top: 50px;
}


#footercontent {
    margin-left: 20px;
}



u {
    color:#553B7E;
}

#button {
    display: block;
    background-color:#e9cdff;
    max-width: 80px;
    border-radius: 10px;
    text-align: center;
    padding-right: 10px;
    padding-left: 10px;
    border:#eccffd ridge 2px;
}

#sssthumbnail {
    padding-top: 80px;
}

h2 nav ul li a {
    text-decoration: none;
    list-style-type: none;
}

#navigation {
    font-family: "Alexandria", sans-serif;
    font-weight: lighter;
    font-style: normal;
    color: rgb(86, 66, 143);
    text-decoration: none;
    padding-bottom: 40px;
}

#navigation ul {
    list-style-type: none;
    margin: 0;
    padding: 0;
}

#sss-box, #illustration-box, #mockup-box {
    box-sizing: border-box;
    border-radius: 10px;
    margin: auto;
    padding: 10px;
    background:#f1e0ff;
    border: solid 1px rgb(171, 132, 243);
    box-shadow: 0 5px 15.49px 0px rgba(0, 0, 0, 0.25);
}

a {
    text-decoration: none;
    font-family: "Alexandria", sans-serif;
    font-weight: normal;
    font-style: normal;
    color:#7e4ca2;
}

a:hover {
    color:#483B6F;
    font-weight: 500;
}

h1 a {
    color:#553B7E;
}

#navigation > ul {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
}

#navigation > ul > li {
    position: relative;
}

#navigation > ul > li > a {
    position: relative;
    z-index: 1;
}


#navigation ul li:hover .submenucasestudies {
    opacity: 1;
}

#navigation ul li:hover .mockups {
    opacity: 1;
}

#navigation ul li:hover .picnicday {
    opacity: 1;
}


#navigation ul li ul li a:hover {
    background: linear-gradient(180deg, #f5ebff 44.23%, #efddff 100%);
    border-radius: 2em;
    border: 1px solid rgb(202, 170, 236)
}



#navigation ul li a {
    display: block;
    width: 250px;
    height: 36px;
    text-align: center;
    line-height: 36px;
    padding: 0 10px;
    box-sizing: border-box;
    list-style-type: none;
    color: rgb(127, 68, 215);
    text-decoration: none;
}


.submenucasestudies {
    transition: all 500ms cubic-bezier(0.250, 0.100, 0.250, 1.000);
    opacity: 0;
    color:rgb(139, 111, 186);
    height: 0;
}

#casestudies:hover .submenucasestudies {
    opacity: 1;
    height: 36px;
}

#uiux:hover .mockups {
    opacity: 1;
    height: 36px;
}

#illustration:hover .picnicday {
    opacity: 1;
    height: 36px;
}

.mockups {
    transition: all 500ms cubic-bezier(0.250, 0.100, 0.250, 1.000);
    opacity: 0;
    color:rgb(139, 111, 186);
    height: 0;
}

.picnicday {
    transition: all 500ms cubic-bezier(0.250, 0.100, 0.250, 1.000);
    opacity: 0;
    color:rgb(139, 111, 186);
    height: 0;
}



#profile {
    margin-top: 50px;
}

#experience {
    margin-top: 20px;
}

#goals {
    display:flex;
    flex-direction: row;
    gap: 10px;
}

#line {
    border-bottom: double 3px;
    margin-top: 60px;
    margin-bottom: 40px;
    background: linear-gradient(270deg, #483B6F 0%, #6E6280 49.04%, #483B6F 100%);
}



@media only screen and (min-width: 600px) {
    body {
        max-width: 600px;
        margin: auto;
    }

    #navigation ul li a {
        max-width: 900px;
        justify-content: center;
    }

}


   




@media only screen and (min-width: 1020px) {
    header, footer {
        max-width: 1020px;
    }

    body {
        max-width: 1020px;
        padding-left: 10px;
        padding-right: 10px;
        
    }


    #sss-img {
        display: flex;
        justify-content: center;
        width: 800px;
        height: auto;
        margin: auto;   
    }

    #sss-img img {
        height: auto;
        justify-content: center;
        width: 800px;
        margin: auto;
    }

    #goals {
        display: flex;
        justify-content: center;
        width: 800px;
        height: auto;
        margin: auto;
    }

    #goals img {
        height: auto;
        justify-content: center;
        width: 800px;
        margin: auto;
    }

    #thumbnail {
        display: block;
        width: 800px;
        margin: 0 auto;
    }

    #thumbnail, #goals, #sss-img {
        width: 100%
    }

    #thumbnail img {
        width: 100%;
        height: auto;
        margin: 0 auto;
    }

    h1 {
        margin-left: 0;
        margin-right: auto;
    }

    

    #low-fidelity {
        display: flex;
        flex-direction: row;
        gap: 20px;
        justify-content: center;
        margin: auto;
    }

    #mid-fidelity {
        display: flex;
        flex-direction: row;
        gap: 20px;
        justify-content: center;
        margin: auto;
    }

    #mid-fidelity-color {
        display: flex;
        flex-direction: row;
        gap: 20px;
        justify-content: center;
        margin: auto;
    }

    #high-fidelity {
        display: flex;
        flex-direction: row;
        gap: 20px;
        justify-content: center;
        margin: auto;
    }

    #navigation ul li a {
        display: flex;
        max-width: 1020px;
        justify-content: center;
        margin: auto;
        list-style-type: none;
        text-decoration: none;
        width: 240px;
    }

   #line {
        border-right: 1px solid;
        color: rgb(126, 98, 196);
        margin-right: 10px;
    }

    #line2 {
        border-bottom: 1px solid;
        color: rgb(126, 98, 196);
        margin-top: 10px;
        margin-bottom: 10px;
    }

    #illustration-box {
        display: flex;
        gap: 30px;
        padding: 20px;
        justify-content: center;
        align-items: center;
    }

    #illustration-img {
        flex: 1;
    }

    #illustration-text {
        flex: 2;
    }

    #mockup-box {
        display: flex;
        gap: 30px;
        padding: 20px;
        justify-content: center;
        align-items: center;
    }

    #mockup-img {
        flex: 1;
    }

    #mockup-text {
        flex: 2;
    }

    #sss-box {
        display: flex;
        gap: 30px;
        padding: 20px;
        justify-content: center;
        align-items: center;
    }

    #sss-img {
        flex: 1;
    }

    #sss-text {
        flex: 2;
    }

    #profile {
        display: flex;
        margin-top: 50px;
        gap: 10px;
    }

    #about {
        flex: 1;
        margin-right: 10px;
    }

    #experience {
        flex: 1.5;
    }


    #home {
        border-right: 1px solid rgb(155, 127, 185);
    }

    #casestudies {
        border-right: 1px solid rgb(155, 127, 185);
        position: relative;
    }

    #uiux {
        border-right: 1px solid rgb(155, 127, 185);
        position: relative;
    }

    #illustration {
        position: relative;
    }

    #stickers {
        display: flex;
        flex-direction: row;
        gap: 20px;
        justify-content: center;
        margin: auto;
    }

    #pins {
        display: flex;
        flex-direction: row;
        gap: 20px;
        justify-content: center;
        margin: auto;
    }

    #merch {
        display: flex;
        flex-direction: row;
        gap: 20px;
        justify-content: center;
        margin: auto;
    }

    .mockups {
        position: absolute;
        top: 36px;
        left: 0;
        transition: all 500ms cubic-bezier(0.250, 0.100, 0.250, 1.000);
        opacity: 0;
        color:rgb(139, 111, 186);
    }

    .submenucasestudies {
        position: absolute;
        top: 36px;
        left: 0;
        transition: all 500ms cubic-bezier(0.250, 0.100, 0.250, 1.000);
        opacity: 0;
        color:rgb(139, 111, 186);
    }

    .picnicday {
        position: absolute;
        top: 36px;
        left: 0;
        transition: all 500ms cubic-bezier(0.250, 0.100, 0.250, 1.000);
        opacity: 0;
        color:rgb(139, 111, 186);
    }

    #profile {
        display: flex;
        gap: 40px;
        max-width: 1000px;
        margin: auto;
        margin-top: 50px;
    }

}