:root {
  --bg: #9AB59B;
  --foreground: #f8faf8dd;
  --button: #709e72;
  --button2: #acd5ad;
  --accent: #d16a7f;
  --dark: #9bc39d;
}

#ipod {
  animation: 1s ease-out 0s 1 load;
  padding: 20px 0;
  border-radius: 7.5px;
  flex-direction: column;
  display: flex;
  align-items: center;
  background-color: var(--foreground);
    background-size: contain;
    background-repeat: no-repeat;
    background: radial-gradient(
    farthest-corner at bottom center,
    rgba(244, 244, 255, 0.7),
    transparent
  ), linear-gradient(to top, var(--button) 15%, var(--button2) 80%);
    min-width: 20%;
    border: 1.5px solid var(--button);
    box-shadow: 0px 10px 13px -7px var(--dark), 5px 5px 15px 5px var(--dark);
  }
  
  #screen * {
    animation: 1s ease-out 0s 1 load;
    width: 100%;
    }
  
  

  #screen {
    background: linear-gradient(1deg, rgba(255, 255, 255, 1) 0%, rgb(212, 217, 221) 90%, rgb(193, 193, 205) 100%);
    border: 1.5px solid rgb(147, 147, 148);
    border-radius: 3.5px;
    font-size: 1.3rem;
    padding-left: 5px;
    padding-right: 5px;
    top: 47px;
    width: 80%;
    height: 80%;
    flex-direction: column;
  }
  


.cal-sans-regular {
  font-family: "Cal Sans", sans-serif;
  font-weight: 400;
  font-style: normal;
}

strong {
 color: var(--dark); 
}


.tooltip {
  color: var(--dark); 
  position: relative;
  display: inline-block;
  cursor: pointer;
}

.tltp {
  visibility: hidden;
  width: max-content;
  background-color: var(--dark);
  text-align: center;
  padding: 8%;
  padding-left: 16%;
  position: absolute;
  border-radius: 10px;
  margin-top: 50%;
  margin-left: 20%;
  color: var(--foreground);
  z-index: 1;
}

.tooltip:hover .tltp {
  visibility: visible;
}

html {
    min-height:100%;
}

body {
  animation: 1s ease-out 0s 1 load;
  height: 100%;
  background-color: var(--foreground);
background: linear-gradient(200deg, var(--bg) 0%, transparent 100%), linear-gradient(80deg, transparent 0%, var(--bg) 60%, transparent 100%);
  font-size: clamp(8px, 2vw, 24px);
  color: black;
  background-repeat: repeat-y;
  font-family: "Cal Sans", Verdana, Arial, sans-serif;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 1rem;
}

h6 {
 font-size: 101%;
 width: 100%;
 text-align: center;
 color: var(--dark);
 padding: 0;
 margin: 0;
 text-transform: uppercase;
}

main {
  animation: 1.2s ease-out 0s 1 load;
  background-color: var(--foreground);
  width: 80%;
  height: max-content;
  padding: 2% 2%;
  margin: 5px;
  corner-shape: circle;
  border-radius: 1rem;
  gap: 1%;
  display: flex;
  flex-direction: column;
  align-items: center;
}

.buttons {
  height: 20%;
  width: 100%;
  align-self: center;
   display: flex;
   flex-direction: columns;
   justify-items: top;
  align-items: center;
  align-content: center;
  justify-content: center;
}


#passport {

  aspect-ratio: 16 / 8;
  background: #fff;
  width: 70%;
  border-radius: 1.2rem;
  padding: 0.9rem;
  display: flex;
  column-gap: 0rem;
  font-size: 120%;
  border: 3px solid var(--dark);
}


@keyframes load {
    0% {
      opacity: 0;
      transform: translateY(1rem);
      
    }
    100% {
      opacity: 1;
      transform: translateY(0);
    }
}

#passport #icon {
  border-radius: 1rem;
  width: 80%;
  grid-area: 1 / 1;
  display: flex;
  justify-items: center;
  align-items: center;
  align-content: center;
  justify-content: center;
}

#icon img {
  width: 80%;
}

#byf, #likes, #mail {
  display: none; 
}


#mail {
  background-color: transparent;
  border: 0px solid transparent;
}

#mail h6 {
  color: var(--foreground)!important; 
}

#passportD {
  display: flex;
  flex-direction: column;
  align-content: center;
  justify-content: center;
  grid-area: 1 / 2;
  width: 80%;
  
}

.signature {
  align-self: stretch;
 width: 75%;
 font-size: 90%;
 background: var(--foreground);
 padding: 4% 2%;
}

#passport div h6 {
  padding-right: 1rem;
  }

#passport p:not(.title) {
  display: inline;
  size: 110%;
}

#passport sub {
 font-style: italic; 
}

.icons {
  height: 10%;
vertical-align:middle;
 margin: 0px!important;
 margin-top: 1%;
 padding: 0px!important;
}

button {
  animation: 1s ease-out 0s 1 load;
  vertical-align: middle;
 background: radial-gradient(
    farthest-corner at bottom center,
    rgba(244, 244, 255, 0.7),
    transparent
  ), linear-gradient(to bottom, var(--button) 15%, var(--button2) 80%);
 background-color: var(--button2);
 border: 1px solid var(--button);
 padding: 1.5%;
 font-size: 90%;
 color: var(--foreground);
 font-family: "Cal Sans", Verdana, Arial, sans-serif;
 border-radius: 12px;
 margin: 1%;
 text-shadow: 2px 2px 4px var(--dark);
}

#controls {
  padding: 2% 0;
  background: transparent;
  border: none;
  background-color: transparent;
}

button:not(#controls):hover {
  background: radial-gradient(
    farthest-corner at bottom center,
    rgba(244, 244, 255, 0.7),
    transparent
  ), linear-gradient(to top, var(--button) 15%, var(--button2) 80%);
 background-color: var(--button);
 shadow: inset 1px 1px 1px var(--button);
 transform: translateY(-1px);
}

#title {
  color: var(--accent);
  font-size: 130%;
  text-transform: uppercase;
  font-weight: 400;
}

.something {
  margin-right: 1%;
  font-size: 95%;
  color: var(--accent);
}



@keyframes rotate {
  0% {
    transform: rotate(0); 
  }
  50% {
   transform: rotate(0.8deg); 
  }
  100% {
    transform: rotate(0); 
  }
}

@keyframes tilt {
  0% {
    transform: rotate(0); 
  }
  50% {
   transform: rotate(0.6deg); 
  }
}

main p:not(.title):nth-of-type(even), .signature p:nth-of-type(even) {
  text-align: right;
}

.signature > p {
  font-style: italic;
  padding: 1%;
 width: 100%;
 display: block;
}

#controls span {
  border: 1px solid var(--button);
  background: radial-gradient(
    farthest-corner at bottom center,
    rgba(244, 244, 255, 0.7),
    transparent
  ), linear-gradient(to bottom, var(--button) 15%, var(--button2) 80%);
  background-color: var(--button);
  height: min-content;
  border-radius: 100%;
  color: #fff;
}



#passport:hover {
  animation: rotate 1s infinite linear;
}

button span:not(.icons) {
 display: inline; 
}

button:focus span:not(.icons) {
  display: inline;
}
  
  
   #rules {
    padding: 40%;
  }