*, *::before, *::after {
    margin: 0;
    padding: 0;
    list-style: none;
    text-decoration: none;
    box-sizing: border-box;
    user-select: none;
}

/*html {
    color-scheme: dark light;
}*/

img, picture, svg, video {
    display: block;
    max-width: 100%;
}

:root {
    --black: black;
    --gray: rgba(128, 128, 128, 1);
    --gray_75: rgba(128, 128, 128, .75);
    --white: white;
    --white_95: rgba(255, 255, 255, .95);
    --lightgray: lightgray;
    --darkslateblue: rgba(62,41,129, 1);
    --ferngreen_75: rgba(79, 121, 66, .75);
    --draggable-color: rgba(150, 150, 150, 1); 
    --body-color: rgba(12, 13, 16, 1);
    --header-color: rgba(32, 33, 36, 1);/*raising black*/
    --header-link-color: rgba(132, 136, 132, .3); /*smoke*/
    --header-link-hover-color: rgba(200, 200, 201, .95);
    --sharpterp-color: rgba(0, 102, 255, .9);
    --coffee-color: #fbdd29;
    --shop-color: rgba(237, 124, 46, 1);
    --square-color: rgba(255, 0, 0, 1) ;
    --tiktok-blue: rgba(0, 242, 234, 1);
    --tiktok-pink: rgba(255, 0, 80, 1);
    --board-text-color: rgba(132, 136, 132, 1);
    --board-background-color: rgba(40, 40, 43, .2);
    --input-color: lightyellow;
    --dropdown-source-color: salmon;
    --dropdown-target-color: rgba(137, 207, 240, 1); /*baby blue*/
    --smart-before-font-color-hover: rgba(165, 42, 42, 1); /*brown*/
    --terp-before-font-color-hover: rgba(65, 105, 225, 1); /*royal blue*/
    --vocab-list-color: rgba(132, 136, 132, 1); /*smoke*/
    --nav-toggle-label-color: rgba(23, 23, 23, .75);
    --nav-toggle-label-before-color: rgba(255, 255, 255, .1);
    --dropdown-round-border: 1.875rem;
    --control-wrapper-width-media500:clamp(13rem, 24vw + 8.5rem, 16rem);
    --control-font-size: .955rem;
    --smart-terp-before-font-size: .55rem;
    --board-ul-top-font-seize: .75rem;
    --board-body-font-size: clamp(.825rem, 0.075vw + 0.805rem, 0.85rem);
    --smart-terp-before-font-family: Verdana, Helvetica, Arial;
    --smart-terp-before-font-family-hover: Verdana, Helvetica, Arial;
    --smart-terp-before-font-size-hover: .70rem;
    --smart-terp-before-height: clamp(1.2rem, .163vw + 1.149rem ,1.25rem);
    --smart-terp-before-top: -.6rem;
    --smart-terp-before-left: -.9rem;
    --smart-terp-after-left: -.3rem;
    --smart-terp-after-width: .4rem;
    --smart-terp-span-round-border: 0.625rem;
    --container-min-width: 300px;
    --box-width: clamp(26rem, 42.264vw + 14.906rem, 40rem);
    --box-height: clamp(1.9rem, 0.8vw + 1.75rem , 2.25rem);
    --box-width-board: clamp(18rem, 85.333vw + 2rem, 50rem);
    --img-wrapper-width: clamp(1rem, 34.286vw + 8.571rem, 30rem);
    --li-vocabList-font: clamp(.8rem, .229vw + 0.757rem , .9rem);
    --li-vocabList-font-hover: clamp(.81rem, 229vw + .767rem , .91rem);
    --p-match-font: clamp(.75rem, 2vw + .375rem , 1rem);
    --sharp-terp-letters: clamp(4.063rem, 1.429vw + 3.795rem, 4.688rem);
    --footer-svg-icons: clamp(2.375rem, 1.25vw + 1.969rem, 2.75rem);
}

body {
    height: 100vh;
    min-width: 300px;
    font-family: Helvetica, Arial;
    letter-spacing: 1px;
    color: var(--white);
    background: var(--body-color);
    overflow-y: scroll;
}

/*-----------grid container-----------*/
.grid-container {
    position: relative;
    display: grid;
    grid-template-areas: 'header' 'main' 'footer';
    grid-template-columns: 1fr;
    grid-template-rows: auto 1fr auto;
    height: 100%;
    min-width: 300px;
    background-position: bottom;
    /* background:url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg"><text x="48%" y="2.5%" font-size="10" fill="red">I love SVG!</text></svg>'); */
}

/*===========header|main|footer===========*/
header {
    position: relative;
    grid-area: header;
    padding: 0.5rem;
    height: 4.25rem;
    /* border: 1px solid yellow; */
}

header::after {
    position: absolute;
    content: ' ';
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: url('./images/13k_opt.svg');
    background-repeat: no-repeat;
    background-position: center .8rem;
    background-size: 3.5rem;
    z-index: -1;
    /* border: 1px solid red; */
}

.nav-bar {  
    position: relative;
    display: flex;
    justify-content: space-between;
    align-items: center;
    /* border: 1px solid green; */
}

.nav-toggle {
    display: none;
}

.header-brand, .header-links {
    height: auto;
    display: flex;
    align-items: center;
    gap: .25rem;
    /* outline: 1px solid cyan; */
}

.header-brand {
    justify-content: flex-start;
}

.header-links {
    justify-content: flex-end;
}

.link { 
    position: relative;
    display: flex;
    justify-content: center;
    align-items: center;
    /* outline: 1px solid yellow; */
}

.home-link::before, .about-link::before, .board-link::before, .app-link::before {
    position: absolute;
    display: flex;
    justify-content: center;
    align-items: center;
    right: 0;
    bottom: 0;
    left: 0;
    width: fit-content;
    height: 1rem;
    padding: 0 .1rem;
    color: var(--gray);
    font-size: .7rem;
    font-weight: bold;
    border-radius: 3px;
    outline: 1px solid var(--header-link-color);
    transform-origin: top;
    transform: scale(0,0);
    opacity: 0;
    transition: transform 225ms ease-out,
                opacity 225ms ease-out;
}

.home-link::before {
    content: 'Home';
    top: 3.15rem;
    left: .2rem;
}

.about-link::before {
    content: 'About';
    top: 2.5rem;
    left: -0.15rem;
} 

.board-link::before {
    content: 'Board';
    top: 2.5rem;
    left: -0.15rem;
}

.app-link::before {
    content: 'App';
    top: 2.5rem;
    left: .25rem;
}

.home-link::after, .about-link::after, .board-link::after, .app-link::after {
    color: var(--header-link-color);
    transition: color 250ms ease-out;
}

.svg-home-container {
    display: flex;
    justify-content: center;
    align-items: flex-end;
    width: 2.85rem;
    height: 2.85rem;
    /* outline: 1px solid red; */
}

.svg-container {
    display: flex;
    justify-content: center;
    align-items: flex-end;
    width: 2.25rem;
    height: 2.25rem;
    /* outline: 1px solid red; */
}

.icon {
    width: 100%;
    height: 100%;
    padding: .1rem .1rem;
    /* outline: 1px solid white; */
}

.svg-header-color {
    fill: var(--header-link-color);
    transform: scale(1,1);
    transform-origin: center;
    transition: fill 200ms ease-out,
                transform 200ms ease-out;
}

.link:hover::before {
    opacity: 1;
    transform: scale(1,1);
    transition: transform 225ms ease-out,
                opacity 225ms ease-out;
}

.link:hover::after {
    color: var(--header-link-hover-color);
    transition: color 250ms ease-out;
}

.link:hover > .svg-home-container .home-svg .svg-header-color {
    fill: var(--header-link-hover-color);
    transition: fill 250ms ease-out,
                stroke 250ms ease-out;
}

.link:hover > .svg-container .about-svg .svg-header-color {
    fill: var(--header-link-hover-color);
    transition: fill 250ms ease-out,
                stroke 250ms ease-out;
}

.link:hover > .svg-container .board-svg .svg-header-color {
    fill: var(--header-link-hover-color);
    transition: fill 250ms ease-out;
}

.link:hover > .svg-container .app-svg .svg-header-color {
    fill: var(--header-link-hover-color);
    transition: fill 250ms ease-out;
}

main {
    grid-area: main;
}

footer {
    grid-area: footer;
}

.footer-bar {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    width: 100%;
    height: 100%;
    padding: .5rem .5rem .15rem .5rem;
    /* border: 1px solid yellow; */
}

.footer-links {
    display: flex;
    flex-direction: row;
    justify-content: space-between ;
    align-items: center;
    width: 100%;
    height: auto;
    padding: 0 0 .25rem 0;
    /* outline: 1px solid cyan; */
}

.footer-links-wrapper {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: .35rem;
    height: auto;
    /* border: 1px solid yellow; */
}

.footer-svg-container {
    display: flex;
    justify-content: center;
    align-items: flex-end;
    width: var(--footer-svg-icons); /*2.375rem*/
    height: var(--footer-svg-icons); 
    /* outline: 1px solid white; */
}

.footer-text {
    padding: 0 0 .4rem 0;
}

.footer-icon {
    width: 100%;
    height: 100%;
    transition: width 150ms ease-out,
                height 150ms ease-out;
    /* outline: 1px solid white; */
}

.heart-link {
    cursor: pointer;
}

.svg-hover-color, .svg-hover-color-shop, .svg-hover-color-square, .svg-hover-blue, .svg-hover-pink {
    fill: var(--body-color);
    transition: fill 250ms ease-out;
}

.svg-hover-color-arrow {
    fill: var(--header-link-color);
    transition: fill 250ms ease-out;
}

.link:hover > .footer-svg-container .coffee-svg .svg-header-color {
    fill: var(--body-color);
    transform: scale(0);
    transition: fill 300ms ease-out,
                transform 300ms ease-out;
}

.link:hover > .footer-svg-container .coffee-svg .svg-hover-color-cup {
    fill: var(--lightgray);
}

.link:hover > .footer-svg-container .coffee-svg .svg-hover-color-coffee {
    fill: var(--coffee-color);
}

.link:hover > .footer-svg-container .shop-svg .svg-header-color {
    fill: var(--body-color);
    transform: scale(0);
    transition: fill 300ms ease-out,
                transform 300ms ease-out;
}

.link:hover > .footer-svg-container .shop-svg .svg-hover-color-shop {
    fill: var(--shop-color);
}

.link:hover > .footer-svg-container .facebook-svg .svg-header-color {
    fill: var(--body-color);
    transform: scale(0);
    transition: fill 300ms ease-out,
                transform 300ms ease-out;
}

.link:hover > .footer-svg-container .facebook-svg .svg-hover-color {
    fill: var(--white);
}

.link:hover > .footer-svg-container .instagram-svg .svg-header-color {
    fill: var(--body-color);
    transform: scale(0);
    transition: fill 300ms ease-out,
                transform 300ms ease-out;
}

.link:hover > .footer-svg-container .instagram-svg .svg-hover-color {
    fill: var(--lightgray);
}

.link:hover > .footer-svg-container .tiktok-svg .svg-header-color {
    fill: var(--body-color);
    transform: scale(0);
    transition: fill 300ms ease-out,
                transform 300ms ease-out;
}

.link:hover > .footer-svg-container .tiktok-svg .svg-hover-color {
    fill: var(--black);
}

.link:hover > .footer-svg-container .tiktok-svg .svg-hover-blue {
    fill: var(--tiktok-blue);
}

.link:hover > .footer-svg-container .tiktok-svg .svg-hover-pink {
    fill: var(--tiktok-pink);
}

.link:hover > .footer-svg-container .youtube-svg .svg-header-color {
    fill: var(--body-color);
    transform: scale(0);
    transition: fill 300ms ease-out,
                transform 300ms ease-out;
}

.link:hover > .footer-svg-container .youtube-svg .svg-hover-color-square {
    fill: var(--square-color);
    transition: fill 200ms ease-out;
}

.link:hover > .footer-svg-container .youtube-svg .svg-hover-color-arrow {
    fill: var(--lightgray);
    transition: fill 200ms ease-out;
}

.heart-link:hover > .footer-svg-container .heart-svg .svg-header-color {
    fill: var(--body-color);
    transform: scale(0);
    transition: fill 300ms ease-out,
                transform 300ms ease-out;
}

.heart-link:hover > .footer-svg-container .heart-svg .svg-hover-color-heart {
    fill: var(--square-color);
    transition: fill 200ms ease-out;
}


.footer-text {
    color: var(--header-link-color);
    text-align: center;
    width: 100%;
    font-size: .7rem;
    /* border: 1px solid green; */
}

.notice-container {
    display: flex;
    justify-content: center;
    align-items: center;
    width: 100%;
    margin: .25rem 0 0 0;
    /* border: 1px solid yellow; */
}

.notice-wrapper {
    display: flex;
    margin: 0 0 .125rem 0;
}

.copyright, .email {
    display: inline-block;
    width: fit-content;
    padding: 0 .5rem;
    margin: 0;
    text-align: center;
    font-size: .7rem;
    color: var(--header-link-color);
    /* border: 1px solid green; */
}

.link-terms {
    color: var(--header-link-color);
}

.copyright {
    border-right: 1px solid var(--header-link-color);
}

.nous, .parlons, .francais {
    font-size: 2.75rem;
}

.nous {
    color: rgba(0, 85, 164, 1);
}

.parlons {
    color: rgba(255, 255, 255, 1);
}

.francais {
    color: rgba(225, 0, 15, 1);
}

/*===========appScreen===========*/
/*-----------title container-----------*/
.title-container{
    position: relative;
    width: 100%;
    height: auto;
    font-size: 1.25rem;
    text-align: center;
    padding: 1rem 0 1rem 0;
    color: var(--lightgray);
    /* border: 1px solid yellow; */
}

/*-----------sharpNotes-----------*/
.container-draggable {
    position: fixed;
    resize: horizontal;
    overflow: hidden;
    display: flex;
    top: 0;
    right: 0;
    width: 17.5rem;
    height: auto;
    min-width: 15rem;
    background: var(--gray);
    border-radius: .3rem;
    outline: 2px solid var(--darkslateblue);
    z-index: 2;
}

.draggable-invisible {
    visibility: hidden;
}

.draggable-wrapper {
    position: relative;
    width: 100%;
    height: 100%;
    font-size: .75rem;
    text-align: start;
    background: var(--draggable-color);
}

.draggable-title {
    display: flex;
    flex-direction: row;
    justify-content: start;
    align-items: center;
    width: 100%;
    height: 1.15rem;
    line-height: 1.15rem;
    font-size: .65rem;
    color: var(--lightgray);
    cursor: grab;
    padding: .2rem;
    outline: 1px solid var(--darkslateblue);
    background: var(--darkslateblue);
}

.draggable-btn {
    position: absolute;
    display: flex;
    flex-direction: row;
    justify-content: center;
    align-items: center;
    font-size: .7rem;
    font-weight: bold;
    width: 1.15rem;
    height: 1.15rem;
    line-height: 1.15rem;
    top: 0;
    right: 0;
    bottom: 0;
    cursor: pointer;
    color: var(--gray);
    background: var(--black);
    border-top-right-radius: .3rem;
    transition: font-size 250ms ease-out,
                color 250ms ease-out,
                font-weight 250ms ease-out;
}

.draggable-btn:hover {
    color: var(--white);
    transition: font-size 250ms ease-out,
                color 250ms ease-out,
                font-weight 250ms ease-out;
}

.draggable-content {
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
    align-items: center;
    width: 100%;
    height: auto;
    min-height: 1.5rem;
    padding: .155rem .25rem;
}

.draggable-note {
    display: grid;
    grid-template-columns: 1.2rem 1fr;
    width: 100%;
    height: auto;
    font-size: .75rem;
    padding: 0.095rem 0;
    color: var(--black);
    cursor: pointer;
    transition: color 150ms ease-out;
}

.draggable-note > .type {
    font-size: .75rem;
}

.draggable-note:hover {
    color: var(--white);
    transition: color 150ms ease-out;
}

.draggable-note:hover > .subsup sub {
    color: var(--white);
    transition: color 150ms ease-out;
}

/*-----------input container-----------*/
.input-container {
    width: 100%;
    height: auto;
    padding: 0 0 1rem 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    /* border: 1px solid yellow; */
}

/*-----------switch container-----------*/
.switch-wrapper {
    position: relative;
    display: flex;
    flex-direction: row;
    justify-content: space-evenly;
    align-items: center;
    width: fit-content;
    height: 1.5rem;
    /* overflow: hidden; */
    border-radius: 25px;
    margin: 0 0 .25rem 0;
    background: var(--body);
    /* border: 1px solid yellow; */
}

.checkbox-switch {
    opacity: 0;
    width: 0;
    height: 0;
}

.slider {
    display: flex;
    flex-direction: row;
    justify-content: flex-start;
    gap: .25rem;
    height: 100%;
    cursor: pointer;
    /* outline: 1px solid red; */
}

.slider::before, .slider::after {
    content: '';
    position: absolute;
    top: 0;
    width: 1.625rem;
    height: 1.625rem;
    border-radius: 50%;
    background: var(--ferngreen_75);
    transition: transform 100ms ease-out;
}

.slider::before {
    left: 0;
    transform-origin: right;
    transform: scale(1);
}

.slider::after {
    left: 1.88rem;
    transform-origin: left;
    transform: scale(0);
}

.toggle-left, .toggle-right {
    width: 1.625rem;
    height: 1.625rem;
    line-height: 1.375rem;
    font-size: .75rem;
    text-align: center;
    color: var(--body-color);
    cursor: pointer;
    border-radius: 50%;
    border: 2px solid var(--gray_75);
    background: var(--white_95);    
    transition: color 100ms ease-out,
                border 100ms ease-out;
}

.toggle-left {
    color: var(--black);
    font-size: .975rem;
    font-weight: bold; 
    border: 2px solid var(--ferngreen_75);  
    transition: color 100ms ease-out,
                border 100ms ease-out;
}

.checkbox-switch:checked + .slider::before {
    transform: scale(0);
}

.checkbox-switch:checked + .slider::after {
    transform: scale(1);
}

.checkbox-switch:checked + .slider > .toggle-left {
    color: var(--body-color);
    font-size: .825rem;
    font-weight: normal;
    border: 2px solid var(--gray_75);
}

.checkbox-switch:checked + .slider > .toggle-right {
    color: var(--black);
    font-size: .9115rem;
    font-weight: bold;
    border: 2px solid var(--ferngreen_75);
}

/*-----------input wrapper row-----------*/
.input-wrapper {
    width: var(--box-width);
    height: auto;
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    justify-content: flex;
    align-items: center;
    /* border: 1px solid yellow; */
}

.source-container {
    margin: 0 0 .25rem 0;
}

.target-container {
    margin: .25rem 0 0 0;
}


/*-----------control wrapper-----------*/
.control-wrapper {
   width: 50%;
}

.input-source-wrapper, .input-target-wrapper {
    background: var(--dropdown-source-color);
    border-top-left-radius: var(--dropdown-round-border);
    border-bottom-left-radius: var(--dropdown-round-border);
}

.dropdown-source-wrapper, .dropdown-target-wrapper {
    position: relative;
    background: var(--dropdown-source-color);
    border-top-right-radius: var(--dropdown-round-border);
    border-bottom-right-radius: var(--dropdown-round-border);
}

.dropdown-source-wrapper::after, .dropdown-target-wrapper::after {
    position: absolute;
    content: '';
    width: var(--smart-terp-after-width);
    width: .439rem;
    height: 100%;
    top: 0;
    left: var(--smart-terp-after-left);
    right: 0;
    bottom: 0;
    background: var(--input-color);
    border-radius: 50%;
}

.input-source:focus {
    outline: 2px solid var(--dropdown-source-color);
}

.input-source-wrapper:focus-within ~ .dropdown-source-wrapper {
    outline: 2px solid var(--dropdown-source-color);
}

.input-target:focus {
    outline: 2px solid var(--dropdown-target-color); 
}

.input-target-wrapper:focus-within ~ .dropdown-target-wrapper {
    outline: 2px solid var(--dropdown-target-color);
}

/*-----------span elements (source and target)-----------*/
.sharp-source-span, .sharp-target-span {
    position: relative;
}

.sharp-source-span::before {
    content: 'S';
    background: var(--dropdown-source-color);
}

.sharp-target-span::before {
    content: 'T';
    background: var(--dropdown-target-color);
}

.sharp-source-span::before, .sharp-target-span::before {
    position: absolute;
    line-height: var(--smart-terp-before-height);
    text-align: center;
    font-family: var(--smart-terp-before-font-family);
    font-size: var(--smart-terp-before-font-size);
    font-weight: bold;
    color: var(--black);
    width: var(--smart-terp-before-height);
    height: var(--smart-terp-before-height);
    top: var(--smart-terp-before-top);
    left: var(--smart-terp-before-left);
    right: 0;
    bottom: 0;
    transform-origin: center;
    border-radius: var(--smart-terp-span-round-border);
    z-index: 1;
    transition: font-size 250ms ease-out,
                font-family 100ms ease-out,
                width 250ms ease-out,
                height 250ms ease-out,
                left 250ms ease-out,
                color 250ms ease-out;
}

.sharp-source-span:hover::before, .sharp-target-span:hover::before {
    content: 'X';
    width: calc(var(--smart-terp-before-height) + .1rem) ;
    height: calc(var(--smart-terp-before-height) + .1rem);
    line-height: calc(var(--smart-terp-before-height) + .1rem);
    left: calc(var(--smart-terp-before-left) - .1rem);
    font-family: var(--smart-terp-before-font-family-hover);  
    font-size: var(--smart-terp-before-font-size-hover);
    cursor: pointer;
    transition: font-size 250ms ease-out,
                font-family 250ms ease-out,
                width 250ms ease-out,
                height 250ms ease-out,
                left 250ms ease-out,    
                color 250ms ease-out;
}

.sharp-source-span:hover::before {
    color: var(--smart-before-font-color-hover);
}

.sharp-target-span:hover::before {
    color: var(--terp-before-font-color-hover);
}
/*-----------controls-----------*/
.control {
    width: 100%;
    height: var(--box-height);
    font-family: Tahoma, Helvetica, Arial;
    font-size: var(--control-font-size);
    color: var(--black);
    background: var(--input-color);
    border: 1px solid transparent;
}

.input-source, .input-target {  
    text-indent: 1.15rem;
    border-top-left-radius: var(--dropdown-round-border);
    border-bottom-left-radius: var(--dropdown-round-border);
}

.dropdown-source, .dropdown-target {
    cursor: pointer;
    text-align: center;
    border-top-right-radius: var(--dropdown-round-border);
    border-bottom-right-radius: var(--dropdown-round-border);
}
.dropdown-source{
    background: var(--dropdown-source-color);
}

.dropdown-target {
    background: var(--dropdown-target-color);
}

/*-----------output elements-----------*/
.output-container {
    width: 100%;
    height: auto;
    padding: .25rem .2rem .5rem .2rem;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    /* border: 1px solid yellow; */
}

.output-wrapper {
    width: var(--box-width);
    /*border: 1px solid green;*/
}

.output-ul {
    list-style: none;
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
    align-items: flex-start;
    text-align: left;
    padding: .25rem 0 .75rem 0;
    border-bottom: 1px dashed var(--header-color);
}

.vocab-list, .drug-list {
    width: fit-content;
    height: auto;
    padding: .1rem .5rem .1rem .5rem;
    line-height: 1.2rem;
    text-align: start;
    font-size: var(--li-vocabList-font); 
    color: var(--vocab-list-color);
    /* outline: 1px solid red; */
    transition: font-size 150ms ease-out,
                color 150ms ease-out;
}

.vocab-list {
    display: grid;
    grid-template-columns: 1.5rem 1fr;
}

.type {
    grid-column: 1/2;
    display: flex;
    justify-content: flex-start;
    align-items: center;
    height: auto;
    font-family: "Trebuchet MS";
    font-size: var(--li-vocabList-font); 
    font-style: italic;
    pointer-events: none;
    /* border: 1px solid green; */
}

.element {
    grid-column: 2/3;
    height: auto;
    pointer-events: none;
    /* border: 1px solid yellow; */
}

.subsup {
    pointer-events: none;
    /* outline: 1px solid green; */
}

sup {
    font-size: .529rem;
    pointer-events: none;
    /* outline: 1px solid yellow; */
}

sub{
    font-size: .45rem;
    /* outline: 1px solid yellow; */
}

.vocab-list:hover, .drug-list:hover {
    cursor: pointer;
    color: var(--header-link-hover-color);
    font-size:var(--li-vocabList-font-hover);
    transition: font-size 150ms ease-out,
                color 150ms ease-out;
}

.vocab-list-selected {
    display: grid;
    grid-template-columns: 1.5rem 1fr;
    height: auto;
    padding: .1rem .5rem .1rem .5rem;
    line-height: 1.2rem;
    text-align: start;
    font-size: var(--li-vocabList-font);
    border-radius: .5rem;
    color: var(--vocab-list-color);
}

.match-container {
    position: relative;
    width: 100%;
    height: auto;
    padding: 0.25rem 0 .25rem 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    /*border: 1px solid yellow;*/
}

.match-wrapper {
    width: var(--box-width);
    /*border: 1px solid yellow;*/
}

.match {
    width: 100%;
    text-align: justify;
    line-height: 1.10rem;
    font-size: var(--li-vocabList-font);
    color: var(--vocab-list-color);
    padding: .25rem .25rem .5rem .25rem;
}

/*Hiding Definition element*/
/* .match-definition {
    padding: 0;
} */

/*===========homeScreen===========*/

.home-bold {
    padding: .2rem .1rem;
    color: var(--gray);
    font-size: .7rem;
    border-radius: 3px;
    outline: 1px solid var(--header-link-color);
}

.home-bold:hover {
    color: var(--lightgray);
    outline: 1px solid var(--lightgray);
}

.temp-link-wrapper, .temp-link {
    font-size: .7rem;
    color: var(--gray);
}

.temp-link-wrapper {
    padding: .25rem 0;
}

.temp-link:hover {
    color: var(--lightgray);
}

.home-h1, .about-h1, .board-h1 {
    font-size: 2rem;
}

.home-title {
    text-align: center;
    font-family: 'Georgia';
    color: var(--header-link-hover-color);;
}

.img-wrapper {
    display: flex;
    flex-direction: row;
    justify-content: center;
    gap: .5rem;
    width: var(--img-wrapper-width);
    height: auto;
    /* border: 1px solid yellow; */
}

.home-para {
    text-align: justify;
    line-height: 1.4rem;
    color: var(--gray);
    padding: 1rem 0 1rem 0;
}

.BMC-link {
    line-height: 1.4rem;
    color: var(--gray);
    text-decoration: underline;
}

.BMC-link:hover {
    color: var(--lightgray);
}

.span-ty {
    display: flex;
    justify-content: center;
    /* outline: 1px solid yellow */
}

/*===========boardScreen===========*/
.board-title-container {
    position: relative;
    width: 100%;
    height: auto;
    font-size: 1.25rem;
    text-align: center;
    padding: 1rem 0 0 0;
    color: var(--lightgray);
    /* border: 1px solid yellow; */
}

.output-board-wrapper {
    width: var(--box-width-board);
    padding: 0 .25rem;
    /* border: 1px solid green; */
}

.output-board-sharpterp {
    width: 100%;
    height: auto;
    padding: .5rem 0 1.75rem 0;
    /* border: 1px solid yellow; */
} 

.board-div-top-sharpterp {
    display: flex;
    flex-direction: row;
    justify-content: center;
    align-items: center;
    width: 100%;
    height: auto;
    font-family: var(--smart-terp-before-font-family);
    font-size: var(--board-ul-top-font-seize);
    font-weight: 600;
    padding: 0 0 .75rem 0;
    color: var(--header-link-color);
    background: var(--body-color);
    /* border: 1px solid green; */
}

.board-svg-sharpterp {
    width: fit-content;
    height: 2.5rem;
}

.board-entry {
    text-decoration: underline;
}

.board-txt-sharpterp {
    fill: var(--sharpterp-color);
    stroke: var(--body-color);
    stroke-width: .045rem; 
}

.board-para-body-sharpterp {
    width: 100%;
    height: auto;
    min-height: 2.5rem;
    text-align: justify;
    line-height: 1.2rem;
    padding: .75rem 1rem .75rem 1rem;
    font-family: var(--smart-terp-before-font-family);
    font-size: var(--board-body-font-size);
    color: var(--board-text-color);
    border-radius: 9px;
    background: var(--board-background-color);
    /* border: 1px solid red; */
}

.board-item {
    display: inline-flex;
    justify-content: center;
    align-items: center;
    width: 1.25rem;
    height: 1.25rem;
    border-radius: 50%;
    border: 1px solid var(--header-link-color);
    background: var(--board-background-color); 
}

.output-board-ul {
    position: relative;
    width: 100%;
    /*border: 1px solid yellow;*/
}

.output-board-li {
    width: 100%;
    height: auto;
    padding: .25rem .5rem;
    border-bottom: 1px solid var(--header-link-color);
    /*border: 1px solid red;*/
}

.output-board-li:nth-child(1) {
    border-top: 1px solid var(--header-link-color);
}

.board-ul-top, .board-para-body {
    font-family: var(--smart-terp-before-font-family);
    /*border: 1px solid yellow;*/
}

.board-ul-top {
    display: grid;
    column-gap: .15rem;
    grid-template-columns: 1fr 1fr 1fr;
    /* border: 1px solid yellow; */
}

.board-li-author, .board-li-type, .board-li-date {
    font-size: var(--board-ul-top-font-seize);
    font-weight: 600;
    color: var(--header-link-color);
    /*border: 1px solid green;*/
}

.board-li-author {
    grid-column: 1/2;
    text-align: start;
}

.board-li-type {
    grid-column: 2/3;
    text-align: center;
}

.board-li-date {
    grid-column: 3/4;
    text-align: end;
}

.board-para-body {
    width: 100%;
    height: auto;
    min-height: 2.5rem;
    text-align: justify;
    line-height: 1.2rem;
    padding: .4rem .75rem;
    font-size: var(--board-body-font-size);
    color: var(--board-text-color);
    /*border: 1px solid yellow;*/
}

/*-----------form elements-----------*/

.form-wrapper {
    position: relative;
    margin: 0 0 4px 0;
    border: none;
    width: 100%;
    height: auto;
    /* border: 1px solid yellow; */
}

.form-toggle {
    display: none;
}

.form-toggle:checked ~ .new-form {
    height: 6.25rem;
}

.form-toggle:checked ~ .form-toggle-label > .screw {
    transform: rotate(90deg);
}

.form-toggle:checked ~ .form-toggle-label > .screw::before {
    transform: rotate(90deg);
}

.form-toggle:checked ~ .form-toggle-label > .screw-tool-tip {
    width: 0;
}

.form-toggle-label {
    position: absolute;
    display: flex;
    justify-content: center;
    align-items: center;
    width: 1.65rem;
    height: 1.65rem;
    top: -2rem;
    right: 0; 
    cursor: pointer;
    border-radius: 50%;
    border: 1px solid var(--header-link-color);
    background: var(--board-background-color); 
}

.screw {
    position: relative;
    display: block;
    width: .8rem;
    height: .2rem;
    bottom: 0;
    transition: transform 200ms ease-out;
}

.screw::before, .screw::after {
    content: '';
    position: absolute;
    width: 100%;
    border-radius: 2px;
    background: var(--gray);
}

.screw::before {
    height: .15rem;
    transition: transform 200ms ease-out;
}

.screw::after {
    height: .2rem;
    transform: rotate(90deg);
}

.screw-tool-tip {
    position: absolute;
    display: block;
    width: 0;
    height: 1.25rem;
    right: 1.57rem;
    line-height: 1.25rem;
    text-align: center;
    font-size: .55rem;
    font-weight: bold;
    border-radius: 5px;
    white-space: no-wrap;
    overflow: hidden;
    font-family: var(--smart-terp-before-font-family);
    color: var(--body-color);
    background: var(--header-link-color);
    transition: width 200ms ease-out;
}

.form-toggle-label:hover > .screw-tool-tip {
    width: 3.75rem;
}

.pagemark {
    position: absolute;
    width: 1.65rem;
    height: 1.65rem;
    line-height: 1.65rem;
    text-align: center;
    top: -2rem;
    left: 0;
    font-family: var(--smart-terp-before-font-family);
    font-size: .55rem;
    font-weight: 600;
    border-radius: 9px;
    color: var(--gray);
    border: 1px solid var(--header-link-color);
    background: var(--board-background-color);
}

.new-form {
    display: block;
    height: 0rem;
    overflow: hidden;
    transition: height 200ms ease-out;
 }

 .board-form-top {
    padding: .125rem 0;
    font-size: var(--board-ul-top-font-seize);
    /* border: 1px solid yellow; */
}

.post-author, .post-type, .post-sumbit {
    width: 100%;
    height: 1.75rem;
    border: none
}

.post-author {
    text-indent: .3rem;
    background: var(--white);
}

.post-type {
    cursor: pointer;
    text-indent: .5rem;
    text-align: center;
    background: var(--dropdown-source-color);
}

.post-sumbit {
    position: relative;
    cursor: pointer;
    color: var(--black);
    background: var(--dropdown-target-color);
    transition: color 200ms ease-out,
                background 150ms ease-out;
}

.post-sumbit:hover {
    color: var(--white);
    background: rgba(135, 206, 235, .85);
    transition-duration:color 150ms ease-out, 
                        background 150ms ease-out;
}

.post-body {
    height: 100%;
    font-size: var(--board-body-font-size);
    padding: .2rem .3rem;
    text-indent: 0;
    color: var(--black);
    text-indent: .1rem;
    background: var(--input-color);
}

/*-----------pagination-----------*/
.board-pagination {
    display: flex;
    justify-content: center;
    align-items: center;
    width: 100%;
    height: auto;
    margin: 0 0 .5rem 0;
    /*border: 1px solid yellow;*/
}

.link-pagination {
    position: relative;
    text-align: center;
    width: 1.5rem;
    height: 1.5rem;
    line-height: 1.5rem;
    font-family: var(--smart-terp-before-font-family);
    font-size: .84rem;
    font-weight: 600;
    color: var(--header-link-color);
    border-radius: 56px;
    /*border: 1px solid yellow;*/
    transition: color 250ms ease-out;
}

.link-pagination:hover {
    color: var(--header-link-hover-color);
}

.link-pagination::before {
    content: '';
    position: absolute;
    width: 1.5rem;
    height: 1.5rem;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    border-radius: 50%;
    transform: scale(0);
    transform-origin: center;
    background: var(--nav-toggle-label-before-color);
    transition: transform  150ms ease-out;
}

.link-pagination:hover::before {
    transform: scale(1);
    transition: transform  150ms ease-out;
}


/*===========aboutScreen===========*/
.about-h2, .about-h3, .about-para {
    text-align: center;
    color: var(--header-link-hover-color);
}

.about-h2 {
    display: flex;
    justify-content: center;
    gap: .45rem;
    padding: 2rem 0 0 0;
    /* border: 1px solid red; */
}

.about-h3 {
    padding: 1rem 0 0 0;
}

.about-para {
    text-align: justify;
    line-height: 1.4rem;
    font-size: .95rem;
    padding: 1rem 0 1rem 0;
}

.about-logo-wrapper {
    max-width: 15rem;
    margin: 0 0 1rem 0;
}

.about-coffee-link, .about-shop-link {
    position: relative;
    display: flex;
    justify-content: center;
    align-items: center;
    width: fit-content;
    border-radius: 50%;
    /* border: 1px solid yellow; */
}

.svg-about-circle {
    fill: var(--header-link-hover-color);
    transform-origin: center;
    transform: scale(1);
    transition: fill 150ms ease-out,
                transform 150ms ease-out;
}

.svg-about-cup, .svg-about-liquid, .svg-about-shop {
    fill: var(--body-color);
    transition: fill 150ms ease-out;
}

.about-coffee-link:hover > .svg-about-container .svg-about-coffee .svg-about-circle {
    fill: var(--body-color);
    transform: scale(0);
    transition: fill 150ms ease-out,
                transform 150ms ease-out;
}

.about-coffee-link:hover > .svg-about-container .svg-about-coffee .svg-about-cup {
    fill: var(--lightgray);
}

.about-coffee-link:hover > .svg-about-container .svg-about-coffee .svg-about-liquid {
    fill: var(--coffee-color);
}

.about-shop-link:hover > .svg-about-container .svg-about-shop .svg-about-circle {
    fill: var(--body-color);
    transform: scale(0);
    transition: fill 150ms ease-out,
                transform 150ms ease-out;
}

.about-shop-link:hover > .svg-about-container .svg-about-shop .svg-about-shop {
    fill: var(--shop-color);
}

/*===========termsScreen===========*/
.update {
    font-size: .7rem;
}

/*===========error404Screen===========*/
.error-output-container, .error-container {
    width: 100%;
    height: auto;
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: center;
    /* border: 1px solid yellow; */
}

.error-container {
    padding: 1rem 0 0 0;
}

.error-h3 {
    text-align: center;
    color: var(--header-link-hover-color);
}

/*===========Media Queries===========*/
@media screen and (max-width: 520px) {

    /*----------@media-header----------*/
    header {
        height: 4.25rem;
    }

    .nav-toggle-label {
        position: fixed;
        display: flex;
        justify-content: center;
        align-items: center;
        cursor: pointer;
        width: 2.2rem;
        height: 2.2rem;
        top: 1rem;
        left: 2.25rem; 
        padding: 0 .15rem 0 .15rem;
        border-radius: 50%;
        background: var(--nav-toggle-label-color);
        z-index: 2;
    }

    .nav-toggle-label::before {
        position: absolute;
        content: '';
        width: 2.2rem;
        height: 2.2rem;
        top: 0;
        left: 0; 
        right: 0;
        bottom: 0;
        margin: 0 auto 0 auto;
        border-radius: 50%;
        transform: scale(0);
        background: var(--nav-toggle-label-before-color);
        outline: 2px solid var(--nav-toggle-label-before-color);
        outline-offset: 1px;
        transition: transform 200ms ease-out;
    }

    .nav-toggle-label:hover::before {
        transform: scale(1);
        transition: transform 200ms ease-out;
    }
    
    .burger, .burger::before, .burger::after {
        position: relative;
        width: 75%;
        height: 2px;
        left: 0; 
        right: 0; 
        margin: 0 auto 0 auto;
        background: var(--header-link-color);
        border-radius: 60px;
        transition: width 200ms ease-out,
                    height 200ms ease-out,
                    background 200ms ease-out;
        
    }

    .burger {
        transition: background 0ms linear;
    }

    .burger::before, .burger::after {
        content: '';
        width: 100%;
        position: absolute;
        transition: width 200ms ease-out,
    }

    .burger::before{
        bottom: .4rem;
    }

    .burger::after{
        top: .45rem;
    }

    .nav-toggle-label:hover > .burger {
        width: 80%;
        height: 4px;
        background: var(--lightgray);
        transition: width 200ms ease-out,
                    height 200ms ease-out,
                    background 200ms ease-out;
    }

    .nav-toggle-label:hover > .burger::before {
        width: 75%;
        background: var(--lightgray);
        transition: width 200ms ease-out,
                    height 200ms ease-out,
                    background 200ms ease-out;
    }

    .nav-toggle-label:hover > .burger::after {
        width: 75%;
        background: var(--lightgray);
        transition: width 200ms ease-out,
                    height 200ms ease-out,
                    background 200ms ease-out;
    }

    .nav-toggle:checked ~ .nav-bar {
        left: 0;
        transition: left 250ms ease-out;
    }

    .nav-toggle:checked ~ .nav-toggle-label > .burger {
        background: transparent;
        transition: background 0ms linear;
    }

    .nav-toggle:checked ~ .nav-toggle-label > .burger::before {
        top: 0;
        transform: rotate(45deg);
        transition: transform 200ms ease-out;
    }
    
    .nav-toggle:checked ~ .nav-toggle-label > .burger::after {
        top: 0;
        transform: rotate(-45deg);
        transition: transform 200ms ease-out;
    }

    .nav-bar {
        position: fixed;
        display: flex;
        flex-direction: column;
        justify-content: flex-start;
        align-items: flex-start;
        top: 0;
        left: -100%;
        width: 7rem;
        height: auto;
        transform-origin: left;
        padding: 4.5rem 0 1rem .8rem;
        border-radius: 0 0 2rem 0;
        background: var(--body-color);
        border-right: 1px solid var(--lightgray);
        border-bottom: 1px solid var(--lightgray);
        z-index: 1;
        transition: left 1300ms ease-out;
    }

    .header-brand {
        flex-direction: column;
        justify-content: center;
        align-items: flex-start;
        width: 100%;
        height: auto;
        margin: 0 0 .5rem 0;
    }
    
    .header-links {
        flex-direction: column;
        justify-content: center;
        align-items: flex-start;
        width: 100%;
        height: auto;
    }

    .home-link::before, .about-link::before, .board-link::before, .app-link::before {
        display: none;
    }

    .home-link::after {
        content: 'Home';

    }

    .about-link::after {
        content: 'About';

    }

    .board-link::after {
        content: 'Board';

    }

    .app-link::after {
        content: 'App';
    }

    .home-link::after, .about-link::after, .board-link::after, .app-link::after {
        display: flex;
        justify-content: flex-start;
        align-items: center;
        top: 0;
        right: 0;
        left: 0;
        bottom: 0;
        width: 3rem;
        height: 2rem;
        padding: .15rem 0 0 .25rem;
        font-size: .725rem;
        font-weight: bold;
        /* outline: 1px solid red; */
    }

    .svg-home-container {
        width: 2.25rem;
        height: 2.25rem;
        /* outline: 1px solid red; */
    }

    .error-container {
        padding: 0;
    }

    .output-container {
        padding: .25rem .5rem .5rem .5rem;
    }

}

@media screen and (max-width: 480px){
    /*----------@media-footer----------*/
    .notice-container { 
        flex-direction: column-reverse;
        gap: .25rem;
    }

    .copyright:nth-child(2) {
        border-right: 1px solid transparent;
    }

    /*----------@media-appScreen----------*/
    .input-container {
        padding: 1rem 0 1rem 0;
     }
     
    .input-wrapper{
        width: 100%;
        flex-direction: column-reverse;
    }

    .control-wrapper {
        width: var(--control-wrapper-width-media500);
    }

    .input-source-wrapper, .input-target-wrapper, .input-source, .input-target  {
        border-radius: 0 0 2rem 2rem;
    }

    .dropdown-source-wrapper, .dropdown-target-wrapper, .dropdown-source, .dropdown-target {
        border-radius: 2rem 2rem 0 0;
    }

    .dropdown-source-wrapper::after, .dropdown-target-wrapper::after {
        content: none;
    }

    .sharp-source-span::before, .sharp-target-span::before {
        top: -.30rem;
    }

    .sharp-source-span:hover::before, .sharp-target-span:hover::before {
        width: calc(var(--smart-terp-before-height) + .1rem) ;
        height: calc(var(--smart-terp-before-height) + .1rem);
        top: var(--smart-terp-before-top - 0.1rem);
        left: calc(var(--smart-terp-before-left)); 
        font-size: var(--smart-terp-before-font-size-hover);
        cursor: pointer;
        transition: font-size 250ms ease-out,
                    width 250ms ease-out,
                    height 250ms ease-out,
                    left 250ms ease-out,    
                    color 250ms ease-out;
    }

    .output-wrapper, .match-wrapper {
        width: 95%;
    }

    .match-container::before {
        width: 100%;
    }

    /*----------@media-aboutScreen----------*/
    .img-wrapper {
        flex-direction: column;
        justify-content: center;
        align-items: center;
    }
}

@media screen and (max-width: 340px) {
    /*----------@media-footer----------*/
    .footer-links {
        flex-direction: column;
        gap: .5rem;
    }
}