/* FONTS SECTION TO PORT EXTERNAL FONTS */

@font-face {
  font-family: "ComicRelief";
  src: url("font/ComicRelief-Regular.woff2") format("woff2");
  font-weight: 400;
  font-style: regular;
  font-display: swap;
}

@font-face {
  font-family: "ComicRelief";
  src: url("font/ComicRelief-Bold.woff2") format("woff2");
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: "PlaypenSans";
  src: url("font/PlaypenSans-VariableFont_wght.woff2") format("woff2");
  font-weight: 100 800;
  font-display: swap;
}

/* using var(insert your --variable here) to quickly add default settings */

:root {
    --background-color: #8ebee6;
    --background-color2: #fff7e0;
    --content-background-color: #93cdfd;
    --content-background-color2: #fff2cf;
    --content-background-color-hover: #8ec0e9;
    --content-background-color-active: #85b1d4;
    --content-background-color2-hover: #e9ddbb;
    --content-background-color2-active: #d6cbab;
    --background-blue: url("image/background.jpg");
    --background-yellow: url("image/background2.jpg");

    --font: "IBM Plex Mono", monospace;
    --heading-font: "IBM Plex Mono", monospace;
    --font-size: 16px;
    
    --margin: 15px;
    --padding: 15px;
    --border: 4px;
    --border-color: #ffffff;
    --round-borders: 12px;
}

::selection {
  background: rgba(0, 0, 0, 0.2);
}

/* BASIC STUFF TO GET OVER WITH */

body {
    display: flex;
    align-items: flex-start;
    justify-content: center;
    min-height: 100vh;
    padding: var(--margin);

    font-family: var(--font);
    font-size: var(--font-size);
    line-height: 1.2;
}

/* Scrollbar Styling */
::-webkit-scrollbar {
width: 5px;
}
 
::-webkit-scrollbar-track {
background-color: #ffffff00;
-webkit-border-radius: 10px;
border-radius: 10px;
}
 
::-webkit-scrollbar-thumb {
-webkit-border-radius: 10px;
border-radius: 10px;
background: #ffffff;
}

/* Important Container boxes */

.image-row {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-items: center;
  gap: 10px;
}

.image-row img {
  max-width: auto;
  height: auto;
  margin: 0;
}

.box1 {
  display: flex;
  align-items: flex-start;
  gap: 20px;
}

.box1 .box1text {
  flex: 1;
  min-width: 0;
}

.box1 img {
  flex-shrink: 0;
  object-fit: cover;
}

.center-img {
  display: flex;
  align-items: center;
  justify-content: center;
}