@import url('https://fonts.googleapis.com/css2?family=Chivo+Mono&display=swap');


.my-font 
{
  font-family: 'Chivo Mono', monospace;
}

.shadow-text 
{
  text-shadow: 1px 1px black;
}

h1,
h2 
{
  padding: 10px 15px;
  margin: 25px auto;
  width: fit-content;
  background-color: lightslategray;
  border-radius: 20px;
}


.intro 
{
  display: flex;
  justify-content: space-around;
  padding: 10px;
  margin: 20px;
}

.intro-words 
{
  padding: 20px;
  margin: 2px 30px 20px 30px;
  border-radius: 20px;
  text-align: justify;
  padding-bottom: 10px;
}

.pro-image 
{
  border-radius: 20px;
  width: 300px;
}

.q-button 
{
  border-radius: 50%;
  border: 2px solid #57839b;
  background-image: radial-gradient(lightgray 5%, white 40%, #77B3D4);
  display: flex;
  justify-content: center;
  align-items: center;
  width: 50px;
  height: 50px;
  padding: 1px;
  margin-right: 15px;
  margin-top: 5px;
}

.q-box 
{
  display: flex;
  font-size: 1.25rem;
  text-align: justify;
  text-align-last: center;
  margin-right: 10px;
}

.q-text 
{
  display: inline;
}

.link-list 
{
  padding: 5px;
  width: 40%;
}

.link-section 
{
  display: flex;
  justify-content: space-evenly;
  font-size: 2rem;
}

.link-title 
{
  margin-bottom: 15px;
  padding: 5px;
}

.link-list span 
{
  padding: 10px 15px;
  margin: 25px 20px;
  width: fit-content;
  background-color: lightslategray;
  border-radius: 20px;
  color: white;
  display: flex;
}

.link-list li 
{
  list-style: none;
}

.link-list a 
{
  padding-top: 7px;
}

.link-list img 
{
  background-color: white;
  border-radius: 50%;
  margin-top: 5px;
}

.link-list p 
{
  font-size: 20px;
  padding-top: 3px;
}

h5 
{
  border-bottom: 5px solid white;
  padding: 0px 10px 10px 10px;
}

input:checked+label+p 
{
  display: block;
}

.my-text 
{
  height: 15vh;
}

.anim-block 
{
  display: flex;
  justify-content: right;
  height: 2000px;
  width: 100%;
  position: absolute;
  top: 80%;
  z-index: 2;
}

.main-disc 
{
  height: 50px;
  width: 50px;
  border-radius: 50%;
  display: flex;
  justify-content: center;
  align-items: center;
  background-image: radial-gradient(circle, royalblue 10%, violet, darkgrey);
  position: relative;
  right: 3%;
  cursor: pointer;
}

.main-play 
{
  animation-name: throw;
  animation-duration: 3500ms;
  animation-iteration-count: 1;
  animation-timing-function: ease-in-out;
}

.inner-disc 
{
  height: 45px;
  width: 45px;
  border-radius: 50%;
  border-top: 3px dotted lightgoldenrodyellow;
  border-bottom: 3px dotted lightgoldenrodyellow;
  margin: 10px;
  font-size: 11px;
  display: flex;
  align-items: center;
  font-weight: 500;
  color: lightgoldenrodyellow;
  padding: 4px;
  position: relative;
}

.inner-play 
{
  animation-name: disc;
  animation-duration: 700ms;
  animation-iteration-count: 5;
  animation-timing-function: linear;
}

@keyframes disc 
{
  25% {rotate: -90deg;}
  50% {rotate: -180deg;}
  75% {rotate: -270deg;}
  100% {rotate: -360deg;}
}

@keyframes throw {
  0% {right: 99%;}
  5% {top: 1%;}
  10% {top: 1.5%;}
  15% {top: 2%;}
  20% {top: 2.5%;}
  25% {top: 3%;}
  30% {top: 3.5%;}
  35% {top: 4%;}
  40% {top: 4.5%;}
  45% {top: 5%;}
  50% {top: 5.5%;}
  55% {top: 5%;}
  57.5% {top: 4.5%;}
  60% {top: 4%;}
  62.5% {top: 3.5%;}
  65% {top: 3%;}
  67.5% {top: 2.5%;}
  70% {top: 2%;}
  72.5% {top: 1.5%;}
  75% {top: 1%;}
  77.5% {top: 0.5%;}
  80% {top: 0%; right: 3%;}
  100% {top: 0%; right: 3%;}
}

.pic-flip 
{
  animation: spin 8s infinite;
}

@keyframes spin 
{
  40%,50% {rotate: y 0deg;}
  45% {rotate: y 180deg;}
  90%,100% {rotate: x 0deg;}
  95% {rotate: x 180deg;}
}

@media screen and (min-width: 768px) and (max-width: 992px) 
{

}

@media screen and (max-width: 768px) 
{
  
  .link-list a{font-size: 1.4rem;}

  
}

@media screen and (max-width: 992px) 
{
  .link-list li {padding-bottom: 5px;}
  .link-list { width: 50%;}
  .info-label {display: none;}
  .link-title {margin-bottom: 0px; padding-bottom: 0px;}
}