/* 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." */

body{
    background-image: url(bg1.jpg);
    background-size: cover;
    background-repeat: no-repeat;
    background-position: top;
}
#container{
    width:177.5px;
    height: 650px;
    background-color: #000000a1;
    margin: left;
    border-radius: 10px;
    box-shadow: 0 0 20px rgba(255, 255, 255, 0.7);
    animation: glow 2s ease-in-out infinite alternate;
    
    }

    @keyframes glow {
        from {
        box-shadow: 0 0 10px rgba(255, 255, 255, 0.699);
        }
        to {
        box-shadow: 0 0 40px rgb(255, 255, 255);
        }
    }
#con-header{
    border: solid rgb(228, 228, 228) 3px;
    width: 150px;
    height: 150px;
    background-color: black;
    background-image: url(abf533803accf04d6e457b6ca7971219.jpg);
    background-size: 150px;
    background-repeat: no-repeat;
    position: relative;
    }
    
.me {
    width: 150px;
    margin: left;
    text-align: left;
    padding: 10px;
}

.title {
    font-family: 'UnifrakturCook', cursive;
    font-size: 23px;
    color: rgb(255, 255, 255);
    letter-spacing: 0.5px;

    animation: pulseGlow 2.5s ease-in-out infinite;
}
    
.title2 {
    font-family: 'Pirata One', cursive;
    font-size: 25px;
    color: rgb(255, 255, 255);
    letter-spacing: 0.5px;
    animation: pulseGlow 2.5s ease-in-out infinite;
}
@keyframes pulseGlow {
        0% {
        text-shadow: 0 0 5px rgba(255, 255, 255, 0.3);
        }
        50% {
        text-shadow: 
            0 0 10px rgba(255, 255, 255, 0.6),
            0 0 20px rgba(255, 255, 255, 0.8);
        }
        100% {
        text-shadow: 0 0 5px rgba(255, 255, 255, 0.3);
    }   

}
    .cd{
        width: 25px;
        height: 25px;
        background-image: url(cd.png);
        background-size: 25px;
        background-repeat: no-repeat;
        background-position: center;
        border-radius: 12.5px;

        display: inline-block;
        margin: 6px;
        margin-left: 2px;
        animation: spin 2s linear infinite;
        transition: width 0.2s ease, height 0.2s ease, background-size 0.2s ease;
    }
    
    @keyframes spin {
        0%      { transform: rotate(0deg); }
        100%    { transform: rotate(360deg); }
    }
#container2 {
    width: 500px;
    height: 650px;
    background-color: #000000a1;
    margin:left;
    border-radius: 10px;
    box-shadow: 0 0 20px rgba(255, 255, 255, 0.7);
    animation: glow 2s ease-in-out infinite alternate;
    }

    @keyframes glow {
    from {
        box-shadow: 0 0 10px rgba(255, 255, 255, 0.699);
    }
    to {
        box-shadow: 0 0 40px rgb(255, 255, 255);
    }
    }
.containers {
    display: flex;
    gap: 10px;
    justify-content: center;
}
.SM{
    font-family: 'UnifrakturCook', cursive;
    font-size: 20px;
    color: rgb(255, 255, 255);
    letter-spacing: 0.5px;

    animation: pulseGlow 2.5s ease-in-out infinite;
}
.SocialMedia {
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.cdRow {
    display: flex;
    align-items: center;
    gap: 10px;
    transition: transform 0.2s ease; 
}

.cdRow:hover .cd {
    animation-play-state: paused;
}
.cdRow:hover {
    transform: scale(1.12); 
}
a {
    text-decoration: none; 
    color: inherit;       
    display: inline-block; 
}
.AboutMeTitle {
    font-family: 'Pirata One', cursive;
    font-size: 30px;
    color: rgb(255, 255, 255);
    letter-spacing: 0.5px;
    text-align: center;
    animation: pulseGlow 2.5s ease-in-out infinite;
    margin-top:10px
}
.AboutMe {
    font-family: 'Pirata One', cursive;
    font-size: 20px;
    color: rgb(255, 255, 255);
    letter-spacing: 0.5px;
    text-align: center;
    animation: pulseGlow 2.5s ease-in-out infinite;
    padding:10px;
}
#container3{
    padding-top: 10px;
    width: 450px;
    height: 640px;
    background-color:#000000a1;
    border-radius: 10px;
    box-shadow: 0 0 20px rgba(255, 255, 255, 0.7);
    animation: glow 2s ease-in-out infinite alternate; 
    margin: right; 
}
@keyframes glow {
        from {
        box-shadow: 0 0 10px rgba(255, 255, 255, 0.699);
        }
        to {
        box-shadow: 0 0 40px rgb(255, 255, 255);
        }
}
@keyframes spin {
    100% {
      transform:rotate(360deg);
    }
}
  
.recordPlayer {
    position: relative; 
    width: 180px;       
    height: 150px;      
    padding-left: 20px;
    padding-top: 10px;
}
.cdd {
    height: 130px;
    position: absolute;
    top: 0;      
    left: 55px;  
    animation: spin 1.88s linear infinite;
    transition: left 0.3s ease;
    z-index: 0;
}
.muse {
    height: 130px;
    position: absolute;
    top: 0;                    
    z-index: 1;
}
.recordPlayer:hover .cdd {
    left: 75px;
}

.mood{
    font-family: 'UnifrakturCook', cursive;
    font-size: 30px;
    color: rgb(255, 255, 255);
    letter-spacing: 0.5px;
    text-align: center;
    animation: pulseGlow 2.5s ease-in-out infinite;
}
.player-box{
    padding: 10px;
}
audio {
    background: transparent;
    filter: invert(1);
}
.player {
    background: transparent;
    color: rgb(255, 255, 255);
    display: flex;
    align-items: center;
    gap: 10px;
}

#progress {
    -webkit-appearance: none; 
    width: 100px;
    height: 4px;
    background: #000;
    border-radius: 2px;
    outline: none;
    transition: 0.3s;
}

#progress::-webkit-slider-runnable-track {
    height: 4px;
    background: #212029; 
    border-radius: 2px;
}
#progress:hover::-webkit-slider-thumb,
#progress:hover::-moz-range-thumb {
    transform: scale(1.2);
}
#progress::-webkit-slider-thumb {
    -webkit-appearance: none;
    width: 12px;
    height: 12px;
    background: white;
    border-radius: 50%;
    cursor: pointer;
    margin-top: -4px;
}
.musicmood {
    display:flex;
    gap: 10px;
}
.songname{
    font-family: 'UnifrakturCook', cursive;
    font-size: 25px;
    color: rgb(255, 255, 255);
    letter-spacing: 0.5px;
    text-align: left;
    animation: pulseGlow 2.5s ease-in-out infinite;
    padding-top: 10px;
}