/* Reset.css */

/* @font-face {
    font-family: 'Libre Franklin';
    font-style: italic;
    font-weight: 100 900;
    font-display: swap;
    src: url(/fonts/libre-franklin-cyrilic-ext-italic.woff2) format('woff2');
    unicode-range: U+0460-052F, U+1C80-1C88, U+20B4, U+2DE0-2DFF, U+A640-A69F, U+FE2E-FE2F;
} */

@font-face {
  font-family: ibmmonobold;
  src: url(/fonts/IBMPlexMono-Bold.ttf);
}

@font-face {
  font-family: ibmmonosemibold;
  src: url(/fonts/IBMPlexMono-SemiBold.ttf);
}

@font-face {
  font-family: ibmmonoregular;
  src: url(/fonts/IBMPlexMono-Regular.ttf);
}

@font-face {
  font-family: ibmsansregular;
  src: url(/fonts/IBMPlexSans-Regular.ttf);
}
 /* @font-face {
  font-family: Cutive;
  src: url(/fonts/CutiveMono-Regular.ttf);
} */

/* body {
  font-family: Cutive;
  font-size: 14px;
}

.kode {
  font-family: Kode;
}

.s35 {
  font-size: 35px;
}

.s25 {
  font-size: 25px;
}
.s20 {
  font-size: 20px;
}
.s15 {
  font-size: 15px;
} */

.font14 {
  font-size: 14px;
}

.font16 {
  font-size: 16px;
}

.font24 {
  font-size: 24px;
}

.h1 {
  font-family: ibmmonobold;
  font-size: 40px;
}

.h2 {
  font-family: ibmmonosemibold;
  font-size: 24px;
}

.h3 {
  font-family: ibmmonoregular;
  font-size: 14px;
}

.text {
  font-family: ibmsansregular;
  font-size: 16px;
}

.textsecondary {
  font-family: ibmsansregular;
  color: gray;
}
/* Style.css */


/* body {
    backgroud-color: aqua;
} */

/* :root {
    --width-screen: min(100rem, 100%);
    --color-contrast-1: #e2e2e2;
    --color-contrast-2: #111111;
}

.icon {
    --internal-icon-color: var(--color-contrast-2);
    --internal-icon-size: 2rem;
    fill: var(--icon-color, var(--internal-icon-color));
    width: var(--icon-size-w, var(--icon-size, var(--internal-icon-size)));
    height: var(--icon-size-h, var(--icon-size, var(--internal-icon-size)));
    display: inline-block;
}


body {
    display: flex;
    flex-direction: column;
    font-family: sans-serif;
    color: var(--color-contrast-2);
    background-color: var(--color-contrast-1);
}

main {
    flex: 1;
}

header,main, footer {
    & > div {
        width: var(--width-screen);
        margin: 0 auto;
        padding: 2rem;
    }
}

footer {
    --icon-color: var(--color-contrast-1);
    --icon-size: 2rem;
    
    background-color: var(--color-contrast-2);
    color: var(--color-contrast-1);

    & > div {
        display: flex;
        flex-direction: row;
        align-items: center;
        gap: 1rem;

        & a {
            color: var(--color-contrast-1);
            font-weight: 700;
            text-decoration: none;
        }
    }
}

article,
section,
p {
    margin: 1rem 0;
}

.b {
    background-color: aqua;
} */

/*
s : 15px
m : 30px
l : 60px
*/


.h-2 {
    height: 2px;
}

.gap-s {
    gap: 15px;
}

.gap-m {
    gap: 30px;
}

.m-l {
    margin: 60px;
}

.pb-s {
    padding-bottom: 15px;
}

.mb-m {
    margin-bottom: 30px;
}

.mb-l {
    margin-bottom: 60px;
}

.ml-150 {
    margin-left: 150px;
}

.m-x-180 {
    margin-left: 180px;
    margin-right: 180px;
}

.m-x-28 {
    margin-left: 27vw;
    margin-right: 27vw;
}

.p-x-m {
    padding-left: 30px;
    padding-right: 30px;
}

.w-tier {
    width: 33vw;
}

.w-240 {
    width: 240px;
}

.image-wrapper {
    position: relative;
    width: 100%;
    aspect-ratio: 1 / 1;
    overflow: hidden;
}

.image-wrapper img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.image-overlay {
    position: absolute;
    inset: 0;
    background: rgba(255, 255, 255, 0.9);
    /* display: flex; */
    /* align-items: center;
  justify-content: center; */
    opacity: 0;
    transition: opacity 0.3s ease;
    /* font-weight: 600;
  color: #000; */
    /* text-align: center; */
}

.image-card:hover .image-overlay {
    opacity: 1;
}

svg:hover, .hbutton:hover {
    fill: black;
    background-color: black;
    color: white;
}






p {
    margin-left: 30px;
    font-size: 16px;
    text-align: justify;
}

h1 {
    font-family: ibmmonosemibold;
    font-size: 24px;
    margin-top: 15px;
    margin-bottom: 10px;
}

h2 {
    font-family: ibmmonosemibold;
    font-size: 22px;
    margin-top: 15px;
    margin-bottom: 10px;
}

h3 {
    font-family: ibmmonosemibold;
    font-size: 20px;
    margin-top: 15px;
    margin-bottom: 10px;
}

p:has(strong) {
    margin-top: 20px;
}

ol {
    margin-left: 30px;
    list-style: decimal;
}

a:hover {
    text-decoration: underline;
}

.no-underline:hover {
    text-decoration: none;
}