style.scss

$font-weight: bold;
$grid-padding: 20px;

.name {
    color: red;
    font-weight: $font-weight;
    font-family: cursive;
}

div {
    p {
        padding-bottom: 5px;
        padding-left: 5px;
        padding-right: 5px;
        text-align: center;
    }

    img {
        display: block;
        margin-left: auto;
        margin-right: auto;
        max-width: 100%;
        max-height: 100%;
    }

}

%links {
    font-weight: $font-weight;
}

a[href="index.html"]::before {
    @extend %links;
    content: "Return ";
}

a[href="index.html"]::after {
    @extend %links;
    content: "\01F3E0";
}

a::after {
    @extend %links;
    content: "\21d0";
}

a::before {
    @extend %links;
    content: "\21d2";
}

#italics {
    font-style: italic;
}

a:hover {
    background-color: aqua; 
}

@media screen and (min-width: 700px) {
    table, th, tr  {
        border: 3px dotted red;
        text-align: center;
        margin-right: auto;
        margin-left: auto;
    }
}

@media screen and (max-width: 500px) {
    table, th, tr {
        border: 2px solid gray;
        text-align: left;
    }
}