@charset "utf-8";

/*
    Author: Kumie
    Date: 7/29/2025

    Filename: home.css
    General stylesheet for my site's homepage

*/

body {
  display: block;
  height: 100%;
  margin: 0;
  padding: 5px;
  background-color: rgb(244, 162, 97);  
  color: rgb(38, 70, 83);
}

h1 {
  text-align: center;
  color: rgb(231, 111, 81);
  background-color: rgb(233, 196, 106);
  border: 3px solid rgb(231, 111, 81);
  display: block;
  margin: 10px auto;
  padding: 10px 0 10px 0;
  width: 200px;
}

a {
  text-decoration: none;
  color: rgb(38, 70, 83);
  background-color: rgb(42, 157, 143);
  padding: 10px;
  border: 2px solid rgb(233, 196, 106);  
}

a:hover {
  background-color: rgb(38, 70, 83);
  color: rgb(42, 157, 143);
  margin-bottom: 0;
}


p {
  display: block;
  margin: auto 5px 10px 5px; 
  padding: 10px;
}

#shortStories, #longTerm, #reviews, #upLong, #upShort, #upRev {
  display: none;  
}

button:hover {
  cursor: pointer;
}

#downLong, #downShort, #downRev {
  display: inline-block;  
}

#shortStories, #longTerm, #reviews {
  margin: auto;
  margin-top: 0;
  margin-bottom: 10px;
  width: 80%;  
  background-color: rgb(233, 196, 106);
  padding-bottom: 10px;
}

button {
  display: block;
  background-color: rgb(231, 111, 81);
  color: rgb(38, 70, 83);
  margin-bottom: 0;
  margin-left: 5px;
  border-radius: 10px 10px 0 0;
  padding: 5px;
  font-size: 12px;
  border: 3px solid rgb(233, 196, 106);  
}

button h2 {
  padding: 0 5px 0 5px;  
}

button:hover {
  color: rgb(231, 111, 81);
  background-color: rgb(38, 70, 83);
}

#misc {
  background-color: rgb(233, 196, 106);  
}

.intro {
  border: 3px solid rgb(233, 196, 106);  
  margin-top: 0;
  margin-bottom: 10px;
  padding: 10px;
  background-color: rgb(233, 196, 106);
}

#longTerm h3 {
  width: fit-content;
  text-decoration: none;
  color: rgb(38, 70, 83);
  background-color: rgb(42, 157, 143);
  padding: 10px; 
}