@import 'pre.css';
@import 'nat/ui/mainaside.css';
@import 'nat/ui/navbar.css';


#main > .content > #swsEditor {
  display: grid;
  grid-template-rows: auto 1fr;
  gap: 2vh;
  border: solid 0.3vh white;
  border-radius: 3vh;
  padding: 3vh;
}
/* Posts */

#title {
  display: grid;
  grid-template-rows: auto 1fr;
  gap: 1vh;
  border: none;
}

input {
  display: grid;
  height: 8vh; width: 90%;
  box-sizing: border-box;
  justify-self: center; align-self: center;
  background-color: black;
  border: none;
  padding: 1vh;
  user-select: none;
}

input:focus {
  outline: none;
}

#storyContent {
  display: grid;
  grid-template-columns: 1fr 8vw;
  gap: 1vh;
}

textarea {
  display: grid;
  height: 100%; width: 90%;
  box-sizing: border-box;
  justify-self: center;
  background-color: black;
  padding: 1vh;
  border: none;
  user-select: none;
  resize: none;
}

textarea:focus {
  outline: none;
}

#formatOptions {
  display: grid;
  height: fit-content; width: 100%;
  border-radius: 3vh;
  background-color: white;
  justify-self: center; align-self: center;
  padding: 1vh 0 1vh 0;
}

#formatOptions > .content {
  height: fit-content; width: 95%;
  display: grid;
  grid-template-rows: 1fr 1fr;
  justify-self: center; align-self: center;
  gap: 1vh;
  overflow: scroll;
}

#formatOptions > .content > button {
  height: 100%;
  width: 100%;
  aspect-ratio: 1/1;
  background-color: black;
  border-radius: 2vh;
}

/* --Phones-- */

@media screen and (max-width: 1080px) and (orientation: portrait) {
  
  #storyContent {
  display: grid;
  grid-template-rows: 1fr 8vh;
  grid-template-columns: 1fr;
  gap: 1vh;
}

#formatOptions {
  height: 100%; width: fit-content;
  padding: 0 2vw 0 2vw;
}

#formatOptions > .content {
  height: 95%; width: fit-content;
  grid-template-columns: 1fr 1fr;
  grid-template-rows: 1fr;
}

}
  
/* Aside */

aside > .content {
  
}



/* Nav */

#navbar > .content {
  grid-template-columns: 1fr 1fr 1fr;
  background-color: transparent;
}

 
#navbar #user {
  height: 100%; width: 100%;
  background-color: red;
  align-self: center;
  justify-self: center;
}

/* --Phones-- */

@media screen and (max-width: 720px) and (orientation: portrait) {
  
#navbar #user {
  height: 100%; width: 50%;
  background-color: red;
  align-self: center;
  justify-self: center;
  border-radius: 15px;
}

}