@import url('https://fonts.googleapis.com/css2?family=Roboto:ital,wght@0,100..900;1,100..900&display=swap');

body,html {
  margin:0;
  padding:0;
}

body{
    background-image: url("end full.png");
    background-repeat: no-repeat;
    background-position: top;
    background-attachment: fixed;
}

#side-bar{
  position: fixed;
  /*right:1.5%;*/
  left:91.5%;
  top:2.5%;
}

#side-bar p{
  background-color: rgba(55,62,65,0.8);
  border-color: white;
  border-radius: 5px;
  border-style: solid;
  border-width: 1px;
  padding:5px;
  text-align: center;

  color:aliceblue;
}

#side-bar a{
  text-decoration: none;
}

#side-bar a:visited, a:link{
  color:aliceblue;
}

#side-bar a:hover{
  color: #F7B320;
}

@media screen and (max-width: 1020px) {
  #side-bar {
    position: relative;
    width:fit-content;
    left: calc(50% - 35px);
  }
}

/* #373e41 background color for the blog blocks*/
#header, #description, #footer,.post{
    margin: 2% 10% 0 10%;

    background-color: rgba(55,62,65,0.8);
    border-color: white;
    border-radius: 5px;
    border-style: solid;
    border-width: 1px;

    color:aliceblue;
}

#header{
  padding-left: 5%;
  padding-right: 5%
}

#footer,.post{
  padding-left: 1.5%;
  padding-right: 1.5%;
}
#description p{
  margin-left: 1.8%;
  margin-right: 1.8%;
}

#header h1{
  text-align: center;
  font-size: 50px;
}

/*collapsable elements*/
/*https://www.w3schools.com/howto/howto_js_collapsible.asp*/

.collapsable-button{
  text-align: center;
  display:block;
  margin: 0 auto;
  width: 100%;
  padding: 10px 0 10px 0;

  background-color: transparent;
  background-repeat: no-repeat;
  border: none;
  cursor: pointer;
  overflow: hidden;
  outline: none;

  color: aliceblue;
}

.active, .collapsable-button:hover{
  background-color: rgba(55, 62, 65, 0.8);
  color:#F7B320;
}

.collapsable{
  display: none;
  overflow: hidden;
}

/*partially from https://alvarotrigo.com/blog/css-text-animations/ augh*/

#description span:not(.gold-block){
    color: #F7B320;
    display: inline-block;
    animation: wavey 3s infinite;
    animation-delay: calc(.1s * var(--i));
}
@keyframes wavey {
  0%,40%,100% {
    transform: translateY(0)
  }
  20% {
    transform: translateY(-10px)
  }
}

/*end of animations*/

.gold-block,.red-block{
  border-radius: 3px;
  font-weight: bold;
  /*font-family: "Roboto", sans-serif;*/
  padding: 2px;
  display: inline-block; /*allows us to apply transform effects*/
  transition: transform ease 500ms;
}

.gold-block:hover,.red-block:hover{
  transform: translateY(-5px);
}

.gold-block{
  background-color: #F7B320;
  color: black;
}

.red-block{
  background-color: #E84115;
  color: aliceblue;
}