@import url('https://fonts.googleapis.com/css2?family=Sigmar&display=swap');

* {box-sizing: border-box}
body {
    font-family: "Lato", sans-serif;
    background-color: darkgrey;
    font-family: Arial, Helvetica, sans-serif;
}

nav {
    border: dotted;
    color: rgb(108, 109, 107);
    font-weight: bolder;
    text-align: center;
    text-transform: uppercase;
    padding: 1px;
}
p.info {
  text-align: center;
}
.about_name {
    color: rgb(63, 64, 64);
    font-family: "Sigmar", serif;
    text-align: center;
}

.about_pic {
    display: block;
    margin-left: auto;
    margin-right: auto;
}

nav li {
    list-style-type: none;
    display: inline;
    padding: 25px;
}

div.container {
    padding: 1px;
    margin: 0 auto;
    width: 960px;
}
div.container2 {
    padding: 1px;
    margin: 0 auto;
    width: 960px;
}

ul.about {
    text-align: left;
    list-style-type: none;
}
#nav:hover {
  color: rgb(98, 223, 237);
}
h1 {
    color: rgb(63, 64, 64);
    text-align: center;
    text-decoration: solid;
    font-family: "Sigmar", serif;
    font-weight: 400;
    font-style: normal;
    border: 15px;
}
/* Style the tab */
.tab {
  float: left;
  /*border: 1px solid #ccc;*/
  background-color: darkgray;
  width: 22%;
  height: 300px;
}

/* Style the buttons inside the tab */
.tab button {
  display: block;
  background-color: inherit;
  color: black;
  padding: 22px 16px;
  width: 90%;
  border: none;
  outline: none;
  text-align: left;
  cursor: pointer;
  font-size: 17px;
}

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

/* Create an active/current "tab button" class */
.tab button.active {
  background-color: #ccc;
}

/* Style the tab content */
.tabcontent {
  float: right;
  padding: 0px 12px;
  border: 1px none #ccc;
  width: 70%;
  border-left: none;
  height: 300px;
  display: none;
}

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