Help me diagnose why my styles aren’t displaying

In the page that follows I have 3 styles that won’t display and I’ve cleaned up all but one error that doesn’t make sense from Vlad the Validator. :eyebrows: They’re all at the bottom of the page. I would so appreciate anyone helping me figure out what the problem is. The styles are .here, .thanks and .ques.

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">

<link rel="preconnect" href="https://fonts.googleapis.com"> 
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
  <link href="https://fonts.googleapis.com/css2?family=Courier+Prime:ital,wght@0,400;0,700;1,400;1,700&display=swap" rel="stylesheet">
  <link href="https://fonts.googleapis.com/css2?family=Roboto:wght@100;200;300;400;500;600;700;800;900&display=swap" rel="stylesheet">
  <link href="https://fonts.googleapis.com/css2?family=Roboto+Slab:wght@100;200;300;400;500;600;700;800;900&display=swap" rel="stylesheet">
  <link href="https://fonts.googleapis.com/css2?family=Roboto+Condensed:ital,wght@0,400;0,700;1,400;1,700&display=swap" rel="stylesheet">
  <link href="https://fonts.googleapis.com/css2?family=Crete+Round:ital@0;1&display=swap" rel="stylesheet">
  <link href="https://fonts.googleapis.com/css2?family=Calistoga&display=swap" rel="stylesheet">
  <link href="https://fonts.googleapis.com/css2?family=Solway:wght@300;400;500;700;800&display=swap" rel="stylesheet">
  <link href="https://fonts.googleapis.com/css2?family=Henny+Penny&display=swap" rel="stylesheet">
  <link href="https://fonts.googleapis.com/css2?family=Special+Elite&display=swap" rel="stylesheet">

<title>semicodin recommends</title>

<style>

body {
    width: 1080px;
    font-family: 'crete round', serif;
    font-size: 1.25rem;
    line-height: 1.02;
    font-weight: bold;
    color: crimson;
    background-color: #ffffee;  /* ivory */
    }

#counter {
    margin-top: 2.5rem;
    text-align: center;
    position: absolute;
    bottom: 0;
    max-width: 100%;
}

.ssz1 {
    margin-top: 3.13rem;
    text-align: center;
    font-family: 'crete round';
    font-size: 2rem;
    line-height: 2.25rem;
    font-weight: bold;
    color: black;
}
.ssz2 {
    text-align: center;
    margin-bottom: 1.75rem;
    font-family: 'crete round';
    font-size: 1.75rem;
    line-height: 2rem;
    font-weight: bold;
    color: crimson;
}
.henpen {
    text-align: center;
    color: black;
    margin-top: 3.13rem;
    font-size: 3.75rem;
    line-height: 3.88rem;
    font-weight: 700;
    font-family: 'Henny Penny', cursive;
}
.rec {
    color: black;
    text-align: justify;
    background-color: #ffffee;  /* ivory */
    width: 90%;
    margin: 3.13rem 5% 6.25rem 5%;
    font-family: 'roboto slab', serif;
    font-size: 2.5rem;
    line-height: 1.02;
    font-weight: bold;
    }

/* ━━━━━━━━ TABLE 1 ━━━━━━━━ */

.table1 {
    width: 80%;
    margin: 0rem 10% 0rem 10%;
    border: 1.25rem groove silver;
    border-collapse: collapse;
    font-family: 'roboto slab', serif;
    font-size: 1.88rem;
    line-height: 2rem;
    font-weight: bold;
    color: black;
}
.table1 tbody tr:nth-child( odd ) {
    background-color: white;
    border-bottom: .19rem solid black;
}
.table1 tbody tr:nth-child( even ) {
    background-color: #eeeeee;        /* STRIPE LIGHT GREY */
    border-bottom: .19rem solid black;
}
.table1 tbody tr td:nth-of-type(1) {
    border-right: .19rem solid black;
    text-align: center;
}
.table1 tbody tr td:nth-of-type(2) {
    border-right: .19rem solid black;
    text-align: left;
}

/* ━━━━━━━━━━ COLORS ━━━━━━━━━━━ */

.blu {color: blue}
.blub {color: blue; font-weight: bold;}
.fusch {color: #ca009b}
.fuschb {color: #ca009b; font-weight: bold}
.fuschi {color: #ca009b; font-style: italic}
.crim {color: crimson}
.crimb {color: crimson; font-weight: bold}
.crimi {color: crimson; font-style: italic}
.grey {color: grey}
.green {color: #248900}  /* green */
.greenb {color: #248900; font-weight: bold}

/* ━━━━━━━━━ LINKS ━━━━━━━━━━━ */

.redlink a:link {color: crimson}
.redlink a:visited {color: crimson}

.plink a:link {
    color: #ffe5fe;  /* pink */
    background: black;
    text-align: center;
    font-style: italic;
    font-family: 'roboto condensed', sans-serif;
    font-size: 1.88rem;
    line-height: 2rem;
    font-weight: 400;
}
.plink a:visited {
    color: #ffe5fe;
    background: black;
    text-align: center;
    font-style: italic;
    font-family: 'roboto condensed', sans-serif;
    font-size: 1.88rem;
    line-height: 2rem;
    font-weight: 400;
}
.wlink a:link {
    color: #ffffff;      /*  cyan  */
    background: black;
    text-align: center;
    font-style: italic;
    font-family: 'roboto condensed', sans-serif;
    font-size: 1.88rem;
    line-height: 2rem;
    font-weight: 400;
}
.wlink a:visited {
    color: #ffffff;
    background: black;
    text-align: center;
    font-style: italic;
    font-family: 'roboto condensed', sans-serif;
    font-size: 1.88rem;
    line-height: 2rem;
    font-weight: 400;
}
.glink a:link {
    color: #56ff00;      /*  neon green  */
    background: black;
    text-align: center;
    font-style: italic;
    font-family: 'roboto condensed', sans-serif;
    font-size: 1.88rem;
    line-height: 2rem;
    font-weight: 400;
}
.glink a:visited {
    color: #56ff00;
    background: black;
    text-align: center;
    font-style: italic;
    font-family: 'roboto condensed', sans-serif;
    font-size: 1.88rem;
    line-height: 2rem;
    font-weight: 400;
}
.bnlink a:link {
      padding-bottom: 10px;
      color: #bbac86;    /*  BROWN  */
      background: black;
      text-align: center;
      font-style: italic;
      font-family: 'roboto condensed', sans-serif;
      font-size: 1.88rem;
      line-height: 2rem;
      font-weight: 700;
}
.bnlink a:visited {
      padding-bottom: 10px;
      color: #bbac86;    /*  BROWN  */
      background: black;
      text-align: center;
      font-style: italic;
      font-family: 'roboto condensed', sans-serif;
      font-size: 1.88rem;
      line-height: 2rem;
      font-weight: 700;
}

.ctr {text-align: center}
.undr {text-decoration: underline}

.clambk {
	color: black;
	font-style: italic;
	font-family: roboto, sans-serif;
    font-size: 2.69rem;
    font-weight: 900;
}
.clamcr {
	color: crimson;
	font-style: italic;
	font-family: roboto, sans-serif;
    font-size: 2.69rem;
    font-weight: 900;
}
.clambu {
	color: blue;
	font-style: italic;
	font-family: roboto, sans-serif;
    font-size: 3rem;
    font-weight: 900;
}
.warn {
    font-family: 'roboto slab', serif;
    font-size: 2.5rem;
    line-height: 2.63rem;
    font-weight: 900;
    text-decoration: underline;

.here {
    color: black;
    text-align: center;
    margin: 2rem 0 1rem 0;
    font-family: 'roboto slab', serif;
    font-size: 4rem;
    line-height: 4.23rem;
    font-weight: 700;
}
.tiny {
    color: #888888;
    text-align: center;
    margin: 1rem 4rem 1rem 4rem;
    font-family: 'courier prime', monospace;
    font-size: 1rem;
    line-height: 1.13rem;
    font-weight: bold;
}
.thanks {
    color: black;
    text-align: center;
    margin: 1rem 4rem 1rem 4rem;
    font-family: 'courier prime', monospace;
    font-size: 2rem;
    line-height: 2.13rem;
    font-weight: bold;
}
.ques {
    color: black;
    text-align: center;
    margin: 2.25rem 2rem 2.25rem 2rem;
    font-size: 3rem;
    line-height: 3.13rem;
    font-weight: 700;
    font-family: 'roboto slab', serif;
}

a:active {color: black}
a:hover {color: crimson}
a:link {color: crimson}
a:visited {color: black}

/* ▬▬▬▬▬▬ END CSS ▬▬▬▬▬▬ */

</style>
</head>

<body>

<div class="ssz1">
This Is A Small Screen Zone*</div>
<div class="ssz2">
*Designed  and built for SmartPhones<span class="clamcr">!</span>
</div>

<div class="henpen">semicodin recommends</div>

<table class="table1">
<tr>
    <td><span class="crim">SITEPOINT FORUMS</span></td>
    </tr>
<tr>
    <td>ANDROID APP <span class="blu">PURE BROWSER</span></td>
    </tr>
<tr>
    <td>ANDROID APP <span class="blu">QUICK EDIT PRO</span></td>
    </tr>
<tr>
    <td>ANDROID APP <span class="blu">X-PLORE FILE MANAGER</span></td>
    </tr>
<tr>
    <td>ONLINE <span class="crim">W3 VALIDATOR</span> ERROR CHECKING ENGINE<br>
<a href="https://www.validator.w3.org">https://www.validator.w3.org</a>
</td>
    </tr>
<tr>
    <td>ONLINE <span class="crim">GOOGLE PHOTOS</span> LINK CONVERSIONS<br>
<a href="https://www.labnol.org/embed/google/photos/">https://www.labnol.org/embed/google/photos/</a>
</td>
    </tr>
</table>

<div class="rec">
I like to code HTML. It relaxes me.<br>
<br>
I don&rsquo;t have access to a desktop computer at the present time so I do all of my coding on an Android SmartPhone. There are a few indispensable tools I keep at my disposal to write HTML and I&rsquo;d like to share them with you. In addition to Sitepoint for help in coding (anything) I test my code on the Android browser <a href="https://play.google.com/store/apps/details?id=pure.lite.browser" target="_blank">Pure Browser</a>. This browser has a distinct advantage over other browsers in that you can open HTML files &ldquo;locally.&rdquo; By locally I mean you can open your HTML files directly from within any file manager &mdash; I recommend 
<a href="https://play.google.com/store/apps/details?id=com.lonelycatgames.Xplore" target="_blank">X-Plore</a> &mdash; that has an &ldquo;OPEN WITH&rdquo; command, with no need for an internet connection! <span class="warn">Only use Pure Browser for <span class="crim">testing your code</span>, not for daily browsing</span>: Chrome doesn&rsquo;t like it and you may get security errors if you use it for browsing. Still, you&rsquo;re going to need to <i>see</i> what your code actually looks like so check out Pure Browser. You can perform a long (full page) screenshot of your page output, and even rip it to a .PDF. A free, <span class="warn">powerful</span> little browser. 
<br>
<br>
As important, you’ll need a text editor that is robust enough to handle coding. I recommend the Android App <a href="https://play.google.com/store/apps/details?id=com.rhmsoft.edit.pro" target="_blank">Quick Edit Pro</a>. Get the license &mdash; it&rsquo;s about $4.00 and well worth it to be rid of the ads that will <i>bombard</i> you in the free version. What sets QE Pro apart is their engineering of the text SELECT function. You’ll come to realize how badly other apps handle this vital aspect of text editing and appreciate the developer&rsquo;s engineering of a small &ldquo;gutter&rdquo; in your left margin. Trust me, this one innovation is worth five times the price of the license because it makes the selection of text a comfortable transaction instead of the nail-biting ordeal it usually is for large-handed folk like me struggling with the keyboard of a SmartPhone! QE&nbsp;Pro has themes, line numbering and even a Preview of how your page will look!<br>
<br>
No discussion about coding on a SmartPhone can be complete without mentioning the <a href="https://validator.w3.org">W3&nbsp;Validator</a>. <span class="crim">When you&rsquo;re coding on a SmartPhone you are coding in an extremely <i>volatile</i> environment</span>. Just <i>lightly brushing</i> the phone can insert characters that will break the page. So before you consider your page &ldquo;Final&rdquo; make a pit stop at the Validator and run your code through their error-checking engine. You can choose to just paste in your code; nothing could be easier! You&rsquo;d be amazed at how many errors fly right under your radar and you&rsquo;ll be more confident in uploading your pages that all errors have been resolved. <span class="crim">I error check my code <span class="undr">frequently</span> &mdash; sometimes 10-20 times in a day!</span><br>
<br>
Finally, a word about GRAPHICS. You have a generous 15GB of storage with <span class="crimb">GOOGLE PHOTOS</span> and Google made it impossible to link any of these assets to a website. This is why  programmers created <a href="https://labnol.org/embed/google/photos/" target="_blank">LABNOL</a>: a free site for converting website assets uploaded to Google Photos into <i>LINKABLE images, graphics and photos.</i> Follow the easy instructions and see all your images &mdash; large and small &mdash; appear in your HTML pages just as if you were paying for their hosting! Note this doesn’t work with DRIVE.<br>
<br>
</div>
<div class="here">
<a href="https://semicodin.nekoweb.org/vault/about.zip" target="_blank">Code here.</a>
</div>

<div class="thanks">
      This code courtesy of Paul O&rsquo;Brien<br>
      at the Sitepoint Forums
    </div>

<div class="ques">
Got Questions? You can PM me at<br>
<a href="https://sitepoint.com/community/u/semicodin/activity">the Sitepoint Forums</a><span class="clamcr">!</span>
</div>

CLICK HERE TO PROCEED<br>
<a href="https://semicodin.nekoweb.org/toc.html">
TO THE TABLE OF CONTENTS</a>

Closing right curly brace needed for .warn CSS declaration.

.warn {
    font-family: 'roboto slab', serif;
    font-size: 2.5rem;
    line-height: 2.63rem;
    font-weight: 900;
    text-decoration: underline;

.here {
1 Like

That did it Archibald, you’re brilliant! I’ll dedicate the page to you! :weee:

Edit: never mind, I found the culprit: border: collapse

Archibald can I ask you another question? How can I get the corners of my “groove” borders to be mitred? Somewhere along the line I lost the technique and I really miss it!

Looks mitred here:

groove-border

Yes it’s working but I’m still having issues with this Archibald. Look at my toc. I removed “border collapse” and I can get these corners to mitre . . . but it throws the heading! See this excerpt from my toc. Arrrgh! Now it isn’t covering up the left and right borders, just shoving the heading in between the left/right borders! Help?

<!DOCTYPE html>
<HTML LANG="en">

<HEAD>
  <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">

  <link rel="preconnect" href="https://fonts.googleapis.com">
  <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
  <link href="https://fonts.googleapis.com/css2?family=Courier+Prime:ital,wght@0,400;0,700;1,400;1,700&display=swap" rel="stylesheet">
  <link href="https://fonts.googleapis.com/css2?family=Roboto:wght@100;200;300;400;500;600;700;800;900&display=swap" rel="stylesheet">
  <link href="https://fonts.googleapis.com/css2?family=Roboto+Slab:wght@100;200;300;400;500;600;700;800;900&display=swap" rel="stylesheet">
  <link href="https://fonts.googleapis.com/css2?family=Roboto+Condensed:ital,wght@0,400;0,700;1,400;1,700&display=swap" rel="stylesheet">
  <link href="https://fonts.googleapis.com/css2?family=Crete+Round:ital@0;1&display=swap" rel="stylesheet">
  <link href="https://fonts.googleapis.com/css2?family=Calistoga&display=swap" rel="stylesheet">
  <link href="https://fonts.googleapis.com/css2?family=Solway:wght@300;400;500;700;800&display=swap" rel="stylesheet">
  <link href="https://fonts.googleapis.com/css2?family=Henny+Penny&display=swap" rel="stylesheet">
  <link href="https://fonts.googleapis.com/css2?family=Playfair+Display:ital,wght@0,400;0,500;0,600;0,700;0,800;0,900;1,400;1,500;1,600;1,700;1,800;1,900&display=swap" rel="stylesheet">
  <link href="https://fonts.googleapis.com/css2?family=Special+Elite&display=swap" rel="stylesheet">

  <title>TABLE OF CONTENTS &#7172; semicodin</title>

  <style>
    body {
      width: 1080px;
      background-color: black;
      margin: 0 auto;
      color: black;
      font-family: 'roboto slab', serif;
      font-weight: 700;
      font-size: 2.5rem;
      line-height: 2.63rem;
    }

    #counter {
      text-align: center;
      position: absolute;
      bottom: 0;
      max-width: 100%;
    }

    .ssz1 {
      margin-top: 3.13rem;
      text-align: center;
      font-family: 'crete round';
      font-size: 2rem;
      line-height: 2.25rem;
      font-weight: bold;
      color: #ebf6ff;
      /* PALE BLUE */
    }

    .ssz2 {
      text-align: center;
      margin-bottom: 1.75rem;
      font-family: 'crete round';
      font-size: 1.75rem;
      line-height: 2rem;
      font-weight: bold;
      color: #ebf6ff;
      /* PALE BLUE */
    }

    .henpen {
      text-align: center;
      color: #ffffee;
      /* ivory */
      margin: 2.5rem 16% 0rem 16%;
      font-size: 3.75rem;
      line-height: 3.88;
      font-weight: 700;
      font-family: 'Henny Penny', cursive;
    }

    .thanks {
      margin: 2.5rem 15% 6.25rem 15%;
      color: #ffffee;
      /* ivory */
      text-align: center;
      font-style: italic;
      font-family: 'crete round', serif;
      font-size: 2.25rem;
      line-height: 2.38rem;
      font-weight: bold;
    }

    .hilite {
      margin: 0rem 3.38rem 0rem 3.38rem;
      text-align: center;
      font-style: italic;
      color: black;
      background-color: white;
      font-family: 'crete round', serif;
      font-size: 2.25rem;
      line-height: 2.38rem;
      font-weight: bold;
      padding-top: .5rem;
      padding-right: .8rem;
      padding-bottom: .6rem;
      padding-left: .8rem;
    }

    td {
      padding-top: .5rem;
      padding-right: .5rem;
      padding-bottom: .6rem;
      padding-left: .8rem;
    }

    .here {
      color: #888888;
      font-family: 'roboto slab', serif;
      font-weight: 400;
      font-size: 2.25rem;
      line-height: 2.31rem;
    }

    /* ━━━━━━━━ TABLE 1 ━━━━━━━━ */
    .table1 th {
      width: 86%;
      margin: 0rem 7% 1.25rem 7%;
      border: 1.75rem groove #dab471;  /* was #bbac86;  mushrooms */
      padding: .8rem;
      width: auto;
      color: #ffffee; /* ivory */
      text-align: center;
      font-style: italic;
      background-color: black;
      font-family: 'crete round', serif;
      font-size: 4rem;
      line-height: 4.25rem;
      font-weight: bold;
    }

    .group1 {
      /*   CLASS LETTER (A-E)    */
      width: 8%;
      color: blue;
      font-family: 'calistoga', serif;
      font-weight: 400;
      font-size: 2.75rem;
      line-height: 2.88rem;
    }

    .head1 {
      width: 92%;
      /* DESCRIPTION */
      color: blue;
      font-family: 'calistoga', serif;
      font-weight: 400;
      font-size: 2.75rem;
      line-height: 2.88rem;
    }

    .table1 {
      width: 86%;
      margin: 2.25rem 7% 0rem 7%;
      border-left: 1.75rem groove #dab471;
      /* shrooms */
      border-right: 1.75rem groove #dab471;
      /* shrooms */
      font-family: 'roboto slab', serif;
      font-size: 2.25rem;
      line-height: 2.31rem;
      font-weight: bold;
      color: black;
    }

    .table1 tbody tr:nth-child(odd) {
      background-color: white;
    }

    .table1 tbody tr:nth-child(even) {
      background-color: #ebf6ff;
      /* PALE BLUE */
    }

    .table1 tbody tr td:nth-of-type(1) {
      border-right: .19rem solid black;
      text-align: center;
    }

    .table1 tbody tr td:nth-of-type(2) {
      border-right: .19rem solid black;
      text-align: left;
    }

    /* ━━━━━━━━ TABLE 2 ━━━━━━━━ */
    .group2 {
      /* CLASS LETTER (A-E) */
      width: 8%;
      font-family: 'calistoga', serif;
      font-weight: 400;
      font-size: 2.75rem;
      line-height: 2.88rem;
      color: green;
    }

    .head2 {
      width: 92%;
      /* DESCRIPTION */
      color: green;
      font-family: 'calistoga', serif;
      font-weight: 400;
      font-size: 2.75rem;
      line-height: 2.88rem;
    }

    .table2 {
      width: 86%;
      margin: 0rem 7% 1.25rem 7%;
      border-bottom: 1.75rem groove #dab471;
      /* mushrooms */
      border-right: 1.75rem groove #dab471;
      /* mushrooms */
      border-left: 1.75rem groove #dab471;
      /* mushrooms */
      font-family: 'roboto slab', serif;
      font-size: 2.25rem;
      line-height: 2.31rem;
      font-weight: bold;
      color: black;
    }

    .table2 tbody tr:nth-child(odd) {
      background-color: white;
    }

    .table2 tbody tr:nth-child(even) {
      background-color: #f3ffeb;
      /* PALE GREEN */
    }

    .table2 tbody tr td:nth-of-type(1) {
      border-right: .19rem solid black;
      text-align: center;
    }

    .table2 tbody tr td:nth-of-type(2) {
      border-right: .19rem solid black;
      text-align: left;
    }

    /* ━━━━━━━━━━ COLORS ━━━━━━━━━━━ */
    .ivory {
      color: #ffffee;
      text-align: center;
      margin: 2.25rem 0rem 2.25rem 0rem;
    }

    .blu {
      color: blue
    }

    .blub {
      color: blue;
      font-weight: bold;
    }

    .fusch {
      color: #ca009b
    }

    .fuschb {
      color: #ca009b;
      font-weight: bold
    }

    .fuschi {
      color: #ca009b;
      font-style: italic
    }

    .crim {
      color: crimson
    }

    .crimb {
      color: crimson;
      font-weight: bold
    }

    .crimi {
      color: crimson;
      font-style: italic
    }

    .grey {
      color: grey
    }

    .green {
      color: #248900
    }

    /* green */
    .greenb {
      color: #248900;
      font-weight: bold
    }

    /* ━━━━━━━━━ LINKS ━━━━━━━━━━━ */
    a:active {
      color: crimson
    }

    a:hover {
      color: crimson
    }

    a:link {
      color: blue
    }

    a:visited {
      color: blue
    }

    .redlink a:link {
      color: crimson
    }

    .redlink a:visited {
      color: crimson
    }

.pchlink a:link {
    color: #8D4000
}
.pchlink a:visited {
    color: #8D4000
}

    .whlink a:link {
      color: #ffffee
    }

    /* ivory */
    .whlink a:visited {
      color: #ffffee
    }

    /* ivory */
    .bk1link a:link {
      color: black;
      font-family: 'roboto slab', serif;
      font-weight: 700;
      font-size: 2.25rem;
      line-height: 2.31rem;
    }

    .bk1link a:visited {
      color: black;
      font-family: 'roboto slab', serif;
      font-weight: 700;
      font-size: 2.25rem;
      line-height: 2.31rem;
    }

    .bk2link a:link {
      color: black;
      font-family: 'roboto slab', serif;
      font-weight: 700;
      font-size: 2.5rem;
      line-height: 2.63rem;
    }

    .bk2link a:visited {
      color: black;
      font-family: 'roboto slab', serif;
      font-weight: 700;
      font-size: 2.5rem;
      line-height: 2.63rem;
    }

    .bnlink a:link {
      padding-bottom: 10px;
      color: #bbac86;
      /*  BROWN  */
      background: black;
      text-align: center;
      font-style: italic;
      font-family: 'roboto condensed', sans-serif;
      font-size: 1.88rem;
      line-height: 2rem;
      font-weight: 700;
    }

    .bnlink a:visited {
      padding-bottom: 10px;
      color: #bbac86;
      /*  BROWN  */
      background: black;
      text-align: center;
      font-style: italic;
      font-family: 'roboto condensed', sans-serif;
      font-size: 1.88rem;
      line-height: 2rem;
      font-weight: 700;
    }

    /* ━━━━━━ MISCELLANEOUS ━━━━━━━ */
    .lead {
      padding: .8rem;
      width: auto;
      color: black;
      text-align: center;
      font-style: italic;
      font-family: 'crete round', serif;
      font-size: 4rem;
      line-height: 4.25rem;
      font-weight: bold;
    }

    .ctr {
      text-align: center
    }

    .undr {
      text-decoration: underline
    }

    .clamwh {
      color: #ffffee;
      /* IVORY */
      font-style: italic;
      font-family: roboto, sans-serif;
      font-size: 2.69rem;
      font-weight: 900;
    }

    .clambu {
      color: #ebf6ff;
      /* PALE BLUE */
      font-style: italic;
      font-family: roboto, sans-serif;
      font-size: 2.69rem;
      font-weight: 900;
    }

    .clambk {
      color: black;
      font-style: italic;
      font-family: roboto, sans-serif;
      font-size: 5rem;
      font-weight: 900;
    }

    .clamcr {
      color: crimson;
      font-style: italic;
      font-family: roboto, sans-serif;
      font-size: 2.69rem;
      font-weight: 900;
    }

    .clamye {
      color: yellow;
      font-style: italic;
      font-family: roboto, sans-serif;
      font-size: 2.69rem;
      font-weight: 900;
    }

/* ━━━━━ START SMOKE TAB ━━━━━ */
    /* animated tab */
    td.svg-header {
      padding: 1rem .5rem 0;
      background: white; /* #665e49 Dark Brown coordinayed w/border SAND #fff9e1; */
      border-bottom: 7px solid #000;
      border-top: 0px solid #000;
    }

    .svgtabs.onetab span {
      --tab1-color: #fff;
    }

    .svgtabs {
      width: 100%;
      margin: auto;
      display: flex;
      overflow: hidden;
    }

    .svgtabs a {
      color: #000;
      text-decoration: none;
      flex: 1 0 0;
      display: grid;
      align-items: center;
      grid-template-areas: "tab";
      position: relative;
      text-align: center;
      margin-right: -9rem;
      transition: 0.3s ease;
    }

    .svgtabs.onetab a {
      justify-content: center;
      margin-right: 0;
    }

    .svgtabs a:last-child {
      margin-right: 0 !important;
    }

    .svgtabs svg {
      display: block;
      grid-area: tab;
      position: relative;
      z-index: 1;
    }

    .svgtabs.onetab svg {
      width: 620px;
      height: 75px;
      top: 2px
    }

    .svgtabs span {
      grid-area: tab;
      position: relative;
      z-index: 2;
      padding: 11px .5rem 0;
      font-weight: bold;
      color: #000;
      font-style: italic;
      font-family: 'crete round', serif;
      font-size: 4rem;
      line-height: 4.25rem;
    }

    #test {
      height: 220px;
      animation: tab 15s infinite
    }

    @keyframes tab {
      0% {
        height: 200px;
        width: 260px;
      }

      50% {
        height: 140px;
        width: 180px;
      }

      100% {
        height: 200px;
        width: 260px
      }
    }

.new {
      color: yellow;
      background-color: crimson;
      margin-left: 1.5rem;
      font-family: 'crete round', serif;
      font-size: 2rem;
      line-height: 2.25rem;
      font-weight: bold;
      padding-top: .4rem;
      padding-right: .6rem;
      padding-bottom: .4rem;
      padding-left: .6rem;


  </style>
</head>

<body>

  <div class="ssz1">
    This Is A Small Screen Zone*</div>
  <div class="ssz2">
    *Designed and built for SmartPhones<span class="clamlbu">!</span></div>

  <table class="table1">
    <thead>
      <tr>
        <th colspan="2">

          Table of Contents

        </th>
      </tr>
    </thead>
    <tbody>

      <tr>
        <td class="group1">A.</td>
        <td class="head1">PROJECTS</td>
      </tr>
      <tr>
        <td></td>
        <td>
          <a href="https://semicodin.nekoweb.org/index.html" target="_blank">Home</a>
        </td>
      </tr>
      <tr>
        <td></td>
        <td>
          <a href="https://semicodin.nekoweb.org/about.html" target="_blank">About</a>
        </td>
      </tr>
      <tr>
        <td></td>
        <td>
          Table of Contents <span class="here">(You Are Here)</span></td>
      </tr>
      <tr>
        <td></td>
        <td>
          <a href="https://semicodin.nekoweb.org/0_thru_g/(shape-outside_ellipse)_01.html" target="_blank">&lt;shape-outside: ellipse&gt; 01</a>
        </td>
      </tr>
      <tr>
        <td></td>
        <td>
          <a href="https://semicodin.nekoweb.org/comingsoon.html" target="_blank">&lt;shape-outside: polygon&gt; 01</a>
        </td>
      </tr>
      <tr>
        <td></td>
        <td>
          <a href="https://semicodin.nekoweb.org/0_thru_g/2_flex_cols_nth_child_01.html" target="_blank">2_flex_columns_nth_child_01</a>
        </td>
      </tr>
      <tr>
        <td></td>
        <td>
          <a href="https://semicodin.nekoweb.org/comingsoon.html" target="_blank">Template Complex Business Letter for 2 Addressees</a> w&#47;Sticker Positions from USPS P.O.D. Counter Rolls
        </td>
      </tr>
      <tr>
        <td></td>
        <td>
          <a href="https://semicodin.nekoweb.org/0_thru_g/3_col_flex_rem_conversion_chart.html" target="_blank">REM Conversion Chart</a> Flex w&#47;nth Child
        </td>
      </tr>
      <tr>
        <td></td>
        <td>
          <a href="https://semicodin.nekoweb.org/h_thru_z/vert_center_image_w_text_01.html" target="_blank">Vertically Center an Image</a> &amp; Horizontally Including Text w&#47;Page Counter Footer
        </td>
      </tr>

      <tr>
        <td class="svg-header" colspan="2">
          <div>
            <div class="svgtabs onetab">
              <a class="svgtab1" href="#">
                <span>Tabs!</span>
                <svg width="620" height="74.998" viewBox="0 0 164.042 19.843" xml:space="preserve" xmlns="http://www.w3.org/2000/svg">
                  <clipPath id="shape">
                    <path id="front-fill" d="M121.772 232.987c-11.042 0-13.643 5.879-17.411 10.564-4.653 5.788-11.776 8.51-11.776 8.51h145.426s-7.123-2.722-11.776-8.51c-3.768-4.685-6.37-10.564-17.412-10.564Z" transform="translate(-83.277 -232.217)" />
                  </clipPath>

                  <path style="fill:#000;stroke-width:.264999;stroke-linejoin:bevel;paint-order:fill markers stroke" d="M121.772 232.217c-5.022 0-8.508 1.208-11.179 3.182-2.67 1.974-4.52 4.54-6.502 7.008-3.962 4.935-8.28 9.653-20.814 9.653h11.356c5.25-1.985 8.309-5.303 10.882-8.509 2.017-2.511 3.785-4.923 6.166-6.683 2.382-1.76 5.38-2.823 10.091-2.823h87.051c4.711 0 7.71 1.062 10.091 2.823 2.382 1.76 4.15 4.172 6.166 6.683 2.574 3.206 5.633 6.524 10.882 8.51h11.357c-12.534 0-16.852-4.72-20.815-9.654-1.98-2.468-3.83-5.034-6.501-7.008-2.671-1.974-6.157-3.182-11.18-3.182Z" transform="translate(-83.277 -232.217)" />

                  <image id="test" width="270" height="220" href="https://assets.codepen.io/74047/PARCHMENT-A.jpg" clip-path="url(#shape)" />
                </svg>
              </a>
            </div>
        </td>
      </tr>

      <tr>
        <td class="group1">B.</td>
        <td class="head1">CSS & SVG &#9753; PARCHMENT & SMOKE</td>
      </tr>
      <tr>
        <td></td>
        <td>
          <a href="https://semicodin.nekoweb.org/comingsoon.html" target="_blank">1 TAB CSSPAR1</a> &mdash; Coming Soon!
        </td>
      </tr>
      <tr>
        <td></td>
        <td><span class="bk1link">
          <a href="https://semicodin.nekoweb.org/h_thru_z/svgpar1_ani.html" target="_blank">1 TAB SVGPAR1_ANI</a></span> &#47; ANIMATED <span class="new">NEW<span class="clamye">!</span></span>
        </td>
      </tr>
      <tr>
        <td></td>
        <td>
          <a href="https://semicodin.nekoweb.org/comingsoon.html" target="_blank">2 TABS CSSPAR2</a> &mdash; Coming Soon!
        </td>
      </tr>
      <tr>
        <td></td>
        <td><span class="bk1link">
          <a href="https://semicodin.nekoweb.org/comingsoon.html" target="_blank">2 TABS SVGPAR2_ANI</a></span> &#47; ANIMATED &mdash; Soon!
        </td>
      </tr>
      <tr>
        <td></td>
        <td>
          <a href="https://semicodin.nekoweb.org/comingsoon.html" target="_blank">3 TABS CSSPAR3</a> &mdash; Coming Soon!
        </td>
      </tr>
      <tr>
        <td></td>
        <td><span class="bk1link">
          <a href="https://semicodin.nekoweb.org/comingsoon.html" target="_blank">3 TABS SVGPAR3_ANI</a></span> &#47; ANIMATED Soon!
        </td>
      </tr>
      <tr>
        <td></td>
        <td>
          <a href="https://semicodin.nekoweb.org/comingsoon.html" target="_blank">7 TABS CSSPAR7</a> &mdash; Coming Soon!
        </td>
      </tr>
      <tr>
        <td class="group1">C.</td>
        <td class="head1">CSS &mdash; SOLID w&#47;BORDER</td>
      </tr>
      <tr>
        <td></td>
        <td>
          <a href="https://semicodin.nekoweb.org/comingsoon.html" target="_blank">1 TAB CSSTAB1BDR</a> &mdash; Coming Soon!
        </td>
      </tr>
</tbody>
</table>

</body>
<html>

You can apply border-collapse: collapse to class .table1 but mitering is not satisfactory:

I think you will have to have a groove border (with four mitres) around the whole table and a plain border below “Table of Contents”.

I’ll start a new thread for the issue Archibald. Thank you for your efforts. :wink:

Looks like you have a missing closing brace in your .warn class. Try adding } at the end of your .warn CSS declaration. That should fix the issue with your styles not displaying.

css

Copy code

.warn {
    font-family: 'roboto slab', serif;
    font-size: 2.5rem;
    line-height: 2.63rem;
    font-weight: 900;
    text-decoration: underline;
} /* Add this brace */

Give that a try and see if it helps!

1 Like