*,*::before,*::after {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
}

body {
    background-color:#25252C;
}

.cover-art-image {
    width: 100vw;
}

.page-subtext {
    margin-bottom: 3vw;
    font-family: "grandstander", sans-serif;
    font-weight: 500;
    font-size: 4vw;
    color:#DDD7C6;
    -webkit-text-stroke-width: .03em;
    -webkit-text-stroke-color: #60A8F2;
    text-align: center;
    line-height: 1.5em;
}

/* about */

.about {
    background-color: #DDD7C6;
    margin:0;
    padding: 5vw 10vw 5vw 10vw;
    font-size:4vw;
    height: 45vw;
}

.about-picture {
    background-color: transparent;
    float:right;
    margin-left: 2vw;
    width:35vw;
}

.about-headline {
    background-color:transparent;
    text-transform: uppercase;
    font-family:"grandstander", sans-serif;
    font-weight:500;
    font-size:2em;
    color:#25252C;
    margin-bottom:-0.2em;
}

.about-subheadline {
    background-color:transparent;
    font-family:"Fredoka", sans-serif;
    font-weight:100;
    font-size:.8em;
    color: #B85667;
    margin-bottom: .5em;
}

.about-description {
    background-color:transparent;
    font-family:"Fredoka", sans-serif;
    font-weight:400;
    font-size: .5em;
    color: #25252C;
}

/* skill */

.skill {
    font-size:4vw;
    margin:0;
    padding: 2rem 2rem 2rem 2rem;
}

.skill-title {
    font-size:2em;
    text-align:center;
    text-transform:uppercase;
    font-family: "Grandstander", sans-serif;
    font-weight:500;
    color:#618578;
    -webkit-text-stroke-color: #DDD7C6;
    -webkit-text-stroke-width: .02em;
    background-color: transparent;
    clear:both;
}

.skill-subtitle {
    font-size:.8em;
    text-align:center;
    font-family: "Fredoka", sans-serif;
    font-weight:400;
    color:#DDD7C6;
    background-color: transparent;
    clear:both;
}

.skill-list {
    display:flex;
    flex-direction:column;
    justify-content:center;
    align-items:center;
    margin-top: 1em;
    row-gap:3vw;
}

.skill-list-1 {
    background-color:#618578;
    border-radius: .8em;
    border-style:solid;
    border-width:.1em;
    border-color:#DDD7C6;
    padding:.2em;
}
.skill-list-2 {
    background-color:#618578;
    border-radius: .8em;
    border-style:solid;
    border-width:.1em;
    border-color:#DDD7C6;
    padding:.2em;
}
.skill-list-3 {
    background-color:#618578;
    border-radius: .8em;
    border-style:solid;
    border-width:.1em;
    border-color:#DDD7C6;
    padding:.2em;
}
.skill-list-4 {
    background-color:#618578;
    border-radius: .8em;
    border-style:solid;
    border-width:.1em;
    border-color:#DDD7C6;
    padding:.2em;
}
.skill-list-5 {
    background-color:#618578;
    border-radius: .8em;
    border-style:solid;
    border-width:.1em;
    border-color:#DDD7C6;
    padding:.2em;
}

[class*="skill-list-column-"] {
    display:flex;
    flex-direction:row;
    justify-content:center;
    align-items:baseline;

}

.skill-list-column-1 {
    margin-left:10vw;
    margin-right:10vw;
    column-gap:3vw;
}

.skill-list-column-2 {
    margin-left:23vw;
    margin-right:23vw;
    column-gap:3vw;
}

[class*="skill-icon-"] {
    width:6vw;
    float:left;
    padding-top:.5vw;
    padding-left:.5vw;
    padding-bottom:1vw;
    background-color: transparent;
}

[class*="skill-name-"] {
    font-family: "grandstander", sans-serif;
    font-weight:400;
    font-size:.6em;
    font-style:italic;
    text-align:center;
    color:#DDD7C6;
    background-color:transparent;
    padding-top:2vw;
}

[class*="skill-description-"] {
    padding-top:.4em;
    font-family: "fredoka", sans-serif;
    font-weight:200;
    font-size:.4em;
    color:#DDD7C6;
    background-color:transparent;
    clear:both;
    align-self:center;
    text-align:center;
}

/* software experience */

.software {
    background-color:#DDD7C6;
    margin:2vw;
    padding:4vw;
    font-size:2vw;
    border-style: solid;
    border-width:4vw;
    border-color:#A6A297;
    border-radius: 2vw;; 
}

.software-headline {
    font-size:2em;
    font-family:"grandstander", sans-serif;
    font-weight:400;
    text-transform: capitalize;
    text-align: center;
    color:#25252C;
    background-color: transparent;
}

.software-items {
    margin-top:1.5em;
    display:flex;
    flex-direction:row;
    gap:0;
    background-color: transparent;
}

.software-column-1 {
    flex-grow:2;
    display:flex;
    flex-direction: column;
    gap:2em;
    justify-content:center;
    background-color:transparent;
}

.software-column-2 {
    flex-grow:1;
    display:flex;
    flex-direction: column;
    gap:2em;
    justify-content:center;
    background-color:transparent;
}
[class*="software-group-"] {
    background-color:transparent;
}

[class*="software-icon-"] {
    background-color: transparent;
    float:left;
    width:5vw;
    margin-right:2vw;
}

[class*="software-name-"] {
    font-size:1em;
    font-family:"grandstander", sans-serif;
    font-weight:400;
    text-transform: uppercase;
    color:#25252C;
    background-color: transparent;
}

[class*="software-experience-"] {
    font-size:.8em;
    font-family:"fredoka", sans-serif;
    font-weight:600;
    color:#25252C;
    background-color: transparent;
    padding-top:1vw;
}

/* Illustrations page */

.illustration-header {
    position:relative;
    margin:0;
    padding:0;
}

.illustration-nav {
    position:absolute;
    z-index:2;
}

.illustration-cover-art img {
    position:relative;
    z-index: 1;
    width:100vw;
}

.illustration-subheader {
    width:100vw;
    margin:0;
    padding: 2vw 10vw 2vw 10vw;
    background-color: #DDD7C6;
}

.illustration-subheader p {
    font-size:2.5vw;
    font-family:"fredoka", sans-serif;
    font-weight:500;
    text-align: center;
    color:#25252C;
    background-color: transparent;
}

.illustration-content {
    position:relative;
}

.illustration-accents {
    width:100vw;
    height:100%;
    position:absolute;
    z-index:1;
    display:flex;
    flex-direction:column;
    justify-content:space-around;
}
.illustration-accents img {
    width:100%
}

.illustration-content-content {
    padding:3vw 5vw 5vw 5vw;
    position:relative;
    z-index:2;
    display:flex;
    flex-direction:column;
    row-gap:2vw;

}

.image-spread {
    width:100%;
}

[class*="content-row-"] {
    width:100%;
    display:flex;
    flex-direction:row;
    column-gap:2vw;
}

.row-3-column {
    display:flex;
    flex-direction:column;
    row-gap:2vw;
    min-width:0;
}
[class*="illust-"] {
    min-width:0;
} 
[class*="column-illust-"] {
    min-height:0;
}

/* PROJECTS PAGE */

.projects-cover-art {
    width:100vw;
}

.project-page-description {
    padding-left:15vw;
    padding-right:15vw;
    font-family: "fredoka", sans-serif;
    font-weight:500;
    font-size:2vw;
    line-height: 3vw;
    color:#DDD7C6;
    text-align: center;
}

.project-page-description-bar {
    margin-top:2.5vw;
    margin-bottom:10vw;
    margin-left:40vw;
    margin-right:auto;
    width:20vw;
    height:.5vw;
    background-color: #DDD7C6;
}

/* Carousel section */
.project-section {
    margin-left:15vw;
    margin-right:15vw;
    margin-bottom:10vw;
}

#carouselBook {
    width:100%;
    position:relative;
}

#carouselBook > ul {
    padding:0;
    margin:0;
    list-style:none;
}

.slide {
    position:absolute;
    opacity:0;
    z-index:1;
    min-width:0;
}

.slide > img {
    min-width:0;
    width:100%;
}

.slide[data-active] {
    position:relative;
    opacity:1;
    z-index:2;
    transition:opacity .3s ease-in-out;
}

.new-line {
    clear:both;
    position:relative;
    display:block;
    margin-left:40%;
    margin-right:auto;
    padding:0;
}

.carousel-button {
    position:relative;
    font-size:6vw;
    color:#DDD7C6;
    background-color:transparent;
    border:none;
    cursor:pointer;
    padding:0 .5vw 0 .5vw;
    z-index:3;
}
.carousel-button:hover {
    background-color: rgba(255,255,255,.2);
    transition-duration: .3s;
}

.project-title {
    font-family: "grandstander", sans-serif;
    font-weight:500;
    font-size:5.5vw;
    text-align:center;
    text-transform:capitalize;
    color:#DDD7C6;
    margin-bottom:1vw;
}
.project-description {
    font-family: "fredoka", sans-serif;
    font-weight:400;
    font-size:2vw;
    text-align:center;
    line-height:3vw;
    color:#DDD7C6;
    margin-bottom:2vw;
}

#carouselComic {
    display:flex;
    flex-direction:row;
    justify-content:center;
    align-items: center;
    column-gap:1.5vw;
    margin-bottom:2vw;
}
#carouselComic > ul {
    list-style:none;
    position:relative;
}

#carouselBackground {
    position:relative;
}
#carouselBackground > ul {
    list-style:none;
}
#carouselBackground .slide > img {
    height:40vw !important;
    width:auto !important;
    margin-top:0;
    margin-bottom:0;
    margin-left:auto;
    margin-right:auto;
    display:block;
}

#carousel3d {
    position:relative;
}
#carousel3d > ul {
    list-style:none;
}
#carousel3d .slide > img {
    height:30vw !important;
    width:auto !important;
    margin-top:0;
    margin-bottom:0;
    margin-left:auto;
    margin-right:auto;
    display:block;
}

.visual-stock-image {
    width:100%;
    margin-bottom:1vw;
}

/* Project Page Background */
#projectContentWrapper {
    position:relative;
    margin:0;
    padding:0;
    width:100vw;
}
#projectContentFront{
    position:relative;
    margin:0;
    padding:0;
    width:100%
}
#projectContentBack {
    width:100%;
    height:100%;
    position:absolute;
    display:flex;
    flex-direction:column;
    justify-content: space-between;
    align-items:stretch;
    padding-top:20vw;
    padding-bottom:5vw;
    padding-left:5vw;
    padding-right:5vw;
    z-index:-1;
}

.sproing {
    min-width:0;
    width:40vw;
}
.sproing.blue {
    align-self:flex-end;
}
.sproing.pink {
    align-self:flex-start;
}