:root {
    --p-font: system-ui, sans-serif;
    --h-font: 'Chrysanthi Unicode', serif, system-ui;
    --text-color: #000;
    --highlight: #ff1f54;
    --bg-color: rgb(245, 221, 218);
    --white: #f8f6f6;
    --accentcolor: rgb(255, 107, 142);
    --accentcolor1: hsl(7, 57%, 69%);
    --box-shadow-color: rgba(0, 0, 0, 0.3);
    scroll-behavior: smooth;
    scrollbar-width: thin;
    --webkit-scrollbar-width: thin;
    scrollbar-color: rgb(255, 107, 142) rgb(245, 221, 218);
    *::moz-scrollbar-track {
        background: rgb(245, 221, 218);
    }
    *::moz-scrollbar-thumb {
        background: rgb(255, 107, 142);
    }
    }


.highlight {
    background-color: var(--highlight);
    color: var(--white);
}
.highlight:hover {
    background-color: var(--text-color);
}

button {
    border: 0;
    border-radius: 0;
    padding: 1.69vh;
    margin: 1vh 1vw 1vh 0vw;
    cursor: pointer;
}
.primbutton {
    background-color: var(--highlight);
    color: var(--white);
}
.secbutton {
    border-style: solid;
    border-width: .1vh;
    border-color: var(--text-color);
    background-color: var(--bg-color);
    transition: background-color 0.3s, color 0.3s;
}
.secbutton:hover {
    border-width: .069vh;
    color: var(--white);
    background-color: var(--highlight);
    
}


.toc {
    display: flex;
    justify-content: center;
}
.wrapper {
    display: flex;
    justify-content: center;
    margin-bottom: 7vh;
    margin-bottom: 7svh;
    }

body {
    margin: 0;
    font-family: var(--p-font);
    color: var(--text-color);
    max-width: 100vw;
    background-color: var(--bg-color);
}
#homebody {
    overflow: clip;
}
.logo h3 {
    font-size: 300%;
    margin: auto;
}
.links {
    /* display: flex;
    flex-direction: column;
    flex-wrap: wrap;
    justify-content: space-around;
    align-items: start; */
    /* gap: 5vw;
    padding-left: 3vw;
    padding-right: 3vw;
    padding-bottom: 3vh; */
    padding:0;
}
.reviews, .profiles, .reporting {
    text-align: left;
    max-width: 50vw;
    scroll-margin-top: 13vh;
    scroll-margin-top: 13svh;
}
@media (orientation: portrait) {
    .reviews, .profiles, .reporting {
        max-width: 77vw;
    
}}


@media (min-width: 750px) {
    header{
        position: sticky;
    }
    .hero {
        margin-bottom: -7vh;
    }
    header.scrolled {
        padding: 0.01vh .5vw .01vh .5vw; 
        box-shadow: 0 1vh 1vh var(--box-shadow-color);
        background-color: rgb(255, 255, 255, 0.69);
        font-size: 11.11px;
        backdrop-filter: blur(3px);
        z-index: 999;
        }
   
}
@media (max-width: 750px) {
    
    .hero {
        min-width: 90vw;
        width: auto;
    }
    footer {
        max-height: 3vh;
    }
}
    header {
    will-change: height, box-shadow;
    background-color: rgb(255, 255, 255, 0.3);
    padding: 2vh 7vw 2vh 7vw;
    top: 0;
    display: flex;
    justify-content: space-between;
    align-items: center;
    box-shadow: 0 0.1vh 0.1vh rgb(77, 78, 76, 0.6);
    min-height: 7vh;
    transition: padding 0.3s, box-shadow 0.3s, background-color 0.69s;
    max-width: 100vw;
    max-height: 20vh;
}



header nav {
    display: flex;
    font-family: var(--h-font);
}
nav, button {
    font-family: var(--h-font);
}

nav a {
    margin-left: 2vw;
    text-decoration: none;
    color: var(--text-color);
}
.navlink.active {
    text-decoration:overline;
    line-height: 1vh;
    color: var(--highlight);
    cursor:auto;
}

.logolink {
    display: inline-block;
    text-decoration: none;
    color: inherit; 
  }
  .homehero {
    display: flex;
    padding: 0%;
    justify-content: center;
    padding-top: 5vh;
    gap: 5vw;
    column-count: 2;
    flex-wrap: wrap;
    min-height: 69svh;
    max-width: 77vw;
    margin: auto;
    padding-bottom: 10vh;
}
@media (orientation: portrait) {.homehero {
    flex-direction: column;
    gap:0;
    align-items: center;
    padding: 0;}
    .hero img {
    max-height: 33vh;
    max-height: 33svh;
    width: fit-content;}
    header nav {display: none;}
    header{
    max-height: 7vh;
    max-height: 7svh;}
}

.hero {
    display: flex;
    padding: 0;
    justify-content: center;
    padding-top: 5vh;
    margin: auto;
        
}
.hero img {
    max-width: 50%;
    height:fit-content;
    flex:1;
}

.mainbio {
    margin-top: 15vh;
    flex:1;}
a {
    color: var(--highlight);
    text-decoration: underline;
    transition: background-color 0.69s, color 0.3s;
}
a:hover {
    color: var(--white);
    background-color: var(--accentcolor);
}
.navlink.active:hover{
    background-color: transparent;
    color: var(--highlight);
}
ul {
    list-style-type: none;
    padding: 0;
}

li {
    margin-bottom: 1vh;
    position: relative;
    font-size: 1.3vw;
    font-family: var(--p-font);
    /* padding-left: 1vw;  */
}
li::before {
    content: '\2756';    
    color: var(--highlight); 
    position: relative;
    left: 0;
    top: 50%;
    transform: translateY(-50%);
    margin-right: .1vw;}

h1, h2, h3, h4, h5, h6 {
    font-family: var(--h-font);
    color: var(--text-color);
}

p {
    line-height: 1.69vmax;
}

@media (orientation: landscape) {
h1 {font-size: 6vw;
    margin-bottom: 2.5vh;}
h2 {font-size: 5vw;
    margin-bottom: 2vh;}
h3 {font-size: 4vw;
    margin-bottom: 1vh;}
h4 {font-size: 3vw;
    margin-bottom: 1vh;}
h5 {font-size: 2vw;
    margin-bottom: 1vh;}
h6, button {font-size: 1.5vw;
    margin-bottom: 1vh;}
p {font-size: 1.3vw;
    margin-bottom: 1vh;}
a {font-size: 1.27vw;}
nav {font-size: 150%;}
}
@media (orientation: portrait) {
    h1 {font-size: 7vh;
        margin-bottom: 2vh;}
    h2 {font-size: 6vh;
        margin-bottom: 2vh;}
    h3 {font-size: 5vh;
        margin-bottom: 2vh;}
    h4 {font-size: 3vh;
        margin-bottom: 2vh;}
    h5 {font-size: 2.75vh;
        margin-bottom: 1vh;}
    h6, button {font-size: 2.5vh;
        margin-bottom: 1vh;}
    p {font-size: 2.25vh;
        line-height: 2.5vh;
        margin-bottom: .5vh;}
    nav {font-size: 2.5vh;}
    a {font-size: 2.5vh;}
    .links {flex-direction: column;
        align-items: center;
        padding: 0vw;}
        .mainbio {
            margin-top: 3vh;}
    }

    @font-face {
        font-family: 'Chrysanthi Unicode';
        src: url(Assets/chrysuni.ttf);
    }
    .footer {
        padding: 0;
        margin: 0;
        width: 100%;
        display: flex;
        justify-content: center;
    }
    .homefooter {
        position: fixed;
        bottom:.69vh;
    }
    @media (orientation: portrait){
    .homefooter {
        position: fixed;
        bottom:3vh;
    }}