style.css.bak.old

body {
  font-family: sans-serif;
  text-align: center;
  background-color: #004;
  color: rgba(13, 130, 255);
}

.banner {
  font-size: clamp(2.5rem, 14vw * 0.75, 4.5rem);
  padding: 2rem 0;
  width: 100%;
  text-align: center;
  z-index: 155;
  color: rgba(13, 130, 255, 1);
  font-family: "Libre Franklin", sans-serif;
  animation-name: fade-in;
  animation-duration: 3s;
}
@keyframes fade-in {
  0% {
    color: #004;
  }
  25% {
    color: #004;
  }
  100% {
    color: rgba(13, 130, 255, 1);
  }
}

.splash-overlay {
  /* Transparent overlay to briefly  prevent hover text from showing  (depending on where the user's cursor  is) when the page loads */
  height: 0.1vh;
  position: fixed;
  top: 10vh;
  width: 100%;
  animation-name: shrink-overlay;
  animation-duration: 3s;
  animation-timing-function: ease-in;
  background-color: rgba(0, 0, 0, 0);
  z-index: 99;
}
@keyframes shrink-overlay {
  from {
    height: 80vh;
  }
  to {
    height: 0.1vh;
  }
}

.splash-img {
  width: 20%;
  min-width: 240px;
  margin: 0 auto;
  font-family: "Roboto", sans-serif;
  position: relative;
  z-index: 10;
}

.splash-img img {
  width: 80%;
  max-width: 14rem;
  margin: 0 auto;
  border: 8px solid black;
  border-radius: 100%;
  -webkit-border-radius: 100%;
  -moz-border-radius: 100%;
  -ms-border-radius: 100%;
  -o-border-radius: 100%;
  box-shadow: 0 0 5em 2em black;
}

.splash__hover--fav-pic {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 90%;
  max-width: 16rem;
  background-color: rgba(0, 0, 0, 0.65);
  color: white;
  border-radius: 20px;
  padding: 3rem;
  font-style: italic;
  margin: 0 auto;
  overflow: visible;
  display: none;
  z-index: 99;
}

.splash-img:hover span {
  display: inline;
}

.splash__hover2--me-now {
  color: #ff0;
}

.splash-img:hover .splash__hover2--me-now {
  display: inline;
  text-decoration: underline;
  cursor: pointer;
}

.splash-img:hover .splash__hover2--me-now--old-guy {
  position: fixed;
  width: 80%;
  max-width: 12rem;
  border-radius: 20px;
  top: 60%;
  left: 50%;
  transform: translate(-50%, -50%);
  display: none;
  z-index: 100;
}

.splash__hover2--me-now:hover .splash__hover2--me-now--old-guy {
  display: inline;
}

.splash--getting-blurry {
  visibility: hidden;
  background-color: #ff0;
  color: #006;
  font-size: 1rem;
  font-weight: 900;
  text-align: center;
  z-index: 111;
}

.splash__hover2--me-now--old-guy:hover .splash--getting-blurry {
  visibility: visible;
}

/*
##########################################################
####################     NAVMENU     #####################
##########################################################
*/

.nav-menu {
  display: flex;
  flex-wrap: nowrap;
  align-items: stretch;
  border: 2px solid rgba(13, 130, 255);
  margin: 4rem auto;
  animation: zoom-in 3s;
  /*
  --navmenu-x variable is based on the viewport width (vw) and is
  set in the media queries section. Width, height, border radius,
  and margins for the navmenu - container and menu items - are all
  calculated using this variable. This allows for optimal responsiveness.
  If the navmenu gets too huge or tiny), I can simply create a breakpoint
  and change the --navmenu-x variable value.
  
  ^ Above was problematic on iOS - disregard.
  
  Section below is replaced in each breakpoint, removing the variable calculations 
  and replacing them with hard-coded vw values to try to fix the problems in iOS.

  border-radius: calc(var(--navmenu-x) * 0.125);
  width: calc(var(--navmenu-x) * .88);
  height: calc(var(--navmenu-x) * .12);
  padding: calc(var(--navmenu-x) * .01);
  */
}
@keyframes zoom-in {
  0% {
    transform: scale(0, 0);
  } 
  80% {
    transform: scale(0, 0);
  } 
  100% {
    transform: scale(1, 1);
  }
}


.nav__menu-item {
  display: flex;
  flex-direction: column;
/*   justify-content: stretch; */
  justify-content: flex-start;
  align-items: center;
  text-align: center;
  /*
  Section below is replaced in each breakpoint, removing the variable calculations 
  and replacing them with hard-coded vw values to try to fix the problems in iOS.
  
  width: calc(var(--navmenu-x) * .062);
  height: calc(var(--navmenu-x) * .8);
  margin: calc(var(--navmenu-x) * -.01) calc(var(--navmenu-x) * .021);
  padding: calc(var(--navmenu-x) * .0112);
  background-size: calc(var(--navmenu-x) * 0.108);
  */
}

.nav__menu-item a {
  border: 2px solid #aaa;
  display: flex;
  flex-direction: column;
  background-color: rgba(13,130,255);
  background-repeat: no-repeat;
  background-position-x: center;
  background-position-y: center;

  /*
  Section below is replaced in each breakpoint, removing the variable calculations 
  and replacing them with hard-coded vw values to try to fix the problems in iOS.
  
  width: calc(var(--navmenu-x) * .105);
  height: calc(var(--navmenu-x) * .105);
  border-radius: calc(var(--navmenu-x) * .055);
  background-size: calc(var(--navmenu-x) * .1); */
}

.nav__menu-item span {
  display: flex;
  flex-direction: column;
  width: 24vw;
  font-size:0.9rem;
  font-family: "Roboto", sans-serif;
  font-weight: 500;
  font-style: italic;
  color: #aaa;
  margin-top:1.2rem;
  visibility: hidden;
}

.nav--music a {
  background-image: url("https://github.com/don-ferris/donferris.me/raw/main/assets/images/turntable.png");
  background-position-x: 0.2vw;
}
.nav--music a:hover {
  perspective: 1000px;
  transform: rotateY(359deg);
  transition: 0.6s;
}
.nav--music:hover span {
  visibility: visible;
}

.nav--home-theater a {
  background-image: url("https://github.com/don-ferris/donferris.me/raw/main/assets/images/home.theater.png");
  background-position-x: 0.2vw;
}
.nav--home-theater a:hover {
  perspective: 1000px;
  transform: rotateY(359deg);
  transition: 0.6s;
}
.nav--home-theater:hover span {
  visibility: visible;
}

.nav--itpro a {
  background-image: url("https://github.com/don-ferris/donferris.me/raw/main/assets/images/it.pro.png");
}
.nav--itpro a:hover {
  perspective: 1000px;
  transform: rotateY(359deg);
  transition: 0.6s;
}
.nav--itpro:hover span {
  visibility: visible;
}

.nav--webdev a {
  background-image: url("https://github.com/don-ferris/donferris.me/raw/main/assets/images/webdev.png");
}
.nav--webdev a:hover {
  perspective: 1000px;
  transform: rotateY(359deg);
  transition: 0.6s;
}
.nav--webdev:hover span {
  visibility: visible;
}

.nav--techfan a {
  background-image: url("https://github.com/don-ferris/donferris.me/raw/main/assets/images/tech.png");
}
.nav--techfan a:hover {
  perspective: 1000px;
  transform: rotateY(359deg);
  transition: 0.6s;
}
.nav--techfan:hover span {
  visibility: visible;
}

.nav--smarthome a {
  background-image: url("https://github.com/don-ferris/donferris.me/raw/main/assets/images/smarthome.png");
}
.nav--smarthome a:hover {
  perspective: 1000px;
  transform: rotateY(359deg);
  transition: 0.6s;
}
.nav--smarthome:hover span {
  visibility: visible;
}

.nav--personal a {
  background-image: url("https://github.com/don-ferris/donferris.me/raw/main/assets/images/human.being.png");
}
.nav--personal a:hover {
  perspective: 1000px;
  transform: rotateY(359deg);
  transition: 0.6s;
}
.nav--personal:hover span {
  visibility: visible;
}


/*
##########################################
########  SITE MENU MEDIA QUERIES ########
##########################################
*/

/*
################      > 640px      ####################################################################################################
        Use hard coded px values above 640px so the menu doesn't get huge on large screens.
*/

@media (min-width: 641px) {
  
  .banner {
    font-size: 6rem;
  }

  .nav-menu {
    width: 380px;
    height: 58px;
    margin: 4rem auto;
    border-radius:30px;
  }

  .nav__menu-item {
    width: 44px;
    padding: 5px;
    height: 180px;
  }

  .nav__menu-item a {
    width: 44px;
    height: 44px;
    border-radius: 22px;
    background-size: 40px;  
  }

  .nav__menu-item span {
    width:200px;
  }
}

/*
################      480 - 640px      ############################################################################################
*/

@media (max-width: 640px) {
  :root {
    --navmenu-x: 70vw;
  }
  
  .banner {
    font-size:16vw;
    font-size: clamp(2.5rem, 14vw * 0.75, 4.5rem);
  }
  
  .nav-menu {
    border-radius: calc(70vw * 0.125);
    width: calc(70vw * .88);
    height: calc(70vw * .12);
    padding: calc(70vw * .01);
  }
  
  .nav__menu-item {
    width: calc(70vw * .062);
    height: calc(70vw * .8);
    margin: calc(70vw * -.01) calc(70vw * .021);
    padding: calc(70vw * .0112);
    background-size: calc(70vw * 0.108);
  }
  
  .nav__menu-item a {
    width: calc(70vw * .105);
    height: calc(70vw * .105);
    border-radius: calc(70vw * .055);
    background-size: calc(70vw * .1);
  }
  
  .nav__menu-item span {
    font-size: 1rem;
    margin-top:1.2rem;
    width: 36vw;
  }
}

/*
################      340 - 480px      ############################################################################################
*/

@media (max-width: 480px) {
  :root {
    --navmenu-x: 85vw;
  }
  
  .banner {
    font-size:19vw;
    font-size: clamp(2.5rem, 14vw * 0.75, 4.5rem);
  }
  
  .nav-menu {
    border-radius: calc(85vw * 0.125);
    width: calc(85vw * .88);
    height: calc(85vw * .12);
    padding: calc(85vw * .01);
  }
  
  .nav__menu-item {
    width: calc(85vw * .062);
    height: calc(85vw * .8);
    margin: calc(85vw * -.01) calc(85vw * .021);
    padding: calc(85vw * .0112);
    background-size: calc(85vw * 0.108);
  }
  
  .nav__menu-item a {
    width: calc(85vw * .105);
    height: calc(85vw * .105);
    border-radius: calc(85vw * .055);
    background-size: calc(85vw * .1);
  }
  
  .nav__menu-item span {
    font-size: 1.1rem;
/*     margin-top:1rem; */
    width: 32vw;
  }
}


/*
################      < 340px      ############################################################################################
*/

@media (max-width: 340px) {
  :root {
    --navmenu-x: 100vw;
  }
  
  .banner {
    font-size:22vw;
    font-size: clamp(2.5rem, 14vw * 0.75, 4.5rem);
  }
  
  .nav-menu {
    border-radius: calc(100vw * 0.125);
    width: calc(100vw * .88);
    height: calc(100vw * .12);
    padding: calc(100vw * .01);
  }
  
  .nav__menu-item {
    width: calc(100vw * .062);
    height: calc(100vw * .8);
    margin: calc(100vw * -.01) calc(100vw * .021);
    padding: calc(100vw * .0112);
    background-size: calc(100vw * 0.108);
  }
  
  .nav__menu-item a {
    width: calc(100vw * .105);
    height: calc(100vw * .105);
    border-radius: calc(100vw * .055);
    background-size: calc(100vw * .1);
  }
  
  .nav__menu-item span {
    margin-top:1rem;
    font-size:1.25rem;
  }
  
  .nav--music-text {
    text-align: left;
    margin-left:10vw;
  }
  
  .nav--personal-text {
    text-align: right;
    margin-left:-10vw;
  }
}