/* 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." */


body {
  background-color: #f0eeeb;
  font-family: Georgia;
  font-size: 13px;
  cursor: url(https://cur.cursors-4u.net/toons/too-4/too384.cur), auto;
  background-image: url('background.gif');

}

h1 {
  color: #313131;
  font-family: Georgia;
  text-align: center;
  margin-top: -10px;
  margin-bottom: 2px;
  font-size: 35px;
}

h2 {
  color: #313131;
  font-family: Georgia;
  text-align: center;
  padding: 1px;
  font-size: 20px
}

h3 {
  color: #313131;
  font-family: Georgia;
  text-align: justify;
  padding: 3px;
  font-size: 13px
}

p {
  font-family: Georgia;
  color: #707070;
  font-size: 13px;
  letter-spacing: 0.04em;
  word-wrap: break-word;
  text-align: justify;
}

p.one {
  font-family: Georgia;
  color: #707070;
  font-size: 13px;
  letter-spacing: 0.04em;
  word-wrap: break-word;
  text-align: justify;
  margin: 25px;
}

p.two {
  font-family: Georgia;
  color: #707070;
  font-size: 10px;
  letter-spacing: 0.04em;
  word-wrap: break-word;
  text-align: center;
}

blockquote {
  font-family: Georgia;
  color: #6c899e;
  font-size: 13px;
  letter-spacing: 0.04em;
  word-wrap: break-word;
  text-align: justify;
  padding: 8px;
}

em {
  font-family: Georgia;
  color: #6c899e;
  font-size: 13px;
  letter-spacing: 0.04em;
  word-wrap: break-word;
  text-align: justify;
}

strong {
  font-family: Georgia;
  color: #6094b5;
  font-size: 13px;
  letter-spacing: 0.04em;
  word-wrap: break-word;
  text-align: justify;
}


ul {
  font-family: Georgia;
  color: #707070;
  font-size: 13px;
  letter-spacing: 0.04em;
  word-wrap: break-word;
  text-align: justify;
}

ol {
  font-family: Georgia;
  color: #707070;
  font-size: 13px;
  letter-spacing: 0.04em;
  word-wrap: break-word;
  text-align: justify;
}

img {
  display: block;
  width: 50%;
  padding: 8px;
  margin-left: auto;
  margin-right: auto;
  object-fit: contain;
}

img.one {
  display: block;
  margin: auto;
  object-fit: contain;
}

a.one {
  font-family: Georgia;
  color: #707070;
  font-size: 10px;
  letter-spacing: 0.04em;
  word-wrap: break-word;
  text-align: center;
}

a.one:link {color:#707070;}
a.one:visited {color:#1d1d1d;}
a.one:hover {background:#bdd7e0;}
a.one {text-decoration:none;}

a.two {
  font-family: Georgia;
  color: #707070;
  font-size: 13px;
  letter-spacing: 0.04em;
  word-wrap: break-word;
}

a.two:link {color:#707070;}
a.two:visited {color:#1d1d1d;}
a.two:hover {background:#bdd7e0;}
a.two {text-decoration:none;}

.wrapper {
  width: 1000px;
  margin: auto;
  padding: 8px;
}

/* Dotted border */
.dotted {
  border-top: 3px dotted #707070;
  width: 700px;
}

a.four:link, a.four:visited {
  background-color: #88b3c9;
  color: white;
  padding: 5px 11px;
  text-align: center;
  text-decoration: none;
  display: inline-block;
  font-family: Georgia;
  font-size: 11px;
  letter-spacing: 0.04em;
  word-wrap: break-word;
}

a.four:hover, a.four:active {
  background-color: #43302e;
  text-decoration: none;
}

.container {
  display: flex;
  justify-content:center;
}

.container div {
  margin: 4px;
  margin-top: 15px;
  margin-bottom: -10px;
  padding: 1px;
}

/* Style the tab */
.tab {
  overflow: hidden;
  border: none;
  background-color: #88b3c9;
}

.perm-tab { 
  background-color: #88b3c9; 
  border: none;
  overflow: hidden;
}


/* Style the buttons inside the tab */
.tab button {
  background-color: inherit;
  float: left;
  border: none;
  outline: none;
  cursor: pointer;
  padding: 10px 12px;
  transition: 0.3s;
  font-family: Georgia;
  font-size: 12px;
  letter-spacing: 0.04em;
  word-wrap: break-word;
  color: white;
  text-align: center;
  
}

/* Change background color of buttons on hover */
.tab button:hover {
  background-color: #43302e;
}

/* Create an active/current tablink class */
.tab button.active {
  background-color: #43302e;
}

/* Style the tab content */
.tabcontent {
  display: none;
  padding: 6px 12px;
  border: none;
  border-top: none;
}

footer {
    text-align: center;
    padding: 10px 0;
    font-family: Georgia;
    font-size: 10px;
    color: #707070;
    letter-spacing: 0.04em;
}

* {
  box-sizing: border-box;
}

.row {
  display: flex;
}

/* Create two equal columns that sits next to each other */
.column {
  margin: 8px;
  padding: 30px;
  border: 2px dotted;
  height: 500px;
}