:root {
    /* 300 pixels = 1 meter */
  --px-per-m: 300; 
}


* {margin: 0;
    box-sizing: border-box;}

body {
    position: relative;
    background: url(./Images/Background.png) lightgray 50% / cover no-repeat;
    color: #e5e5e5;
}

.comparison_wrapper {
    display: flex;
    gap: 20px;
}
    
.pokemon{
    animation: pokemon_scale 3s ease-out 1s 1 forwards;
    transform-origin: bottom center;
}

@keyframes pokemon_scale {
0% {transform: scale(1);}
100%{transform: scale(2);}
}


/* hero_container, size_comparison_container, scene, pokemon_container, human_container,
 Ash_image, ruler_container, ruler_main, tick_label_container, tick_label, tick, special_tick_container, special_tick  */

 .hero_container {
display: flex;
width: 1440px;
height: 800px;
padding: 56px 80px;
flex-direction: column;
justify-content: center;
align-items: center;
gap: 10px;
flex-shrink: 0;
 }

 .size_comparison_container {
display: flex;
width: 947.6px;
height: 684.139px;
padding: 6.18px 25.293px;
align-items: center;
gap: 10.117px;
flex-shrink: 0;
aspect-ratio: 205/148;
 }

 .scene {
display: flex;
width: 897.392px;
height: 671.779px;
align-items: flex-end;
justify-content: flex-end;
gap: 10.117px;
flex-shrink: 0;
aspect-ratio: 175/131;
 }

 .pokemon_container{
display: flex;
width: 540px;
height: 529px;
justify-content: center;
align-items: end;
flex-shrink: 0;
}

 .human_container {
    display: flex;
width: 166.44px;
flex-direction: column;
justify-content: flex-end;
align-items: flex-start;
 }

 .ruler_container {
    width: 124.275px;
height: 670.198px;
flex-shrink: 0;
display: flex;
align-items: end;
justify-content: end;
 }

 .ruler_main {
    width: 6px;
height: 640px;
flex-shrink: 0;
background: var(--Neutral-N800, #B0B0B0);
position: relative;
z-index: 999;

 }

 .tick_label {
  position: absolute;
  display: flex;
  flex-direction: row-reverse;
align-items: center;
gap: 4px;
text-wrap: nowrap;
 }

 .tick {width: 20px;
height: 6px;
background: var(--Neutral-N800, #B0B0B0);}

.label {
   color: var(--Neutral-N900, #E5E5E5);
text-align: right;
}

.special_tick_container {
    display: inline-flex;
align-items: center;
gap: 5px;
position: absolute;
bottom: 409px;
color: #e5e5e5;
text-wrap: nowrap;
right: 5px;

}

.special_tick_ash {
    width: 266.304px;
height: 2.219px;
    border: 2.219px dashed var(--Primary-Glow-variant, #00C47A);
}

.special_tick_container_pokemon {
    display: inline-flex;
align-items: center;
gap: 5px;
position: absolute;
color: #e5e5e5;
text-wrap: nowrap;
right: 5px;
}

.special_tick_pokemon {
    width:798.912px;
height: 2.219px;
    border: 2.219px dashed var(--types-elements-type-fire, #EE8130);
    z-index: -99999999;
}
/* my gf: something you should never do and then tells me to do it :) */
header {
    position: absolute;
    display: flex;
    flex-direction: column;
    gap: 24px;
    width: 100%;
    padding: 24px;
}

h1 {
    font-size: 60px;
}

.button_container {
    display: flex;
    gap: 8px;
    
}

button {
  border: 1px solid #B0B0B0;
  background: none;
  padding: 8px;
  cursor: pointer; /* Mickey Mouse hand */
  width: 100px;
}

button img {
  display: block;
  max-width: 100%; /* so it scales if needed */
}