@font-face {
  font-family: 'Ubuntumono_regular';
  src: url('/Assets/webfontkit/ubuntumono-regular-webfont.woff') format('woff');
}

@font-face {
  font-family: 'ThinFourDownThreeCrazyPink-Regular';
  src: url('/Assets/webfontkit5/thinfourdownthreecrazypink-regular-webfont.woff2') format('woff2');
}

@font-face {
  font-family: 'zig_____';
  src: url('/Assets/webfontkit3/zig_____-webfont.woff') format('woff');
}

@font-face {
  font-family: 'punk_typewriter-demo';
  src: url('/Assets/webfontkit53/punk_typewriter-webfont.woff') format('woff');
}


body {
  padding: 0;
  margin: 0;
  background: #fefefe;
  font-size: 1em;
  color: black;
  font-family: "Times New Roman", serif;
}


h1 {
  font-family: 'ThinFourDownThreeCrazyPink-Regular', serif;
}

h2 {
  font-family: 'zig_____';
}

h3 {
  font-family: 'punk_typewriter-demo';
}

h4, h5, .link {
  font-family: "Bookman Oldstyle", serif;
}

p {
  font-family: 'Ubuntumono_regular';
}


.wrapper {
  background: none;
  width: 100%;
}

.wrapper-2 {
  margin: 0 auto;
}


.header, .footer {
  background: url("/img/pexels-matthew-montrone-1179225_cropsmall1_verysmall.jpg");
  background-size: cover;
  border-color: #22aab8;
  margin: 0;
}

.footer {
  border: 0;
}


.sidebar-left, .sidebar-right {
  width: 16%;
}

.sidebar-left {
  margin-left: 1%;
}

.sidebar-right {
  margin-left: 1%;
}


.main { 
  width: 60%;
  margin-left: 18%;
  border-radius: 5px;
  border: 10px solid transparent;
  border-image: url("/thingmajing.jpg") 30 round;
  padding: 15px;
}


.box {
  border-top: 7px solid #22aab8;
  border-bottom: 7px solid #22aab8;
  padding: 0;
  margin: 0.75em 0 1.25em 0;
  border-radius: 5px 5px 0 0;
  background: #fff;
  color: #12282f;
}

.inner {
  padding: 0 10px;
}


.box h1, .box h2, .box h3, .box h4, .box h5, .box h6 {
  background: #22aab8;
  padding: 0.25em 0.6em 0.15em 0.6em;
  margin: 0;
}


.titlehuge { 
  color: #3C7322;
  transition: color 0.3s;
}

.titlehuge:hover {
  color: #63CF30;
}

.titlehuge2 { 
  color: #35ff26;
  transition: color 0.3s;
}

.titlehuge2:hover {
  color: #35ff26;
}


@keyframes scrollUpDown {
  0% { transform: translateY(0); }
  100% { transform: translateY(-50%); }
}

@keyframes scrollDownImgs {
  0% { transform: translateY(-100%); }
  100% { transform: translateY(100%); }
}


@media (orientation: portrait) {
  .main, .sidebar-left, .sidebar-right {
    position: relative;
    width: 100%;
    margin: 0 auto;
  }
 
}