::-webkit-scrollbar {
  width: 10px;}

::-webkit-scrollbar-track {
  background: #c2c2c2;
}

/* Handle */
::-webkit-scrollbar-thumb {
  background: #a40c0b;
}

/* Handle on hover */
::-webkit-scrollbar-thumb:hover {
  background: #9e6225;
}

body {
background-image: repeating-linear-gradient(
    45deg,
    #616161,
    #616161 15px,
    #8F8F8F 15px,
  #8F8F8F 30px );
  background-size: 200%;
  background-position: right;
  background-attachment: fixed;
  animation: animateBg 20s linear infinite;
}
@keyframes animateBg{
  100% {
    background-position: left;
    
  }
}



a:link {
color:#616161;
}


a:visited, a:hover {
color:#8f8f8f;
}

#navbar {
margin:1.5rem;
  background-color:#ffffff;
  border-radius:30px;
  padding:1rem;
  border:5px #c2c2c2 solid;
  font-size:1.5rem;
  display:flex;
  flex-direction: row;
  flex-flow:wrap;
  justify-content:space-around;
  & > hr {
  color:#c2c2c2;
  border:2px solid;
  display:inline-block;
  flex-grow:1
}
  & > a {
    margin:0 0.5rem 0 0.5rem;
    text-decoration:none;
    color:#ed5508;
    &:first-of-type {color:#ec9f01}
    &:last-of-type {color:#f10f10}
    &:hover {
      color:#000000
    }
  }
}

#recordddd {
height:1000px;
width:1000px;
margin: 2rem auto 0 auto;
background-color:#fff;
border-radius:100%;
border:20px #fff solid;

  outline: 5px #c2c2c2  solid;
display:flex;

align-items:stretch;
justify-content:space-between;
position:relative;
  animation:10s linear spinnyspinnyrollyrolly infinite;
  animation-play-state:paused;
}


@keyframes spinnyspinnyrollyrolly {
  from {transform:rotate(0deg)}
  to {transform:rotate(360deg)}
}

.sides {
padding:25px;
padding-top:35px;
font-size:1rem;
overflow:auto;
  border-radius:10000px 0 0 10000px;
    text-align:right;
    width:50%;
  & > h1 {
    color:#fff;
-webkit-text-stroke: 2px black;
    font-size:3rem;
}
}

.redside {
  background-image: repeating-linear-gradient(
    45deg,
    #f10f10,
    #f10f10 15px,
    #d90d0d 15px,
  #d90d0d
 30px );
}

.orangeside {
background-image:repeating-linear-gradient(
    45deg,
    #ec9f01 ,
    #ec9f01 15px,
    #cb8801 15px,
  #cb8801 30px );
  transform:rotate(180deg);
}


#innercircle {
background-color:#c2c2c2;
border-radius:100%;
width:250px;
height:250px;
position:absolute;
top:calc(50% - 125px);;
left:calc(50% - 125px);
z-index:1;
display:flex;
justify-content:center;
align-items:center;
padding:5px;
}

.hoveringimg {
background-color:rgba(0, 0, 0, 0);
position:absolute;
z-index:1;
width:170px;
  &:hover {scale:1.1}
}


#pin {
top:-20px;
left:0;
animation: 3s steps(3, end) infinite alternate rotater;
}

#coiny {
bottom:-20px;right:0;
animation: 3s steps(3, end) infinite alternate evilrotater;
}

@keyframes rotater {
  from { transform:rotate(-20deg)
  }
  to {
 transform:rotate(20deg)
  }
  
}

@keyframes evilrotater {
  from { transform:rotate(200deg)
  }
  to {
 transform:rotate(160deg)
  }
  
}

.bubble {
margin:1.5rem;
  background-color:#ffffff;
  border-radius:30px;
  padding:1rem;
  border:5px #c2c2c2 solid;
}

img, [alt~="stamp"] {
width:101px
}


.marquee {
  position: relative;
  max-width: 100%;
  height:57px;
  overflow-x: hidden;
  margin-top:1rem
}

.track {
  position: absolute;
  white-space: nowrap;
  will-change: transform;
  animation: marquee 5s linear infinite;
}

@keyframes marquee {
  from { transform: translateX(0); }
  to { transform: translateX(-25%); }
}

#toggle {
  font-size:9rem;
  width:100%;
  height:100%;
  border-radius:100%;
  border:0;
}

.spinning {
animation-play-state:running !important;
}