body{
font-family: "Smooch Sans", serif;
  font-optical-sizing: auto;
  font-weight: 400;
  font-style: normal;
}

.title{
    text-align:center;
}

.top-line{
    height:20px;
    margin-top:-15px;
}

.main{
    display:flex;
    flex-direction:row;
    overflow-y:scroll;
}

.first{
    width:60%;
    margin:1em;
    display:flex;
    flex-direction:row;
    height:57vh;
    justify-content:center;

}

.avatar{
    width:30%;
    display:flex;
    flex-direction:column;
    height:100%;
    justify-content:center;
}


table{
    width:100%;
}

td, th{

}

td{

}
th{
border:0px;
}


.etc{
    height:50%;
    margin:10px;
    border-radius:20px;
    padding-top:10px;
    padding-left:10px;
}

#stamp{
        display: block;
  margin-left: auto;
  margin-right: auto;
        margin-top:.5em;
    }

.top{
        display:flex;
        flex-direction:row;
        max-width:100%;
        flex-wrap:wrap;
        justify-content:center;
    }
    
    .top img{

        height:100%;
    }

.avatar img{
    max-width:100%;
    height:fit-content;
    
}

.intro{
    width:70%;
    height:100%;
    font-size:1.25em;
    overflow-y:auto;
}

.intro p{
    padding-left:15px;
    padding-right:15px;
}
.items{
    background-color:orange;
    height:15vh;
    overflow-y:hidden;
    display:flex;
    flex-direction:row;
}
.item-title{
    width:fit-content;
    height:40px;
    margin-left:10px;
    margin-top:-50px;
    text-align:center;
}

.items img{
    height:70%;
    background-color:blue;
    margin:10px;
    border-radius:50%;
    padding:10px;
}
.second{
    height:80vh;
    width:40%;
    margin:10px;
    background-color:blue;
    display:flex;
    flex-direction:column;
    justify-content:space-evenly;
    overflow-y:scroll;
}

.second img{
    max-width:100%;
}

.gallery-item{
    height:fit-content;
    display:flex;
    flex-direction:column;
}

.captions{
    text-align:center;
    margin-bottom:10px;
    padding-left:10px;
    padding-right:10px;
}

#test{
    display:flex;
    flex-direction:column;
}

/* grid */

   .grid {
  margin:0 auto;
}
.grid-item {
  width: 300px;
  height: auto;
  margin-bottom: 10px;
}
.grid-item img {
  width: 100%;
  height: 100%;
}
      .caption{
          margin-top:-3px;
  text-align: center;
          font-size:12px;
          padding:3px;
      }
/* music player */

.tunes{
    height:100px;
    position:relative;
    margin-top:-10em;
    margin-bottom:4em;
    width:60%;
    margin-left:10em;
}
.player {
margin:0 auto;
    width:50%;
}

#musicplayer{
    border-top:0px!important;
    border-radius:20px;
    overflow:auto;
    padding:20px;
}

    .songtitle{
        padding:5px; /* padding around song title */
        display:block;
        text-align:center;
        font-size:1.1em;
    }

    .controls{
        font-size:18px !important; /* size of controls */
        text-align:center;
        width:100%;
        margin-top:.5em;
    }

    .controls td{
        padding:8px 5px 0px 5px; /* padding around controls */
    }

    .seeking{
        /* background color of seeking bar */
        display:flex;
        justify-content: space-evenly;
         /* padding around seeking bar */
    }

    .current-time{
        padding-right:5px;
    }

    .total-duration{
        padding-left:5px;
    }

    i.fi:hover{
        cursor:pointer;
    }

    
    input[type=range] {
        -webkit-appearance: none;
        width: 100%;
        background-color:transparent; /* background color of seeking bar - make the color same as .seeking background color */
    }
    
    input[type=range]:focus {
        outline: none;
    }
    
    /* settings for chrome browsers */
    input[type=range]::-webkit-slider-runnable-track {
        width: 100%;
        height: 2px; /* thickness of seeking track */
        cursor: help;
        background: #E74492; /* color of seeking track */
    }
    
    input[type=range]::-webkit-slider-thumb {
        height: 10px; /* height of seeking square */
        width: 10px; /* width of seeking square */
        border-radius: 0px; /* change to 5px if you want a circle seeker */
        background: #E74492; /* color of seeker square */
        cursor: help;
        -webkit-appearance: none;
        margin-top: -4.5px; 
    }
    
    /* settings for firefox browsers */
    input[type=range]::-moz-range-track {
        width: 100%;
        height: 2px; /* thickness of seeking track */
        cursor: help;
        background: #E74492; /* color of seeking track */
    }
    
    input[type=range]::-moz-range-thumb {
        height: 10px; /* height of seeking square */
        width: 10px; /* width of seeking square */
        border-radius: 0px; /* change to 5px if you want a circle seeker */
        background: #E74492; /* color of seeker square */
        cursor: help;
        border:none;
    }