html {
     box-sizing: border-box;
     font-family: 'Kanit-Regular';
     font-style: normal;
 }

 *,
 *:before,
 *:after {
     box-sizing: inherit;
 }

 * {
     margin: 0px;
     padding: 0px;
 }

 @font-face {
     font-family: 'Kanit-Semibold';
     src: url(Fonts/Kanit/Kanit-SemiBold.ttf);
 }

 @font-face {
     font-family: 'Kanit-Regular';
     src: url(Fonts/Kanit/Kanit-Regular.ttf);
 }

 :root {
     /* colors palettes */
     --primary-color: #ECEDF0;
     --secondary-color: #e690a3;
     --bg1-color: #404A65;
     --button-bg-color: #1F6FB0;
     --coin-scale: 1.15;

 }

 h1 {
     text-align: center;
     letter-spacing: .2rem;
     font-family: 'Kanit-Semibold';
     font-style: normal;
     font-weight: 600;
     font-size: clamp(3.125rem, 1.436vw + 2.788rem, 4rem);
     line-height: clamp(1.875rem, 0.123vw + 1.846rem, 1.95rem);
     text-shadow: -5px -3px 0px #35383f;
 }

 body {
     margin: min(2rem, 10%) min(1rem, 8%);
     display: flex;
     flex-direction: column;
     justify-content: start;
     align-items: center;
     height: 100vh;
     background-color: var(--bg1-color);
     color: var(--primary-color);
     gap: 1rem;
 }

 header#headTitle {
     margin-top: 2rem;
 }

 h2[id=flip_Result] {
     opacity: 1;
     transition: opacity ease-in 2s
 }

 h2.headingContent {
     letter-spacing: .10rem;
     text-align: center;
     font-family: 'Kanit-Regular';
     font-size: clamp(1.25rem, 0.41vw + 1.154rem, 1.5rem);
     line-height: clamp(1.875rem, 0.123vw + 1.846rem, 1.95rem);
 }

 main {
     margin: 1rem 0rem;
 }

 section#flipCoinContainer {
     display: flex;
     flex-direction: column;
     justify-content: flex-start;
     align-items: center;
 }

 #coinCointainer {
     margin-block: min(.5rem, 10%);
     display: flex;
     justify-content: center;
     align-items: center;
     width: 10rem;
     perspective: 500px;
 }

 div[id=coin] {
     width: clamp(6rem, 5.538vw + 4.702rem, 9.375rem);
     height: 8.25rem;
     position: relative;
     margin-top: 3rem;
     border-radius: 1rem;
     transform-style: preserve-3d;
     transition: transform 300ms ease-in-out;
 }

 div[id=coin]:hover,
 div[id=coin]:focus {
     cursor: pointer;
     border: none;
     outline: none;
     transform: scale(1.2);
 }

 .flip_coin:hover,
 .flip_coin:focus {
     cursor: pointer;
     border: none;
     outline: none;
     transform: scale(1.2);
 }

 #faceHeads {
     transform: rotateX(360deg);
 }

 #faceTails {
     transform: rotateX(180deg)
 }

 img[class=coinFace] {
     position: absolute;
     backface-visibility: hidden;
     width: 100%;
     height: 100%;
     transform-style: preserve-3d;
     perspective: 1000;
     cursor: pointer;
     transition-property: border-style;
 }

 img[id=coinFaceShadow] {
     margin: 1.5rem 0rem;
     width: clamp(4rem, 3.5rem + 1.50vw, 4.5rem);
     height: fit-content;
 }

 .flipCoin {
     animation: flipCoin 2s alternate;
 }

 .scaleShadow {
     animation: scaleShadow 2s alternate;
 }

 @keyframes flipCoin {
     0% {
         top: 0rem;
         transform: rotateX(0) scale(var(--coin-scale));
     }

     100% {
         top: -3rem;
         transform: rotateX(1800deg) scale(var(--coin-scale));
     }
 }

 @keyframes scaleShadow {
     0% {
         transform: scale(var(--coin-scale));
     }

     100% {
         transform: scale(.90);
     }
 }

 button {
     margin-top: 1rem;
     text-transform: uppercase;
     background-color: var(--button-bg-color);
     color: var(--primary-color);
     padding: 1rem 0rem;
     border-radius: .75rem;
     border: white;
     width: clamp(8rem, 3.282vw + 7.231rem, 10rem);
     font-size: clamp(1.125rem, 0.205vw + 1.077rem, 1.25rem);
     font-weight: 600;
     box-shadow: 0px 4px 0px 0px hsl(207, 63%, 37%);
     transition: background-color box-shadow border ease-in-out 300ms;
     letter-spacing: .060rem;
 }

 button:hover,
 button:focus {
     cursor: pointer;
     background-color: #4983d0;
     border: 2px solid white;
     outline: none;
     box-shadow: 0px 4px 0px 0px #4983d0;
 }

 footer.author-info {
     margin-top: 1rem;
 }

 .author-info a {
     text-decoration: none;
     color: var(--secondary-color);
 }

 h3#author {
     text-align: center;
     font-size: clamp(1rem, 0.277vw + 0.935rem, 1.169rem);
     line-height: clamp(1.875rem, 0.123vw + 1.846rem, 1.95rem);
 }