stylesheet.css

/* vh means "viewport height", meaning "in reference to your window's height" */
/* vw means "viewport width", meaning "in reference to your window's width" */

body {
    margin: 2vw;
    font-family: Verdana, Geneva, Tahoma, sans-serif;
}

body:hover{
    background-image: linear-gradient(-10deg, #8CA6DB, #B993D6);

}

h1 {
    text-align: center;
    margin-bottom: 5vh;
    font-size: 5vw;
    /* check this instead the previous line: font-size: 150%; */
}

.intro {
    margin-bottom: 5vh;
}

.intro:hover{

    /* background-color: cornsilk; */
}

p{
    margin-left: 12vw;
    margin-right: 8vw;
    text-align: justify;
    font-size: 1.3vw;
    line-height: 1.3;
}

/* this is the link styling for when it's hovered over or focused */
a:focus, a:hover{
    background-color: yellow;
    outline: red 3px solid;
}

/* this is why the link always remains blue */
a:visited{
    color: blue;
}

/* this is styling for the table */
  .table {
    margin-left: 5vw;
    margin-right: auto;
    width: auto;
    display: grid;
    grid-gap: 1vw;
    grid-template-columns: repeat(6, 20vw);
    grid-template-rows: 15vh 15vh 15vh 15vh 15vh 15vh 15vh 15vh;
    /* check this instead the previous line: grid-template-rows: 100px 100px 100px 100px 100px 100px 100px 100px ; */
    grid-auto-flow: column; 
  }

/* this is the individual box styling */
  .box {
    background-color: rgb(34, 33, 33);
    color:  rgb(34, 33, 33);
    border-radius: 5%;
    padding: 8%;
    font-size: 1.5vw;
  }

/* here are different colors for when we hover over a box or use keyboard navigation on the boxes */
  .box:focus, .box:hover{
    background-color: pink;
    color:  rgb(34, 33, 33);
  }

/* this is first column and first row in the table */
  .box:nth-child(-n+8), .box:nth-child(8n+1) {
    background-color: #ccc;
    color: #000;
    text-align: center;
    padding-top: 12%;
    font-weight: bold;
    /* check this instead the next line: font-size: 150%; */
    font-size: 2vw;
  }

  /* this is the box in the top left corner of the table */
  .box:nth-child(1) {
    opacity: 0.01;
  }

/* this is styling of the small pictures */
    .box .pic {
        height: 7vh;
        /* check this instead the previous line: height 70px */
        width: auto;
        border-radius: 5%;
    }

/* horizontal pictures */
    .box .pich {
        padding-top: 8%;
        height: 5vh;
        /* check this instead the previous line: height: 50px; */
        width: auto;
        border-radius: 5%;
    }