:root {
    --color-bg-blue: #6c7ae0;
    --color-bg-yellow: #FFFF99;
    --color-bg-white: #ffffff;
    --color-bg-white2: #ffffff;
    --color-bg-blue2: #f3f6ff;
    --color-white: rgba(255,255,255,1);
    --color-blue: #007bff;/*#4272d7;*/
    --color-grey: #808080; 
    --color-black: black;
    --color-blue-right: #6c7ae0;

    --border1: 1px solid var(--color-grey);
    --margin-top2: 2rem;     
    --margin-left-section: 2.5rem;

    --fs-body: 1.1rem;
    --fs-header: 1.2rem;
    --fs-box-header: 1.2rem;
    --fs-box: 0.9rem;
    --fs-box-pre: 90%;
    --fs-footer: 0.7rem; 
    --fs-h5: 1.25rem;

    --footer-before-transform: 5vw;
}

* {
    box-sizing:border-box;
    margin:0;            
}
html, body {
    font-family: sans-serif;
    line-height:1.4;
    font-size: var(-fs-body);
}

.mt2 {
    margin-top: var(--margin-top2);
}

.w90 {
    width:90% !important;
}

a, .link-color {
    color: var(--color-blue);
    text-decoration: none;
    background-color: transparent;
    -webkit-transition: all 0.4s;
}

a:hover {
    color: var(--color-blue-right);  
}

h5,h6{
    font-size: var(--fs-h5);
    font-family: inherit;
    font-weight: 500;
    line-height: 1.1;    
    margin-top:0.5rem;
    margin-bottom:0.2rem;
    margin-left:2rem;
}

h6 {
    font-size: calc(var(--fs-h5)*0.8);
}
.container{
    width:60%;
    margin: 0 auto;
}

.container-col{
    display:flex;
    gap: 1rem;
    justify-content: center;
    /*background:red;*/
    flex-wrap: wrap;
}

.box {            
    background-color: var(--color-bg-yellow);
    color: --var(color-black);
    border-radius: 20px;
    padding: 1rem;
    margin-top: 1rem;
    max-width:36rem;
}


@media (max-width: 55rem) {
    .container{
      width:95%;
    }

    /*
    html,css {
        background: violet;
        
    }
    */

    .box {
        max-width:100%;
        width: 100%;
    }      

    footer p{
        text-align:center;
        margin-bottom:1rem;                
    }

    :root {
    --fs-body: 1.1rem;
    --fs-header: 1.2rem;
    --fs-box-header: 1.2rem;
    --fs-box: 3.7vw;
    --fs-box-pre: 58%;
    --fs-footer: 0.7rem; 
    --fs-h5: 1rem;
    --footer-before-transform: 6.5vw;
    }

    section > img {
        width: 60%;    
    }
    
}

main {
    width: 100%;
    border-radius: 0.8rem;
    box-shadow: 0 0px 40px 0px rgba(0, 0, 0, 0.25);            
    margin-top: var(--margin-top2);
    margin-bottom: 1rem;

}

header {
    width:100%;
    height:3.5rem;
    background-color: var(--color-bg-blue);
    color: var(--color-white);
    border-top-left-radius: inherit;
    border-top-right-radius: inherit;
    display: flex;
    align-items:center;
    padding-left:1rem;
}

header h1 {
    all: unset;
    font-size: var(--fs-header);
}

.headingRight {
    float:right;
    font-weight: 700;
    color: var(--color-bg-blue);
    padding-right:0.5rem;
}


section { 
    background-color: var(--color-bg-white2);
    padding:1rem 0 1rem 0;
    border-bottom: var(--border1);
    color: var(--color-grey);
    background-color: var(--color-bg-white2);

}

section > * {
    margin-left: var(--margin-left-section);
    margin-right: var(--margin-left-section);
}


section:nth-last-child(1) {
    border-bottom: none;
}

section:nth-child(3),
section:nth-child(5),
section:nth-child(7) {
    background-color: var(--color-bg-blue2);
}


section li {
    list-style-type: none;
}

section li a, .link-color {
    font-size: var(--fs-h5);
}



.back {
    margin-left: var(--margin-left-section);
    line-height: var(--margin-left-section);
}


.box h3 {
    font-size: var(--fs-box-h3);
    font-weight: 500;
    padding-bottom: 1rem;
}

.box {
    font-size: var(--fs-box);
    color: red;
}

.box pre {
    font-size: var(--fs-box-pre);
    color: #212529;
}

footer::before {
    display: inline-block;
    width: 80%;
    transform: translateX(var(--footer-before-transform));
    content: "";
    border-top: 1px solid var(--color-black);
}


footer {
    all:unset;
    font-size: var(--fs-footer);
    margin-left:0.8rem;
    margin-top:var(--margin-top2);
    margin-bottom: 1rem;
}

footer p {
    text-align: center;
}