* {
    box-sizing: border-box;
}

body{
   font-family: 'Radio Canada';
   background: #313967
} 

set body { margin: 0 }

.header {
    background: #313967;
    color: #F9E1A8;
    font-family: 'Radio Canada';
    padding: 1% 5%;
    line-height: 125%;
}

.footer {
    background: #313967;
    color: #F9E1A8;
    font-family: 'Radio Canada';
    padding: 1% 10%;
    line-height: 125%;
    text-align: center;
}

.index{
    background: #212121;
    color: #F9E1A8;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-direction: column;
}

.index-links{
    font-size: 2.75em;
    text-align: center;
}
.index-image-container{
    background: #212121;
    padding: 4% 10%;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-direction: row;
}

.index-image{
    object-fit: contain;
    max-height: 400px;
    max-width: 60%;
    padding: 0% 2%;
}

.index-hr{
  border-top: 1px solid #F9E1A8;
  width: 30%;
}


.personal-longform {
    background: #212121;
    color: #F9E1A8;
    padding: 2% 10%;
    line-height: 166%;
}

.personal-h1{
    line-height: 100%;
}

.personal-header-image {
    object-fit: contain;
    max-height: 400px;
    max-width: 80%;
}

.personal-subhead {
    font-size: 130%;
    line-height: 150%;
}

.personal-quote {margin-left: 3em;}

.personal-pullquote {
    inline-size: 80%;
    font-size: 180%;
    line-height: 110%;
    padding: 0% 2%;
    text-align: left;
    border-inline-start: 5px solid #FFCBE1;
    margin-left: -5%;
}

.h2-nav {
    font-size: 125%;
    margin-top: 24px;
}

.quote-div{
 width:100%;
 border-radius: 0%;
    color: #eeeeee;
    background-color: #4D1D46;
    padding: 3%;
    font-family:'Neuton';
    font-weight: 200;
    font-size: 150%;
    line-height: 125%;
    justify-content: space-between;
}

.quote-subdiv{
    border-top: solid;
    border-bottom: solid;
    border-width: .025em;
    margin-top: .5em;
    margin-bottom: .5em;
}

.quote-p{
    display:flex;
    width:95%;
    flex-direction: column;
    justify-self: center;
}

.quote-attribution{
    font-size: 1em;
    line-height: 1.25em;
    justify-self: center;
    width:95%;
}


.dear-sports-fan{

    background: #75d8db;
    font-family: Raleway;
    color: #000000;
    columns: 1;
    column-gap: 32px;
    padding: 2% 5%;
    line-height: 166%;   
}

.dear-sports-fan-hr{
  border: none;
  border-top: 3px solid #000000;
  color: #000000;
  overflow: visible;
  text-align: center;
  height: 5px;
}

.salesforce{
    background: #ffffff;
    font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
    color: #313967;
    padding: 2% 15%;
    line-height: 150%;
}

.salesforce-h1{
    text-align: center;
    font-size: 3em;
line-height: 125%;
}


.link-up-one {
    color: #FFCBE1;
    font-size: 125%;
    font-weight: 500;
    text-decoration: none;
}

.link-up-one:visited {
    color: #FFCBE1;
    font-weight: 500;
    text-decoration: none;
}

.link-up-one:hover {
    color: #ffffff;
    font-weight: 500;
    text-decoration: none;
}

.link-up-two {
    color: #D6E5BD;
    font-size: 125%;
    font-weight: 500;
    text-decoration: none;
}

.link-up-two:visited {
    color: #D6E5BD;
    font-weight: 500;
    text-decoration: none;
}

.link-up-two:hover {
    color: #ffffff;
    font-weight: 500;
    text-decoration: none;
}

.link-external {
    color: #BCD8EC;
    font-weight: 500;
    text-decoration: none;
}

.link-external:visited {
    color: #BCD8EC;
    font-weight: 500;
    text-decoration: none;
}

.link-external:hover {
    color: #ffffff;
    font-weight: 500;
    text-decoration: none;
}

.link-nav {
    color: #dccecd;
    font-size: 100%;
    text-decoration: none;
}

.link-nav:visited {
    color: #dccecd;
    text-decoration: none;
}

.link-nav:hover {
    color: #ffffff;
    text-decoration: none;
}