/* CSS Document */
@import url('https://fonts.googleapis.com/css?family=Sorts+Mill+Goudy&display=swap');
:root {
   --spot-colour-1: #956728;
   --spot-colour-2: #eee;
   --link-colour: #eee;
   --text-colour-1: #000;
   --text-colour-light: #fff;
   --serif-fonts: "Sorts Mill Goudy", "Times New Roman", sans-serif;
   --sans-fonts: calibri, sans-serif;
   --dark-overlay: hsla(35,58%,37%,0.7);
   --dark-background: #555;
   --dark-shadow: rgba(0,0,0,1);
}
.twitter-feed, .twitter-feed * {
}
.twitter-feed {
   max-width: 1335px;
   margin: 0 auto;
   
}
.tweets {
   display: flex;
   flex-flow: row wrap;
   justify-content: flex-start;
}
.tweet {
   height: 550px;
   flex-basis: 20%;
   -ms-flex: auto;
   width: 259px;
   position: relative;
   padding: 0.5em;
   box-sizing: border-box;
   transition: all 0.5s;
}
.tweet-card {
   height: 100%;
   border: thin solid var(--spot-colour-1);
   border-radius: 0.3em;
   box-shadow: 0.1em 0.1em 0.2em rgba(0,0,0,0.5);
   background-color: var(--dark-background);
   background-repeat: no-repeat;
   background-size: cover;
   background-position: center center;
   position: relative;
}
.tweet p {
   padding: 0.5em;
   margin:0;
   font-family: var(--sans-fonts);
   background-color: var(--dark-overlay);
   color: var(--text-colour-light);
   text-shadow: 0.1em 0.1em 0.2em var(--dark-shadow);
   position: absolute;
   bottom: 3em;
}
.tweet p.time {
   font-size: 0.8em;
   text-align: right;
   bottom: auto;
   top: 1em;
   
}
.tweet a {
    text-decoration: none;
    color: var(--link-colour);
}
.tweet a:hover,
.tweet a:active,
.tweet a:visited {
    text-decoration: underline;
    color: var(--link-colour);
}

@media(max-width: 1333px) {
   .tweet {
      flex-basis: 33.33%;
   }
}
@media(max-width: 1073px) {
   .tweet {
      flex-basis: 33.33%;
   }
}
@media(max-width: 815px) {
   .grid-item {
      flex-basis: 50%;
   }
}
@media(max-width: 555px) {
   .grid-item {
      flex-basis: 100%;
   }
}