style.css.bak

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) * .99);
  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   ###########################
####################################################################################
####################################################################################
####################################################################################
*/

/*
        MMMMM        MMMMM        MMMMM        MMMMM
        MMMMM        MMMMM        MMMMM        MMMMM
        MMMMM        MMMMM        MMMMM        MMMMM
        MMMMM        MMMMM        MMMMM        MMMMM
        MMMMM        MMMMM        MMMMM        MMMMM
        MMMMM        MMMMM        MMMMM        MMMMM
        MMMMM        MMMMM        MMMMM        MMMMM
        MMMMM        MMMMM        MMMMM        MMMMM
        MMMMM        MMMMM        MMMMM        MMMMM
        MMMMM        MMMMM        MMMMM        MMMMM
        MMMMM        MMMMM        MMMMM        MMMMM
        MMMMM        MMMMM        MMMMM        MMMMM
        MMMMM        MMMMM        MMMMM        MMMMM
        MMMMM        MMMMM        MMMMM        MMMMM
        MMMMM        MMMMM        MMMMM        MMMMM
        MMMMM        MMMMM        MMMMM        MMMMM
        MMMMM        MMMMM        MMMMM        MMMMM
        MMMMM        MMMMM        MMMMM        MMMMM


> 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;
  }
}

/*
        MMMMM        MMMMM        MMMMM
        MMMMM        MMMMM        MMMMM
        MMMMM        MMMMM        MMMMM
        MMMMM        MMMMM        MMMMM
        MMMMM        MMMMM        MMMMM
        MMMMM        MMMMM        MMMMM
        MMMMM        MMMMM        MMMMM
        MMMMM        MMMMM        MMMMM
        MMMMM        MMMMM        MMMMM
        MMMMM        MMMMM        MMMMM
        MMMMM        MMMMM        MMMMM
        MMMMM        MMMMM        MMMMM
        MMMMM        MMMMM        MMMMM
        MMMMM        MMMMM        MMMMM
        MMMMM        MMMMM        MMMMM
        MMMMM        MMMMM        MMMMM
        MMMMM        MMMMM        MMMMM
        MMMMM        MMMMM        MMMMM


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

@media (max-width: 640px) {
  :root {
    --navmenu-x: 70vw;
  }
  
  .banner {
    font-size:16vw;
    font-size: clamp(5rem, 18vw * 0.75, 6rem);
  }
  
  .nav__menu-item span {
    font-size: 1rem;
    margin-top:1.2rem;
    width: 36vw;
  }
}

/*

/*
        MMMMM        MMMMM
        MMMMM        MMMMM
        MMMMM        MMMMM
        MMMMM        MMMMM
        MMMMM        MMMMM
        MMMMM        MMMMM
        MMMMM        MMMMM
        MMMMM        MMMMM
        MMMMM        MMMMM
        MMMMM        MMMMM
        MMMMM        MMMMM
        MMMMM        MMMMM
        MMMMM        MMMMM
        MMMMM        MMMMM
        MMMMM        MMMMM
        MMMMM        MMMMM
        MMMMM        MMMMM
        MMMMM        MMMMM


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

@media (max-width: 480px) {
  :root {
    --navmenu-x: 85vw;
  }
  
  .banner {
    font-size:16vw;
    font-size: clamp(3.5rem, 16vw * 0.95, 4rem);
  }
  
  .nav__menu-item span {
    font-size: 1.1rem;
    width: 32vw;
  }
}


/*
        MMMMM
        MMMMM
        MMMMM
        MMMMM
        MMMMM
        MMMMM
        MMMMM
        MMMMM
        MMMMM
        MMMMM
        MMMMM
        MMMMM
        MMMMM
        MMMMM
        MMMMM
        MMMMM
        MMMMM
        MMMMM


  < 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-item span {
    margin-top:1rem;
    font-size:1.25rem;
  }
  
  .nav--music-text {
    text-align: left;
    margin-left:15vw;
  }
  
  .nav--personal-text {
    text-align: right;
    margin-left:-24vw;
  }
}