/*----------------------FONTS----------------------*/
@font-face {
    font-family: 'Ubuntu';
    src: url('fonts/UbuntuSans-Regular.ttf'),
         url('fonts/UbuntuSans-Regular.woff'),
         url('fonts/UbuntuSans-Regular.woff2');
    font-weight: 100 800;
    font-style: normal;
}
@font-face {
    font-family: 'Ubuntu';
    src: url('fonts/UbuntuSans-Italic.ttf'),
         url('fonts/UbuntuSans-Italic.woff'),
         url('fonts/UbuntuSans-Italic.woff2');
    font-weight: 100 800;
    font-style: italic;
}

/*----------------------VARIABLES----------------------*/
 
:root {
/*colors*/
--nothing: hsl(218, 75%, 86%);
--hue: 218;
--sat: 75%;
--background:  var(--hue), 100%,       12%;
--super-light: var(--hue), var(--sat), 77%;
--light:       var(--hue), var(--sat), 82%;
--medium:      var(--hue), var(--sat), 65%;
--dark:        var(--hue), var(--sat), 80%;
--labs:        var(--hue), 100%,       50%;
--labs-text:   var(--hue), 100%,       90%;
--super-dark: 0, 0%, 0%;
--shadow-light: -3px 3px clamp(4px, .5vw, 8px) hsla(0, 0%, 0%, .1);
--shadow-dark: -3px 3px clamp(4px, .5vw, 8px) hsla(0, 0%, 0%, .5);
/*scaling*/
--title-size-scale: clamp(25px, 4vw, 45px);   
--v-gap: calc(var(--title-size-scale)* 0.6);
--resume-w: calc(((var(--icon-width) - 4.5px) * 3) + (var(--icon-gap) * 2));
--icons-w: calc((var(--icon-width) * 3) + (var(--icon-gap) * 2));
--pad-l: calc(100vw - var(--button-spacing) - (var(--icons-w) * .60));
--pad-r: calc(100vw - (var(--button-spacing) + (var(--icons-w) * .60)));
--icon-width: calc(var(--title-size-scale)/1.06);
--button-spacing: clamp(calc(50% + 130px), 80vw, calc(50% + 400px));
--icon-gap: calc(var(--title-size-scale)*2 - 35px);
--view-resume-width: calc(((var(--icon-width) - 4.5px) * 2) + (var(--icon-gap) * 1));
--homelab-scale: clamp(50px, 20vw, 160px);
--border: 1.5px solid hsla(var(--light), .2);
}

/*----------------------SCROLLBAR----------------------*/
*::-webkit-scrollbar{
    width: 6px;
}

/* Track */
*::-webkit-scrollbar-track{
  background: transparet;
}

/* Thumb */
*::-webkit-scrollbar-thumb{
  background-color: var(--med-blue);
  border-radius: 10px;
}

/* Interaction feedback  */
*::-webkit-scrollbar-thumb:hover  { background-color: var(--light-blue);}
*::-webkit-scrollbar-thumb:active { background-color: var(--super-light-blue);}

*,*::before,*::after { box-sizing:border-box;}

body {
    margin: 0;
    background: hsla(var(--background), 1);
    display: flex;
    flex-direction:column;
    min-height: 100vh;
    gap:var(--v-gap);
    flex-direction: column;
    font-family: Ubuntu;
    
}
/*----------------------TOP TITLE BAR----------------------*/

.title {
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: center;
}

.name {
    font-style: italic;
    font-weight: 800;
    font-size: var(--title-size-scale);
    color: hsla(var(--medium), 1);
    left: 50%;
    margin-top: .6rem;
    margin-bottom: 0;
    text-shadow:var(--shadow-light);
}

.job-title {
    font-weight: 200;
    font-size: calc(var(--title-size-scale)/2);
    line-height: 1;
    color: hsla(var(--medium), 1);
    left: 50%;
    margin: 0;
    text-shadow: var(--shadow-light);
}

.view-resume {
    font-weight: 800;
    background-color: hsla(var(--medium), 1);
    font-size: clamp( 8px, calc(var(--view-resume-width)/8.5), 20px);
    font-stretch: condensed;
    
    color: hsla(var(--background), 1);
    border-radius: 6px;
    text-decoration: none;
    position:absolute;
    height: calc(var(--icon-width)/1.3);
    width: var(--view-resume-width);
    top: calc(var(--title-size-scale)/1.3);
    transform: translateX(50%) scale(1);
    right: var(--button-spacing);
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center;
    filter: drop-shadow(var(--shadow-light));
    transform-origin: center center;
    transition: transform .05s ease-in-out;
}

.icon-group {
    display: flex;
    align-items: center;
    position: absolute;
    top: calc(var(--title-size-scale)/1.62);
    transform: translateX(-50%);
    left: var(--button-spacing);
    gap: var(--icon-gap);    
}

.icon-group svg {
    height: var(--icon-width);
    fill: hsla(var(--medium), 1);
    filter: drop-shadow(var(--shadow-light));
    transition: transform .05s ease-in-out;
}

.icon-btn{
    background: transparent;
    border: transparent;
    padding: 0;
    cursor: pointer;

}

.icon-group svg:hover {
    transform: scale(1.1);
}

.view-resume:hover {
    transform: translateX(50%) scale(1.05);
}
/*----------------------POPUP----------------------*/
dialog::backdrop,
.modal-backdrop{ 
  background: hsla(var(--background), .2);
  backdrop-filter: blur(3px);
}

.modal{
  border: none;
  padding: 2rem 2.5rem;
  border-radius: 12px;
  background: hsla(var(--background), 1);
  color: hsla(var(--light), 1);
  display: flex;
  flex-direction: column;
  position: fixed;
  margin: 0;
  transform: translate(-50%, -50%);
  top: 20%;
  left:  50%;
  max-width: 90vw;
  gap: .8rem;
  box-shadow: var(--shadow-light);
  z-index: 1000;
}

.modal:not([open]){ display:none; }

.hidden{ display:none; }

.modal-close{
  position: absolute;
  top: .6rem;
  right: .8rem;
  font-size: 1.8rem;
  background: transparent;
  border: none;
  color: hsla(var(--medium), .5);
  cursor: pointer;
}

.modal-action{
  background: hsla(var(--medium), .7);
  color: hsla(var(--light), 1);
  font-weight: 600;
  padding: .5rem .7rem;
  border: none;
  border-radius: 6px;
  cursor: pointer;
  transition: scale .05s ease-in-out;
  font-size: 10px;
}
.modal-action:hover{ scale: .97 }

dialog h3{
    font-size: 1rem;
}

/*----------------------MENU----------------------*/
.nav-menu{
    display: grid; 
    grid-template-columns: repeat(4, 1fr);
    padding-left:  calc(var(--pad-l) + 5%);
    padding-right: calc(var(--pad-r) + 5%);
    gap: clamp(2px, .5vw, 20px);
}

.menu-item{
  position: relative;
  aspect-ratio: 1/1;
  display: block;
  overflow: hidden;
  clip-path: inset(7% 3% 7% 3% round 8px);
  border-radius: 8px;
  filter: drop-shadow(var(--shadow-light));
  transition: clip-path .15s ease-in-out;
}

.menu-item:hover, .menu-item.selected{
  clip-path: inset(0% 3% 0% 3% round 8px);
}

.menu-item img{
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  filter: saturate(0.1)  blur(4px) opacity(.5);
  transition: filter .1s ease-in-out;
  
}

.menu-item:hover img, .menu-item.selected img{
  filter: none;
}

.menu-item span{
  position: absolute;
  bottom: 50%;
  left: 50%;
  transform: translate(-50%, 50%);
  width: 100%;
  height: 100%;
  text-align: center;
  font-stretch: condensed;
  font-weight: 800;
  font-size: calc(var(--title-size-scale) / 2.2);
  line-height: calc(var(--title-size-scale) / 2.1);
  color: hsla(var(--light));
  text-shadow: var(--shadow-light);
  pointer-events: none;  
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center; 
  background-color: hsla(var(--background), .5);
  transition: opacity .1s ease-in-out;
}

.menu-item:hover span, .menu-item.selected span{
    opacity: 0;
}

/*----------------------body----------------------*/
.content {
    display: flex;
    flex: 1 1 0;
    min-height: 0;
    flex-direction: column;
    padding: calc(var(--v-gap) * .05) var(--pad-r) calc(var(--v-gap) * 2) var(--pad-l);
    filter: var(--shadow-light);
}

.menu-title{  
    margin: 0;
    padding-top: calc(var(--v-gap) * .75);
    text-align: center;
    font-size: calc(var(--title-size-scale) * .9);
    font-weight: 600;
    color: hsla(var(--medium), 1);
    text-shadow: var(--shadow-light);
    border-top: var(--border);
    border-left: var(--border);
    border-right: var(--border);
    transition: opacity .1s ease-in-out;
    background: hsla(var(--medium), .1);
    border-radius: 12px 12px 0px 0px;
}

.content-box{
    min-height: 0;
    background: hsla(var(--medium), .1);
    border-radius: 0px 0px 12px 12px;
    overflow-y: auto;
    overflow-x: hidden;
    transition: opacity .3s ease-in-out;
    padding: 2% ;
    border-bottom: var(--border);
    border-left: var(--border);
    border-right: var(--border);
}

.content-box.fade-out{
  opacity: 0;
}

/*----------------------BLOG POST----------------------*/

.education{
    
    margin: 0 var(--v-gap) var(--v-gap) var(--v-gap);
    font-size: clamp(0.9rem, calc(var(--title-size-scale) / 2), 1.1rem);
    display: grid;
    gap: 0 2rem;
    grid-template-columns: repeat(auto-fit, minmax(0, 400px));
    justify-content: center;
}

.aboutme{
    
    margin: 0 var(--v-gap) var(--v-gap) var(--v-gap);
    font-size: calc(var(--title-size-scale) / 2);
}

.work{
    
    margin: 0 var(--v-gap) var(--v-gap) var(--v-gap);
    font-size: calc(var(--title-size-scale) / 2);
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(0, 500px));
    justify-content: center;
}

h2{
    font-size: calc(var(--title-size-scale) / 1.5);
    font-weight: 500;
    margin: 0;
    padding: calc(var(--title-size-scale) / 5) 0 calc(var(--title-size-scale) / 10) 0;
    text-decoration: underline;
    color: hsla(var(--light), 1);
}

h3{
    font-weight: 800;
    font-size: calc(var(--title-size-scale) / 2.1);
    font-stretch: condensed;
    margin: 0;
    padding: calc(var(--title-size-scale) / 10) 0 0 0;
    color: hsla(var(--light), 1);
}

h4{
    font-weight: 200;
    font-style: italic;
    margin: 0;
    padding: 0;
    color: hsla(var(--light), 1);
}

ul{
    font-weight: 200;
    margin: 0;
    padding: 0 0 0 calc(var(--title-size-scale)/1.5);
    list-style: circle;
    color: hsla(var(--super-light), 1);
}

li{
    font-weight: 200;
    margin: 0;
    padding: 0 0 0 0;
    list-style: circle;
     color: hsla(var(--super-light), 1);
}

strong{
    font-weight: 500;
    margin: 0;
    padding: 0;
     color: hsla(var(--light), 1);
}

p{
    margin: 0;
    padding: 0 0 calc(var(--title-size-scale) / 3) 0;
    font-size: calc(var(--title-size-scale) / 2);
    font-weight: 200;
     color: hsla(var(--super-light), 1);
}

td{
  font-size: calc(var(--title-size-scale) / 2.4);
}
tr{
  font-size: calc(var(--title-size-scale) / 2.4);
  color: hsla(var(--super-light), 1);
}


.paragraph{
    margin: 0;
    padding: 0;
    font-size: calc(var(--title-size-scale) / 2.5);
    font-weight: 200;
     color: hsla(var(--super-light), 1);
}

.link{
    font-weight: 400;
    font-size: calc(var(--title-size-scale) / 2.8);
    color: hsla(var(--light), 1);
    margin: 0;
    padding: 0;
    font-style: italic;
    text-decoration: none;
    transition: color ;
}

.link:hover{
    color: hsla(var(--medium), 1);
    text-decoration: underline;
}

.homelabs{  
    display: grid;
    grid-template-columns: repeat(auto-fit, calc(var(--homelab-scale)/.8));
    grid-template-rows: repeat(auto-fit, calc(var(--homelab-scale)/.8));
    justify-content: center;
    color: hsla(var(--light), 1);
}

.adds, .ticketing, .vm, .other, .ubuntu, .troubleshooting, .aws{
    margin: .2rem;
    text-decoration: none;
    aspect-ratio: 1/1;
    padding: 0;
    border-radius: 8px;
    display: grid;
    grid-template-rows: auto 1fr;
    aspect-ratio: 1/1;
    padding: 10%;
    transition: transform .05s ease-in-out;
    filter: drop-shadow(var(--shadow-light));
    background: linear-gradient(hsla(var(--labs), .3), hsla(var(--labs), .15));
    color: hsla(var(--labs-text), .9);
}

.adds:hover, .ticketing:hover, .vm:hover, .other:hover, .troubleshooting, .ubuntu:hover, .aws:hover {
    transform: scale(.99);
    /*border-right: 2px solid hsla(var(--dark), .1);*/
    /*border-top: 2px solid hsla(var(--dark), .1);*/
    box-shadow:(var(--shadow-dark));
}



.ubuntu{
    filter: hue-rotate(40deg);
}

.adds{
    filter: hue-rotate(80deg);
}

.troubleshooting{
    filter: hue-rotate(120deg);
}

.vm{
    filter: hue-rotate(160deg);
}

.other{
    filter: hue-rotate(200deg);
}

.adds:hover, .ticketing:hover, .vm:hover, .other:hover, .troubleshooting:hover, .ubuntu:hover, .aws:hover {
    transform: scale(.99);
    border-right: 2px solid hsla(var(--super-dark), .1);
    border-top: 1.5px solid black;
    box-shadow:(var(--shadow-light));
    
}

h5{
    font-weight: 800;
    font-size: calc(var(--homelab-scale)/9);
    font-stretch: condensed;
    align-self: start;
    justify-self: start;
    margin: 0;
    
}

h6{
    font-weight: 400;
    font-size: calc(var(--homelab-scale)/7.5);
    margin: calc(var(--homelab-scale)/15) 0 0 0;
        
}

.quick-note{
    margin: 0;
    font-size: calc(var(--title-size-scale) / 2);
    text-align: center;
    font-weight: 400;
    color: hsla(var(--light), .9);
    opacity: .95;
    font-style: italic;
    padding-inline: calc(var(--title-size-scale)/2.8);
    padding-bottom: 0;
}

.blogpost{
    margin: 0 var(--v-gap) var(--v-gap) var(--v-gap);
    font-size: calc(var(--title-size-scale) / 3);
}

.blog-img{
   width: 100%;
   padding: calc(var(--homelab-scale)/10);
}

.blogpost a{
    color: hsla(var(--medium), 1);
    text-decoration: none;
}

.skills {
    margin: 0;
    padding: 0 0 calc(var(--title-size-scale) / 3) calc(var(--title-size-scale)/2);
    font-size: calc(var(--title-size-scale) / 2);
    font-weight: 200;
}