/* CSS is how you can add style to your website, such as colors, fonts, and positioning of your
   HTML content. To learn how to do something, just try searching Google for questions like
   "how to change link color." */

@import url('https://fonts.googleapis.com/css2?family=Rubik:ital,wght@0,300;0,400;0,500;0,600;0,700;0,800;0,900;1,300;1,400;1,500;1,600;1,700;1,800;1,900&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Josefin+Sans:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;1,100;1,200;1,300;1,400;1,500;1,600;1,700&display=swap');
  
:root {
  --bodyFont: 'Rubik', sans-serif;
  --titleFont: 'Josefin Sans', serif;
  --color-bright: #fae965;
  --color-medium: #ff4444;
  --color-dark: #5a081c;
}
 
/* link animation */   
@keyframes linkhover {
  from {
    color: var(--color-dark);
    }
  to {
    color: var(--color-medium);
    }
}

.base {
  width: 800px;
  padding: 30px;
  box-sizing: border-box;
  font-size: 16px; 
  font-family: 'Rubik'; 
  margin-left: auto;
  margin-right: auto; 
  border: 1px solid var(--color-medium);
}

.top {
  clear: both; 
  display: inline-flex;
}

a.logo-side-text {
  background-color: var(--color-dark) !important;
  color: var(--color-medium) !important;
  border: 2px solid var(--color-medium);
  box-sizing: border-box;
  position: relative;
  transform: translateY(2px);
}

a.logo-side-text:hover {
  background: var(--color-bright) !important; 
  color: var(--color-dark) !important; 
  text-decoration: none;
}

.logo-side-text {
  background: var(--color-medium) !important; 
  color: var(--color-dark) !important; 
  text-decoration: none;
  font-family: 'Josefin Sans'; 
  height: 33.3333px; 
  float: left; 
  font-size: 20px; 
  font-weight: bold; 
  display: table-cell; vertical-align: middle; line-height: 38.3333px; /* alignment */ 
  padding-left: 5px; padding-right: 5px; 
  letter-spacing: -1px;
  box-sizing: border-box;
}


body {
  background-color: var(--color-dark);
  color: var(--color-medium);
  padding: 25px;
}
      
hr {
  border: 1px solid var(--color-bright);
}
      
p, h2, h3, h4, h5 {
  font-family: var(--bodyFont);
}

h1 {
  font-family: var(--bodyFont);
  font-weight: 900;
  text-transform: uppercase;
}

img {
  max-width: 100%; /* resizes automatically to the viewport */
}
      
/* Extra small devices (phones, 627px and down) */
@media only screen and (max-width: 850px) {
  .titlewide {background: rgba(250, 233, 101, 1); } 
  .base {width: 100%; }
  ul.blogs > li > .date { display: flex; width: 100%; border-radius: 5px 5px 0 0 !important; }
  ul.blogs > li > a.title { display: flex; width: 100%; border-radius: 0 0 5px 5px !important; padding: 0 5px 0 5px !important; }
}
    
/* Medium devices (landscape tablets, 627px and up) */
@media only screen and (min-width: 850px) {
  .titlewide {background: rgba(250, 233, 101, 0);}
  ul.blogs > li > a.title { padding: 0 5px 0 5px !important; }
}   

a:hover, a:active {
  color: var(--color-bright);
}

body {
  background-color: var(--color-dark);
  color: var(--color-bright);
  font-family: Rubik;
  padding: 15px;
}

h1 {
  font-family: "Josefin Sans";
  color: var(--color-bright);
  font-size: 2em;
  font-weight: 800;
  text-transform: uppercase;
}

h2 {
  font-family: "Josefin Sans";
  color: var(--color-bright);
  font-size: 1.5em;
  font-weight: 600;
  font-style: italic;
  text-transform: uppercase;
}

h3 {
  font-family: "Rubik";
  color: var(--color-medium);
  font-weight: 800;
  font-size: 1.25em;
  text-transform: uppercase;
  letter-spacing: 2px;
}

p {
  font-family: "Rubik";
  color: var(--color-bright);
  font-size: 1em;
  font-weight: 400;
}

a:not(a#buttonText, .top) {
  color: var(--color-bright);
  text-decoration-color: var(--color-medium);
  text-decoration-style: dotted;
  text-decoration-thickness: 2px;
}


a:hover {
  animation-name: linkhover;
  animation-duration: 0.5s;
  animation-fill-mode: both;
  color: var(--color-bright);
}


hr {
  background: linear-gradient(to right, var(--color-medium), var(--color-bright));
  height: 4px;
  border-style: none;
}  

/* courtesy of https://stackoverflow.com/a/40162380 */

ul.hlist { display:inline-block; padding:0; }
ul.hlist li { display:inline }
ul.hlist li:after { content:" \00b7"; letter-spacing:.02em; }
ul.hlist li a { white-space:nowrap }
ul.hlist li a:not(:hover) { text-decoration:none }


.blinkies img {
  image-rendering: pixelated;
}

/* ANIMATION: LINK CHANGES COLOR ON HOVER */ 
button:hover, button:active{
	color: var(--color-bright) !important;
	background-color: var(--color-medium);
	transition: all 0.3s ease;
  animation-name: linkhover;
  animation-duration: 0.5s;
  animation-fill-mode: both;
}

button {
  background-color: var(--color-bright);
  color: var(--color-medium);
  border: none;
  padding: 5px;
  font-family: inherit;
  transition: all 0.3s ease;
  cursor: pointer;
  display: inline-block;
}

/* INPUT: THE BOX WHERE YOU COPY THE EMBED FOR MY ICON */
input {
	font-family: inherit;
  color: inherit;
  background-color: var(--color-dark);
  padding: 5px;
  box-sizing: border-box;
  border: 1px var(--color-medium) solid;
}

.hidden {
  overflow: hidden;
  clip: rect (1px, 1px, 1px, 1px);
  clip-path: inset (50%);
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  border: 0;
  word-wrap: normal;
}

.menu-bar {
  display: table;
  justify-content: flex-start;
  box-sizing: border-box;
}

a.item {
  padding: 5px;
  text-decoration: none;
  background-color: var(--color-medium);
  color: var(--color-bright);

  display: inline-block;
}

.item {
  font-size: 18px;
  box-sizing: border-box;
  border: 1px dashed var(--color-bright);
  margin-bottom: 5px;
}

.item.title {
  font-weight: 900;
}

.item:hover {
  background-color: rgba(0, 0, 0, 0.1) !important;
  border: 1px dashed var(--color-bright);
  box-sizing: border-box;
  outline-offset: -0.5rem;
  animation-name: linkhover;
  animation-duration: 0.5s;
  animation-fill-mode: both;
  
}

ul.blogs > li > .date {
  color: var(--color-dark) !important;
  background-color: var(--color-bright) !important;
  padding-left: 5px;
  padding-right: 5px;
  border-radius: 5px;
  font-style: italic;
  font-size: 12px;
  width: auto;
}

ul.blogs > li {
  list-style-type: none;
  margin-bottom: 5px;
}

ul.blogs > li > a.title {
  font-size: 24px;
  font-weight: bold;
  background-color: var(--color-medium) !important;
  color: var(--color-bright) !important;
  border-radius: 5px;
  width: auto;
}

ul.blogs {
  display: contents;
}

ul.collist {
  column-count: 2;
  column-width: 9em;
}