.roboto-font {
  font-family: "Roboto", sans-serif;
  font-optical-sizing: auto;
  font-style: normal;
  font-variation-settings:
    "wdth" 100;
}

body            {background-image: url(images/bg.png);}
p               {color: var(--lightcolor);font-family: 'Roboto';font-size: larger;}
.footer p       {padding-right: 15px; padding-top: 50px;z-index:100;position:relative;text-shadow:  3px 3px 3px var(--darkcolor);}
br              {user-select: none;}
hr {border: none; border-top: 3px dotted var(--lightcolor); width: 80%;}

:root           {--maincolor: #FF187D;--darkcolor: #00093B;--lightcolor: #FFFDE4}

.logo           {
                display:block;
                margin:auto;
                width: 90%;
                max-width: 750px;
                user-select: none;
                }

.footer         {
                position: fixed;
                left: 0;
                bottom: 0;
                width: 100%;
                height: 100px;
                color: var(--lightcolor);
                text-align: right;
                user-select: none;
                background-image: url(images/footer.png);
                background-position:bottom;
                }
        
.blog           {
                color:var(--lightcolor);
                font-family: 'Roboto';
                padding-left: 50px;
                max-width: 750px;
                }

.bheader        { 
                font-size: 28pt;
                font-weight: 900;
                margin-bottom: -0.4em;
                margin-left: -0.5em;
                color: var(--maincolor);
                text-decoration: underline;
                text-decoration-color: var(--maincolor);
                }

.bsub           {
                font-size: 11pt;
                font-weight: 300;
                padding-left: 1em;
                color: rgb(193, 193, 193);
                }

.bdiv           {
                padding-left: 0.5em;
                font-size: 12pt;
                }

details summary {
                color:var(--lightcolor);
                font-family: 'Roboto';
                padding: 1em;
                font-size: larger;
                font-weight: 900;
                }

a               {
                color: var(--maincolor);
                font-family: 'Roboto';
                font-size: 32pt;
                font-weight: 700;
                text-decoration: none;
                width: auto;
                display: flex;
                align-content: center;
                }
                
.button         {
                background-color: var(--darkcolor);
                outline: 3px solid var(--lightcolor);
                max-width: fit-content;
                padding: 10px;
                margin-left: auto;
                margin-right: auto;
                border-radius: 10px;
                }

.bimg           {
                width: 50px;
                height: 50px;
                padding-right: 15px;
                }

.blogdetails    {
                text-indent: 1em;
                border-left: 1px solid var(--maincolor);
                }