/* make article cards look nice by altering margins */
.mdc-card {
    margin: 2px 2px 10px 2px;
}

.mdc-card-content {
    margin: 5px 15px 5px 15px;
}

.mdc-card .mdc-typography--headline6, .mdc-card .mdc-typography--subtitle2 {
    margin: 0;
}


/* automatically display articles on either side of the page, alternating */
.main-content .mdc-card {
	float: left;
	clear: left;
	width: 49%;
}

.main-content .mdc-card:nth-of-type(even) {
	float: right;
	clear: right;
}


/* make first article full-width */
.main-content .mdc-card:first-of-type {
	float: none;
	clear: both;
  width: auto;
}


/* makes last article full-width if it is on its own in a row - i.e. if there is an even number of articles in total */
.main-content .mdc-card:nth-of-type(odd):nth-last-of-type(2) ~ .mdc-card:last-of-type {
    float: none;
    clear: both;
    width: auto;
}


/* styling for when 1 article present */
.main-content .mdc-card:first-of-type:last-of-type {
  float: none;
  clear: both;
  width: auto;
}


/* styling for when 2 articles present & small screen is detected */
@media screen and (max-width: 1000px) {
  .main-content .mdc-card:nth-child(1):nth-last-of-type(2), .main-content .mdc-card:nth-of-type(2):last-of-type {
    float: none;
    clear: both;
    width: auto;
  }
}


/* styling for when 3 articles present */
.main-content .mdc-card:first-of-type:nth-last-of-type(3) {
  float: none;
  clear: both;
  width: auto;
}

.main-content .mdc-card:nth-of-type(3):last-of-type {
  float: right;
  clear: right;
}

.main-content .mdc-card:nth-of-type(2):nth-last-of-type(2) {
  float: left;
  clear: left;
}

/* for scroll-to-top button */
.top-scroll-button {
    width: 50px;
    height: 50px;
    text-align: center;
    font-size: 25px;
    -webkit-border-radius: 50%;
    -moz-border-radius: 50%;
    border-radius: 50%;
    position: fixed;
    right: 20px;
    bottom: 20px;
    background-color: #273967;
    display: none;
    -webkit-transition-duration: 0.25s;
    -moz-transition-duration: 0.25s;
    -o-transition-duration: 0.25s;
    transition-duration: 0.25s;
}

.top-scroll-button img {
    position: relative;
    top: 7px;
    width: 35px;
    height: auto;
    -webkit-transition-duration: 0.25s;
    -moz-transition-duration: 0.25s;
    -o-transition-duration: 0.25s;
    transition-duration: 0.25s;
}

.top-scroll-button:hover, .top-scroll-button:focus {
    background-color: #1C2E56;
}

.top-scroll-button:hover img {
    top: 3px;
}