* {
  box-sizing: border-box;
}

header {
  color: white;
  background-color: rgb(30 118 110);
  text-align: center;
  padding: 30px;
  /* padding-bottom: 10px; */
  /* padding-top: 5px;
  margin-top: 5px; */
}

body {
  font-family: "Times New Roman", Times, serif;
  font-size: larger;
  padding: 20px;
  /* width: 800px;
  margin: 0 auto; */
  /* padding: 0px 20px 20px 20px; */
}

.intro {
  text-align: center;
}

/* Create two unequal columns that floats next to each other */
/* Left column */
.leftcolumn {
  float: left;
  width: 70%;
}

/* Right column */
.rightcolumn {
  float: right;
  width: 30%;
  padding-left: 20px;
}

/* Card effect */
.card {
  background-color: white;
  /* padding: 20px; */
  margin-top: 20px;
}

/* Clear floats after the columns */
.row:after {
  content: "";
  display: table;
  clear: both;
}

blockquote {
  margin: 0;
}

blockquote p {
  padding: 15px;
  background: #eee;
  border-radius: 5px;
}

blockquote p::before {
  content: '\201C';
}

blockquote p::after {
  content: '\201D';
}

.standard-pic {
  display: block;
  margin: 0 auto;
  width: 50%;
  height: auto;
}

.screenshot {
  display: block;
  margin: 0 auto;
  width: 100%;
  height: 100%;
}

.small-screenshot {
  display: block;
  margin-left: auto;
  margin-right: auto;
  width: 70%;
  height: 50%;
}



.entry {
  text-align: center;
  border: thick solid #D96716;
  padding: 0px 20px 20px 20px;
  margin-top: 50px;
}

.TIL,
h3 {
  text-align: center;
}

.TIL {
  text-align: left;
  border: thick solid #D96716;
  padding: 0px 20px 20px 20px;
  margin-top: 50px;
}

pre code {
  background-color: #eee;
  border: 1px solid #999;
  display: block;
  padding: 10px;
}

#buttons {
  justify-content: center;
  display: flex;
}

.announcement {
  text-align: center;
  border: thick solid darkblue;
  padding: 0px 20px 20px 20px;
  margin-top: 50px;
}

/* Searchbar */
input[type=text] {
   width: 30%;
   -webkit-transition: width 0.15s ease-in-out;
   transition: width 0.15s ease-in-out;
}

/* When the input field gets focus,
     change its width to 100% */
input[type=text]:focus {
  width: 70%;
}

/* Responsive layout - when the screen is less than 800px wide, make the two columns stack on top of each other instead of next to each other */
@media screen and (max-width: 800px) {
  .leftcolumn, .rightcolumn {
    width: 100%;
    padding: 0;
  }

  .TIL {
    text-align: left;
    width: 100%;
    border: thick solid #D96716;
    margin-top: 50px;
    font-size: small;
  }
}

.codespan {
  font-size:105%;
  background-color:#eee
}