@import url("https://fonts.googleapis.com/css2?family=Lato:wght@300;400;700&display=swap");
@import url('https://fonts.googleapis.com/css2?family=Quicksand:wght@300;400;700&display=swap');

body {
  padding: 0;
  margin: 0;
  background-color: #777;
}

p {
  padding: 0;
  margin: 0;
}

#title {
  background-color: #333;
  filter: drop-shadow(0px 0px 3px black);
  transition: 1000ms;
}

#title:hover {
  padding: 5px 0 5px 0;
}

#name {
  transition: 1000ms;
  color: #dff;
  font-family: Quicksand, Helvetica, Arial, sans-serif;
  font-weight: bold;
  padding: 20px 10px 20px 10px;
  font-size: 21pt;
}

#name:hover {
  font-size: 22pt;
}

#navbar {
  background-color: #555;
  overflow: hidden;
}

#navbar ul {
  list-style-type: none;
  padding: 0px 0px 0px 10px;
  margin: 0px;
}

#navbar li {
  display: inline;
  float: left;
}

#navbar a {
  transition: 500ms;
  display: block;
  padding: 11px;
  background-color: #444;
  color: white;
  font-family: Quicksand, Helvetica, Arial, sans-serif;
  text-decoration: none;
  border-style: none none none solid;
  border-width: 1px;
  border-color: #222;
}

#navbar li:last-child {
  border-color: #222;
  border-style: none solid none none;
  border-width: 1px;
}

#navbar a:hover {
  background-color: rgb(75, 75, 75);
  color: #eff;
  padding: 11px 14px 11px 14px;
}

.main {
  background-color: #aaa;
  margin: 10px;
  padding: 10px;
  border-radius: 5px;
  font-family: Quicksand, Arial, Helvetica, sans-serif;
  font-size: 14pt;
}

.main a {
  color: #255;
  font-style: italic;
  transition:500ms;
}

.main a:hover {
  color: #288;
  filter:drop-shadow(0px 0px 1px darkcyan);
}

.main p {
  margin: 0;
  padding: 0;
}

.listmain {
  background-image:
    linear-gradient(to right, rgba(136,136,136, 1), rgba(136,136,136, 0.73)),
    url('https://www.tpm.com/wp-content/uploads/2021/07/person-welding.jpg');
  background-size:cover;
  margin: 10px;
  padding: 10px;
  border-radius: 5px;
  font-family: Quicksand, Arial, Helvetica, sans-serif;
  font-size: 14pt;
}

.listmain a {
  color: #255;
  font-style: italic;
  transition:500ms;
}

.listmain a:hover {
  color: #288;
  filter:drop-shadow(0px 0px 1px white);
}

.listmain p {
  margin: 0;
  padding: 0;
}

.heading {
  font-size: 20pt;
  text-align: center;
  font-weight: bold;
  border-style: none none solid none;
  border-width: 1px;
  border-color: #888;
  background-color:rgba(170,190,190,.25);
}

.link-list {
  font-size: 18pt;
  list-style-type: "- ";
}

.link-list a:hover {
  
  filter:drop-shadow(0px 0px 1px #4aa);
}

.processtitle {
  text-align:center;
  font-size:30pt;
  background-color:#bbb;
  border-radius:15px;
  font-weight:bold;
}

.processmain {
  background-color: #aaa;
  margin: 10px;
  padding: 10px;
  border-radius: 5px;
  font-family: Quicksand, Arial, Helvetica, sans-serif;
  font-size: 24pt;
  text-align:center;
}

.processmain a {
  color: #255;
  font-style: italic;
}

.processmain p {
  margin: 0;
  padding: 0;
}

.processimg {
  display:block;
  width:100%;
  margin-left:auto;
  margin-right:auto;
}

.processimg img {
  display:inline-block;
  margin-left:auto;
  margin-right:auto;
  height:10vw;
  margin-top:5px;
  border-radius:15px;
}

.yt {
  width:1000px;
}

.processmain iframe {
  float:left;
  padding:5px;
  border-radius:20px;
}

.content {
  overflow: hidden;
  background-color:#bbb;
  border-radius: 15px;
  margin:10px;
}

.processtext {
  text-align:center;
  padding:10px;
  display:block;
  margin-top:80px;
  background-color:#aaa;
  margin-left:20px;
}

#return {
  font-size:15pt;
}