:root {
    --circle-pos1: 0%;
    --circle-pos2: 30%;
}

html {
    background-repeat:inherit;
    background-image: linear-gradient(#e8d6ee, #d3baee, #b1c3fa);
    font-family: "Poppins", sans-serif;
    scroll-behavior: smooth;
}

body {
    height: 100%;
    width: 100%;
    display: block;
    margin: 0;
}

h1 {
    font-size: clamp(5rem, 2.868vw, 8rem);
    font-family: "Berkshire Swash", serif;
    font-weight: 400;
}

h2 {
    font-size: clamp(3.5rem, 2.39vw, 6rem);
    font-family: "Berkshire Swash", serif;
    font-weight: 400;
}

h3 {
    font-size: 2rem;
    font-family: "Poppins", sans-serif;
    font-weight: 600;
}

h4 {
    font-size: clamp(1.5rem, 0.765vw, 2.3rem);
    font-family: "Poppins", sans-serif;
    font-weight: 400;
}

h5 {
    font-size: 1.2rem;
    font-family: "Poppins", sans-serif;
    font-weight: 400;
}

h6 {
    font-size: 1rem;
    font-family: "Poppins", sans-serif;
    font-weight: 400;
}

th {
    text-align: right;
    padding-right: 0.5rem;
}

tr {
    border-bottom: 1px solid #ddd;
}

a {
    text-decoration: none;
}

.warning {
    position: fixed;
    bottom: 3vh;
    right: 1vw;
    background-color: white;
    padding: 1.5rem;
    border-radius: 2rem;
}

.menu {
    position: sticky;
    width: 97vw;
    padding: 1vw;
    background-color: #b08adc;
    display: flex;
    align-items: center;
    text-align: center;
    justify-content: center;
    column-gap: 1rem;
}

.menuBtn{
    border: none;
    font-size: 1.2em;
    padding-left: 1.5rem;
    padding-right: 1.5rem;
    text-align: center;
    color: #48314E;
    background-color: #b08adc;
    display: flex;
    column-gap: 1rem;
    align-items: center;
}

#menuBtn:hover{
    color: #b08adc;
}

.simpleMenu {
    width: 25vw;
    margin: 1vw auto;
    margin-top: 0;
    padding: 1vw;
    height: 5vh;
    display: block;
    position:relative;
    bottom: 0;
    align-items: center;
    text-align: center;
}

.mainSection {
    display: grid;
    grid-template-columns: 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr; /* 10 colums*/
    grid-template-rows: 1fr 1fr 1fr 1fr;
    height: 80vh;
    margin: 2rem;
    margin-bottom: 20vh;
    gap: 1rem;
    align-items: center;
}

.logo {
    grid-column: 3 / span 6;
    text-align: center;
    padding: 3rem;
}


.home{
    font-family: "Berkshire Swash", serif;
    color: white;
    font-size: 6rem;
    margin: auto;
    text-align: center;
}

.name{
    font-family: "Berkshire Swash", serif;
    text-align: left;
    margin: auto;
    margin-top: 5vh;
}

.smallTitle{
    font-family: "Berkshire Swash", serif;
    font-size: 3rem;
    text-align: left;
    margin-top: 5vh;
}

.portfolio {
    display: grid;
    grid-column: 2 / span 8;
    grid-template-columns: 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr;
    text-align: left;
}

.Hscroll {
    width: 100vw;
    display: flex;
    overflow-y: hidden;
    overflow-x: scroll;
}

.about {
    display: flex;
    text-align: left;
    height: 90vh;
}

.window {
    background-color: #FFFFFF;
    border-top: 4vh #9c79a9 solid;
    border-radius: 2%;
    padding: 1rem;
}

.abText {
    grid-column: 1 / span 6;
    min-height: 45vh;
}

.abPic{
    grid-column: 7 / span 4;
    grid-row: 1 / span all;
    background-image: url(images/Headshot_2025.jpg);
    background-size: cover;
    background-position: bottom center;
    border-top: 2rem #9c79a9 solid;
    width: 28vw;
    height: 90%;
    margin-left: 4vw;
    border-radius: 1rem;
}

.abWindow {
    grid-column: 2 / span 4;
    grid-row: 1 / span 4;
    background-color: #EAE2ED;
    border-top: 2vh #9c79a9 solid;
    border-radius: 0 0 2% 2%;
}

.abBio {
    width: 90%;
    margin-bottom: 2rem;
    margin-left: 6vw;
    padding-bottom: 4rem;
}

.abRight{
    grid-column-start: 5;
    grid-column-end: span 4;
    float: left;
    text-align: left;
    overflow-wrap: auto;
}

.abtText {
    font-size: 1rem;
    padding: 1vw;
}

.abBtn {
    height: 8vh;
    width: 8vh;
    border: none;
    border-radius: 5rem;
    font-size: 2rem;
    background-color: #AB89B5;
    color: white;
    padding: 1rem;
    margin-left: 1rem;
    margin-right: 1rem;
}

#Ab3 {
    margin: inherit;
    text-align: center;
    font-size: 1.5rem;
}

.topText{
    grid-column-start: 1;
    grid-column-end: span 4;
    text-align: center;
}

.preview1{
    grid-column-start: 1;
    grid-column-end: span 2;
    grid-row: 3;
}

.preview2{
    grid-column-start: 3;
    grid-column-end: span 2;
    grid-row: 3;
}

.preview3{
    grid-column-start: 1;
    grid-column-end: span 2;
    grid-row: 4;
}

.preview4{
    grid-column-start: 3;
    grid-column-end: span 2;
    grid-row: 4;
}

.lgPreview {
    grid-column-start: 5;
    grid-column-end: span 6;
    grid-row: 1 / span 4;
    padding-left: 2rem;
    padding-right: 2rem;
    align-content: flex-end;
    height: 100%;
    width: 90%;
    background-image: url("images/WB_title.png");
    background-size: cover;
    background-repeat: no-repeat;
    background-position: bottom;
}

.preview {
    text-align: center;
    border-radius: 10%;
    cursor: pointer;
    display: flex;
    justify-content: flex-end;
}

.smallBox{
    background-color: white;
    padding: 1.5rem;
    padding-top: 1rem;
    height: 100%;
    background-repeat: no-repeat;
    background-size: 100%;
    width: 80%;
}

.pfLeft{
    width: 30%;
    margin: 2.5%;
    margin-left: 5%;
    float: left;
    text-align: left;
}

.pfRight{
    width: 40%;
    margin: 2.5%;
    float: right;
    text-align: left;
    overflow-wrap: scroll;
}

.pfText {
    height: 45vh;
    font-size: 1rem;
    background-color: #EAE2ED;
    padding: 0.5rem;
    margin: 0;
    overflow-y: scroll;
}

.pfBtn {
    height: 4rem;
    width: 4rem;
    border: none;
    border-radius: 1.5rem;
    font-size: 2.5rem;
    background-color: #AB89B5;
    text-align: center;
    color: white;
    margin-right: 2rem;
}

.pfBtn:hover {
    background-color: #e4ccec;
    color: #AB89B5;
}

.pfFloatBtn{
    height: 12vh;
    border: none;
    border-radius: 1rem 0 0 1rem;
    font-size: 3rem;
    background-color: white;
    color: #ab89b5;
}

.pfFloatBtn:hover{
    color: #593b62;
}

.leftArrow {
    grid-column: 1;
    grid-row: 2;
    display: flex;
    justify-content: flex-start;
    align-items: center;
}

.rightArrow {
    grid-column: 9;
    grid-row: 2;
    display: flex;
    justify-content: flex-end;
    align-items: center;
}

.content {
    grid-column: 1 / span all;
    grid-row: 2;
    background-color: white;
    border: 0.5rem #b08adc;
    border-radius: 0.5rem;
    margin-left: 2.5rem;
    margin-right: 2.5rem;
}

.project {
    display: grid;
    grid-template-columns: 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr;
    grid-template-rows: 0.5fr 1fr 1fr 1fr 0.5fr ; 
    gap: 1rem;
    margin: 1rem;
}

.pfTitle {
    grid-column: 1 / span 5;
    grid-row: 1;
    margin-top: 0.5rem;
}

.pfGallery{
    grid-column: 1 / span 5;
    grid-row: 2 / span 3;
    overflow: auto;
    white-space: nowrap;
    align-items: center;
    overflow-y: hidden;
}

.pfSpecs {
    grid-column: 6 / span 4;
    grid-row: 2;
}

.pfBio {
    grid-column: 6 / span 4;
    grid-row: 3 / span 3;
}

.pfLinks {
    grid-column: 1 / span 3;
    grid-row: 5;
}

.pfNav {
    grid-column: 1 / span all;
    grid-row: 5;
}

.sections {
    grid-column: 1 / span all;
    grid-row: 1;
    display: grid;
    grid-template-columns: 1fr 1fr 1fr;
    background-color: #EAE2ED;
    border-top-left-radius: 1vw;
    border-top-right-radius: 1vw;
    margin-left: 2.5rem;
    margin-right: 2.5rem;
    justify-items: center;
}

.secBtn {
    background-color: #EAE2ED;
    font-family: 'Poppins', sans-serif;
    font-size: 1.2rem;
    border: none;
    height: 5vh;
    width: 95%;
    border-top-left-radius: 1vw;
    border-top-right-radius: 1vw;
    margin-top: 0.8rem;
    color:#48314E;
}

.secBtn:hover {
    background-color: #e2d2e7;
    color: #7f528d;
}

.secBtn:focus {
    background-color: #e2d2e7;
    color: #7f528d;
}

.previews{
    grid-column-start: 3;
    grid-column-end: span 3;
    display: flex;
}

.medBox{
    background-color: white;
    margin: 2vw;
    margin-bottom: 0;
    padding: 1vw;
    border-radius: 1vw;
    overflow: hidden;
}

.txtbox {
    height: 30rem;
    width: 70rem;
    padding: 3rem;;
    background-color: #EAE2ED;
    font-size: 1.6rem;
    color: #48314E;
}

.btn{
    height: 1rem;
    width: 1rem;
    margin: 1rem;
    margin-left: 5rem;
    border-radius: 3rem;
    border: none;
    background-color: #C9B0D1;
    text-align: center;
}

.btn:hover{
    background-color: white;
}

.btn:focus{
    background-color: white;
}

.smallImg{
    width: 100%;
    margin-top: 1vh;
    object-fit: contain;
}
.bigImg{
    width: 100%;
}

#circle{
    height: 10rem;
    width: 10rem;
    position: fixed;
    bottom: 5rem;
    margin-left: 2vw;
    z-index: 2;
    background-color: #6B4A75;
    border-radius: 10rem;
    transition: margin-left 2s;
}

#divider{
    width: 42vw;
    height: 8vh;
    position: fixed;
    bottom: 0vw;
    background-color: #48314E;
}

#dividerT{
    width: 100vw;
    height: 8vh;
    position: fixed;
    bottom: 0vw;
    background-color: #48314E;
}