*{
    margin: 0;
    padding: 0;
    box-sizing: border-box;    
    
    /* border: 1px solid blue; */
}
:root{
    --max-width: 1300px;
    --bg-color: #f1f5f7;
    --color: #233742; 
    /* --second-color:#d52728; */
    --second-color: #d80b77;
    --curved-bg-color: #fcec3c;
}
body{    
    font: 1.25rem/1 "Open Sans",sans-serif;
    letter-spacing: normal;
    color: var(--color); 
    -webkit-font-smoothing: subpixel-antialiased;
}
.curved-background{     
    height: 100px;
    position: fixed;
} 
.header{
    background: url(images/header.svg);
    top: 0;
    padding-top: 2px;
    width: 100%;
    height: 100px;
    position: fixed;    
    z-index: 100;
}
.navbar{
    display: flex;
    max-width: var(--max-width);
    margin: auto;
    padding: 0 20px;    
}
.logo {
    border: 5px solid var(--bg-color);
    text-shadow: -2px 2px 0 rgba(0,0,0, 0.2);
    font-weight: 700;
    font-size: 30px;
    color: var(--second-color);
    height: 85px;
    width: 108px;
    border: 4px solid white;
    border-radius: 10px;

}
.logo p{
    margin: 0;
    padding: 0;
    text-align: center;
}
.logo p.logo-small-text{
    text-align: right;
    color: green;
    font-size: 11px;
    font-style: italic;    
    text-shadow: -2px 2px 0 rgba(0,0,0, 0.2);
}
nav{
    flex: 1;
    text-align: right;    
    position: relative;
}
nav ul{
    display: inline-block;
    list-style-type: none;
    padding-top: 15px;
}
nav ul li{
    display: inline-block;
    margin-right: 20px;
    margin-bottom: 15px;
}
nav ul li:last-child{
    margin-right: 0;
}
nav ul li a{
    text-decoration: none;
    font-size: 21px;
    font-weight: 700;
    letter-spacing: normal;
    color: var(--second-color);    
    position: relative;
} 
nav ul li a:hover::before, nav ul li a.active-nav::before {
    content: '';
    display: block;
    position: absolute;
    top: -10px;
    left: calc(50% - 5px);
    width: 10px;
    height: 10px;
    border-radius: 50%;
    background-color: var(--second-color);;
    pointer-events: none;
}
nav ul li a::befor:not(.active-nav){
    content: '';
    display: block;
    position: absolute;
    top: -10px;
    left: calc(50% - 5px);
    width: 10px;
    height: 10px;
    border-radius: 50%;
    background-color: var(--second-color);;
    pointer-events: none;
}
.container{
    top: 170px;
    width: 100%;
    position: absolute;
    padding: 0 1%;    
}
.row{
    max-width: var(--max-width);
    margin: auto;
    background: transparent;
}
.caption{
    font-size: 80px;
    font-weight: 700;
    padding: 0 0 50px 0;
    width:100%;
    display: flex;
    justify-content: center;
    flex-wrap: wrap;
}
/********** Main Content ***************/
.main-content{
    display: flex;
    margin-top: 50px;
    justify-content: space-between;
}
.left-side-bar{
    flex-basis: 20%;    
    margin-bottom: 30px;
    position: sticky;   
    top: 100px;
    height: 100%;
}
.content-bar{
    flex-basis: 60%;
    margin-bottom: 30px;
}
.content-bar p{
    font-size: 20px;
    line-height: 1.5;
    margin-bottom: 40px;
    vertical-align: middle;
}
.right-side-bar{
    flex-basis: 15%;
    margin-bottom: 30px; 
    
}
h4{
    margin: 0 5px 30px 0;
    font-size: 20px;
    font-weight: 600;
    line-height: 26px;
}
.left-side-bar p .tagbk{
    background: green;;       
}
.left-side-bar .tag{
    background: var(--color);
    padding: 8px 15px;    
    border-radius: 25px;
    color: #fff;
    font-size: 16px;
    text-decoration: none;    
}
.left-side-bar .tag::before {
    content: "# ";
    color: #b4cddd;
    transition: color .1s ease-out;
}
.left-side-bar .tag:hover::before {
    color:var(--second-color);
    transition: color .1s ease-out;
}
.left-side-bar p{
    margin: 0 5px 18px 0;
}
.left-side-bar p:last-child{
    margin-bottom: 35px;
}
h3{
    margin: 45px 5px 20px 0;
    font-size: 36px;
    font-weight: 700;
    line-height: 20px;
}
h3:first-child, h3.dotted-bottom:first-child{
    padding-top: 0;
}
h3.dotted-bottom{
    padding-top: 35px;
    padding-bottom: 15px;
    border-bottom: 4px dotted var(--color);
    line-height: 36px;
}
.tag-row p{
    text-align: left;
    display: flex;    
    margin: 12px 0px;
}
.tag-row p:first-child{
    text-align: left;
    display: flex;    
    padding-top: 5px;
}
.tag-row p:last-child{
    text-align: left;
    display: flex;    
    padding-bottom: 40px;
}
.tag-row p svg{
    fill: var(--color);
    margin-right: 5px;
}
.tag-row p a{
    color: var(--second-color);;
    font-size: 20px;
    font-weight: 700;
    position: relative;
    text-decoration: none;
    align-items: center;
    line-height: 20px;
}
.tag-row p a::after{
    content: '';
    background: var(--second-color);;
    width: 100%;
    height: 2px;
    position: absolute;
    left: 0;
    bottom: -2px;
    display: none;
    transition: display .1s ease-out;
}
.tag-row p a:hover::after{
   display: block;
}
/* .shrink{
    transform:scaleY(0.5);
    } */
.open-close-block{
    margin-bottom: 20px;
    /* border: 1px solid red;     */
}
.open-close-block svg{
    fill: var(--second-color);;
}
.open-close-div {
    display: none;
    background: var(--bg-color);
    margin-left: 28px;
    margin-top: -5px;
    margin-bottom: 30px;
    padding: 10px 1px;
    font-size: 18px;
    /* border: 1px solid var(--color); */

}
.open-close-div:hover{
    display: block;
}
.open-close-div img{
    margin-top: 13px;
    display: block;
}
a.open-close-a{
    font-size: 23px;
    font-weight: bold;
    /* line-height: 20px; */
    /* background: var(--bg-color); */
    margin-bottom: 15px;    
    
}    
a.open-close-a:hover + div {
    display: block;
}
span.commands{
    font-size: 16px;
    font-weight: bold;
    color: var(--second-color);;
}
div.commands{
    background: var(--bg-color);
}
/****************Footer************************************/
.footer{
    /* background: #d80b77; */
    background: url(images/footer.svg);
    /* (C1) FIXED AT BOTTOM */
    position: fixed;
    bottom: 0; left: 0; z-index: 9;

    /* (C2) DIMENSIONS */
    width: 100%; height: 40px;

    /* (C3) CENTER TEXT */
    display: flex;
    align-items: center;
    justify-content: center;
}

.footer p{
    color: var(--second-color);
    font-size: 14px;
    margin-top: 22px;
}
.copyright{
    text-align: center;
}
/*************** Media queries ****************************/
 @media (max-width: 1035px) {
    .header{
        top: -20px;
    }
    .navbar{
        padding: 20px 20px 0 20px; 
    }
    .logo {
        font-size: 21px;
        height: 65px;
        width: 81px;
        top: 20px;
    }
    .container{
        top: 120px;
    }
    .main-content{
        flex-wrap: wrap;
        margin-top: 0px;
    }
    .left-side-bar{
        flex-basis: 100%;
        width: 100%;        
        margin: 0;
        padding: 0;
        top: 47px;
        z-index: 9;
    }
    .left-side-bar p{
        margin: 0 0px 5px 0;
        display: inline-block;
    }
    .left-side-bar p .tag{
        padding: 2px 5px;        
    }
    .content-bar{
        width: 100%;
        flex-basis: 100%;
    }
    .right-side-bar{
        display: none;
    }
    .caption{
        font-size: 56px;
    }
    h4{
        margin-bottom: 6px;   
    }
 }