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

header {
    display: block;
    color: #777;
    text-transform: lowercase;
    font-size: 20px;
    line-height: 30px;
}

body {

    text-rendering: optimizeLegibility;
    margin: 10px auto 200px;
    width: 700px;
    font-family: serif;
    font-size: 18px;
    line-height: 24px;
    background: #fcfcfc;
    color: black;

}


header > nav { 
    
    display: block;
    float: right;
    font-size: 18px;
    line-height: 30px;

}

nav a { 

    color: #d10505;

}

nav a:hover { 
    
    color: rgb(6, 20, 155);
    
}

main { 

    text-rendering: optimizeLegibility;
    margin: 40px auto 200px;
    width: 700px;
    font-family: serif;
    font-size: 18px;
    line-height: 24px;
    background: #fcfcfc;
    color: black;

}
 main img { 

    float: right;
    vertical-align: middle;
    margin-left : 20px;
    height: 23%; 
    width: 23%;

} 

main p.about { 
    font-family: "Times New Roman", Times, serif;
    font: "";
    position: relative; 
    top : 30px;
    width: 800px;
    font-size: 18px;
    line-height: 1.5em;

}

.logo { 
    cursor: pointer
}

ul.media_links::before { 
    content : 'before';
}

.media_links > li::after { 
    content : "after";
    position: absolute;
}

button  { 
    margin: 1rem;
}

.btn { 
    background-color: var(--backgrund_color);
    color: #222;
    padding: .5em 1em;
    border: none;
    outline: none;
    position: relative;
    cursor : pointer;

    --backgrund-color:  #e3e3e3;
    --border-size: 2px;
    --accent-color: rgb(255, 17, 0);

}

.btn.media_link_button::before{
content : "";
position: absolute;
top:0;
bottom:0;
left:0;
right: 0;
z-index:  -1;
background-color: var(--accent-color);

transition: transform 300ms ease-in-out;
transform: scaleX(0);
transform-origin: left;
}

.btn.media_link_button:hover::before, 
.btn.media_link_button:focus:before{
transform: scaleX(1);

}
.btn.media_link_button{
transition: transform 300ms ease-in-out;
z-index: 1;
}

.btn.media_link_button:hover,
.btn.media_link_button:focus{
color: white;

}


ol.index {
    list-style-type: none;
    padding: 0px;
    padding-top: 40px;
    padding-right: 0px;
    padding-bottom: 0px;
    padding-left: 0px;
}

li {
    display: list-item;
    text-align: -webkit-match-parent;
}

ol.index li.item {
    margin-bottom: 24px;
}

p, ul, ol {
    margin: 0px 0px 24px;
}

ol.index p.date {
    display: block;
    margin-block-start: 1em;
    margin-block-end: 1em;
    margin-inline-start: 0px;
    margin-inline-end: 0px;
    margin: 0px;
    color: #666;
    float: right;
}

ol.index p.snippet {
    display: block;
    margin-block-start: 1em;
    margin-block-end: 1em;
    margin-inline-start: 0px;
    margin-inline-end: 0px;
    margin-top: 2px;
    font-style: italic;
}

a {
    color: #e50053;
    text-decoration: none;
}


footer{

text-align: center;

}