.mobile-warning {
    display: none;
    position: fixed;
    inset: 0;
    background: #F1C4D7;
    z-index: 9999;
    justify-content: center;
    align-items: center;
    text-align: center;
    padding: 2rem;
    font-family: "IBM Plex Mono";
    color: #606060;
    font-size: 1.1rem;
    line-height: 1.6;
}

@media (max-width: 1200px) {
    .mobile-warning {
        display: flex;
    }
}

body{
    font-family: "IBM Plex Mono";
    /* background-image: url("assets/img.png"); */
    background: #F1C4D7;
    color: #606060;
    text-align: center;
    font-style: normal;
    font-weight: 400;
    line-height: normal;
    height: 95vh;

    display: flex;
    justify-content: center;
    align-items: center;
}

h1 {
    font-size: 2rem;
    margin: 0;
}

p {
    font-size: 1.25rem;
    text-align: left;
    margin: 0.25rem;
}

p1 {
    font-size: 1.25rem;
    text-align: left;
    color:#d8b4c3;
    font-style: italic;
}

a {
    text-decoration: none;
    color: var(--text-color, #606060);
    font-size: 1.25rem;
}

.finder{
    display: flex;
    align-items: stretch;
    flex-shrink: 0;
    border-radius: 0.9375rem;
    border: 3px solid var(--stroke, #E6E6E6);
    background: #F7F7F7;
    box-shadow: 12px 10px 20px 0 rgba(0, 0, 0, 0.15);
}

.finder#home{
    width: 60vw;
    height: 45vh;
}

.finder#projects{
    width: 85vw;
    height: 70vh;
}

.finder#projectindividual{
    width: 85vw;
    height: 80vh;
}

.finder#about{
    width: 60vw;
    height: 60vh;
}

.navigation {  
    display: flex;
    width: 10.8125rem;
    padding: 1.1875rem 1.3125rem;
    flex-direction: column;
    align-items: flex-start;
    gap: 1.1875rem;
    border-radius: 0.9375rem 0 0 0.9375rem;
    border-right: 3px solid var(--stroke, #E6E6E6);
    background: #ECECEC;
}

.navigation a {
    color: var(--text-color, #606060);
    font-family: "IBM Plex Mono";
    font-size: 1.25rem;
    font-style: normal;
    font-weight: 400;
    line-height: normal;
}

.navigation p{
    font-size: 0.9375rem;
    color: #808080;
    margin: 0;
}

.navigation ul{
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 0.375rem;
    align-self: stretch;
    padding-left: 0px;
    margin: 0;
}
#decorationbuttons{
    display: flex;
    align-items: center;
    gap: 0.6875rem;
}

.vertical-flex {
    display: flex;
    flex-direction: column;
    align-items: stretch;
    align-self: stretch;
    flex: 1;
    min-width: 0;
}

#contents {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 0.375rem;
    align-self: stretch;
}

#contents p{
    color: #939393;
}

#header {
    display: flex;
    padding: 1.1875rem 2.25rem;
    align-items: center;
    gap: 1.625rem;
    align-self: stretch;

    border-radius: 0 0.9375rem 0 0;
    border-bottom: 3px solid var(--stroke, #E6E6E6);
    background: #F4F4F4;
}

.folders {
    display: flex;
    justify-content: center;
    align-items: center;
    flex: 1;
    padding: 0.6875rem 2.25rem;
}

#top-align {
    align-items: start;
}

.folder {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    gap: 0.5625rem;
}

.horizontal-flex {
    display: flex;
    justify-content: center;
    align-items: center;
    justify-content: space-between;
    flex: 1;
}

.horizontal-flex img{
    width: 40%;
    height: auto;
    flex-shrink: 0;
}

.grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(10rem, 1fr));
    align-items: start;
    margin: 0;
    width: 100%;
    height: 100%;
    flex: 1;
    align-content: center;
    row-gap: 2rem;
    column-gap: 2rem;
}

.grid img {
    width: clamp(3rem, 8vw, 128px);
    height: auto;
    image-rendering: pixelated;
}

.all-sketch{
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: stretch;
    justify-content: space-between;
    flex: 1;
    height: 100%;     
}

#sketch-container {
    flex: 1;                  
    width: 100%;
    margin-bottom: 1rem;
    margin-top: 1rem;
    position:relative;
}

.fa-solid {
    color: #E2E2E2;
}

#header a{
    color: #606060;
}

#horizontal.all-sketch {
    flex-direction: row;
    flex: 1;
    align-items: stretch;
    justify-content: space-between;
}

#text-box {
    margin-right: 1rem;
    text-align: left;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    justify-content: flex-start;
    flex: 1;
    height: 100%;
    width: 70%;     
}