/*
Authors: Luna, Willow, Tech, W175B
Date Created: 9/28/25



*/

/* Main Document Stylings */



 
body {
  color: #00ACAC;
  font-family: Verdana;
  margin: 0;
  padding: 0;
  width:100%;
  cursor: url('/media/Art/comet.png'), auto;
}

ul{
  padding-left: 0;
}

a{
  cursor: url("/media/Art/BlastOff.png");
}

#introtitle{
  text-align: center;
  size: 50pt;
  margin: 50px;
}

.warning{
  color: #FF0011;
  word-wrap: break-word;
}

.title{
  color: #330822; /*Temp*/
}

canvas{
  position: fixed;
  width: 100vw;
  height: 100vh;
  top:0;
  left:0;
  right:0;
  bottom:0;

}

#backgroundSim{
  position: absolute;
  top:0;
  left:0;
  width: 100%;
  height: 100%;
  z-index: -1;
}

div#imagelinks{
  position: fixed;
  bottom:0;
}

div#mainview{
  height:83vh;
  padding-left: 15%;
  padding-right: 15%;
}

::-webkit-scrollbar-track{
  height: 25%;
}


/* Post Area */

div#postarea{
  /*position: absolute;
  left: 25%;
  right:25%;
   */
  height: 50pc;
  text-align: center;
  
  border-style: dashed;
  border-radius: 5pc;
  border-color: aqua;
  height: 40vh;
  overflow: scroll;
  scroll-behavior: auto;
  float:center;
  scrollbar-width: thin;

  margin-bottom: 10px;
}

#blogList ul{
  list-style: none;
  text-align: center;
  width:inherit;
  display: flex;
  flex-direction: column;
  align-items: center;
}


/* Individual Posts */

div.post {
  background-color: #223344;
  border-radius: 25px;
  word-wrap:break-word;
  margin-bottom: 5px;
  border-color: #225555;
  border-style: solid;
  width: 400px;
  padding: 5%;
}

.postHeader{
  margin-bottom: 5px;
}
.post ul{
  padding: 0;
}
.post ul, a{
  color: #f00990;
  text-align: center;
}

.postImage{
  margin: 3px;
  width: 50%;
  aspect-ratio: 1/1;
  border-radius: 5%;
}

.postHeader{
  color: #77FF66;
}


/* Biography */

#bio{
  border-style:groove;
  border-radius: 10px;
  border-color: #442255;
  padding-left: 5%;
  padding-right: 5%;
  height: 45%;
  overflow: scroll;
  scroll-behavior: auto;
  text-align: center;
  
}

#bioHeader{
  text-align: center;
  background-color: rgba(37, 32, 32, 0.897);
  border-style: solid;
  border-radius: 15px;
  padding: 5px;
}

#bioDescription{
  background-color: rgba(37, 32, 32, 0.897);
  border-radius: 15px;
  padding: 5px;
  border-style: solid;
}

ul#memberList{
  padding-left: 0;
}

#memberList img{
  width: 25%;
}

.collumRow{
  display: flex;
  width: 100%;
  height: 100%;
  margin: 5px;
}

@media (max-width:800px) {
  .collumRow{
    flex-direction: row;
  }
}

#memberList{
  padding-left: 5%;
  display: flex;
  flex-direction: column;
  align-items: center;
  height:100%;
}

.member{
  display: flex;
  align-items: center;
  flex-direction: row;
  padding: 1px;
  
}

.memberPhoto{
  display: flex;
  flex-direction: column-reverse;
  align-items: center;
  width: 100%;
  flex-grow: 1;
}


.member p{
  font-size: 11pt;
  background-color: rgb(48, 38, 49);
  border-radius: 20px;
  padding: 5px;
  flex-grow:1;
}

li.member{
  border-style: solid;
  border-radius: 20px;
  border-width: 1px;
  list-style: none;
  background-color: rgba(37, 32, 32, 0.897);
  width: 100%;
  margin: 5px;
  padding: 10px;
  display: flex;
  flex-direction: column;
  flex: 1 1;

}

a.member{
  color: #FF00aa;
  display: flex;
  flex-direction: column;
  margin: 3px;
}

#imageLinks{
  display: flex;
  flex-direction: column;
  align-items: center;
}





/* Footer Related*/

@media (max-width: 700px){
  div.post{
    width: 60vw;
  }
  ul.member{
    margin: 0 0 0 0;
  }
  li.member{
    width: auto;
  }
  div#postarea{
    height: 60vh;
  }
  #bio{
    height: 50%;
  }
  div#mainview{
    padding: 30px;
    height: 130vh;
  }
}

@media (min-width: 1000px){
  div#postarea{
    position:absolute;
    left: 5%;
    right: 51%;
    top: 15%;
    height: 70%

  }
  #bio{
    position: absolute;
    right:5%;
    left: 51%;
    top:15%;
    height:70%;
  }
  #imageLinks{
    position: absolute;
    display: flex;
    flex-direction: column;
    align-items: center;
    bottom: 10px;
    left: 30vw;
    right: 30vw;
  }
  canvas{
    position: fixed;
    bottom: 0;
    top: 0;
    left: 0;
    right: 0;
  }
}