:root {
  --bs-blue: #0d6efd;
  --bs-indigo: #6610f2;
  --bs-purple: #6f42c1;
  --bs-pink: #d63384;
  --bs-red: #dc3545;
  --bs-orange: #fd7e14;
  --bs-yellow: #ffc107;
  --bs-green: #198754;
  --bs-teal: #20c997;
  --bs-cyan: #0dcaf0;
  --bs-white: #fff;
  --bs-gray: #6c757d;
  --bs-gray-dark: #343a40;
  --bs-primary: #0d6efd;
  --bs-secondary: #6c757d;
  --bs-success: #198754;
  --bs-info: #0dcaf0;
  --bs-warning: #ffc107;
  --bs-danger: #dc3545;
  --bs-light: #f8f9fa;
  --bs-dark: #212529;
  --bs-font-sans-serif: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans", "Liberation Sans", sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";
  --bs-font-monospace: SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;
  --bs-gradient: linear-gradient(180deg, rgba(255, 255, 255, 0.15), rgba(255, 255, 255, 0));
}

.topics ul {
    list-style-type: none;
    padding-inline: 0;
    margin: 0;
}

body{
    font-family: Verdana, Geneva, Tahoma, sans-serif;
    margin: 0;
}

p{
    margin-bottom: 0;
}

h1{
    font-weight: normal;
    font-size: 1.4em;
    margin-top: 0.3em;
}

h2{
    color: #aaa;
    font-weight: normal;
    font-size: 1em;
    margin-top: 0.3em;
}

.topics li{
    margin-top: 0.3em;
}

.topics li button::before{
    content: "\2022";
    position: relative;
    left: -2%;
    opacity: 0;
}

.topics li :hover{
    /* filter: brightness(150%); */
    /* left: 10%; */
    /* background-color: blue; */
    cursor:pointer;
}

.topics li button:hover::before{
    opacity: 1;
    color: inherit;
}

.topics button{
    background: none;
    border: none;
    padding: 0;
    font-family: inherit;
    font-size: inherit;
}

.containy{
    display: flex;
    width: 100vw;
    min-height: 100vh;
    box-sizing: border-box;
    justify-content: center;
    align-items: center;
}

.containy header, section, .flex-divider{
    border-width: 4vw 4vw 4vw 4vw;
    border-style: solid;
    border-color: white;


    align-self: stretch;
}

.containy header{
    flex-grow: 1;
    /* background-color: aqua; */
    border-right: 0;
    text-align: right;
    background-color: white;
    z-index: 2;
}

.containy section{
    border-left: 0;
    border-right: 0;
    margin-right: 4em;
    margin-left: 1.5vh;
    opacity: 1;
    grid-area: stack;
    overflow-y: auto;
    /* transition: opacity 0s linear; */
    /* transition-delay: 0.8s; */
    transition: left 1.2s cubic-bezier(.36,0,.42,1);
    pointer-events: none;

    position: relative;
    left:-100%;
}

.containy section.active{
    left: 0%;
    opacity: 1;
    pointer-events: all;
    
}

.aboutmecolor{
    color: var(--bs-orange);
}

.projectscolor{
    color: var(--bs-yellow)
}

hr{
    border: 0;
    height: 1px;
    background-image: linear-gradient(to right, rgba(0,0,0,0.12), rgba(0,0,0,0.20), rgba(0,0,0,0.12));
}

.flex-divider{
    width: 1px;
    background-image: linear-gradient(to right, rgba(0,0,0,0.12), rgba(0,0,0,0.20), rgba(0,0,0,0.12));
    
    border-width: 4vh 0 4vh 1.5vh;
    border-style: solid;
    border-color: white;

    z-index: 2;
    margin: 0;
}

.content-display{
    display: grid;
    grid-template-areas: "stack";
    height: 100vh;
    flex-grow: 3;
    margin: 0;
    z-index: 1;
}

body{
    background-color: white;
}

#mainest{
    color: var(--bs-red);
    margin-bottom: 0;
}

#linky{
    text-decoration: underline;
    margin-bottom: 0;
}

.socials-inline{
    display: flex;
    gap: 0.2em;
    align-items: flex-end;
    justify-content: flex-end;
    margin-top: 0.4em;
}

.socials-icon{
    display: inline-flex;
    fill: currentColor;
}

.socials-icon svg{
    height: 1.3em;
    color: #aaa;
}