button, input, select, textarea {
  -webkit-appearance: none;
  appearance: none;
}

/* Force Safari to match Chromium's font rendering smoothness */
body {
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}



* {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
    flex-shrink:0;
}

hr {
  color: #FAEFD9;
  border-color:#FAEFD9;
  background-color:#FAEFD9;
  box-shadow: none;
  text-shadow: none;
}


body {
  background-color: #fb501f;
  color:#FAEFD9;
  font-family: "Inter", sans-serif;
}

@media (orientation: portrait) {
  section {
    min-height: 70vh;
  }
}


#navBar {
  display:flex;
  background-color: #fb501f;
  align-content: center;
  padding-top: 1vh;
  padding-left:2vw;
  padding-right:1vw;
  padding-bottom:1vw;
  height:6dvw;
  gap:2vw;
  }

.navButtons {
  display:flex;
  align-content: center;
  justify-content:center;
  background-color:#fb501f;
  color:#FAEFD9;
  height:8dvh;
  font-size: clamp(1.25rem, 2.5vw, 2.25rem);
  font-weight:normal;
  transition: font-weight 0.1s ease;
}

.navButtons:hover {
  cursor:pointer;
  text-decoration:underline;
}


#skyTitle {
  display: flex;
  flex-wrap:wrap;
  justify-content:space-between;
  align-content:center;
  background-color: #fb501f;
  padding-top:1vh;
  padding-bottom:2vh;
  padding-left:2vw;
  padding-right:2vw;
  gap: 1vw;
}

@media (orientation: portrait) {
  #skyTitle {
    flex-direction: column-reverse;
    justify-content: space-around;
    align-items: center;
    padding-top: 6vh;
  }
}


#skyText {
  display:flex;
  flex-flow: column;
  align-content:center;
  font-size: 2.5dvw;

}

#skyText h1 {
  line-height: 5dvw;
}

@media (orientation: portrait) {
  #skyText {
    font-size: 5dvw;
  }
  #skyText h1 {
    line-height: 10dvw;
  }
}

#cuteFoxBoy {
  aspect-ratio: 755/923;
  max-width: 28%;
  width: 28%;          /* add explicit width */
  height: auto;
  object-fit: contain; /* use contain, not cover, since you have aspect-ratio set */
  flex: 0 0 auto;      /* prevent flex from stretching it */
  align-self: flex-start;
  padding-right: 3dvw;
}

@media (orientation: portrait) {
  #cuteFoxBoy {
    align-self: auto;  /* lets the parent's align-items: center take over */
    max-width: 60%;
    width: 60%;
    padding-right: 0;
  }
}

#LinkIcons {
  display:flex;
  gap:2.5dvw;
}

#telegramente {
  display:flex;
  justify-content:flex-start;
  align-items:center;
  width:20dvw;
  height:5dvw;
  color:#FAEFD9;
  text-decoration: none;
  font-size:3dvw;
}

#telegramente:hover {
  cursor:pointer;
  text-decoration:underline;
}


#github {
  display:flex;
  justify-content:flex-start;
  align-items:center;
  width:20dvw;
  height:5dvw;
  color:#FAEFD9;
  text-decoration: none;
  font-size:3dvw;
}

#github:hover {
  cursor:pointer;
  text-decoration:underline;
}

.logos {
  overflow:visible;
  width:20%;
  height:60%;
}

@media (orientation:portrait) {
  .logos {
    width:40%
  }
  #LinkIcons {
    gap:10dvw;
  }

  #telegramente {
    width:40dvw;
    height:15dvw;
    font-size:8dvw;
  }
  #github {
    width:40dvw;
    height:15dvw;
    font-size:8dvw;
  }
}

#surfaceObjects {
    position:relative;
    display: flex;
    justify-content: space-between;
    align-items: flex-end;
}


#ballContainer {
  position:absolute;
}

#beachBall {
  top:-1.5dvw;
  left:5dvw;
  width: 20vmin;
  height: 20vmin;
  border-radius: 50%;
  background: conic-gradient(
    #e63946 0deg 72deg,
    #f4a261 72deg 144deg,
    #2a9d8f 144deg 216deg,
    #e9c46a 216deg 288deg,
    #457b9d 288deg 360deg
  );
  position: relative;
  animation: rollBall 5s linear infinite, beachBall 1.5s ease-in-out infinite alternate;
  animation-composition: add;
  overflow:visible;
}

@keyframes beachBall {
  100% {
    transform:translateY(-2.5dvh);
  }
}

@keyframes rollBall {
  from {
    transform:rotate(0deg);
  }
  to {
    transform:rotate(360deg);
  }
}

#centre {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 27%;
  height: 27%;
  border-radius: 50%;
  background: #fff;
  transform: translate(-50%, -50%);
}

#wowzers {
  background-color: #004cdb;
}

#glass {
    position: relative;
    background-color:#fb501f;
}

#wave {
    position:sticky;
    display: block;
    height:20dvw;
    width:100%;
    z-index:11;
    overflow:hidden;
}

.waveBack {
    fill: #004cdb;
}

.waveMiddle {
    fill: #004cdb;
}

.waveFront {
}


.waveMiddle {
    opacity: 0.6;
    transform: translateY(-0.5vh);
}


.waveBack {
    opacity: 0.3;
    transform: translateY(-1vh);
}




#AboutMeShort {
  position:relative;
  z-index:30;
  display:flex;
  flex-wrap:wrap;
  justify-content: space-around;
  align-content:center;
  background-color: #004cdb;
  padding: 1vw;
  padding-bottom: 8dvh;
}

@media (orientation: portrait) {
  #AboutMeShort {
    flex-direction: column;
    align-items: center;
    align-content: center;
  }
}


#sillyfox {
  background-color:#FAEFD9;
  max-width:25dvw;
  object-fit:cover;
  height:25dvw;
  overflow:hidden;
  border-radius:50%;
}

#whomst {
  color: #FAEFD9;
  font-size:2dvw;
}

@media (orientation: portrait) {
  #whomst {
    font-size:4dvw;
  }
}


#cremeFinish {
  display:flex;
  justify-content:space-around;
  align-content:center;
  align-items:center;
  background-color: #FAEFD9;
  color:  black;
  padding: 1vw;
  padding-top: 8vh;
  padding-bottom: 8vh;
}

#finalTextBox {
  align-content: center;
  font-size:2dvw;
}

#eeping {
  background-color:#FAEFD9;
  max-width:25dvw;
  object-fit:cover;
  height:25dvw;
  overflow:hidden;
  border-radius:50%;
}

#feeter {
  background-color:#31171e;
  color: #FAEFD9;
}