/* CSS is how you can add style to your website, such as colors, fonts, and positioning of your
   HTML content. To learn how to do something, just try searching Google for questions like
   "how to change link color." */

body {
    justify-content: center;
background-color: black;
}

html {
            font-family: "Roboto Mono", monospace;
            font-weight: 400;
            font-style: normal;;
        }

        .color-box {
            height: 75px;
            width: 200px;
        }
        .center {
  display: block;
  margin-left: auto;
  margin-right: auto;
        }
        #box1 {
            background-color: #26FF84;
        }
        #box2 {
            background-color: #07CE67;
        }
        #box3 {
            background-color: #69FF47;
        }
        #box4 {
            background-color: #10F7C5;
        }
        
        .top-page {
          margin-top: 10%;
          }
        
        .nav-bar {
          display: flex;
          flex-direction: column;
          justify-content: flex-end;
          column-gap: 16px;
          }

        .small-text {
            font-family: "Roboto Mono", monospace;
font-weight: 400;
font-style: normal;
            font-size: 12px;
            color:#26FF84;
            line-height: 24px;
        }
        h1 {
            text-align: center;
            font-family: "Roboto Mono", monospace;
font-weight: 700;
font-style: normal;
            font-size: 96px;
            color:#35FF1F;
            margin-top: 24px;
  margin-bottom: 12px;
  margin-right: 15%;
  margin-left: 15%;
        }
        .home-link {
            text-align: center;
            font-family: "Roboto Mono", monospace;
font-weight: 700;
font-style: normal;
            font-size: 96px;
            color:#35FF1F;
            margin-top: 24px;
  margin-bottom: 12px;
  margin-right: 15%;
  margin-left: 15%;
        }
        .home-link:active {
            text-align: center;
            text-decoration: none;
            font-family: "Roboto Mono", monospace;
font-weight: 700;
font-style: normal;
            font-size: 96px;
            color:#35FF1F;
            margin-top: 24px;
  margin-bottom: 12px;
  margin-right: 15%;
  margin-left: 15%;
        }
        .home-link:hover {
            text-align: center;
            text-decoration: none;
            font-family: "Roboto Mono", monospace;
font-weight: 700;
font-style: normal;
            font-size: 96px;
            color:#35FF1F;
            margin-top: 24px;
  margin-bottom: 12px;
  margin-right: 15%;
  margin-left: 15%;
        }
        h2 {
            text-align: center;
            font-family: "Roboto Mono", monospace;
font-weight: 400;
font-style: normal;
            font-size: 48px;
            color: #10F7C5;
            margin-top: 8px;
  margin-bottom: 8px;
            margin-right: 15%;
  margin-left: 15%;
        }
        h3 {
            text-align: center;
            font-family: "Roboto Mono", monospace;
font-weight: 400;
font-style: normal;
            font-size: 32px;
            color: #10F7C5;
            margin-right: 15%;
  margin-left: 15%;
  margin-top: 8px;
  margin-bottom: 8px;
        }
        p {
            text-align: center;
            font-family: "Roboto Mono", monospace;
font-weight: 400;
font-style: normal;
            font-size: 24px;
            color:#26FF84;
            margin-top: 16px;
  margin-bottom: 24px;
  margin-right: 15%;
  margin-left: 15%;
  line-height: 42px;
        }

        ul {
            display:flex;
            padding: 14px 16px;
            justify-content: center;
        }

        a {
            text-decoration: none;
            color:#15D1C7;
        }

        a:hover {
            text-decoration: underline;
            color: #1AABA3;
        }

        .button {
            background-color: black;
            border: 2px solid #35FF1F;
            margin-right: 16px;
  margin-left: 16px;
            font-weight: 700;
            color: #35FF1F;
            padding: 15px 30px;
            text-align: center;
            text-decoration: none;
            display: inline-block;
            font-size: 24px;
        }

        .button:hover {
            background-color:#35FF1F;
            border: 2px solid #35FF1F;
            
            color: black;
            padding: 15px 30px;
            text-align: center;
            text-decoration: none;
            display: inline-block;
            font-size: 24px;
        }
        .a:active {
            background-color:#35FF1F;
            border: 2px solid #35FF1F;

            color: black;
            padding: 15px 30px;
            text-align: center;
            text-decoration: none;
            display: inline-block;
            font-size: 24px;
        }

        .button:current {
            background-color:#35FF1F;
            border: 2px solid #35FF1F;
            
            color: black;
            padding: 15px 30px;
            text-align: center;
            text-decoration: none;
            display: inline-block;
            font-size: 24px;
        }
        nav {
            display: flex;
            justify-content: center;
        }
        
        img {
            border: 4px solid #07CE67
        }

        .home-grid {
            display: grid;
            grid-template
        }