/* 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." */
   
  /* Establishing custom fonts */
@font-face{
  font-family: "Dragon";
  src: url("DragonCaps.ttf");
  } 
@font-face{
  font-family: "Excon";
  src:
    url("Excon-Black.otf");
  } 
@font-face{
  font-family: "Morris";
  src:
    url("Morris-Black.ttf");
  } 
@font-face{
  font-family: "Pixely";
  src:
    url("LowresPixel-Regular.otf");
  } 
  
  /* Custom title text */
.title{
   font-size: 30px;
   color: white;
   font-family: "Excon";
   transition: 0.6s all ease-in-out;
   text-align: center;
   text-decoration: none;
}
.title:hover {
  letter-spacing: 0.2rem;
  transition: 0.6s all ease-in-out;
  color: #d6dfff;
}

/* Text stylization */
p {
  text-indent: 20px;
  font-family: Calibri;
}
h1 {
  font-family: "Excon";
  color: white;
  text-align: center;
  text-decoration: underline;
  font-size: 25px;
}

h2 {
  font-family: "Excon";
  color: white;
  text-align: center;
  text-decoration: underline;
  font-size: 24px;
}
.pixelFont {
  font-size: 25px;
  font-family: "Pixely";
}

.pixelFont:hover span:hover {
  color: #e3eeff;
  filter: brightness(0.9);
  text-decoration: underline;
}

.starPng {
  width: 20px;
  margin: 0px 5px;
}

.pixelFont span {
  transition: all .4s ease-in-out;
}

/* div stylization */
header {
  background-color: rgba(0,0,0,0.5);
  padding: 5px;
  margin: 10px 0px;
  border-radius: 5px;
  opacity: 0.9;
}
.navbar {
  background-color: rgba(0,0,0,0.46);
  padding: 5px;
  margin: 25px 0px 0px;
  opacity: 0.9;
}
body {
  width: 100%;
  color: white;
  text-align: center;
  font-family: sans-serif;
  background-image: linear-gradient(#e3eeff,#5d88cf);
  min-height: 100%;
  
  margin: 0px;
  padding: 0px;
}
html {
  min-height: 100%;
  transform-style: preserve-3d;
}
section {
  min-width: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
}
.aboutme {
  margin: 20px;
  border-radius: 20px;
  background-color: rgba(0,0,0,0.4);
  color: white;
  padding: 5px 15px 25px 15px;
  text-align: start;
}

.otherBox {
  margin: 20px;
  border-radius: 20px;
  color: white;
  padding: 5px 15px 25px 15px;
}

@media screen and (min-width: 700px) {
  .aboutme {
    width: 60%;
  }
}
@media screen and (max-width: 699px) {
  .aboutme {
    width: 100%;
  }
}





.socials {
  margin: 20px;
  border-radius: 20px;
  background-color: rgba(0,0,0,0.35);
  color: white;
  padding: 5px 15px 25px 15px;
  text-align: center;
  text-indent: 0px;
  justify-content: center;
  align-items: center;
}

.multiBox-row {
  background-color: rgba(0,0,0,0);
  display: flex;
  flex-direction: column;
  text-align: center;
  align-items: center;
  justify-content: center;
}

.imageboxPC {
  justify-content: center;
  align-items: center;
  margin: auto;
  filter: drop-shadow(-5px 5px 5px rgba(0, 0, 0, 0.7));
}
@media screen and (min-width: 700px) {
  .imageboxPC {
    width: 40%;
  }
}
@media screen and (max-width: 699px) {
  .imageboxPC {
    width: 0%;
    display: none;
  }
}

@media screen and (max-width: 399px) {
  
}
@media screen and (min-width: 400px) {
  
}





.imageboxMobile {
  justify-content: center;
  align-items: center;
  margin: auto;
  filter: drop-shadow(-5px 5px 5px rgba(0, 0, 0, 0.7));
}
@media screen and (min-width: 700px) {
  .imageboxMobile {
    width: 0%;
    display: none;
  }
}
@media screen and (max-width: 699px) {
  .imageboxMobile {
    width: 100%;
  }
}

.spinny {
  animation: rotate 4s ease-in-out infinite
}
@keyframes rotate {
  0% {
    transform: translateY(-8%) scale(0.90) rotate(-5deg);
  }
  50% {
    transform: translateY(7%) scale(0.95) rotate(5deg);
  }
  100% {
    transform: translateY(-8%) scale(0.90) rotate(-5deg);
  }
}
@keyframes warning {
  0% {
    transform: translateX(-100%);
  }
  100% {
    transform: translateX(100%);
  }
}
@keyframes cdText {
  0% {
    transform: translateX(100%);
  }
  100% {
    transform: translateX(-100%);
  }
}
@keyframes shimmyYah {
  0% {
    transform: translateX(-12px) translateY(-38px);
  }
  50% {
    transform: translateX(-20px) translateY(-38px);
  }
  100% {
    transform: translateX(-12px) translateY(-38px);
  }
}
.warning {
  border: solid;
  border-width: 10px;
  border-color: rgba(0,0,0,0);
  margin: 23px;
  padding: 0px 15px;
  border-radius: 20px;
  background-color: rgba(0,0,0,0.43);
  overflow: hidden;
} 
.warningText {
  animation-delay: 1s;
}
.cd-text {
  font-size: 15px;
  text-align: center;
  position: absolute;
  top: 150px;
  left: 0;
  white-space: nowrap;
  animation: cdText 16s linear infinite;
  font-family: 'Times New Roman';
}
.cd-text2 {
  font-size: 15px;
  text-align: center;
  top: 150px;
  white-space: nowrap;
  font-family: 'Times New Roman';
}
ul {
  margin: auto;
  line-height: 1.2;
  list-style: none;
  width: 10%;
}
@media screen and (min-width: 700px) {
  ul {
    width: 10%;
  }
  .warningText {
  animation: warning 12s linear infinite;
  
}
div.scroll-container:hover {
  animation-play-state: paused; 
}
}
@media screen and (max-width: 699px) {
  ul {
    width: 35%;
  }
  .warningText {
  animation: warning 7s linear infinite;
  
}
}

li {
  padding: 3px;
  background-repeat: no-repeat;
  background-position: 0 center;
  overflow: visible;
  background-size: 30px;
}
.SocialLinks {
  color: #b0ceff;
  text-decoration: none;
  transition: 0.8s all ease-in-out;
}
.GameLinks {
  color: #fffebd;
  text-decoration: none;
  transition: 0.8s all ease-in-out;
}
.SocialLinks:hover,.GameLinks:hover {
  color: #f74a4a;
  text-decoration: underline;
  transition: all 0.3s ease-in-out;
}


.main-scroll-container {
  width: 100%;
  border: solid;
  border-width: 23px;
  border-color: rgba(0,0,0,0);
  background-color: rgba(0,0,0,0.25);
  color: white;
  padding: 0px;
  margin: 20px;
  border-radius: 15px;
  opacity: 0.9;
  overflow: hidden;
  text-align: center;
}

.gameIcon {
  border-radius: 5px;
  width: 315px;
  margin-left: 38px;
  margin-right: 38px;
  opacity: 1;
  padding: 5px;
  border-width: 5px;
  border: solid;
}

div.scroll-container {
  border: solid;
  border-width: 0px;
  border-color: rgba(0,0,0,0);
  background-color: rgba(0,0,0,0);
  color: white;
  padding: 0px;
  margin: 0px;
  border-radius: 15px;
  opacity: 0.9;
  white-space: nowrap;
  text-align: left;
}

.cd-main-container {
  border: solid;
  border-width: 0px;
  border-color: rgba(0,0,0,0);
  background-color: rgba(0,0,0,0);
  color: white;
  padding: 0px;
  margin: 0px;
  border-radius: 15px;
  opacity: 0.9;
  text-align: left;
  display: flex;
  flex-wrap: wrap;
}

.scroll-container img {
  will-change: transform; /* We should be nice to the browser - let it know what we're going to animate. */
  -webkit-animation: scrolling 7.5s linear infinite;
  -webkit-backface-visibility: hidden;
  -webkit-perspective: 1000;
  padding: 0px 10px;
  border-radius: 30px;
}

 @keyframes scrolling {
    0% {
      transform: translateX(0px);
    }
    100% {
      transform: translateX(-1220px);
    }
  }
  

        .cd-text-container{
          margin: 10px 25px ;
          color: white;
        }
        .cd-container {
            position: relative;
            justify-content: center;
            align-items: center;
            display: inline-block;
            text-align: center;
            width: 156px;
            color: white;
            left:0;
            right:0;
            background-color: rgba(0,0,0,0);
            padding: 0px 10px 35px;
            margin: 0px 15px;
            overflow: hidden;
        }
        
        .favcd-container {
            position: relative;
            justify-content: center;
            align-items: center;
            display: inline-block;
            width: 206px;
            height: 206px;
            color: white;
            left:0;
            right:0;
            background-color: rgba(0,0,0,0);
            padding: 0px 10px 35px;
            margin: 0px 15px;
            overflow: hidden;
        }

        .cd-player {
            position: relative;
            width: 150px;
            height: 150px;
            border-radius: 50%;
            border: 3px solid #ccc;
            box-shadow: 0 2px 5px rgba(0, 0, 0, 0);
            transition: transform 0.3s ease-in-out;
            left:0;
            right:0;
        }
        
        .favcd-player {
            position: relative;
            width: 200px;
            height: 200px;
            border-radius: 50%;
            border: 3px solid #ccc;
            box-shadow: 0 2px 5px rgba(0, 0, 0, 0);
            transition: transform 0.3s ease-in-out;
            left:0;
            right:0;
        }

        .cd-player::before {
            content: "";
            position: absolute;
            width: 20px;
            height: 20px;
            background: #fff;
            border-radius: 50%;
            top: 75px;
            left: 75px;
            transform: translate(-50%, -50%);
        }
        
        .favcd-player::before {
            content: "";
            position: absolute;
            width: 20px;
            height: 20px;
            background: #fff;
            border-radius: 50%;
            top: 100px;
            left: 100px;
            transform: translate(-50%, -50%);
        }

        .play-button {
            position: absolute;
            top: 78px;
            left: 88px;
            transform: translate(-50%, -50%);
            width: 40px;
            height: 40px;
            background: rgba(0, 0, 0, 0.7);
            border-radius: 50%;
            display: flex;
            justify-content: center;
            align-items: center;
            color: #fff;
            font-size: 20px;
            cursor: pointer;
            opacity: 0;
            transition: opacity 0.3s ease-in-out;
            
        }
        
        .play-button2 {
            position: absolute;
            top: 123px;
            left: 102px;
            transform: translate(-50%, -50%);
            width: 40px;
            height: 40px;
            background: rgba(0, 0, 0, 0.7);
            border-radius: 50%;
            display: flex;
            justify-content: center;
            align-items: center;
            color: #fff;
            font-size: 20px;
            cursor: pointer;
            opacity: 0;
            transition: opacity 0.3s ease-in-out;
            
        }

        .cd-container:hover .play-button {
            opacity: 1;
        }
        
        .favcd-container:hover .play-button2 {
            opacity: 1;
        }

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

/* Custom Scrollbar */
        ::-webkit-scrollbar {
            width: 13px;
            /* Vertical Width */
            height: 10px;
            /* Horizontal Height */
            position: relative;
        }
                    
/* Scrollbar Track Color */
        ::-webkit-scrollbar-track {
            background: #636b79;
            border-radius: 0px;
        }
                    
/* Scrollbar Thumb Color */
        ::-webkit-scrollbar-thumb {
            background: #424a5a;
            border-radius: 20px;
            border: 3px solid #636b79;
        }
                    
/* Thumb Hover */
        ::-webkit-scrollbar-thumb:hover {
            background: transparent;
        }