/*page layout*/

/*background: repeating-radial-gradient(circle,#4f46e4, transparent 20%);
        background-size: 3em 3em;
        background-color: #ffffff;
        opacity: 1
        */

body {
    display: flex;
    justify-content: center;
    background-image: url(images/IMG_20240131_064608526.jpg) ;
    background-size: 1000px;
    overflow: hidden;
}

#middle {
    height: 96vh;
    width: 55%;
    background-color:#92d1d4;
    display: flex;
    justify-content: start;
    flex-direction: column;
    margin-left: 20px;
}
/*scroll bar*/
.post:hover, .post:active, .post:focus {
  overflow-y: auto;
}

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

main::-webkit-scrollbar {
  width: 0px;
}

::-webkit-scrollbar-thumb {
  background: steelblue; 
}

::-webkit-scrollbar-thumb:hover {
  background: darkslateblue; 
} 
/*asides*/
#right, #left {
  width: 200px;
}

#right div, #left div {
  margin-bottom: 10px;
}

#misc-div {
  width: 300px;
  height: 65px;
}

#music-btn  {
  width: 65px;
  height: 65px;
  cursor: pointer;
  background-color: hotpink;
  border: 5px solid #992f2f;
  border-radius: 32.5px;
  margin: 670px 0px 0px 0px;
  float: right;
  font-size: 40px;
  color: #992f2f;
}

#music-id {
  display: none;
  position: relative;
  right: 131px;
  top: -70.7px;

  fill: darkslateblue;
  color: #92d1d4;
}

#music-id p {
  width: 100%;
  margin: 0px 0px 2px 0px;
  font-family: Arial, Helvetica, sans-serif;
  font-size: 16px;
  font-weight: 1000;
  text-align: center;
}

#music-id p:last-of-type {
  width: max-content;
  float: right;
}

#music-btn:hover + #music-id.play {
  display:block;
}

/*main*/
main {
    height:100%;
    width:100%;
    overflow-y: scroll;
    box-sizing: border-box;
    border: 5px solid steelblue;
    background: repeating-radial-gradient(circle,steelblue, transparent 20%);
    background-size: 3em 3em;
    background-color: #92d1d4;
    opacity: 1; 
}

main div {
    border-bottom: 3px dashed steelblue;
    padding: 20px;
    font-family: 'Gill Sans', 'Gill Sans MT', Calibri, 'Trebuchet MS', sans-serif;
    font-weight: bolder;
    font-size: 21px;
    -webkit-text-stroke: .5px navy;
    color: navy;
    overflow-y: scroll;
    overflow-x: hidden;
}

h2{
  text-align: ceter;
  margin: 0px;
}

h2, h3, nav ul {
  font-family: Rubik;
  background-color: rgb(0,0,128, 25%);
  border: -5px solid rgb(0,0,128, 0%);
  border-radius: 5px;
}

/*nav*/
nav ul {
  height: 48px;
  align-items: center;
  list-style: none;
  margin: 0px;
  padding: 0px;

  align-items: center;
  text-align: center;
  font-family: Rubik;
  font-size: 25px;
  font-weight: 700;
  color: navy;
  margin: 10px;
  background-color: rgb(0,0,128, 25%);
}

#title {
  float: none;
  position: relative;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
}

#homebtn {
  top: -30px;
  right: 20px;
  position: relative;
  float: right;
  font-size: 40px;
}

nav i {
  color: navy;
}

nav i:hover {
  color: indigo;
}
/*boxes*/
#bio {
    height: 280px;
    overflow-y: scroll;
    width: 100%;
    box-sizing: border-box;
    padding-top: 0px;
}

#biophoto {
    position: sticky;
    top: 0px;
    height: 240px;
    float: left;
    border: 5px solid steelblue;
    margin: 0px 20px 0px 0px;
}

#bio p {
float: right;
width: 63%;
margin: 0px;
}

#hobbies ul, #likesdislikes ul {
  display: flex;
  width: 100%;
  flex-wrap: wrap;
}

#hobbies li, #likesdislikes li {
  padding-right: 5px;
  list-style:disc;
   
}

#hobbies li {
  flex: 1 0 calc(33.33% - 5px);
}

#likesdislikes {
  display: flex;
  padding: 0px;
}

#likesdislikes span {
  text-decoration: 2px line-through;
}

#likesdislikes ul {
  padding-left: 20px;
}

#likesdislikes div {
  width: 50%;
  border: none;
}

#likesdislikes h2 {
  text-align: center;
}

#likesdislikes li {
  flex: 1 0 100%;
  width: 100%;
}