:root {
  --white: #ffffff;
  --light-pink: #fff9f9;

  --lightest-gray: #fbfbfb;
  --light-gray: #dddddd;
  --gray: #888888;


  --light-orange: #ffeecc;
  --orange: #ffbb66;
}

body {
  font-family: sans-serif;
}

footer {
  background-color: var(--light-pink);
  font-size: 11pt;
  text-align: center;
  padding-top: 0.3em;
  padding-bottom: 0.3em;
}

.columns {
  display: flex;
  flex-wrap: wrap;
}

h1 {
  margin-top: 0;
}

footer {
  margin-top: 1rem;
}

.text-smaller {
  font-size-adjust: 0.45;
}

/* sidebar */
.sidebar ul {
  padding-left: 1em;
}

/* picks */
.pick-container {
  padding-bottom: 2em;
}

.pick .reason {
  white-space: pre-wrap;
  margin-left: 1em;
}

.pick .pick-submitter {
  margin-left: 1em;
}

.pick-url {
  overflow-wrap: anywhere;
}

.comments {
}

.comments form {
  border: 0.5em solid var(--light-gray);
}

.comment {
  background-color: var(--white);
  border: 0.5em solid var(--light-gray);
  border-bottom: 0;
  padding: 1em;
}

.comment-content {
  white-space: pre-wrap;
}

.comment-byline {
  font-size-adjust: 0.45;
  border-top: 2px dotted var(--gray);
  padding-top: 0.5em;
  margin-top: 0.5em;
}

/* submissions */
.submission-reason {
  white-space: pre-wrap;
}


/* forms */
fieldset {
  border: none;
  background-color: var(--lightest-gray);
}

legend {
  background-color: var(--white);
}

.sidebar input[type=text], .sidebar input[type=password], .sidebar input[type=url] {
  box-sizing: border-box;
  width: 100%;
}

textarea {
	box-sizing: border-box;
	width: 100%;
}


/* tables */

table {
  border-collapse: collapse;
}

thead tr {
  background-color: var(--light-gray);
}

th, td {
  padding: 0.4rem;
}

td {
  border: 1px dotted var(--gray);
}

/* announcements */
.announcement {
  background-color: var(--light-orange);
  border: 2px solid var(--orange);
  border-radius: 4px;
  padding: 1em;
  font-size-adjust: 0.4;
}

.announcement h2 {
  margin-top: 0;
  margin-bottom: 0;
}

.announcement p {
  margin-top: 0.4em;
  margin-bottom: 0;
}

/* responsive: full-size */

@media (min-width:768px) {
  body {
    padding: 1rem;
  }

  .main {
    width: 60%;
  }

  .sidebar {
    width: 20%;
    order: -1;
    margin-right: 1rem;
  }

  .youtube-embed {
    width: 560px;
    height: 315px;
  }
}