@font-face {
    font-family: "Bourgeois W00 Bold Cond It Alt";
    src: url("https://db.onlinewebfonts.com/t/7394ca0b24a3e54a0350b84d055c44af.eot");
    src:
        url("https://db.onlinewebfonts.com/t/7394ca0b24a3e54a0350b84d055c44af.eot?#iefix") format("embedded-opentype"),
        url("https://db.onlinewebfonts.com/t/7394ca0b24a3e54a0350b84d055c44af.woff2") format("woff2"),
        url("https://db.onlinewebfonts.com/t/7394ca0b24a3e54a0350b84d055c44af.woff") format("woff"),
        url("https://db.onlinewebfonts.com/t/7394ca0b24a3e54a0350b84d055c44af.ttf") format("truetype"),
        url("https://db.onlinewebfonts.com/t/7394ca0b24a3e54a0350b84d055c44af.svg#Bourgeois W00 Bold Cond It Alt")
            format("svg");
}

/*
* {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
}
*/

body {
    background-color: #fffedd;
}

html {
    scroll-padding-top: 80px; /* Adjust this value based on your nav height */
    scroll-behavior: smooth;
}

.grid {
    display: grid;
    grid-template-columns: repeat(12, 100px);
    /*grid-template-rows: repeat(12, 100px);*/
    /*grid-template-columns: repeat(12, 1fr);*/
    /*grid-template-rows: repeat(12, 1fr);*/
    grid-template-rows: auto;
    grid-gap: 15px;
    width: 1365px;
    /*background-color: aqua;*/
    /*color: crimson;*/
    margin: auto;
}
.cell {
    background-color: rgb(198, 198, 198);
    height: 100px;
}

/*This is all for the nav style --------------------------------------*/
/*
nav ul {
    list-style-type: none;
    padding: 0;
}
nav li {
    width: 350px;
    margin: 10px 0;
}
a {
    width: 100%;
    text-decoration: none;
    padding: 10px 20px;
    color: #000;
    font-family: "Bourgeois W00 Bold Cond It Alt";
    font-size: 2em;
}
a:hover {
    color: #fff;
    background: #333;
}
*/
/*Nav style ends  --------------------------------------THIS WAS MY ORIGINAL NAV*/

/* THIS IS THE NEW NAV. Claude AI helped me make the changes to the nav ONLY. You can see my original above for comparison-*/
nav {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    z-index: 1000;
    padding: 10px 0;
    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);
    background-color: #fffedd;
}
nav ul {
    list-style-type: none;
    padding: 0;
    display: flex;
    justify-content: space-between;
    max-width: 1200px;
    margin: 0 auto;
}
nav li {
    margin: 0 10px;
    /*text-align: center;*/
}
a {
    /*display: block;*/
    text-decoration: none;
    padding: 10px 20px;
    color: #390086;
    /*background: #ddd;*/
    font-family: "Bourgeois W00 Bold Cond It Alt";
    font-size: 2em;
}
a:hover {
    color: #fff;
    background: #333;
}
/*Nav style ends  --------------------------------------*/

.header {
    grid-column: 1/13;
    margin: 100px 0 0 0;
}
.headtext {
    /*display: grid;*/
    grid-column: 1/13;
    grid-row: 1;
    font-family: "mason-sans", sans-serif;
    font-weight: 400;
    font-style: normal;
    font-size: 146px;
    /*text-align: center;*/
    margin: 0 0 20px 0;
    color: #6d00ff;
}

h2 {
    color: #6d00ff;
}

.headimg {
    grid-column: 7/13;
    grid-row: 2;
}

.headshot {
    width: 650px;
}

#test {
    background-color: mediumpurple;
    width: 1440px;
}

.about {
    grid-column: 1/7;
    grid-row: 2;
    font-family: "proxima-nova", sans-serif;
    font-weight: 300;
    font-style: normal;
    font-size: 1.4em;
    padding: 0 0 0 17px;
    line-height: 1.4em;
    transform: translateY(-14px);
}

.about2 {
    grid-column: 1/7;
    grid-row: 3;
    font-family: "proxima-nova", sans-serif;
    font-weight: 300;
    font-style: normal;
    font-size: 1.4em;
    padding: 40px 0 0 17px;
    line-height: 1.4em;
    transform: translateY(-220px);
}

.about3 {
    grid-column: 7/13;
    grid-row: 3;
    font-family: "proxima-nova", sans-serif;
    font-weight: 300;
    font-style: normal;
    font-size: 1.4em;
    padding: 40px 23px 0 17px;
    line-height: 1.4em;
    transform: translateY(-32px);
}

.about4 {
    grid-column: 7/13;
    grid-row: 4;
    font-family: "proxima-nova", sans-serif;
    font-weight: 300;
    font-style: normal;
    font-size: 1.4em;
    padding: 0 23px 0 17px;
    line-height: 1.4em;
    transform: translateY(-72px);
}

.about5 {
    grid-column: 7/13;
    grid-row: 5;
    font-family: "proxima-nova", sans-serif;
    font-weight: 300;
    font-style: normal;
    font-size: 1.4em;
    padding: 0 23px 0 17px;
    line-height: 1.4em;
    transform: translateY(-375px);
}

/*Claude AI made this --------------------------------------------------*/
/* Decorative first letter (drop cap) styling */
.bio::first-letter {
    font-family: "mason-sans", sans-serif;
    font-size: 4em;
    float: left;
    line-height: 1;
    /*margin-right: 0.01em;*/
    padding: 2px 0 0 40px;
    font-weight: 700;
    color: #333;
}
/*Claude ends here --------------------------------------------------*/

.hirstbook {
    grid-column: 1/7;
    grid-row: 4;
    transform: translateX(-30px) translateY(-250px);
}

.hirstbookimg {
    width: 700px;
}

#influ {
    grid-column: 1/13;
    grid-row: 5;
    font-family: "mason-sans", sans-serif;
    font-weight: 400;
    font-style: normal;
    font-size: 100px;
    padding: 0 0 0 7px;
    margin: 200px auto 0;
    transform: translateY(50px);
}

.inf1 {
    grid-column: 1/7;
    grid-row: 8;
    font-family: "proxima-nova", sans-serif;
    font-weight: 300;
    font-style: normal;
    font-size: 1.4em;
    padding: 0 0 0 17px;
    line-height: 1.4em;
    /*transform: translateY(700px);*/
}

.inf0 {
    grid-column: 1/13;
    grid-row: 6;
}

.inf00 {
    grid-column: 1/13;
    grid-row: 7;
}

.board1img {
    width: 100%;
    margin-bottom: 20px;
}

.board2img {
    width: 100%;
}

.inf2 {
    grid-column: 7/13;
    grid-row: 8;
    font-family: "proxima-nova", sans-serif;
    font-weight: 300;
    font-style: normal;
    font-size: 1.4em;
    padding: 0 0 0 17px;
    line-height: 1.4em;
    /*transform: translateY(700px);*/
}

.inf3 {
    grid-column: 7/13;
    grid-row: 9;
    font-family: "proxima-nova", sans-serif;
    font-weight: 300;
    font-style: normal;
    font-size: 1.4em;
    padding: 0 0 0 17px;
    line-height: 1.4em;
    /*transform: translateY(700px);*/
}

.typefaces {
    grid-column: 1/7;
    grid-row: 9;
    transform: translateY(-100px);
}

.typefaceimg {
    width: 95%;
}

#contrib1 {
    grid-column: 1/13;
    grid-row: 10;
    font-family: "mason-sans", sans-serif;
    font-weight: 400;
    font-style: normal;
    font-size: 100px;
    /*padding: 0 0 0 7px;*/
    margin: 0 auto;
}

.cont1 {
    grid-column: 1/7;
    grid-row: 11;
    font-family: "proxima-nova", sans-serif;
    font-weight: 300;
    font-style: normal;
    font-size: 1.4em;
    padding: 0 0 0 17px;
    line-height: 1.4em;
}

.cont2 {
    grid-column: 7/13;
    grid-row: 11;
    font-family: "proxima-nova", sans-serif;
    font-weight: 300;
    font-style: normal;
    font-size: 1.4em;
    padding: 0 0 0 17px;
    line-height: 1.4em;
}

#anlyz-type {
    grid-column: 1/13;
    grid-row: 12;
    font-family: "mason-sans", sans-serif;
    font-weight: 400;
    font-style: normal;
    font-size: 100px;
    margin: 200px auto 0;
}

.mason {
    grid-column: 1/7;
    grid-row: 13;
}

.masonimg {
    width: 100%;
}

.a-type1 {
    grid-column: 7/13;
    grid-row: 13;
    font-family: "proxima-nova", sans-serif;
    font-weight: 300;
    font-style: normal;
    font-size: 1.4em;
    padding: 0 0 0 17px;
    margin: 35px 0 0 0;
    line-height: 1.4em;
}

#layout-a {
    grid-column: 1/13;
    grid-row: 14;
    font-family: "mason-sans", sans-serif;
    font-weight: 400;
    font-style: normal;
    font-size: 100px;
    margin: 120px auto 0;
}

.compo {
    grid-row: 15;
    grid-column: 1/13;
}

.compoimg {
    width: 100%;
}

.comp1 {
    grid-column: 1/7;
    grid-row: 16;
    font-family: "proxima-nova", sans-serif;
    font-weight: 300;
    font-style: normal;
    font-size: 1.4em;
    padding: 0 0 0 17px;
    line-height: 1.4em;
}

.comp1 p {
    margin: 0 0 40px 0;
}

.comp2 {
    grid-column: 7/13;
    grid-row: 16;
    font-family: "proxima-nova", sans-serif;
    font-weight: 300;
    font-style: normal;
    font-size: 1.4em;
    padding: 0 0 0 17px;
    /*margin: 0 ;*/
    line-height: 1.4em;
}

.comp2 p {
    margin: 0 0 40px 0;
}

.comp3 {
    grid-column: 1/7;
    grid-row: 17;
    font-family: "proxima-nova", sans-serif;
    font-weight: 300;
    font-style: normal;
    font-size: 1.4em;
    padding: 0 0 0 17px;
    line-height: 1.4em;
}

.comp4 {
    grid-column: 7/13;
    grid-row: 17;
    font-family: "proxima-nova", sans-serif;
    font-weight: 300;
    font-style: normal;
    font-size: 1.4em;
    padding: 0 0 0 17px;
    margin: 35px 0 0 0;
    line-height: 1.4em;
}