style.css

@font-face {
  font-family: "Inter";
  src: url('https://github.com/rsms/inter/raw/master/docs/font-files/InterVariable.woff2') format('woff2');
  font-weight: 100 900;
  font-style: normal;
}

@font-face {
  font-family: "Inter";
  src: url('https://github.com/rsms/inter/raw/master/docs/font-files/InterVariable-Italic.woff2') format('woff2');
  font-weight: 100 900;
  font-style: italic;
}

* {
  font-family: "Inter", "Noto Sans", "Open Sans", "Roboto", "Source Han Sans", "Noto Sans CJK", "Noto Sans CJK HK", "Noto Sans CJK TC", "Noto Sans CJK SC", "Noto Sans CJK JP", "Noto Sans CJK KR", "Noto Sans HK", "Noto Sans TC", "Noto Sans SC", "Noto Sans JP", "Noto Sans KR", "Plangothic P1", "Plangothic P2", "Gothic Nguyen", "Noto Color Emoji", "Noto Emoji", "Gentium Plus", "Gentium Book Plus", "Gentium", "Doulos SIL", "BabelStone Roman", "Jigmo", "Jigmo2", "Jigmo3", "BabelStone Han", "HanaMinA", "HanaMinB", "HanaMinC", "Hanazono Mincho A", "Hanazono Mincho B", "Hanazono Mincho C", "Unifont", "Unifont Upper", sans-serif;
  background-color: #121212;
  color: white;
}

.rectangle {
            border: 2px solid #000;
            padding: 20px;
            width: 300px;
            margin: 20px; /*auto;*/
            /*text-align: center;*/
        }
        .rectangle h2 {
            margin: 0;
            font-size: 24px;
        }
        .rectangle p {
            margin: 10px 0;
            font-size: 16px;
        }
        .rectangle a {
            display: inline-block;
            margin-top: 10px;
            padding: 10px 20px;
            background-color: #007BFF;
            color: #fff;
            text-decoration: none;
            border-radius: 5px;
        }
        .rectangle a:hover {
            background-color: #0056b3;
        }
.tab {
  overflow: hidden;
  border: 1px solid #ccc;
  background-color: #111;
}

/* Style the buttons that are used to open the tab content */
.tab button {
  background-color: inherit;
  float: left;
  border: none;
  outline: none;
  cursor: pointer;
  padding: 14px 16px;
  transition: 0.3s;
}

/* Change background color of buttons on hover */
.tab button:hover {
  background-color: #333;
}

/* Create an active/current tablink class */
.tab button.active {
  background-color: #444;
}

/* Style the tab content */
.tabcontent {
  display: none;
  padding: 6px 12px;
  border: none;
  border-top: none;
}
.tabcontent {
  animation: fadeEffect 1s; /* Fading effect takes 1 second */
}

/* Go from zero to full opacity */
@keyframes fadeEffect {
  from {opacity: 0;}
  to {opacity: 1;}
}