styles.css

/**Clear default styles**/
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}

body {
    color: #414141; /* Dark gray */
    background-color: #f2f3eb;    /* Light gray */
    font-size: 19px;
}


/**Headings**/
h1, h2, h3, h4, h5, h6 {
    font-family: "Helvetica", "Arial", sans-serif;
    font-weight: normal; /* font weight can be bold. font-style can be italics*/
    margin-top: 10px;
    margin: 20px 10px;
}

h1 {
    size: 2em;
    font-weight: bold;
    background-color: #e2d1d1b8;
    padding: 20px 30px; /*vertical horizontal */
    border: 2px solid  rgb(93, 95, 78); /* Width style (eg. dashed, solid) */
    text-align: center;
}

h2 {
    size: 1.5em;
}


ul, ol {
   
    padding-left: 40px; /*This is what brings the bullet points accross.*/
    margin: 18px 0;
}

ul {
    list-style-type: square;
}


/**Anchors**/
a {
    text-decoration: none; /*can be line-through*/
} 

a:link{
    color:#2939b3;
}

a:hover {
    cursor: pointer;
    text-decoration: underline;
    color: #8a91d5;
} 
/*visited, hover, active and link are possible pseudo classes. link just means unclicked link. Order matters: eg. hover and active
because if you are active and hovering, and hovering is the last declared rule, then the last rule applies, when you actually want it to be the active. */


a:active {
    color: rgb(187, 201, 217);
}

a:visited:hover {
        /*If you set this and also have an "active" pseudo class in use, then the 'active' stops working for
        visited links unless you add the visited:active, because a:visited:hover is more specific.*/
    color: orange;
}

a:visited:active {
    color: rgb(229, 183, 131);
}

/**pre-formatted**/
pre {
    border: 1px solid #ddd;
    max-width: fit-content;
    display: block;
    margin-left: 10px;
}

strong {
    display: inline; /*The default is inline, but if you change to block then it can influence layout. */
}

p {
    margin: 15px 0;
    padding-left: 10px;
    padding-right: 10px;
}

/* p:last-of-type {
    margin-bottom: 50px;
} */

.center-with-border {
    text-align: center;
    border-radius: 5px;
    border: 1px saddlebrown solid;
}



.button {
    border: 2px solid #5D6063;
    border-radius: 2px;
    background-color: #dc9f25a6;    
    font-weight: bold;
    padding: 20px;
    text-align: center;
    width: 200px;
    margin: 20px auto;
    box-sizing: border-box; /* This means that the border and padding are included in the width value. */
    display: block;

}

.default-border{
    border: 2px solid #5D6063;    /* Dark gray */
    border-radius: 2px;
}

.simple-fill {
    background-color: #cdcbc7a6;
    font-weight: bold;
    padding: 5px;
}

/* .anchor-button {
    display: block;
    
    background-color: #dc9f25a6;    
    font-weight: bold;
    padding: 20px;
    text-align: center;
    width: 200px;
    margin: 20px auto;
    box-sizing: border-box; 
} */


.fun-fact {
    font-style: italic;
    margin-left: 40px;
    border-left: #414141 solid 1px;
}

.fun-fact em {
    font-style: normal;
}

img {
    width: 30vw;
    display: inline-block;
    margin: 0 auto;
    padding-left: 10px ;
}


.img-panel {
    clear: both;
    display: table;
    width: fit-content;
    margin: auto;

}
.img-panel div {
    float: left;
    margin: 0 0 0 0;
}

.img-panel img {
    display: inline;
    margin: 0 0 0 0;
    width: auto;
    height: 40vh;
}

.img-panel p {
    font-size: small;
    margin: 0 0;
}

.float-container {
    overflow: hidden;
    /* margin: 0 auto; */
    
}

.float-container .float-left {
    width: auto;
    float: left;
    padding: 10px;
    height: 30vh;
}

.float-right {
    float: right;
    max-height: 40vh;
    width: auto;
}

.smaller-image {
    width: 10vw;
}

.medium-image {
    height: 25vw;
    width: auto;
}

.center {

        margin: 0 auto;
        width: 50vw ;   /* 100vw is the width of the screen */
        text-align: left;
        height: auto;
        display: block;
}

.title-with-caption {   /*Could've also used a div and then descendant or child combinators (see MDN)*/
    margin: 20px 10px 0px 10px ;
}

h3.title-with-caption  {
    margin: 0px 10px 20px 10px;
    font-size: medium;
    font-style: oblique;
}

figcaption {
    padding-left: 10px;
    padding-right: 10px;
    font-size: small;
}