/** index.css **/
/*  _______________________
 / \                       \
|   |                      |
 \_ |                      |
    |    How to create     |
    |    a domain name     |     HowToCreateADomain
    |    on cloudflare     |
    |                      |
    | _____________________|__
    |  \                      \
    |  /                      /
    \_/_____________________ /
*/
html {
  font-size: 14px;
}

h3 {
  margin: 2rem 0 0.5rem 0;
}

li {
  margin-bottom: 0.5rem;
}

pre {
  background: rgb(250, 250, 250);
  border: solid 1px rgb(240, 240, 240);
  font-size: 0.85rem;
  padding: 1rem;
}

.whiteBox {
  width: 100%;
  text-align: center;
  font-size: 1rem;
  padding: 0.5rem;
}

.directoryBox {
  background: white;
  border: var(--border);
  margin-top: 2rem;
  display: flex;
  justify-content: center;
  padding: 0.5rem;
  font-size: 0.8rem;
}

.titleContainer {
  justify-content: flex-start;
  margin-bottom: 1rem;
  padding: 0;
}

.titleLeft {
}

.titleMiddle {
  display: block;
  line-height: 1.5rem;
}

.titleRight {
  text-align: right;
}

.titleImg {
  height: 64px;
  margin-right: 1rem;
}

.titleText {
  font-size: 1.8rem;
}

.box {
  border: solid 1px rgb(200, 200, 200);
}

.noA {
  border: none;
  margin: 0;
  padding: 0;
  text-decoration: none;
}

.noA:hover {
  border: none;
  margin: 0;
  padding: 0;
}

.aImg {
  border-radius: 0;
  border: solid 1px rgb(200, 200, 200);
  box-shadow: 3px 3px 3px transparent;
  margin: 1rem;
  padding: 0;
  transition-duration: 0.25s;
  transition-property: box-shadow;
  transition-timing-function: ease-in-out;
  width: 500px;
}

.aImg:hover {
  border: solid 1px rgb(200, 200, 200);
  box-shadow: 3px 3px 3px rgba(100, 100, 100, 0.5);
}

.emp {
  font-size: 1.3rem;
  display: inline-block;
  padding: 0px 0.3rem 0 0.3rem;
}


/* detect narrow */
@media screen and (max-width: 600px) {
  .titleImg {height: auto; width: 64px; }
}