*{
  margin: 0;
  padding: 0;
}

/* Variable Coding Section made with the help of solaria.neocities.org tutorials */
:root {
    --acc: hotpink;
    --bg: black;
    --text: ivory;

}





html{
  font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
  color: rgb(189, 180, 174);
  text-align: center;
}

/* Body Code */
  body {
  padding: min(50px,7%);
  background-color: rgb(32, 30, 21);
}

 /* Layout Development */

h1{
  margin: 30px 0;
}

.header{
  display:grid;
  justify-content: center;
  align-items: center;
}

.working{
  display: grid;
  justify-content: center;
  align-items: center;
}

.card{
  padding: 1em;
  border: 3px solid rgb(230, 118, 74);
  border-radius: 10px;
  background-color: #0f0f0f;
  background-image: url("../Images/Dither forest Edit.webp");
  background-clip: border-box;
  text-align: center;
}

.basicinfo{
box-sizing: content-box;
margin: 1px;
padding: 2em;
border-radius: 10px;
background-color: #201f1f;
opacity: 85%;
}

#abouttext{
  display: contents;
  position: absolute;
  z-index: 100;
  color:antiquewhite;
}

.grid-container{
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(300px,1fr));
  justify-content: center;
  gap: 15px;
}

/* Navigation Bar Code [START] */

  /* Add a black background color to the top navigation */

.topnav {
  position: relative;
  background-color: #3b3b3b;
  overflow: hidden;
}

/* Style the links inside the navigation bar */

.topnav a {
  float: left;
  color: #f2f2f2;
  text-align: center;
  padding: 14px 16px;
  text-decoration: none;
  font-size: 17px;
}

/* Change the color of links on hover */
.topnav a:hover {
  background-color: #ddd;
  color: black;
}

/* Add a color to the active/current link */
.active {
  background-color: #e7875b;
  color: rgb(0, 0, 0);
}

/* Centered section inside the top navigation */
.topnav-centered a {
  float: none;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}

/* Right-aligned section inside the top navigation */
.topnav-right {
  float: right;
}

/* Responsive navigation menu - display links on top of each other instead of next to each other (for mobile devices) */
@media screen and (max-width: 600px) {
  .topnav a, .topnav-right {
    float: none;
    display: block;
  }

  .topnav-centered a {
    position: relative;
    top: 0;
    left: 0;
    transform: none;
  }
}

/* Navigation Bar Code [END] */

/* Jello Code (Non-Hover) */

.jello {
    animation-name: jello;
    animation-duration: 3.5s;
    animation-iteration-count: 1;
    transform-origin: bottom;
}

@keyframes jello {
0%{transform:scale3d(1,1,1)}
30%{transform:scale3d(1.25,.75,1)}40%{transform:scale3d(.75,1.25,1)}
50%{transform:scale3d(1.15,.85,1)}65%{transform:scale3d(.95,1.05,1)}
75%{transform:scale3d(1.05,.95,1)}100%{transform:scale3d(1,1,1)}
}