body{
  overflow-x: hidden;
  width: 100vw;
  font-family: Georgia, 'Times New Roman', Times, serif;
}
html {
  height: 100%;
  width: 100%;
}
.spacer {
  height: 100px;
}
#configure{
  cursor: pointer;
  position: absolute;
  display: flex;
  top: 0px;
  font-size: 0.8rem;
}
#close{
  cursor: pointer;
  position: absolute;
  right: 0;
  top: 0;
}
#config-box{
  position: absolute;
  top: -150px;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-evenly;
  background-color: white;
  border: 2px solid black;
  box-shadow: 2px 2px 1px black;
}
.gone{
  display: none;
  visibility: hidden;
}
input{
  width: 70px;
}
#graphDiv{
  font-family: monospace, monospace;
  width: 100%;
  display: inline-block;
  word-wrap: break-word;
  font-size: 1.51rem;
}
@media only screen and (max-width: 900px) {
  #graphDiv{
    text-align: center;
    font-size: 1.9rem;
  }
}
#infoCard{
  display: flex;
  position: absolute;
  border: 2px solid black;
  background: white;
  padding: 30px;

  height: 25%;
  width: clamp(300px, 30%, 1500px);
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);

  text-align: center;
  flex-direction: column;
  justify-content: center;
  align-items: center;

  box-shadow: 2px 2px 1px black;
}

#infoCard *{
  margin: 5px;
}

#icons {
  display: flex;
  justify-content: space-around;
  height: clamp(20px, 15%, 50px);
  width: 100%;
  margin-top: 30px;
}

#icons img{
  cursor: pointer;
  transition: transform 0.3s ease-in-out;
}

#icons img:hover{
  transform: scale(1.1);
}
#icons img {
    height: 100%;
    aspect-ratio: 1 / 1;
}

@keyframes wiggle {
  0% {
    transform: rotate(0deg);
  }
  25% {
    transform: rotate(0deg);
  }
  50% {
    transform: rotate(5deg) scale(1.8);
  }
  75% {
    transform: rotate(-5deg) scale(1.8);
  }
}
#hi:hover {
  cursor: pointer;
  animation: wiggle 1.5s infinite ease-in-out;
}



#infoCard.animateScroll #icons.rightAlignedIcons {
  justify-content: center;
  margin-top: 0px;
  width: 300px;
}

:root{
  --toppx: 30px;
  --heightpx: 10px;
}



.animateScroll {
  animation: animateScroll 2s forwards;
}

.slideFromBottom{
  animation: slideInFromBottom 0.8s ease-in-out forwards;
}

.gone-anim {
  animation: disappear 0.5s ease-in-out forwards;
}
@keyframes animateScroll {
  0% {
    position:fixed;
    box-shadow: none;
    flex-direction: row;
    top: var(--toppx);
  }
  20%{
    position:fixed;
    box-shadow: none;
    height: var(--heightpx);
    top: var(--toppx);
  }
  95%{
    position:fixed;
    box-shadow: none;
    height: var(--heightpx);
    top: var(--toppx);
    flex-direction: row;
    justify-content: space-evenly;
  }
  100% {
    position:fixed;
    height: var(--heightpx);
    top: var(--toppx);
    width: 100%;
    box-shadow: none;
    padding-top: var(--toppx);
    flex-direction: row;
    justify-content: space-evenly;
    border: 1px black solid;
  }
}

@keyframes slideInFromBottom {
  0% {
    transform: translateY(100%);
    opacity: 0%;
  }
  100% {
    transform: translateX(0);
    opacity: 100%;
  }
}

@keyframes disappear {
  0%{
    opacity: 100%;
  }
  100%{
    opacity: 0%;
  }
}
#blogs{
  width: 100%;
  display: flex;
  flex-direction: column-reverse;
  align-items: center;
  cursor: pointer;
}
.blog:hover{
  transform: translateX(-10px);
}
#content {
  display: flex;
  flex-direction: column;
  text-align: center;
  align-items: center;
}

.blog {
  height: 150px;
  width: 600px;
  display: flex;
  justify-content: space-between;
  padding-left: 15px;
  border: 1px solid lightgrey;
  transition: transform 0.3s ease-in-out;
}
.blogthumbnail {
  margin-left: 8px;
  border-left: 1px solid lightgrey;
  width: 25%; /* or a specific px value */
  height: auto;
  aspect-ratio: 1 / 1;
  object-fit: cover; 
}
.blogtext {
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 10px;
}
.blogblurb{
  color: grey;
}

.bloglink {
  font-size: 12px;
  color: #A0A0A0;
}
@media (max-width: 600px) {
  .blog {
    height: 300px;
    width: 400px;
    display: flex;
    justify-content: space-between;
    padding-left: 15px;
    border: 1px solid lightgrey;
    transition: transform 0.3s ease-in-out;
  }
  .blogthumbnail {
    margin-left: 8px;
    border-left: 1px solid lightgrey;
    width: 35%; /* or a specific px value */
    height: auto;
    aspect-ratio: 1 / 1;
    object-fit: cover; 
  }
}