@charset "UTF-8";
article, aside, footer, main, nav, section {
  display: block;
}

html, body, h1, h2, h3, ul, p, a, article, aside, footer, header, main, nav, nav li, section, #fullsize, #homeArticle {
  padding: 0px;
  margin: 0px;
}

body {
  height: 100%;
  width: 960px;
  margin-left: auto;
  margin-right: auto;
  background-color: #f0f0f0;
  font-family: 'Gill Sans', 'Gill Sans MT', 'Calibri', 'Trebuchet MS', sans-serif
}

h2 {
  text-align: center;
  font-size: 25px;
  margin: 21px 0px 18px;
}

h3 {
  text-align: center;
  color: #ffffff;
  font-size: 18px;
}

li {
  display: inline;
  margin: 0px 25px 0px 25px;
  font-size: 30px;
  font-variant: small-caps;
}

section {
  background-color: #ffffff;
  padding: 2px 0px 40px;
  height: 704px;
  margin: 28px;
}

article {
  height: auto;
  width: auto;
  max-width: 640px;
  padding: 18px;
  margin: 24px auto 0px auto;
  background-color: #e6e6e6;
}

p {
  height: auto;
  width: auto;
  max-width: 640px;
  padding: 14px;
  margin: 0px auto 0px auto;
  text-align: center;
  background-color: #e6e6e6;
}

main {
  width: 798px;
  float: left;
  background-color: #e6e6f8;
}

a:-webkit-any-link {
  color: #f0f0f0;
  cursor: pointer;
}

#pageIcon {
  float: left;
  margin: 4px;
  margin-right: -64px;
}

/* Heading */
#logo {
  float: left;
}

.banner {
  background-color: #7e7cfa;
  margin-top: 4px;
  padding: 20px 0px 20px 18px;
}

h1 {
  color: #000000;
  font-size: 80px;
  padding-left: 18px;
  display: inline-block;
  font-weight: bold;
}

/* Navigation bar */
nav {
  background-color: #1d1d1d;
  height: 59px;
  width: 960px;
  text-align: center; 
}

nav li {
  display: inline;
  position: relative;
  overflow: hidden;
  margin: 10px 18px 13px 18px;
}

nav li a {
  background-color: #1d1d1d;
  text-decoration: none;
  display: fill;
  padding: 17.7px 10px 12.3px 10px;
  font-size:24px;
  font-weight: bold;
  color: white;
}

ul {
  list-style: none;
  padding-top: 12px;
}

/* Sidebar */
h4 {
  text-align: center;
  font-size: 20px;
  text-decoration: underline;
}

div.sidebar img {
  border: 8px solid#1d1d1d;
  margin: 24px 0px 0px 16.5px;
  padding: 14px;
  background-color: #1d1d1d;
}

div.sidebar img:hover {
  border: 8px solid #7e7cff;
}

aside {
background-color: #cfcece;
width: 161px;
height: 760px;
display: inline-block;
}

/* Homepage */
#welcome {
  float: right;
}

div.gallery a:-webkit-any-link {
  color: #000000;
  cursor: pointer;
  text-decoration: none;
}

div.gallery {
  margin: 16px 0px 18px 27px;
  border: 6px solid #b9b9b9;
  display: inline-block;
  width: 260px;
}

div.gallery:hover {
  border: 6px solid #7e7cff;
}

div.gallery img {
  margin: auto;
  margin-top: 10px;
  display: block;
}

#homeArticle {
  background-color: #e0e0e0;
  margin: 32px 0px 0px 46px;
  float: left;
  padding: 6px;
  width: 620px;
}

#CurrentIndex {
  background-color: #22228b;
}

#fullsize {
  width: 960px;
  height: 760px;
  display: inline-block;
}

/* About Page */
#CurrentAbout {
  background-color: #1e8574;
}

#darkh3{
  color: #000000;
}

.accordion {
  background-color: #bcdbd6;
  color: #000000;
  cursor: pointer;
  padding: 18px;
  width: 80%;
  font-weight: bold;
  margin: 12px 0px 12px 59px;
  text-align: center;
  transition: 0.4s;
}

.active, .accordion:hover {
  background-color: #7e7cff;
}

.panel {
  padding-right: 18px;
  background-color: #e6e6e6;
  max-height: 0;
  overflow: hidden;
  transition: 0.2s ease-out;
}

/* Portfolio */
* {box-sizing:border-box}

.slideshow-container {
  max-width: 520px;
  position: relative;
  margin: auto;
  height: 580px;
}

.mySlides {
  display: none;
}

.prev, .next {
  cursor: pointer;
  position: absolute;
  top: 50%;
  width: auto;
  margin-top: -22px;
  background-color: #b9b9b9;
  color: #000000;
  font-weight: bold;
  font-size: 24px;
  transition: 0.6s ease;
  border-radius: 0 3px 3px 0;
  user-select: none;
}

.next {
  right: 0;
  border-radius: 3px 0 0 3px;
}

.dot {
  cursor: pointer;
  height: 15px;
  width: 15px;
  margin-right: 4px;
  background-color: #6c3691;
  border-radius: 100%;
  display: inline-block;
  transition: 0.6s ease;
}

.active, .fragment:hover {
  background-color: #7e7cff;
}

.fade {
  -webkit-animation-name: fade;
  -webkit-animation-duration: 1.5s;
  animation-name: fade;
  animation-duration: 1.5s;
}

@-webkit-keyframes fade {
  from {opacity: .4}
  to {opacity: 1}
}

@keyframes fade {
  from {opacity: .4}
  to {opacity: 1}
}

#CurrentPort {
  background-color: #9231d3;
}

/* Contact form */
div input {
  width: 300px;
  margin-top: 56px;
  padding: 10px;
}

div textarea {
  width: 478px;
  height: 144px;
  margin: 54px 20px;
  padding: 10px;
}

div label {
  margin: 54px 0px 0px 18px;
  width: 196px;
  padding: 14px;
  display: inline-block;
  font-weight: bold;
  font-size: medium;
}

#messenger {
  width: 176px;
}

#submit {
  background-color: #960d3a;
  color: white;
  margin-left: 220px;
  font-weight: bold;
  font-size: 22px;
  cursor: pointer;
}

#submit:hover {
  background-color: #7e7cff;
}

#CurrentContact {
  background-color: #c40d53;
}

/* Footer */
footer {
    bottom: 0px;  
    color: #ffffff;
    width: 960px;
    height: 44px;
    background-color: #1d1d1d;
    display: inline-block;
}

#copyright {
  text-align: left;
  background: transparent;
  margin-left: 16px;
}

/* Links */
.link a{
  display: block;
  background: #f09f7a;
  color: #000000;
  height: 66px;
  width: 600px;
  margin: 18px auto 18px auto;
  text-align: left;
  text-decoration: none;
}

.link a:hover {
  background-color: #7e7cff;
}

.link h2{
  display: inline-block;
  padding-left: 14px;
}

.link div.linkdesc{
  display: inline-block;
  padding-left: 14px;
}

#CurrentLinks {
  background-color: #df5718;
}

.calculator article {
  padding-left: 158px;
  margin-right: auto;
}

.calculator table{
  background-color: silver;
  border-color: black;
  }
  
  .calculator h1 {
  font-weight: bold;
  font-size: 34px;
  color: black;
  }
  
  #txtDisplay {
  height: 32px;
  margin: 4px;
  padding: 8px;
  font-size: 16px;
  background-color: LightCyan;
  }
  
  .calculator button {
  height: 58px;
  width: 60px;
  margin: 4px;
  border-radius: 8px;
  border-color: silver;
  color: orange;
  background-color: black;
  font-size: 24px;
  }