body {
            background-color: #f1f5f9;
            font-family: Arial, Helvetica, sans-serif;
        }
    
        .top {
            text-align: center;
            background-color: #fdfdfd;
            border: solid 6px #f1f5f9;
            border-radius: 24px;
            padding: 2vw 4vw;
            /*margin: 2vw 9.4vw;*/
            margin: 2vw calc(12vw - 6vh);
        }
    
        .topic {
            border: solid 4px;
            background-color: white;
            padding: 2vw 3.4vw;
            /*margin: 2vw 9.4vw;*/
            margin: 2vw calc(12vw - 6vh);
            border-radius: 24px;
        }
    
        .resource {
            border: solid 2px;
            background-color: whitesmoke;
            padding: 2vw;
            margin: 2.5vw;
            border-radius: 12px;
        }
    
         .comments {
            margin: 12px 2vw;
        }
    
        .updatedVersion {
            margin: 12px 2vw;
            font-size: 10px;
            color: gray;
        }
        
        .downloadIcon {
            padding: 2px;
            color: #00bfff;
            border: solid #00bfff 2px;
            border-radius: 4px;
            height: 19px;
            width: 19px;
            margin: auto;
        }

         /*This class is for the available icon */
         .moveDown { 
          position: relative;
          bottom: 1px;
        } 

         /*This class is for the NOT available icon */
         .moveDownSlight { 
          position: relative;
          top: 1.5px;
        } 

        .resourceTitle {
            margin-left: 10px;
        }

        .resourceTitle, .notAvailableNote {
            position: relative;
            top: 4.4px;
            color: black;
        }

        .anchorContainer {
            display: flex;
            align-content: center;
        }

        .activeAnchor, .dormantAnchor {
            text-decoration: none;
            display: flex;
            border-radius: 4px; /* Aesthetically, this should match the downloadIcon border-radius */
            padding: 8px 1px 1px 4px;
        }
        
        .activeAnchor:hover {
            /* border: solid gray 2px; */
            background: lightgrey;
        }
        
        .activeAnchor:active {
            /* border: solid dimgray 2px; */
            background: dimgray;
        }
        
        /* a {
            color: #00bfff;
        } */
        
        .hidden {
            border: 0;
            padding: 0;
            margin: 0;
            border-radius: 0;
            height: 0;
            overflow: hidden;
        }
        
        .showBtn {
            position: absolute;
            font-size: calc(2vh + 1vw);
             /*right: 14vw;*/
            right: calc(12.8vw - 2vh);
            /*right: 0;*/
            height: 4vw;
            width: 4vw;
            min-height: 32px;
            min-width: 32px;
            color: gray;
            border-radius: 33%;
            opacity: 0.66;
        }
        
        .showBtn:focus { outline: none; } /* To deal with the outline left when pressed on a mobile phone. */