/* Import DM Mono font */
@import url('https://fonts.googleapis.com/css2?family=DM+Mono:ital,wght@0,300;0,400;0,500;1,300;1,400;1,500&family=Fira+Code:wght@300..700&family=Space+Mono:ital,wght@0,400;0,700;1,400;1,700&display=swap');
/* Fira Sans, Lora, Inter */
@import url('https://fonts.googleapis.com/css2?family=Fira+Sans:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;0,800;0,900;1,100;1,200;1,300;1,400;1,500;1,600;1,700;1,800;1,900&family=Inter:ital,opsz,wght@0,14..32,100..900;1,14..32,100..900&family=Lora:ital,wght@0,400..700;1,400..700&display=swap');
body {
    font-size: 18;
    margin: auto;
    width: 640px; 
    padding: 50px;
    justify-content: center;
    font-family: 'Inter', system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
}

div {
    margin-bottom: 1em;
}

code {
    font-family: /*'Comic Sans MS',*/ 'Fira Code', Monaco, 'Courier New', Courier, monospace;
    font-weight: 550;
    font-size: 85%;
    color: blue;
    /* text-decoration:underline rgba(255,0,255,0.25) 5px; */
    text-decoration-skip-ink: none;
    /* border: solid red 1px; */
    /* text-decoration: solid underline rgba(194, 36, 97, 0.5) 2px; */
    /* text-decoration-skip-ink: none; */
}

a:link{
    color: black;
}
/* a:hover {
    text-decoration: overline underline rgb(153, 87, 200) wavy;
} */
a:visited{
    color: inherit;
}
.center {
    text-align: center;
}

.Name {
    font-size: 180%;
    /* font-family: Lora, serif; */
    /* font-style: italic; */
    /* font-variant: small-caps; */
    /* font-variant-caps: all-small-caps; */
    /* font-weight: bold; */
    text-align: center;
    margin-bottom: 0.25em;
    
}

.MyWarning {
    color: red;
    text-align: center;
    font-weight: bold;
}

span.blockspam {
  display: none;
}

.PortfolioItem {
    img {
        max-width:60%;
        pointer-events: none;
        /* max-height:50%;  */
        border: 3px solid;
    }
}

.MainPhoto {
    text-align: center;
    img {
        max-width:75%;
        pointer-events: none;
        /* max-height:50%;  */
        border: 3px solid;
    }
    font-size: 80%;
}

.ImageBorder {
    border-width: 10px;
    border-color: red;
}




.SummaryNav {
    text-align: center;
}

.ProjectName {
    font-weight: bold;
    font-size: 110%;
    font-style: italic;;
    margin-bottom: 0.25em;
}
.ProjectDescription {
    ul {list-style-type: "> "}
}

.FunName {
    font-weight: bold;
    font-size: 110%;
    font-style: italic;;
    margin-bottom: 0.25em;
}
.FunDescription {
    font-size: 85%;
    ul {list-style-type: "◆ ";}
    /* ul span {vertical-align: middle;} */
    /* ul li::marker {font-size: 125%}; */
}

.un {
    display: inline-block;
    padding-bottom:2px;
    /* background-image: linear-gradient(#7e264e 0 0); */
    background-image: linear-gradient(to right, white 0, red 20%, magenta 50%, blue 80%, white 100%);
    background-position: 0 100%; /*OR bottom left*/
    background-size: 0% 4px;
    background-repeat: no-repeat;
    transition:
      background-size 0.3s,
      background-position 0s 0.3s; /*change after the size immediately*/
  }
  
  .un:hover {
    background-position: 100% 100%; /*OR bottom right*/
    background-size: 100% 4px;
  }

.CodeOutBox {
    border: black 2px;
    text-align: center;    
}
py-script {
    font-family: /*'Comic Sans MS',*/ 'Fira Code', Monaco, 'Courier New', Courier, monospace;
    font-size: 80%;
    color: blue;
    border: black 2px;
}

.space { margin-top: 300px; }