* {margin:0; padding:0;}
/* img {height: 100%;} */
body {--webkit-font-smoothing: antialiased; color:black; font-family:Verdana, Geneva, Tahoma, sans-serif; line-height:28px; font-size:1.1rem;}

/* elements appear on desktop or mobile only */
[desktop] {display: none !important;}
[mobile] {display: initial !important;}

@media screen and (min-width:980px) {
  [desktop] {display: initial !important;}
  [mobile] {display: none !important;}
}



.spacer {
  height: 10vh; height:10dvh;
}



& header {
  background:#0a001b; color:#fff;

  & #intro {
    display:block; width:95%; margin:auto; 
    cursor:default;
    
    & #introTitle {
      font-size:4rem; font-family:Verdana, Geneva, Tahoma, sans-serif;
      font-weight:100;
    }

    
    @media screen and (min-width: 980px) {
      & {width:65%;}
      & #introTitle {font-size:6rem;}
    }
  }
}





& footer {
  background:#0a001b; color:#fff;
  min-height:200px; width:100%;

  & #footer-content {
    position:relative; width:95%; margin:auto;
    bottom: 100px; min-height:100px;

    & #githubLink {
      position:absolute; bottom:-65px; right: 15px;
    }

    & #createdBy {
      font-size:medium; font-weight:normal;
      position:absolute; bottom:0px; right:15px;
      text-align:right;
      color: #9292a0;

      & a {
        display:inline-block;
        position:relative;
        color: #a5a5b5;
        text-decoration: none;
      
        &:hover{color:#bdc5ca; transition:color .25s;}
      
        &::after {
          content: '';
          position:absolute;
          width: 100%;
          transform:scaleX(0);
          height:2px;
          bottom:0;
          left:0;
          background-color:#a5a5b5;
          transition: transform .25s ease-out, color .25s;
        }
      
        &:hover::after {
          transform:scaleX(1);
          transform-origin:bottom center;
          color: #9292a0;
        }
      }
    }

    & #sitemap {visibility:collapse;}


    @media screen and (min-width:980px) {
      & {width:65%;}
    }
  }
}



.archContainer {
  display:block; width:100%; overflow:hidden;
}

.arch {
  display:block; width:125%; height:284px;
  border-radius:50%; background:#fff;
  position:relative; margin-left:-12.5%;

  &#archTop {top:142px;}
  &#archBottom {bottom:142px;}
}





#bodyContent {
  display:block; position:relative;
  width:95%; margin:auto;
  min-height:calc(100vh - 500px); min-height:calc(100dvh - 500px);
  z-index:1;


  @media screen and (min-width: 980px) {
    & {
      width:65%;
    }
  }
}





.details {
  & .detailTitle, & .detailSynopsis {display:block; text-align:center; width:80%; margin:auto;}

  & .detailTitle {font-weight:bold; margin-bottom:15px;}
  & .detailSynopsis {}
}




#techs {
  & #mailto {
    text-decoration: none;
    color:rgb(100, 155, 155); transition: color .25s;
    &:hover {color:rgb(128, 195, 195);}
  }

  /* & #techsContent {} */
}


.techHighlight {
  display:inline-block; width:max-content; margin:4px 1px; padding:2px 7px;
  border-radius:3px; border:1px solid #f8f8f8; background-color:#fdfdfd;
  font-weight:600;
  box-shadow: 1px 3px 4px 0px rgba(0,0,0,.1);
  transition: box-shadow .25s;
  
  & .techHighlight-title {
    color:rgb(15,15,15); text-decoration: none; transition:color .25s;
  }

  &:hover {box-shadow: 0px 3px 4px 0px rgba(0,0,0,.25);}
  &:hover * {color:rgb(38, 143, 169);}
}





#projectContent {
  display:flex; flex-wrap:wrap;
  justify-content: space-around;
}

.highlightbox {
  display:flex; flex-direction:column; width:calc(100% / 3 - 64px); min-width:300px; position:relative;
  margin:15px; padding:15px;
  border-radius: 7px; border:1px solid rgba(0,0,0,.3); background-color:#fdfdfd;
  box-shadow: 1px 3px 4px 0px rgba(0,0,0,.2);
  transition:box-shadow .25s;

  &:hover {box-shadow: 0px 7px 6px 0px rgba(0,0,0,.3);}

  & .highlight-title {font-weight:bold; font-size:1.8rem; margin:19px 0px; text-align:center;}
  & .highlight-img {display:block; max-width:100%; max-height:100px; margin:0 auto; text-align:center;}
  & .highlight-description {font-size:.95rem; font-family:Verdana, Geneva, Tahoma, sans-serif; padding:1px 7px; margin:5px 0px; text-align:center;}
  & .highlight-footer {margin-top:auto;}

  & .highlight-buttons {
    display:flex; flex-wrap:wrap; justify-content:center; gap:.5rem;
    width:100%; margin:9px 0px; 
  }
  
  & .highlight-pill {
    display:inline-block; border-radius:999px; padding: 1px 7px; margin:3px 0px;
    color:white; text-decoration: none;
    font-size:.8rem; font-family:Verdana, Geneva, Tahoma, sans-serif; font-weight:bold;
    transition:box-shadow .25s;
    background-color:rgb(100, 155, 155); border: 1px solid rgb(77, 119, 119);

    &:hover {box-shadow:1px 3px 3px 0px rgba(0,0,0,.15);}


    /* Want to implement something like this ... these colors just aren't working right */
    /* &#pill-apache2 {background-color:rgb(142, 70, 52);}
    &#pill-bash {background-color:rgb(65, 65, 65); color: rgb(59, 245, 84);}
    &#pill-css {background-color:rgb(26, 147, 216);}
    &#pill-ecs {background-color:rgb(234, 119, 37);}
    &#pill-hardware {background-color:rgb(158, 134, 180);}
    &#pill-html {background-color:rgb(234, 119, 37);}
    &#pill-i2c {background-color:rgb(158, 134, 180);}
    &#pill-iis {background-color:rgb(57, 154, 186);}
    &#pill-jquery {background-color:rgb(26, 147, 216);}
    &#pill-js {background-color:rgb(26, 147, 216);}
    &#pill-json {background-color:rgb(158, 134, 180);}
    &#pill-linux {background-color:rgb(217, 231, 19);}
    &#pill-motors {background-color:rgb(158, 134, 180);}
    &#pill-mysql {background-color:rgb(142, 70, 52);}
    &#pill-php {background-color:rgb(71, 90, 109);}
    &#pill-py {background-color:rgb(217, 231, 19);}
    &#pill-realms {background-color:rgb(158, 134, 180);}
    &#pill-samba {background-color:rgb(158, 134, 180);}
    &#pill-sqlite3 {background-color:rgb(142, 70, 52);}
    &#pill-tkinter {background-color:rgb(158, 134, 180);}
    &#pill-tsql {background-color:rgb(142, 70, 52);}
    &#pill-usbcc {background-color:rgb(158, 134, 180);}
    &#pill-wdm {background-color:rgb(10, 28, 99);}
    &#pill-windows {background-color:rgb(57, 154, 186);}
    &#pill-xml {background-color:rgb(208, 133, 59);} */
  }
}





.careerbox {
  display:block; width:calc(100% - 64px); max-width:600px; position:relative;
  margin:15px auto; padding:15px;
  border-radius: 7px; border:1px solid rgba(0,0,0,.3); background-color:#fdfdfd;
  box-shadow: 1px 3px 4px 0px rgba(0,0,0,.2);
  transition:box-shadow .25s;

  &:hover {box-shadow: 0px 7px 6px 0px rgba(0,0,0,.3);}

  & .career-title {display:inline-block; font-weight:bold; font-size:1.4rem; max-width:calc(100% - 90px); height:60px; line-height:60px; vertical-align:bottom; overflow:hidden;}
  & .career-img {display:block; float:right; font-size:.9rem; line-height:.95rem; margin-right:15px; max-width:60px; max-height:60px;}
  & .career-position {display:block; width:calc(100% - (60+15)px); font-size:.85rem; line-height:.95rem; font-weight:bolder; font-family:Verdana, Geneva, Tahoma, sans-serif; margin:-15px 0px 5px 0px;}
  & .career-date {display:block; width:calc(100% - (60+15)px); font-size:.8rem; line-height:.95rem; font-family:Verdana, Geneva, Tahoma, sans-serif;}
  & .career-description {
    display:block; width:100%; font-size:.9rem; line-height:1.1rem; margin:11px 0px 0px 0px; font-family:Verdana, Geneva, Tahoma, sans-serif;
    & ul {
      font-size:.8rem;
      margin-left:23px;
      & li {margin:7px 0px;}
    }
  }
}





.icndiv {
  display:inline-block;
  margin-right:5px;
  background-size:contain;
  background-repeat:no-repeat;
  mask-repeat: no-repeat;
  background-color:#9292a0;
  transition:background-color .25s;

  &:hover {
    background-color:#bdc5ca;
  }

  &.tiny {width:10px; height:10px; mask-size:10px 10px; -webkit-mask-size:10px 10px;}
  &.xsml {width:12px; height:12px; mask-size:12px 12px; -webkit-mask-size:12px 12px;}
  &.sml {width:14px; height:14px; mask-size:14px 14px; -webkit-mask-size:14px 14px;}
  &.med {width:18px; height:18px; mask-size:18px 18px; -webkit-mask-size:18px 18px;}
  &.lrg {width:22px; height:22px; mask-size:22px 22px; -webkit-mask-size:22px 22px;}
  &.xlrg {width:26px; height:26px; mask-size:26px 26px; -webkit-mask-size:26px 26px;}
  &.xxlrg {width:38px; height:38px; mask-size:38px 38px; -webkit-mask-size:38px 38px;}
  &.px50 {width:50px; height:50px; mask-size:50px 50px; -webkit-mask-size:50px 50px;}
  &.px80 {width:80px; height:80px; mask-size:80px 80px; -webkit-mask-size:80px 80px;}
  &.px100 {width:100px; height:100px; mask-size:100px 100px; -webkit-mask-size:100px 100px;}
  &.px200 {width:200px; height:200px; mask-size:200px 200px; -webkit-mask-size:200px 200px;}

  &.github {-webkit-mask-image:url(../images/logos/github.svg); mask-image:url(../images/logos/github.svg);}
  &.globe {-webkit-mask-image:url(../images/globe.svg); mask-image:url(../images/globe.svg);}
  &.hyperlink {-webkit-mask-image:url(../images/hyperlink.svg); mask-image:url(../images/hyperlink.svg);}
  &.link {-webkit-mask-image:url(../images/link.svg); mask-image:url(../images/link.svg);}
  &.linkedin {-webkit-mask-image:url(../images/logos/linkedin.svg); mask-image:url(../images/logos/linkedin.svg);}
  &.www {-webkit-mask-image:url(../images/www.svg); mask-image:url(../images/www.svg);}
}