:root {
    --bg-colour: hsl(42, 58%, 49%);
    --module-bg-colour: hsl(46, 43%, 91%);
    --item-bg-colour: hsl(44, 54%, 93%);
    --font-colour: hsl(25, 43%, 33%);
    --main-font: 'Courier New', Courier, monospace;

    --margin: 1rem;

    --icon-height: 12rem;
    --icon-width: 12rem;

    --desc-height: 14rem;
    --desc-width: 10rem;

    --currently-width: 15rem;
    --currently-height: 20rem;

    --pics-width: 5rem;

    --titbit-height: 9rem;
    --titbit-width: 8rem;

    --fav-width: 14rem;
    --fav-height: 17rem;

    --other-height: 8rem;
    --other-width: 12rem;

    --skills-height: 13rem;
    --skills-width: 10rem;
}

html {
    font-size: clamp(1rem, 0.5rem + .9vw, 2rem);
}

#icon, #fav, #desc, #guestbook, #currently, #pics, #titbit, #other, #skills {
    position: absolute;
    background-color: var(--module-bg-colour);
    box-shadow: 0px 0px 5px 0px rgba(0, 0, 0, 0.15);
    -webkit-box-shadow: 0px 0px 5px 0px rgba(0, 0, 0, 0.15);
    -moz-box-shadow: 0px 0px 5px 0px rgba(0, 0, 0, 0.15);
    padding: .5rem;
}

body {
    height: 100vh;
    display: flex;
    align-items: stretch;
    justify-content: center;
    background-image: url(images/Moodboard2024.png);
    background-size: cover;
    background-position: top;
    color: var(--font-colour);
    font-family: var(--main-font);
    flex-wrap: wrap
}

#content {
    flex: 1;
    margin: clamp(2rem, 3rem, 4rem) clamp(2rem, 5rem, 9rem);
    position: relative;
}

#icon {
    height: var(--icon-height);
    width: var(--icon-width);
    transform: rotate(-1deg);
    padding: 0;
    background-size: cover;
}




#fav {
    width: var(--fav-width);
    height: var(--fav-height);
    transform: rotate(5deg);
    bottom: 0;
    right: 0;
    display: flex;
}

#favContent {
    overflow-y: auto;
    width: 100%;
    display: flex;
    flex-direction: column;
    gap: .6rem;
    padding: .5rem;
}

#favContent .item {
    -webkit-box-shadow: 0px 0px 6px 1px rgba(0, 0, 0, 0.08);
    box-shadow: 0px 0px 6px 1px rgba(0, 0, 0, 0.08);
    display: flex;
    border-radius: .5rem;
    align-items: center;
    transition: all 0.2s ease-in-out;
    padding: .2rem;
    background-color: var(--item-bg-colour);
}

#favContent .item:hover {
    transform: scale(1.05);
}

#favContent .icon {
    width: 2rem;
    max-height: 2rem;
    margin: .3rem;
    overflow: hidden;
    border-radius: .3rem;
    background-color: var(--bg-colour);
}

#favContent .icon img {
    width: 70%;
    margin: .5rem auto 0 auto;
    -webkit-box-shadow: 0px 5px 10px 5px rgba(0, 0, 0, 0.2);
    box-shadow: 0px 5px 10px 5px rgba(0, 0, 0, 0.2);
}

#favContent .desc {
    padding: 0 .4rem;
    flex: 1;
    display: flex;
    flex-direction: column;
    justify-content: center;
}

#favContent .item h1 {
    font-family: var(--main-font);
    font-size: .6rem;
    font-weight: 600;
}

#favContent .item h1 span {
    font-size: .4rem;
    font-family: var(--accent-font);
}

#favContent .item h2 {
    text-transform: uppercase;
    font-size: .5rem;
    color: var(--accent-font-color);
    line-height: .6rem;
}

.progressBar {
    width: 100%;
    height: .3rem;
    margin: .3rem auto;
    background-color: var(--secondary-bg-color);
    border-radius: 1rem;
    -webkit-box-shadow: 0px 0px 6px 1px rgba(0, 0, 0, 0.08) inset;
    box-shadow: 0px 0px 6px 1px rgba(0, 0, 0, 0.08) inset;
    overflow: hidden;
}

.progress {
    min-height: .5rem;
    background-color: var(--bg-colour);
    opacity: 70%;
}







#desc {
    width: var(--desc-width);
    height: var(--desc-height);
    transform: rotate(-8deg);
    top: calc(var(--icon-height) + var(--margin));
    left: -1rem;
    overflow-y: auto;
}

.tags {
    background-color: var(--bg-colour);
    color: var(--module-bg-colour);
    border-radius: 1rem;
    padding: .2rem .4rem;
    font-size: .5rem;
    margin: .1rem;
    text-transform: uppercase;
    width: fit-content;
    display: inline-block;
    transition: all 0.2s ease-in-out;
}

.tags:hover {
    transform: scale(1.05);
}

.text {
    font-size: .6rem;
    text-align: justify;
    margin: .5rem 0;
}




#currently {
    width: var(--currently-width);
    height: var(--currently-height);
    transform: rotate(15deg);
    bottom: -9rem;
    left: var(--icon-width);
    display: flex;
}

#currentlyContent {
    overflow-y: auto;
}

.currentlyItem {
    display: grid;
    grid-template-columns: 1fr 5fr;
    padding: .2rem .5rem;
    align-items: center;
    gap: .5rem;
}

.currentlyItem img {
    aspect-ratio: 1/1;
    transition: all 1s ease-in-out;
}

.currentlyItem img:hover {
    transform: rotate(360deg);
}

.currentlyItem .desc {
    font-size: .8rem;
    text-align: justify;
}

.currentlyItem .entry {
    font-size: .5rem;
    text-transform: uppercase;
}



#pics {
    width: var(--pics-width);
    transform: rotate(-22deg);
    top: -3rem;
    left: var(--currently-width);
    display: flex;
    flex-direction: column;
    gap: .5rem;
}

.picsItem {
    aspect-ratio: 1/1;
    filter: grayscale(.2);
    background-size: cover;
    transition: all .2s ease-in-out;
}

.picsItem:hover {
    transform: scale(1.05);
    /* filter: grayscale(0); */
}

.picsDesc {
    font-size: .5rem;
    text-align: center;
    text-transform: uppercase;
    color: var(--module-bg-colour);
}





#skills {
    transform: rotate(-15deg);
    width: var(--skills-width);
    height: var(--skills-height);
    bottom: calc(var(--fav-height) - 3rem);
    right: calc(var(--fav-width)/1.5);
    overflow-y: auto;
}

.skillItem {
    margin-bottom: .8rem;
}

.skillItem h1 {
    font-size: .8rem;
    line-height: 1rem;
}

.skillItem h2 {
    font-size: .4rem;
    text-transform: uppercase;
}






#titbit {
    width: var(--titbit-width);
    height: var(--titbit-height);
    transform: rotate(-18deg);
    top: calc(var(--currently-height));
    right: 1rem;
    overflow-y: auto;
}
#titbit h1, #other h1 {
    font-size: .8rem;
    text-decoration: underline wavy var(--bg-colour) .1rem;
    font-weight: bold;
}

#titbit ul {
    list-style-type: circle;
    padding: 0 1rem;
}

#titbit li {
    font-size: .5rem;
}




#other {
    transform: rotate(-4deg);
    width: var(--other-width);
    height: var(--other-height);
    bottom: -1rem;
    right: calc(var(--fav-width) + 1rem);
    overflow-y: auto;
}
#other img {
    margin: .5rem 0;
}