styles.css

/* Reset some default browser styles */
* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

/* Style the body with a nice font and some padding */
body {
  font-family: 'Arial', sans-serif;
  line-height: 1.6;
  padding: 20px;
}

/* Style the header */
header {
  background: #333;
  color: #fff;
  padding: 10px 0;
  text-align: center;
}

/* Navigation menu styles */
nav ul {
  list-style: none;
}

nav ul li {
  display: inline;
  margin-right: 20px;
}

nav a {
  text-decoration: none;
  color: #fff;
}

/* Styles for different sections */
section {
  padding: 20px 0;
  margin: 20px 0;
}

/* Footer Styles */
footer {
  background: #333;
  color: #fff;
  text-align: center;
  padding: 10px 0;
}

/* Responsive Design */
@media (max-width: 600px) {
  nav ul li {
    display: block;
    margin-bottom: 10px;
  }
}
/* Style the Discord button */
#discord-button {
display: inline-block;
background-color: #7289DA; /* Discord brand color */
color: #ffffff;
padding: 10px 15px;
margin: 10px;
text-decoration: none;
border-radius: 5px;
font-weight: bold;
}

/* Change the color slightly on hover */
#discord-button:hover {
background-color: #5b6eae;
}
/* google font */
@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@600&display=swap');

/* global font */
* {
      font-family: Arial, Helvetica, sans-serif;
}

/* html */
html {
      scroll-behavior: smooth;
}

/* body */
@keyframes body-a {
      
      0% {
            opacity: 0;
      }

      100% {
            opacity: 1;
      }

}

body {
      overflow-x: hidden;
      animation: body-a 0.5s ease 1;
}

/* highlighting */
::selection {
      background-color: rgb(255, 173, 255);
      color: #fff;
}

/* scrollbar */
::-webkit-scrollbar {
      margin: 0;
      width: 8px;
      background-color: #fefefe;
}

::-webkit-scrollbar-thumb {
      background-color: lightpink;
}


/* navbar */
navbar {
      position: fixed;
      top: 0;
      left: 0;
      bottom: 0;
      background-color: rgba(255, 255, 255, 0.5);
      display: flex;
}

navbar nav {
      display: flex;
      flex-direction: column;
}

navbar ul li {
      list-style: none;
}

navbar ul {
      margin: 0;
      padding: 0;
}

navbar a {
      display: block;
      text-decoration: none;
      font-size: clamp(12px, 1.75vw, 32px);
      color: rgb(87, 42, 131);
      writing-mode: vertical-lr;
      margin: 2em 1em;
      padding: 0 2px;
      position: relative;
      transition: all 300ms ease;
}

navbar a::after {
      content: "";
      display: block;
      position: absolute;
      top: 0;
      left: 0;
      background-color: rgb(136, 73, 198);
      height: 0;
      width: 2px;
      transition: all 300ms ease;
}

navbar a:hover::after {
      height: 100%;
}

navbar a:hover {
      color: rgb(136, 73, 198);
}


/* m-body */
m-body {
      top: 0;
      left: 0;
      right: 0;
      position: absolute;
      transition: all 300ms ease;
      z-index: -1;
}

m-body block, m-body img {
      display: block;
      width: 100%;
}


/* first block */
.block-1 {
      display: flex;
      flex-direction: row;
      justify-content: space-evenly;
      align-items: center;
      padding: 7.5em 0;
}

/* first block's animations */
@keyframes heading-a {
      
      0% {
            text-shadow: 5px 0px rgba(221, 160, 221, 0.5);
      }

      100% {
            text-shadow: -15px 0px rgba(255, 0, 255, 0.5);
      }

}


@keyframes image-a {

      0% {
            transform: translateX(-0.25em);
      }

      100% {
            transform: translateX(0.25em);
      }

}

/* image */
.block-1 img {
      width: clamp(15%, 1.5vw, 35%);
      border-radius: 50%;
      box-shadow: 5px 5px 5px rgba(0, 0, 0, 0.1);
      animation: image-a 0.5s steps(2) infinite;
}

/* intro heading */
.block-1 h1 {
      font-size: clamp(14px, 3vw, 70px);
      font-family: "Poppins", sans-serif;
      line-height: 1.2em;
      color: #282828;
      margin: 0.3em 0;
      animation: heading-a 0.5s steps(2) infinite;
}

.block-1 p {
      color: #cdcdcd;
      font-size: clamp(8px, 1.5vw, 35px);
}

/* stylization slants */
.s {
      height: 10em;
}


/* second block */
.block-2 {
      background-color: #ffe7fe;
      display: grid;
      place-items: center;
}

@keyframes block-2-heading-a {
      
      0% {
            background-color: rgba(255, 0, 255, 0.2);
            transform: rotate(1deg);
      }

      100% {
            background-color: rgba(216, 112, 147, 0.5);
            transform: rotate(-2deg);
      }
}

.block-2 {
      display: grid;
      place-content: center;
      background-image: url("web_assets/brick_background.png");
}

ul-span {
      text-decoration: solid underline #282828 4px;
      text-underline-offset: 10px;
}

.block-2 .block-2-heading h1 {
      font-family: "Poppins", sans-serif;
      font-size: clamp(25px, 6vw, 110px);
      color: #282828;
      margin: 0.3em;
      box-shadow: 0.25em 0.25em rgba(0, 0, 0, 0.05);
      padding: 10px;
      animation: block-2-heading-a 1s steps(2) infinite;
}

/* second block's information */
.block-2 info {
      margin: 1em 15%;
}

/* info h1 animation */
@keyframes i-a {

      0% {
            transform: translateX(0.1em);
      }

      100% {
            transform: translateX(-0.2em);
      }

}

/* list headers */
.block-2 info h1 {
      background: linear-gradient(to right, white, transparent);
      padding: 8px 0;
      padding-right: 5em;
      padding-left: 0.5em;
      font-family: "Poppins", sans-serif;
      animation: i-a 1s steps(2) infinite;
      font-size: clamp(1em, 3vw, 4em);
      margin: 1em 0;
      color: #222;
      border-left: 5px solid magenta;
}

/* list paragraphs */
.block-2 info p {
      color: #444;
      line-height: 1.3em;
      font-size: clamp(14px, 1.75vw, 28px);
}

/* info undordered list */
.block-2 info ul li {
      font-size: clamp(10px, 1.75vw, 24px);
      list-style-type: disc;
      color: #444;
      margin: 10px 0;
}

/* display */
.block-2 display {
      display: grid;
      grid-template-rows: auto auto;
      grid-template-columns: auto auto;
      gap: 2.5em;
      margin: 5em 0;
}

/* card animation */
@keyframes card-a {
      
      0% {
            transform: rotate(0.5deg);
            border: solid 2.5px palevioletred;
      }

      100% {
            transform: rotate(-1deg);
            border: solid 2.5px peachpuff
      }

}

.block-2 display div {
      padding: 25px;
      background-color: #fff;
      box-shadow: 1em 1em rgba(0, 0, 0, 0.05);
      animation: card-a 1s steps(2) infinite;
      border-radius: 5px;
}

.block-2 display img {
      border-radius: 5px;
}

.block-2 display .caption {
      color: #444;
      margin-top: 10px;
      margin-left: 10px;
      margin-bottom: 0;
      margin-right: 0;
      font-size: clamp(10px, 1.75vw, 24px);
}

.block-2 display a {
      margin: 0 10px;
      font-size: clamp(8px, 1vw, 22px);
}


/* third block */
.block-3 {
      display: grid;
      place-items: center;
}

@keyframes block-3-a {
      
      0% {
            background-color: rgba(238, 130, 238, 0.2);
            transform: rotate(1deg);
      }

      100% {
            background-color: rgba(128, 0, 128, 0.2);
            transform: rotate(-2deg);
      }

}

.block-3 h1 {
      font-family: "Poppins", sans-serif;
      font-size: clamp(25px, 6vw, 110px);
      color: #282828;
      margin: 0.3em;
      padding: 10px;
      box-shadow: 0.2em 0.2em rgba(0, 0, 0, 0.025);
      animation: block-3-a 1s steps(2) infinite;
}

.block-3 info {
      padding: 5em 0;
      display: flex;
      justify-content: space-evenly;
      align-items: center;
}

.block-3 info p {
      color: #444;
      line-height: 1.3em;
      font-size: clamp(14px, 1.75vw, 28px);
      max-width: 35%;
}

/* usd table */
@keyframes table-a {
      
      0% {
            box-shadow: 0.4em 0.4em rgba(216, 112, 147, 0.1);
      }

      100% {
            box-shadow: -0.8em -0.8em rgba(221, 160, 221, 0.2);
      }

}

.block-3 info table {
      font-size: clamp(14px, 1.5vw, 28px);
      max-width: 35%;
      animation: table-a 1s steps(2) infinite;
      border-collapse: collapse;
}

.block-3 info table th, .block-3 info table td {
      border: 0.5px solid #888;
      padding: 10px;
}

.block-3 info table th {
      font-family: "Poppins", sans-serif;
      background-color: rgb(255, 214, 242);
      color: #282828;
}

.block-3 info table td {
      background-color: #fff;
      color: #444;
}

.block-3 info table .dark-r {
      background-color: #fafafa;
}

/* euro table */
.euro-table table #r1-c1 {
      content: '€83';
}

/* currency buttons */
@keyframes cs-a {
      
      0% {
            transform: translateY(-5px);
      }

      100% {
            transform: translateY(2.5px);
      }

}

.block-3 .currency-selection {
      padding: 5px;
      animation: cs-a 1s steps(2) infinite;
      display: inline-flex;
      border-radius: 5px;
}

.block-3 button {
      font-size: clamp(12px, 1.75vw, 26px);
      color: #222;
      display: inline;
      padding: 10px 15px;
      margin: 0 15px;
      background-color: rgb(255, 214, 242);
      cursor: pointer;
      border-radius: 5px;
      transition: all 300ms ease;
      border: none;
}

.block-3 button:hover {
      background-color: rgb(255, 225, 245);
      box-shadow: 10px 10px rgba(0, 0, 0, 0.025)
}


/* fourth block */
.block-4 {
      background-color: #fafafa;
      display: grid;
      place-items: center;
}

@keyframes block-4-a {
      
      0% {
            background-color: rgba(255, 192, 203, 0.3);
            transform: rotate(1deg);
      }

      100% {
            background-color: rgba(216, 112, 147, 0.3);
            transform: rotate(-2deg);
      }

}

.block-4 h1 {
      font-family: "Poppins", sans-serif;
      font-size: clamp(25px, 6vw, 110px);
      color: #282828;
      margin: 0.75em 0;
      padding: 10px;
      box-shadow: 0.2em 0.2em rgba(0, 0, 0, 0.025);
      animation: block-4-a 1s steps(2) infinite;
}

.block-4 p {
      color: #444;
      line-height: 1.3em;
      font-size: clamp(14px, 1.75vw, 28px);
      margin: 1em 15%;
}

@keyframes discord-a {
      
      0% {
            transform: translateY(2.5px);
      }

      100% {
            transform: translateY(-5px);
      }

}

.block-4 .discord-btn {
      background-color: #fafafa;
      margin: 3em auto;
      padding: 10px;
      font-size: clamp(14px, 1.75vw, 28px);
      transition: all 300ms ease;
      color: #5865F2;
      border-radius: 5px;
      border: 2px solid #5865F2;
      animation: discord-a 1s steps(2) infinite;
      box-shadow: 5px 5px rgba(0, 0, 0, 0.1);
      cursor: pointer;
}

.block-4 .discord-btn:hover {
      background-color: #5865F2;
      color: whitesmoke;
      border: 2px solid #5865F2;
}


/* fifth block */
.block-5 {
      background-color: #222;
      padding: 2.5em 0;
}

@media screen and (width <= 768px) {

      @keyframes heading-a {
      
            0% {
                  text-shadow: 2.5px 0px rgba(221, 160, 221, 0.5);
            }
      
            100% {
                  text-shadow: -5px 0px rgba(255, 0, 255, 0.5);
            }
      
      }

      .block-1 {
            display: grid;
            padding: 2em 0;
      }

      .block-1 img, .block-1 div {
            margin: 1em auto;
      }

      .block-1 img {
            width: 20%;
      }

      .block-2 display {
            display: flex;
            flex-direction: column;
            flex-direction: column;
      }

      .block-3 h1 {
            margin: 0;
            padding: 10px;
      }

      .block-3 info {
            display: grid;
            padding: 1em 0;
      }

      .block-3 info p, .block-3 info table {
            margin: 3em auto;
      }

      .block-3 info p {
            max-width: 65%;
      }

      ul-span {
            text-decoration: 2px solid underline #282828;
            text-underline-offset: 4px;
      }

}

ON 

/* Global Styles */
body {
    font-family: Arial, sans-serif;
    margin: 0;
    padding: 0;
}

header {
    background-color: #333;
    color: white;
    text-align: center;
    padding: 10px 0;
}

nav ul {
    list-style-type: none;
    margin: 0;
    padding: 0;
}

nav ul li {
    display: inline;
    margin-right: 20px;
}

nav ul li a {
    text-decoration: none;
    color: white;
}

section {
    padding: 20px;
    margin: 20px 0;
    background-color: #f9f9f9;
}

footer {
    background-color: #333;
    color: white;
    text-align: center;
    padding: 10px 0;
}

/* Responsive Design */
@media only screen and (max-width: 600px) {
    nav ul li {
        display: block;
        margin: 10px 0;
    }
}
body {
    font-family: Arial, sans-serif;
    margin: 0;
    padding: 0;
    background-color: #f3f3f3;
}

header {
    background-color: #333;
    color: #fff;
    text-align: center;
    padding: 10px 0;
}

section {
    max-width: 800px;
    margin: 20px auto;
    padding: 10px;
    background-color: #fff;
    border-radius: 5px;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
}

ul {
    list-style-type: disc;
    margin-left: 20px;
}

footer {
    background-color: #333;
    color: #fff;
    text-align: center;
    padding: 10px 0;
    position: fixed;
    width: 100%;
    bottom: 0;
}
/* Selecting the body element and applying a background image */
body {
  /* Using the background-image property and specifying the image URL */
  background-image: url("https://cdn.discordapp.com/attachments/1218331742289789008/1219200915353899059/nicepfp.png?ex=660a7055&is=65f7fb55&hm=fe0a71c7966c0217773be05ce174d5c119427edb9d20a366bac349062b6de1b8&");
  /* Using the background-repeat property and setting it to no-repeat to avoid tiling the image */
  background-repeat: no-repeat;
  /* Using the background-size property and setting it to cover to make the image cover the entire element */
  background-size: cover;
}