.noto-sans-regular {
            font-family: "Noto Sans", sans-serif;
            font-optical-sizing: auto;
            font-weight: 600;
            font-style: normal;
            font-variation-settings: 
                "wdth" 100;
        }

      * {
            margin: 0;
            padding: 0;
            box-sizing: border-box;
        }

        h1 {
            font-size: 3.5vw;
        }

        p {
            font-size: 1.5vw;
        }
        
        body {
            font-family: "Noto Sans";
            font-size: 1.5vw;
            overflow-x: hidden;
            background-color: transparent;
            user-select: none; /* sorry i cannot allow you to see the horrors of my layout */
            background-image: url("web_bg.png");
            background-attachment: fixed; /* This makes it "sticky" to the screen */
            background-size: cover;
            background-position: center;
        }

        #header {
            background-color: #fac825;
            align-content: center;
        }

        .headerlinks {
            text-decoration: none;
            color: #000;
            padding-left: 3em;
            transition: 0.2s;
        }

        .headerlinks:hover {
            color: #f0f0f0;
            transition: 0.3s;
        }

        #links {
            border: solid 0.5px;
            padding-top: 0.5em;
            padding-bottom: 0.5em;
            border-color: #3d5a80;
            background-color: #3d5a80;
            position: absolute;
            width: 100%;
            top: 0px;
            left: 0px;
        }

        #pageheader {
            z-index: 1;
            transition: 0.3s;
            background-color: transparent;
            padding: 15%;
        }

        .productinfo {
            font-size: 18px;
            font-weight: 400;
            transition: 0.3s;
            background-color: #f8e4a2;
            padding: 5em;
            display: flex;
            gap: 5vw;
        }

        .prodbenefits {
            font-size: 100%;
            font-weight: 400;
            transition: 0.3s;
            background-color: #f8e482;
            padding: 4em;
            display: flex;
            gap: 5vw;
        }

        footer {
            font-size: 16px;
            display: grid;
            width: 100%;
            grid-template-columns: auto auto auto;
            gap: 10%;
            background-color: #fac825;
        }

        /* index.html css */

        #homeimgs {transition: 0.5s;}
        #homeimgs:hover {transition: 0.5s; transform:scale(1.05);}

        #boxone, #boxtwo {
            transition: 1s;
            border: solid 10px;
            border-radius: 25px;
            border-color: #fab22c;
            background-color: #fab22c;
            width: 35%;
            text-align: justify;
            align-content: center;
            padding: 20px;
            box-shadow: -1px 3px 5px #ccc4c3;
        }

        #missiv {
            background-color: #f8e482;
            transition: 0.3s;
            text-align: center;
            padding: 2vw;
        }

        #missiv_content {
            display: grid;
            grid-template-columns: auto auto auto;
            gap: 2vw;
        }

        /* inner block */
        #missiv_ib {
            z-index: -1;
            border: 1px solid transparent;
            background-color: transparent;
            color: transparent;
            font-size: 20px;
            border-radius: 15px;
            border-width: 30%;
            padding: 0.5vw;
            height: auto;
            transition: 0.6s;
        }

        .missiv_content:hover {
            transition: 0.3s;
            z-index: 2;
            cursor: pointer;
        }

        .missiv_content:hover > #missiv_ib {
            border: 1px solid #dda948;
            background-color: #dda948;
            color: #fff;
            border-radius: 15px;
            border-width: 30%;
            height: auto;
            transition: 0.5s;
            transform: translateY(-2.4vw);
            height: 70%;
        }

        #missiv_v {
            border: solid 0.5px;
            border-radius: 15px;
            text-align: center;
            background-color: transparent;
            padding: 2vw;
        }

        .extras {
            transition: 0.3s;
            background-color: #fff;
            padding: 4em;
            display: flex;
            gap: 3vw;
            align-items: baseline;
        }

        #extraBox {
            transition: 0.3s;
            border: solid 10px;
            border-color: #98c1d9;
            background-color: #98c1d9;
            border-radius: 30px;
            width: 35em;
            text-indent: 10px;
        }

        #extraBox:hover {
            transition: 0.5s;
            transform: scale(1.05);
            cursor: pointer;
            background-color: #3d5a80;
            border-color: #3d5a80;
            color: #fab22c;
        }

        .extralinks {
            transition: 1s;
            text-decoration: none;
            padding: 1vw;
            color: #000;
            text-align: center;
            font-size: 32px;
        }