/* CSS is how you can add style to your website, such as colors, fonts, and positioning of your
   HTML content. To learn how to do something, just try searching Google for questions like
   "how to change link color." */

* {
    box-sizing: border-box;
}

html,
body {
  color: black;
  font-family: "Comic Sans MS";
  background: #ffff76;
  background: linear-gradient(
    49deg,
    rgba(255, 255, 118, 1) 27%,
    rgba(230, 212, 80, 1) 51%
  );
  cursor: url("https://timetabby.neocities.org/kawaii-pointer.png"), auto;
  box-sizing: border-box;
}

@font-face {
  font-family: "Bakso Menu";
  src:
    url(https://timetabby.neocities.org/BaksoMenuRegular.woff2) format("woff2"),
    url(https://timetabby.neocities.org/BaksoMenuRegular.woff) format("woff");
  font-weight: normal;
  font-style: normal;
}

.main-container {
  display: flex;
  justify-content: center;
  min-height: 600px;
}

header {
  position: relative;
  display: flex;
  justify-content: space-between;

  width: 100%;
  padding: 5px;
}

h1 {
  background: #969696;
  background: linear-gradient(to bottom, #969696 0%, #230403 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;

  font-size: 35px;
  margin: 5px;
  padding: 10px;
  display: flex;
  align-items: center;

  font-family: "Bakso Menu";
  text-shadow: 3px 3px 2px rgba(0, 0, 0, 0.5);
  -webkit-text-stroke: 1px yellow;
}

nav {
  display: inline-block;
  margin: 5px;
  padding: 0;
  text-align: center;
}

nav a {
  color: white;
  text-decoration: underline;
}

.sidebar {
  display: flex;
  flex-direction: column;
  border: 1px solid #000;
  height: 75vh;
  min-width: 200px;
  padding: 7px;
  margin: 5px;
  box-shadow: 5px 5px 2px rgba(0, 0, 0, 0.5);
}

.menu {
  margin-top: 15px;
}

.menu > li {
  display: inline-block;
  list-style: none;

  border: 3px solid #474747;
  padding: 5px;
  margin: 5px;
  background: linear-gradient(
    180deg,
    rgba(219, 219, 219, 1) 0%,
    rgba(54, 54, 54, 1) 59%
  );
  box-shadow: 3px 3px 2px rgba(0, 0, 0, 0.5);
}

a {
  cursor: url(kawaii-pointer.png), auto;
}

main {
  flex: 1;
}

.main-body {
  border: solid 1px #000;
  margin: 5px;
  width: 100vw;
  padding: 5px;
  box-shadow: 5px 5px 2px rgba(0, 0, 0, 0.5);
}

/* Mobile Styles */
@media only screen and (max-width: 400px) {
}

/* Tablet Styles */
@media only screen and (min-width: 401px) and (max-width: 960px) {
}

/* Desktop Styles */
@media only screen and (min-width: 961px) {
}