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

html, body {
  width: 100%;
  height: 100%;
  margin: 0;
  padding: 0;
  overflow-x: hidden; /* Prevents sideways stretching on Apple devices */
}

#loadingScreen {
  display:flex;
  position: fixed;
  align-items: center;
  justify-content: center;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: #fb501f;
  opacity: 1;
  z-index: 50;
  transition: opacity 0.5s ease;
}

/* This class gets added by JavaScript */
#loadingScreen.fade-in {
  opacity: 0;
  /* Prevents clicks on the invisible screen */
  pointer-events: none;
}

#loadingScreen.fade-out {
  opacity: 1;
  /* Prevents clicks on the invisible screen */
  pointer-events: none;
}

#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;
  text-decoration:none;
}

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

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

@media (orientation: portrait) {
  #skyTitle2 {
    flex-direction: column;
    justify-content: space-around;
    align-items: left;
    padding-top: 6dvh;
    padding-bottom: 3dvh;
  }
}

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

#moreButton {
  color:inherit;
}

#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;
  justify-content: space-around;
  align-content:center;
  background-color: #004cdb;
  padding: 2vw;
  gap: 2vw;
  padding-bottom: 8dvh;
  max-width:100%;
  flex-shrink: 1;
}

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


#ProjContainer2 {
  position:relative;
  z-index:30;
  display:flex;
  justify-content: space-around;
  align-content:center;
  background-color: #004cdb;
  padding: 2vw;
  gap: 2vw;
  padding-bottom: 8dvh;
  max-width:100%;
  flex-shrink: 1;
}

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

#ProjContainer3 {
  position:relative;
  display:flex;
  justify-content: space-around;
  align-content:center;
  background-color: #FAEFD9;
  color:black;
  padding: 2vw;
  gap: 2vw;
  padding-bottom: 8dvh;
  max-width:100%;
  flex-shrink: 1;
}

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


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

#projectScreenies1 {
  background-color:inherit;
  width:25dvw;
  object-fit:scale-down;
  height:auto;
  overflow:hidden;
  border-radius:2.5%;
}

#projectScreenies2 {
  background-color:inherit;
  width:25dvw;
  object-fit:scale-down;
  height:auto;
  overflow:hidden;
  border-radius:2.5%;
}

@media (orientation:portrait) {
  #projectScreenies1 {
    width:75dvw;
    object-fit:fit;
    height:auto;
    overflow:hidden;
    border-radius:2.5%;
  }
  #projectScreenies2 {
    background-color:inherit;
    width:75dvw;
    object-fit:scale-down;
    height:auto;
    overflow:hidden;
    border-radius:2.5%;
  }
}

#whomst {
  display:flex;
  flex-direction:column;
  color: #FAEFD9;
  font-size:2dvw;
  flex-shrink:1;
}

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


#secondInfoBox {
  display:flex;
  flex-shrink: 1;
  justify-content:space-around;
  align-content:center;
  align-items:center;
  background-color: #FAEFD9;
  color:  black;
  padding: 2vw;
  padding-top: 8vh;
  padding-bottom: 8vh;
  max-width:100%;
}

@media (orientation:portrait) {
  #secondInfoBox {
  flex-direction:column;
}
}

#TextBox {
  align-content: center;
  font-size:2dvw;
  flex-shrink: 1;
}

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

#exampleContainer {
  display:flex;
  flex-direction:column;
  flex-shrink:1;
  font-size:1dvw;
}

@media (orientation:portrait) {
  #exampleContainer {
    flex-direction:column;
    font-size:3dvw;
  }
}

#exampleImage {
  background-color:#FAEFD9;
  max-width:25dvw;
  object-fit:cover;
  height:auto;
  overflow:hidden;
  border-radius:1%;
  flex-shrink: 1;
}

@media (orientation:portrait) {
  #exampleImage {
    max-width: 75dvw;
  }
}

#thirdInfoBox {
  padding:3dvw;
  display:flex;
  width:100%;
  font-size:2dvw;
  background-color:#31171e;
  color: #FAEFD9;
  flex-shrink:1;
}

@media (orientation:portrait) {
  #thirdInfoBox {
    font-size:3.5dvw;
  }
}

#boneSection {
  align-content:center;
  align-items:center;
  background-color: #31171e;
  color:  #FAEFD9;
  padding: 2vw;
  padding-top: 8vh;
  padding-bottom: 8vh;
  max-width:100%;
  font-size:2dvw;
}

@media (orientation:portrait) {
  #boneSection {
    font-size:3.5dvw;
  }
}

#footer {
  display:flex;
  flex-direction:column;
  background-color:black;
  width:100%;
  font-size:2dvv;
  padding:2dvw;
}

#aLinks {
  color:inherit;
}

#aLinks:hover {
  cursor:pointer;
}