/*
  How to make a comment uwu
*/

html {
  background-image: url("/media/floral-background.jpg");
  background-attachment: fixed;
  height: 100%;
  display: flex;
  place-items: center;
}

body {
  background-color: #cbae9c;
  background-image: url("/media/new_papertexture.jpg");/*linear-gradient(to bottom, #441362, #e29f5c);*/
  background-size: cover;
  color: #673932;
  
  width: 60%;
  margin: auto;
  height:95%;
  
  overflow: scroll;
  
  padding: 10px;
  padding-top: 0;
  padding-bottom: 0;
  
  position: relative;

  font-family: Arial;

  display: flex;
  flex-direction: column;
  border-radius: 1%;

  box-shadow: 5px 10px 3px rgba(0,0,0,0.3);
}

body > p {
   background-color: #cbae9cb5;
}

body.contrast-mode {
  background-image: none;
}

body.contrast-mode > p {
   background: none;
}

@media (max-height: 500px) { /* Forces alternative scrolling style if window is too low resolution. */
  body {
    min-height: 100dvh;
    height: fit-content;
    padding-bottom: 2%;
  }
}

.contrast-mode {
  background-color: #18100a;
  color: white;
}

.title {
  margin-top: 0;
  margin-bottom: 10px;
  background-color: #d9c0bc;
  padding: 5px;
}

.top {
  padding-top: 10px;
}

.library{
  h2 {
      margin-left: 5%;
  }
}

h3 {
  font-weight: normal;
  text-decoration: underline;
}

.qa-box{
  width: 80%;
  min-height: 350px;
  height: fit-content;
  margin: auto;
  margin-right: 0px;
  background-color: #d9c0bc;
  display: flex;
  flex-direction: column;
  align-items: center;
}

/*
  QA colors:

  #76cd88 green

  #e07180 red

  #9db7de blue

  #e5da81 yellow
*/

.qa-entry{
  background-color: #e5da81;
  width: 90%;
  min-height: 100px;
  height: fit-content;
  margin: 10px;
  
  text-align: center;
}

.q-date{
  position: absolute;
  margin-left: 12px;
}

@media (orientation: portrait){
  body {
    width:90%;
  }

  .qa-box{
    width:100%;
    margin: auto;
  }

  .q-date{
    position: inherit;
  }
}

.topbar {
  background-color: #ffffff;
  margin: 0;
  padding: 5px;
  position: relative;
  right:10px;
  width: calc(100% + 10px);
  
  display: flex;
  gap: 5px;

  overflow-x: scroll;
}

.container {
  width: fit-content;
  max-width: 100%;
  background-color: #d9c0bc;
  padding: 5px;
  padding-top: 0;
  overflow: scroll;
}

.container2 {
  margin: 0 auto;
  margin-bottom: 2%;
  width: 89%;
  flex: 1;
  background-color: #d9c0bc;

  border: white;
  border-style: solid;
  border-width: 0.7vh;
  border-radius: 0.7vh;

  box-sizing: border-box;

  overflow: auto;
  
  p {
    margin: 5px 10px;
  };
}

.home-cont {
  padding: 10px;
  background-color: #d9c0bc;
}

.center{
  margin: auto;
  width: fit-content;
}

.access-cont{
  .qa-entry{
    color:black;
  }
  .blog-entry{
    color:black;
  }
  color: white;
  background-color: #352c2b;
}

.settings {
  background-color: #352c2b;
  padding: 10px;
  width: 90%;
  margin: auto;
  color: white;
  margin-top: 0px;
}

.settings > div {
  background-color: #1f0700;
  padding-left: 10px;
}

img {
  width: 50%;
  display: block;
  margin: auto;
}

.album-cover {
  width: 45vh;
  margin: auto;
  display: block;
  max-width: 100%;
}

a {
  display: flex;
  margin: 10px;
  color: #0066bf;
}
a:hover {
  color: #cff9ff;
}
a:active {
  color: #005e7e;
}

p > a {
  color: #0066bf;
  width: fit-content;;
  display: inline;
  margin: 0;
}

.open-blog {
  font-size:larger;
  text-decoration: underline;
}

.blog-entry {
  width: 80%;
  padding: 5px;
  margin: auto;
  margin-top: 1rem;
  text-align: center;
  border-radius: 1vw;
}

.content {
  margin: 10%;
  margin-top: 0;
  margin-bottom: 0;
}