* {
    box-sizing: border-box;
    font-family: 'Calistoga', cursive;
    font-family: 'Poppins', sans-serif;
}

body {
    box-sizing: border-box;
    margin: 0px;
    padding: 20px;
    background-color: #2b2b2b;
    max-width: 1381px;
    margin: auto;
}

.navlinks {
    list-style: none;
    float: right;
    line-height: 80px;
    margin: 0;
    padding: 0;
}


.navlinks li {
    display: inline-block;
    margin: 0 20px;
}

.navlinks li a {
    color: #009F9F;
    text-decoration: none;
    font-size: 14px;
    font-family: 'Poppins', sans-serif;
    transition: all 0.3s linear 0s;
}

.navlinks li a:hover {
    color: #D6D5CD;
    font-weight: 700;
}

.main-nav a {
    color: #D6D5CD;
    text-decoration: none;
    font-size: 32px;
    transition: all 0.5s ease-in 0s;
    float: left;
    line-height: 80px;
    padding: 0;
    font-family: 'Calistoga', cursive;

}

.main-nav a:hover {
    transition: all 0.50s ease-out 0s;
    color: #009F9F;
}

/*
.hero {
        margin-top: 20px;
        height: 664px;
        width: 100%;
        background: url("sugar-space-hero@2x.png") bottom center; 
        background-size: cover;
        display: block;
        position: relative;
        overflow: hidden;
        object-fit: cover;
      }
*/

.hero {
    margin-top: 20px;
    height: 664px;
    width: 100%;
    display: inline-block;
    position: relative;
    overflow: hidden;
    transition: all 0.80s linear 0s;
}

.hero img {
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;


    /*
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;*/
}

.hero img:hover {
    opacity: 0.5;
    transition: all 0.3s linear 0s;
}

.hero .hero-text {
    position: absolute;
    z-index: 999;
    width: 100%;
    /*margin-left: 10px;
    margin-top: 580px;
    */
    left: 10px;
    bottom: 75px;
    color: #D6D5CD;
    line-height: 1rem;

}

.hero-text a {
    text-decoration: none;
    color: #D6D5CD;
    position: absolute;
    z-index: 999;
}

.hero-text h1 {
    font-size: 18pt;
    font-weight: normal;
}

.hero-text h2 {
    font-size: 14pt;
    font-weight: normal;
}

.hero-text h1:hover {
    font-weight: 700;
    transition: all 0.3s linear 0s;

}

.more {
    margin-top: 50px;
}

.more a {
    text-decoration: none;
    color: #D6D5CD;
    font-size: 14pt;
}

.more a:hover {
    font-weight: 700;
    color: #009F9F;
}

.top {
    display: block;
    margin-top: 80px;
    text-align: center;
}

.top a {
    text-decoration: none;
    color: #D6D5CD;
    font-weight: 200;
}

.top a:hover {
    color: #5d5d5d;
}

footer li {
    color: #D6D5CD;
    list-style: none;
    font-weight: 700;

}

footer a {
    text-decoration: none;
    color: #D6D5CD;
    font-weight: 400;
    color: #5d5d5d;
}

footer ul {
    padding: 0;
    display: flex;
    justify-content: space-between;
}

footer {
    width: 100%;
    margin-top: 50px;
}

footer a:hover {
    color: #009F9F;
}


.work {

    width: 100%;
    margin-top: 80px;
    display: flex;
    flex-wrap: wrap;
    padding: 0 4px;

}

.column {
    flex: 33%;
    max-width: 33%;
    padding: 0 4px;

}

.column img {
    margin-top: 8px;
    vertical-align: middle;
    width: 100%;
    height: 355px;
    object-fit: cover;


}

.column div {
    text-align: center;
    color: #D6D5CD;
    position: relative;

}

.column2 {
    flex: 33%;
    max-width: 33%;
    padding: 0 4px;

}

.column2 img {
    margin-top: 8px;
    vertical-align: middle;
    width: 100%;
    height: 355px;
    object-fit: cover;


}

.column2 div {
    text-align: center;
    color: #D6D5CD;
    position: relative;

}

.work-text {
    padding-top: 0.5rem;
    margin-bottom: .5rem;
    overflow: hidden;
    margin-top: 10px;
    margin-bottom: 20px;
    max-height: 30px;
}

.column img:hover {
    opacity: 0.5;
    transition: all 0.3s linear 0s;
}

.column2 img:hover {
    opacity: 0.5;
    transition: all 0.3s linear 0s;
}

.aboutme {
    display: flex;
    height: 600px;
    width: 100%;
}

.aboutme img {
    max-height: 400px;
    object-fit: cover;
}

.aboutme a:hover {
    color: #5d5d5d;
}

.textbox {
    margin-left: 1.5rem;
    color: #D6D5CD;
}

.textbox a {
    text-decoration: none;
    color: #009F9F;
    font-weight: 200;

}

.textbox h1 {
    color: #009F9F;
    font-weight: 600;
    font-size: 20pt;
}

.textbox h2 {
    color: #D6D5CD;
    font-weight: 400;
    font-size: 16pt;
}

.textbox2 {
    color: #D6D5CD;
}

.textbox2 h1 {
    color: #009F9F;
    font-weight: 600;
    font-size: 20pt;
}

.textbox2 h2 {
    color: #D6D5CD;
    font-weight: 400;
    font-size: 16pt;
}

.hobbies {
    display: flex;
    height: 600px;
    width: 100%;
}

.hobbiesimg {
    display: flex;
}

.hobbies img {

    height: 400px;
    width: 50%;
    object-fit: cover;
    margin-left: 1.5rem;

}

.resume {
    display: flex;
    width: 100%;
    color: #D6D5CD;
}

.resume div {
    width: 50%;
}

.resume h1 {

    color: #009F9F;
    font-weight: 600;
    font-size: 20pt;
}

.resume h2 {
    color: #D6D5CD;
    font-weight: 400;
    font-size: 16pt;
}

.right-resume {
    margin-left: 2rem;
}

.more {
    margin-top: 150px;
}

.more h2 {
    margin-bottom: -50px;
    color: #009F9F;
    font-weight: 400;
    font-size: 16pt;
}

.description {
    display: block;
    width: 50%;
    margin-top: 150px;
}

.description h1 {
    color: #009F9F;
    font-weight: 600;
    font-size: 20pt;
}

.description h2 {
    color: #D6D5CD;
    font-weight: 400;
    font-size: 16pt;
}

.description p {
    color: #D6D5CD;
}

.grid-wrap1 {
    position: relative;
    margin-top: 80px;
}

.grid-wrap1 ul li {
    list-style: none;
    transition: all 0.90s ease-out 0s;
}

.grid-wrap1 ul {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(100px, auto));
    grid-auto-flow: dense;
    grid-gap: 10px;
    justify-content: center;
    margin: 0 auto;
    padding: 0;
}

.grid-wrap1 ul li {
    position: relative;

}

.grid-wrap1 ul li:nth-child(1) {
    grid-row: span 3;
    grid-column: span 12;
}


.grid-wrap1 ul li:nth-child(2) {
    grid-row: span 3;
    grid-column: span 6;
}

.grid-wrap1 ul li:nth-child(3) {
    grid-row: span 3;
    grid-column: span 6;
}

.grid-wrap1 ul li:nth-child(4) {
    grid-row: span 1;
    grid-column: span 12;
}

.grid-wrap1 ul li:nth-child(5) {
    grid-row: span 1;
    grid-column: span 12;
}

.grid-wrap1 ul li:nth-child(6) {
    grid-row: span 3;
    grid-column: span 12;
}

.grid-wrap1 ul li:nth-child(7) {
    grid-row: span 2;
    grid-column: span 3;
}

.grid-wrap1 ul li:nth-child(8) {
    grid-row: span 2;
    grid-column: span 3;
}

.grid-wrap1 ul li:nth-child(9) {
    grid-row: span 2;
    grid-column: span 6;
}

.grid-wrap1 ul li:nth-child(10) {
    grid-row: span 2;
    grid-column: span 12;
}

.grid-wrap1 ul img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.grid-wrap2 {
    position: relative;
    margin-top: 80px;
}

.grid-wrap2 ul li {
    list-style: none;
    transition: all 0.90s ease-out 0s;
}

.grid-wrap2 ul {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(100px, auto));
    grid-auto-flow: dense;
    grid-gap: 10px;
    justify-content: center;
    margin: 0 auto;
    padding: 0;
}

.grid-wrap2 ul li {
    position: relative;
}

.grid-wrap2 ul li:nth-child(1) {
    grid-row: span 3;
    grid-column: span 12;
}

.grid-wrap2 ul li:nth-child(2) {
    grid-row: span 3;
    grid-column: span 12;
}

.grid-wrap2 ul li:nth-child(3) {
    grid-row: span 4;
    grid-column: span 12;
}

.grid-wrap2 ul li:nth-child(4) {
    grid-row: span 2;
    grid-column: span 12;
}

.grid-wrap2 ul li:nth-child(5) {
    grid-row: span 2;
    grid-column: span 12;
}

.grid-wrap2 ul li:nth-child(6) {
    grid-row: span 3;
    grid-column: span 12;
}

.grid-wrap2 ul li:nth-child(7) {
    grid-row: span 3;
    grid-column: span 12;
}

.grid-wrap2 ul li:nth-child(8) {
    grid-row: span 3;
    grid-column: span 12;
}


.grid-wrap2 ul img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}


.grid-wrap3 {
    position: relative;
    margin-top: 80px;
}

.grid-wrap3 ul li {
    list-style: none;
    transition: all 0.90s ease-out 0s;
}

.grid-wrap3 ul {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(100px, auto));
    grid-auto-flow: dense;
    grid-gap: 10px;
    justify-content: center;
    margin: 0 auto;
    padding: 0;
}

.grid-wrap3 ul li {
    position: relative;
}

.grid-wrap3 ul li:nth-child(1) {
    grid-row: span 3;
    grid-column: span 12;
}

.grid-wrap3 ul li:nth-child(2) {
    grid-row: span 1;
    grid-column: span 7;
}

.grid-wrap3 ul li:nth-child(3) {
    grid-row: span 1;
    grid-column: span 5;
}

.grid-wrap3 ul li:nth-child(4) {
    grid-row: span 2;
    grid-column: span 12;
}

.grid-wrap3 ul li:nth-child(5) {
    grid-row: span 2;
    grid-column: span 12;
}

.grid-wrap3 ul li:nth-child(6) {
    grid-row: span 3;
    grid-column: span 12;
}

.grid-wrap3 ul li:nth-child(7) {
    grid-row: span 3;
    grid-column: span 12;
}

.grid-wrap3 ul li:nth-child(8) {
    grid-row: span 3;
    grid-column: span 12;
}


.grid-wrap3 ul img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}







.grid-wrap4 {
    position: relative;
    margin-top: 80px;
}

.grid-wrap4 ul li {
    list-style: none;
    transition: all 0.90s ease-out 0s;
}

.grid-wrap4 ul {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(100px, auto));
    grid-auto-flow: dense;
    grid-gap: 10px;
    justify-content: center;
    margin: 0 auto;
    padding: 0;
}

.grid-wrap4 ul li {
    position: relative;
}

.grid-wrap4 ul li:nth-child(1) {
    grid-row: span 1;
    grid-column: span 12;
}

.grid-wrap4 ul li:nth-child(2) {
    grid-row: span 1;
    grid-column: span 5;
}

.grid-wrap4 ul li:nth-child(3) {
    grid-row: span 1;
    grid-column: span 7;
}

.grid-wrap4 ul li:nth-child(4) {
    grid-row: span 1;
    grid-column: span 6;
}

.grid-wrap4 ul li:nth-child(5) {
    grid-row: span 1;
    grid-column: span 6;
}

.grid-wrap4 ul li:nth-child(6) {
    grid-row: span 2;
    grid-column: span 12;
}


.grid-wrap4 ul img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}
/*
.image-grid {
    --gap: 16px;
    --num-cols: 3;
    --row-height: 300px;

    padding: var(--gap);
    display: grid;
    grid-template-columns: repeat(var(--num-cols), 1fr);
    grid-auto-rows: var(--row-height);
    gap: var(--gap);
}

.image-grid img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}
*/
/*
.image-grid img {
    object-fit: cover;
}
.image-grid {

    margin-top: 80px;
    display: grid;
  height:100vh;
    grid-template-columns: 1fr 1fr 1fr;
    grid-template-rows: 1fr 1fr .33fr .33fr 1fr 1fr .5fr;
    grid-template-areas:
    "content1 content1 content1"
    "content2 content3 content3"
    "content4 content4 content4"
    "content5 content5 content5"
    "content6 content6 content6"
    "content7 content8 content9"
    "content10 content10 content10";

    grid-gap: 1rem;
}

#content1 {
    border: 1px solid red;
    grid-area: content1;
}

#content2 {
    border: 1px solid red;
    grid-area: content2;
}

#content3 {
    border: 1px solid red;
    grid-area: content3;
}

#content4 {
    border: 1px solid red;
    grid-area: content4;
}

#content5 {
    border: 1px solid red;
    grid-area: content5;
}

#content6 {
    border: 1px solid red;
    grid-area: content6;
}

#content7 {
    border: 1px solid red;
    grid-area: content7;
}

#content8 {
    border: 1px solid red;
    grid-area: content8;
}

#content9 {
    border: 1px solid red;
    grid-area: content9;
}

#content10 {
    border: 1px solid red;
    grid-area: content10;
}
*/



.grid-wrap5 {
    position: relative;
    margin-top: 80px;
}

.grid-wrap5 ul li {
    list-style: none;
    transition: all 0.90s ease-out 0s;
}

.grid-wrap5 ul {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(100px, auto));
    grid-auto-flow: dense;
    grid-gap: 10px;
    justify-content: center;
    margin: 0 auto;
    padding: 0;
}

.grid-wrap5 ul li {
    position: relative;
}

.grid-wrap5 ul li:nth-child(1) {
    grid-row: span 1;
    grid-column: span 12;
}

.grid-wrap5 ul li:nth-child(2) {
    grid-row: span 1;
    grid-column: span 6;
}

.grid-wrap5 ul li:nth-child(3) {
    grid-row: span 1;
    grid-column: span 6;
}

.grid-wrap5 ul li:nth-child(4) {
    grid-row: span 1;
    grid-column: span 7;
}

.grid-wrap5 ul li:nth-child(5) {
    grid-row: span 1;
    grid-column: span 5;
}

.grid-wrap5 ul li:nth-child(6) {
    grid-row: span 2;
    grid-column: span 12;
}


.grid-wrap5 ul img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}


.grid-wrap6 {
    position: relative;
    margin-top: 80px;
}

.grid-wrap6 ul li {
    list-style: none;
    transition: all 0.90s ease-out 0s;
}

.grid-wrap6 ul {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(100px, auto));
    grid-auto-flow: dense;
    grid-gap: 10px;
    justify-content: center;
    margin: 0 auto;
    padding: 0;
}

.grid-wrap6 ul li {
    position: relative;
}

.grid-wrap6 ul li:nth-child(1) {
    grid-row: span 1;
    grid-column: span 12;
}

.grid-wrap6 ul li:nth-child(2) {
    grid-row: span 1;
    grid-column: span 4;
}

.grid-wrap6 ul li:nth-child(3) {
    grid-row: span 1;
    grid-column: span 8;
}

.grid-wrap6 ul li:nth-child(4) {
    grid-row: span 1;
    grid-column: span 12;
}

.grid-wrap6 ul li:nth-child(5) {
    grid-row: span 1;
    grid-column: span 6;
}

.grid-wrap6 ul li:nth-child(6) {
    grid-row: span 1;
    grid-column: span 6;
}

.grid-wrap6 ul li:nth-child(7) {
    grid-row: span 1;
    grid-column: span 3;
}
.grid-wrap6 ul li:nth-child(8) {
    grid-row: span 1;
    grid-column: span 3;
}
.grid-wrap6 ul li:nth-child(9) {
    grid-row: span 1;
    grid-column: span 3;
}
.grid-wrap6 ul li:nth-child(10) {
    grid-row: span 1;
    grid-column: span 3;
}

.grid-wrap6 ul li:nth-child(11) {
    grid-row: span 1;
    grid-column: span 12;
}
.grid-wrap6 ul li:nth-child(12) {
    grid-row: span 1;
    grid-column: span 12;
}

.grid-wrap6 ul img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.grid-wrap7 {
    position: relative;
    margin-top: 80px;
}

.grid-wrap7 ul li {
    list-style: none;
    transition: all 0.90s ease-out 0s;
}

.grid-wrap7 ul {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(100px, auto));
    grid-auto-flow: dense;
    grid-gap: 10px;
    justify-content: center;
    margin: 0 auto;
    padding: 0;
}

.grid-wrap7 ul li {
    position: relative;
}

.grid-wrap7 ul li:nth-child(1) {
    grid-row: span 1;
    grid-column: span 12;
}

.grid-wrap7 ul li:nth-child(2) {
    grid-row: span 1;
    grid-column: span 6;
}

.grid-wrap7 ul li:nth-child(3) {
    grid-row: span 1;
    grid-column: span 6;
}

.grid-wrap7 ul li:nth-child(4) {
    grid-row: span 1;
    grid-column: span 12;
}

.grid-wrap7 ul li:nth-child(5) {
    grid-row: span 1;
    grid-column: span 12;
}


.grid-wrap7 ul img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}


.grid-wrap8 {
    position: relative;
    margin-top: 80px;
}

.grid-wrap8 ul li {
    list-style: none;
    transition: all 0.90s ease-out 0s;
}

.grid-wrap8 ul {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(100px, auto));
    grid-auto-flow: dense;
    grid-gap: 10px;
    justify-content: center;
    margin: 0 auto;
    padding: 0;
}

.grid-wrap8 ul li {
    position: relative;
}

.grid-wrap8 ul li:nth-child(1) {
    grid-row: span 1;
    grid-column: span 12;
}

.grid-wrap8 ul li:nth-child(2) {
    grid-row: span 1;
    grid-column: span 5;
}

.grid-wrap8 ul li:nth-child(3) {
    grid-row: span 1;
    grid-column: span 7;
}

.grid-wrap8 ul li:nth-child(4) {
    grid-row: span 1;
    grid-column: span 12;
}

.grid-wrap8 ul li:nth-child(5) {
    grid-row: span 1;
    grid-column: span 4;
}

.grid-wrap8 ul li:nth-child(6) {
    grid-row: span 1;
    grid-column: span 8;
}

.grid-wrap8 ul li:nth-child(7) {
    grid-row: span 1;
    grid-column: span 5;
}
.grid-wrap8 ul li:nth-child(8) {
    grid-row: span 1;
    grid-column: span 7;
}


.grid-wrap8 ul img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}







.grid-wrap9 {
    position: relative;
    margin-top: 80px;
}

.grid-wrap9 ul li {
    list-style: none;
    transition: all 0.90s ease-out 0s;
}

.grid-wrap9 ul {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(100px, auto));
    grid-auto-flow: dense;
    grid-gap: 10px;
    justify-content: center;
    margin: 0 auto;
    padding: 0;
}

.grid-wrap9 ul li {
    position: relative;
}

.grid-wrap9 ul li:nth-child(1) {
    grid-row: span 1;
    grid-column: span 12;
}

.grid-wrap9 ul li:nth-child(2) {
    grid-row: span 1;
    grid-column: span 9;
}

.grid-wrap9 ul li:nth-child(3) {
    grid-row: span 1;
    grid-column: span 3;
}

.grid-wrap9 ul li:nth-child(4) {
    grid-row: span 1;
    grid-column: span 12;
}

.grid-wrap9 ul li:nth-child(5) {
    grid-row: span 1;
    grid-column: span 4;
}

.grid-wrap9 ul li:nth-child(6) {
    grid-row: span 1;
    grid-column: span 8;
}

.grid-wrap9 ul li:nth-child(7) {
    grid-row: span 1;
    grid-column: span 6;
}
.grid-wrap9 ul li:nth-child(8) {
    grid-row: span 1;
    grid-column: span 6;
}
.grid-wrap9 ul li:nth-child(9) {
    grid-row: span 1;
    grid-column: span 12;
}

.grid-wrap9 ul img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}


.grid-wrap10 {
    position: relative;
    margin-top: 80px;
}

.grid-wrap10 ul li {
    list-style: none;
    transition: all 0.90s ease-out 0s;
}

.grid-wrap10 ul {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(100px, auto));
    grid-auto-flow: dense;
    grid-gap: 10px;
    justify-content: center;
    margin: 0 auto;
    padding: 0;
}

.grid-wrap10 ul li {
    position: relative;
}

.grid-wrap10 ul li:nth-child(1) {
    grid-row: span 1;
    grid-column: span 12;
}

.grid-wrap10 ul li:nth-child(2) {
    grid-row: span 1;
    grid-column: span 7;
}

.grid-wrap10 ul li:nth-child(3) {
    grid-row: span 1;
    grid-column: span 5;
}

.grid-wrap10 ul li:nth-child(4) {
    grid-row: span 1;
    grid-column: span 12;
}

.grid-wrap10 ul li:nth-child(5) {
    grid-row: span 1;
    grid-column: span 12;
}

.grid-wrap10 ul li:nth-child(6) {
    grid-row: span 1;
    grid-column: span 12;
}

.grid-wrap10 ul li:nth-child(7) {
    grid-row: span 1;
    grid-column: span 12;
}


.grid-wrap10 ul img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}




.grid-wrap11 {
    position: relative;
    margin-top: 80px;
}

.grid-wrap11 ul li {
    list-style: none;
    transition: all 0.90s ease-out 0s;
}

.grid-wrap11 ul {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(100px, auto));
    grid-auto-flow: dense;
    grid-gap: 10px;
    justify-content: center;
    margin: 0 auto;
    padding: 0;
}

.grid-wrap11 ul li {
    position: relative;
}

.grid-wrap11 ul li:nth-child(1) {
    grid-row: span 1;
    grid-column: span 12;
}

.grid-wrap11 ul li:nth-child(2) {
    grid-row: span 1;
    grid-column: span 12;
}

.grid-wrap11 ul li:nth-child(3) {
    grid-row: span 1;
    grid-column: span 12;
}

.grid-wrap11 ul li:nth-child(4) {
    grid-row: span 1;
    grid-column: span 12;
}

.grid-wrap11 ul li:nth-child(5) {
    grid-row: span 1;
    grid-column: span 4;
}

.grid-wrap11 ul li:nth-child(6) {
    grid-row: span 1;
    grid-column: span 4;
}

.grid-wrap11 ul li:nth-child(7) {
    grid-row: span 1;
    grid-column: span 4;
}
.grid-wrap11 ul li:nth-child(8) {
    grid-row: span 1;
    grid-column: span 4;
}
.grid-wrap11 ul li:nth-child(9) {
    grid-row: span 1;
    grid-column: span 4;
}
.grid-wrap11 ul li:nth-child(10) {
    grid-row: span 1;
    grid-column: span 4;
}


.grid-wrap11 ul img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}



.grid-wrap12 {
    position: relative;
    margin-top: 80px;
}

.grid-wrap12 ul li {
    list-style: none;
    transition: all 0.90s ease-out 0s;
}

.grid-wrap12 ul {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(100px, auto));
    grid-auto-flow: dense;
    grid-gap: 10px;
    justify-content: center;
    margin: 0 auto;
    padding: 0;
}

.grid-wrap12 ul li {
    position: relative;
}

.grid-wrap12 ul li:nth-child(1) {
    grid-row: span 1;
    grid-column: span 12;
}

.grid-wrap12 ul li:nth-child(2) {
    grid-row: span 1;
    grid-column: span 6;
}

.grid-wrap12 ul li:nth-child(3) {
    grid-row: span 1;
    grid-column: span 6;
}

.grid-wrap12 ul li:nth-child(4) {
    grid-row: span 1;
    grid-column: span 12;
}

.grid-wrap12 ul li:nth-child(5) {
    grid-row: span 1;
    grid-column: span 12;
}

.grid-wrap12 ul li:nth-child(6) {
    grid-row: span 1;
    grid-column: span 5;
}

.grid-wrap12 ul li:nth-child(7) {
    grid-row: span 1;
    grid-column: span 7;
}
.grid-wrap12 ul li:nth-child(8) {
    grid-row: span 1;
    grid-column: span 6;
}
.grid-wrap12 ul li:nth-child(9) {
    grid-row: span 1;
    grid-column: span 6;
}
.grid-wrap12 ul li:nth-child(10) {
    grid-row: span 1;
    grid-column: span 6;
}

.grid-wrap12 ul li:nth-child(11) {
    grid-row: span 1;
    grid-column: span 6;
}


.grid-wrap12 ul img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}
@media screen and (max-width: 1000px) {
    .column div {
        flex-direction: column;
    }

    .column {
        flex: 50%;
        max-width: 50%;

    }

    .hero img {
        height: 100%;
    }

    .hero {
        height: 300px;
    }
}

@media screen and (max-width: 800px) {
    .column2 {
        flex: 100%;
        max-width: 100%;
    }
    
    
    .hero img {
        height: 100%;
    }

    .hero {
        height: 200px;
    }

    .aboutme {
        flex-direction: column;
        height: 100%;
    }

    .aboutme img {
        width: 75%;
    }

    .hobbies {
        flex-direction: column;
        height: 100%;
        margin-top: 3rem;

    }

    .hobbiesimg {
        flex-direction: column;

    }

    .hobbies img {
        width: 100%;
        margin-top: 1.5rem;
        margin-left: 0;
    }

    .resume {
        flex-direction: column;
        height: 100%;
        margin-top: 3rem;

    }

    .resume div {
        width: 100%;
    }

    .right-resume {
        margin-left: 0;
    }

    .textbox {
        margin-left: 0;
    }

    .description {
        width: 100%;
    }

    /*
.image-grid {
    --num-cols: 1;
    --row-height: 200px;
}
*/



}

@media screen and (max-width: 700px) {
    .column {
        flex: 100%;
        max-width: 100%;
    }

    .column2 {
        flex: 100%;
        max-width: 100%;
    }
    .grid-wrap1 ul {
        display: block;
    }
    .grid-wrap2 ul {
        display: block;
    }
    .grid-wrap3 ul {
        display: block;
    }
    .grid-wrap4 ul {
        display: block;
    }
    .grid-wrap5 ul {
        display: block;
    }
    .grid-wrap6 ul {
        display: block;
    }
    .grid-wrap7 ul {
        display: block;
    }
    .grid-wrap8 ul {
        display: block;
    }
    .grid-wrap9 ul {
        display: block;
    }
    .grid-wrap10 ul {
        display: block;
    }
    .grid-wrap11 ul {
        display: block;
    }
    .grid-wrap12 ul {
        display: block;
    }

}