/*backgrounds and fonts*/
body{
    margin: 2rem;
    margin-bottom: 6rem;
    background-image: url(images/spacebg.gif);
}

/* fonts */
.pirata-one-regular {
    font-family: "Pirata One", system-ui;
    font-weight: 400;
    font-style: normal;
}

.kodchasan-extralight {
  font-family: "Kodchasan", sans-serif;
  font-weight: 200;
  font-style: normal;
}

.kodchasan-light {
  font-family: "Kodchasan", sans-serif;
  font-weight: 300;
  font-style: normal;
}

.kodchasan-regular {
  font-family: "Kodchasan", sans-serif;
  font-weight: 400;
  font-style: normal;
}

.kodchasan-medium {
  font-family: "Kodchasan", sans-serif;
  font-weight: 500;
  font-style: normal;
}

.kodchasan-semibold {
  font-family: "Kodchasan", sans-serif;
  font-weight: 600;
  font-style: normal;
}

.kodchasan-bold {
  font-family: "Kodchasan", sans-serif;
  font-weight: 700;
  font-style: normal;
}

.kodchasan-extralight-italic {
  font-family: "Kodchasan", sans-serif;
  font-weight: 200;
  font-style: italic;
}

.kodchasan-light-italic {
  font-family: "Kodchasan", sans-serif;
  font-weight: 300;
  font-style: italic;
}

.kodchasan-regular-italic {
  font-family: "Kodchasan", sans-serif;
  font-weight: 400;
  font-style: italic;
}

.kodchasan-medium-italic {
  font-family: "Kodchasan", sans-serif;
  font-weight: 500;
  font-style: italic;
}

.kodchasan-semibold-italic {
  font-family: "Kodchasan", sans-serif;
  font-weight: 600;
  font-style: italic;
}

.kodchasan-bold-italic {
  font-family: "Kodchasan", sans-serif;
  font-weight: 700;
  font-style: italic;
}


/* text stuff */
h2{
    font-family: 'Pirata One';
    font-size: 1.8rem;
    font-size: clamp(1.8rem, 1.6600000000000001rem + 0.7vw, 2.5rem);
    letter-spacing: 0.05em;
    color: #91FE00;
    
}

h3{
    font-family: 'Pirata One';
    letter-spacing: 0.09em;
    font-size: 1.5rem;
    font-size: clamp(1.5rem, 1.4rem + 0.5vw, 2rem);
    text-align: center;
    text-shadow: 0 0 5px #38002277, 0 0 10px #79024cb3, 0 0 15px #ff009d;
    background-color: #350d25;
    /* border-radius: 5px; */
    padding: 5px;
    border-style: outset;
    border-color:#350d25; 
    border-width:2px;
}

p{
    font-family: 'kodchasan';
    font-size: 1rem;
    font-size: clamp(1rem, 0.95rem + 0.25vw, 1.25rem);
    text-align: center;
}

h3,
 p{
    color:#FF06A0;
}

h4{
    font-family: 'pirata one';
    color: #FFD200;
    text-shadow: 0 0 5px #534300, 0 0 10px #705c006d, 0 0 15px #ffd000;
    font-size: 1rem;
    font-size: clamp(1rem, 0.95rem + 0.25vw, 1.25rem);
    
}

a:link{
    color:#FFD200;
}

a:hover{
    color:#91FE00
}


::selection {
  color: #FFD200;
  background: #1487FF;
}

/* end of background and fonts */

/* header */



.headerpic{
    width: 100%;
    height: auto;
    align-content: center;
}    

 
.navbar{
    border: double;
    border-width:3px;
    border-color:#ff06a0;
    border-left: none;
    border-right: none;
    list-style-type: none;
    text-align: center;
    padding-left: 10px;
    padding-right: 10px;
    margin-bottom: 3em;
    li{
        margin: 0px;
        display: inline-block;
        text-decoration:underline;
        padding-left: 5px;
        padding-right: 5px;
        text-align: center;
      
    }
}

.navbar li:hover{
     color: #FF06A0;
}


#main-page{
    background-image: url(images/bgnoise.jpg);
    background-color: #100f10e2;
    border-width:3px;
    border-style: double;
    border-color:#ff06a0;
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 1rem;
    padding: 0.5rem;
    
}

.welcome{
    text-align: center;
    grid-column-start: 1;
    grid-column-end: 3;
   

}

.intro{
    text-align: center;
   grid-column-start: 1;
    grid-column-end: 3;
    
}

.me-pic{
 
 float: left;
 max-width: 150px;
 
}



.interests{
   grid-column-start: 1;
    grid-column-end: 3;
}


.artist{ 
    
    height:165px;
    position: relative;
    overflow: hidden;
    
}
#Artists-I-like{
   grid-column-start: 1;
    grid-column-end: 3;  
}

.Doechii, .Mijita, .ExLover, .LVL1{
    position:absolute;
    left:100%; 
    animation:scrolleft 15s infinite linear;
    color: #1487FF;
     text-shadow: 0 0 5px #1487FF, 0 0 10px #1486ff85, 0 0 15px #1486ff25;
    text-align: center;
}
@keyframes scrolleft{ 
    to {
        left:-200px;}
        
}


/* buttons */
.buttones{
    display: inline-block;
    padding: 1em;
    
}

#button-marquee{
    margin: 1em;
    overflow: hidden;
}

.bottom-buttons{
    margin-right: auto;
    margin-left: auto;
    max-width: 1400px;
  padding-block: 8px;
  overflow: hidden;
  user-select: none;


  --gap: 1rem;
  display: flex;
  gap: var(--gap);
}

.move{   
   flex-shrink: 0;
  min-width: 100%;
  display: flex;
  align-items: center;
  gap: var(--gap);
/* background-color: #1487FF; */

   animation:scroll 20s linear infinite;
   
}

 @keyframes scroll{
    to {
    transform: translateX(calc(-100% - var(--gap)));
    
  }

}



.Doechii{
    animation-delay: calc(15s / 4 * (4 - 1) * -1);
}
.Mijita{
    animation-delay: calc(15s / 4 * (4 - 2) * -1);
}
.ExLover{
    animation-delay: calc(15s / 4 * (4 - 3) * -1);
}
.LVL1{
    animation-delay: calc(15s / 4 * (4 - 4) * -1);
}
/* mobile*/   
@media only screen and (max-width: 600px){
    .likes{
    display: none;

    .projects{
         grid-column-start: 1;
    grid-column-end: 3;
    } 
    .status{
     grid-column-start: 1;
    grid-column-end: 3;
   }
  
 #music-player-container {
    /* position: fixed; */
    display:inline-block;
    grid-column-start: 1;
    grid-column-end: 3;
    bottom: 10px;
    /* left: 0; */
    /* display: grid; */
    /* grid-template-columns:repeat(3, 1fr); */
    align-items: center;
    transition: transform 0.3s ease-in-out;
}

.music-player{
    grid-column-start: 1;
    grid-column-end: 3;
}

.music-player button, #volume-label, #song-info{
   display: inline;
}

}
}




/* desktop */

@media only screen and (min-width: 601px){
    .likesmobile{
        display: none;
    }
}

@media only screen and (min-width: 601px){

    .headerpic{
        max-width: 1000PX;
        display: block;
        margin-left: auto;
        margin-right: auto;
    }

    #header, #main-page{
        max-width: 1300px;
        margin-left: auto;
        margin-right: auto;
    }

    .navbar{
        margin: auto;
        margin-bottom: 3em;
    }

 /* main page    */
    #main-page{
        padding: 3em;
        grid-template-columns: repeat(3,1fr);
        column-gap: 2em;
    }

    p{
        line-height: 1.5em;
    }
/* row 1 */
    .welcome{
        grid-column-start: 1;
        grid-column-end: 4;
        p{
          vertical-align: middle;
        }
    }

/* row 2 */
    .intro{
        grid-column-start: 1;
        grid-column-end: 3;
    }
    
    .me-pic{
        grid-column-start: 1;
        grid-column-end: 2;
        max-height: 50%;
        min-width: 50%;
    }

    .interests{
        grid-column-start: 3;
        grid-column-end: 4;
    }

  ul{
        list-style-image: url(images/arrow.png);
        color:#1487FF;
       margin-left: 5em;
       margin-right: auto;
        font-family: 'kodchasan';
        font-size: 1rem;
        font-size: clamp(1rem, 0.95rem + 0.25vw, 1.25rem);
    
    }

    /* row 3 */

    #Artists-I-like{
        grid-column-start: 1;
        grid-column-end: 2;
    }

    .projects{
        grid-column-start: 2;
        grid-column-end: 3;
    }

    .status{
        grid-column-start: 3;
         grid-column-end: 4;
    }


#music-player-container {
    /* position: fixed; */
    grid-column-start: 1;
    grid-column-end: 4;
    bottom: 10px;
    /* left: 0; */
    /* display: grid; */
    /* grid-template-columns:repeat(3, 1fr); */
    align-items: center;
    transition: transform 0.3s ease-in-out;
}