@font-face {
    font-family: 'JunebugSans'; 
    src: url('/JunebugSans-Regular.ttf'); /*URL to font*/
}
@font-face {
    font-family: 'JunebugFine';
    src: url('/JunebugFine-Regular.ttf'); /*URL to font*/
}

body {
    background: #829A32;
    background-image: url('img/bgopt1.png');
    background-repeat: no-repeat;
    background-size: cover;
    width: auto;
    height: 120vh;
    padding-top: 5em;
}

a {
  font-family: 'JunebugSans';
  color:#91B241;
}

p {
    font-family: 'Tahoma, sans-serif';
}

pre {
    font-family: 'Tahoma, sans-serif';
}

h1 {
    font-family: 'JunebugSans';
    text-align: left;
}

h2,
h3,
h4,
h5,
h6 {
    font-family: 'JunebugSans';
    text-align: center;
}

hr {
border:1.5px dashed#C8783E;
margin: 0px;
padding: 0px;
}

.vl {
  border-left: 3px dashed #C8783E;
  height: auto;
  left: 50%;
  margin-left: -2px;
  top: 0;
}

.vl2 {
  border-left: 3px dashed #C8783E;
  height: auto;
  left: 50%;
  margin-left: -2px;
  top: 0;
}

.page {
    display: grid;
    grid-template-columns: [left] 25% [right] auto;
    grid-template-rows: [header] 20vw [main] 1fr [footer] auto;
    grid-template-areas:
        "header header"
        "nav content"
        "footer footer";
    grid-gap: 1em;
    width: 55vw;
    height: 200vh;
    margin: auto;
    border: 8px dashed #91B241;
    box-shadow: 0 0 0 4px #FEFCF8;
    padding: 1em;
    border-radius: 15px;
    background: #FEFCF8;
    background-image: url('img/textureboxcolor6.png');
    background-repeat: repeat;
}

.header {
    font-family: 'JunebugSans';
    grid-area: "header";
    grid-column: left / span 2;
    grid-row: header;
    background: #FEFCF8;
    background-image: url('img/banner1.gif');
    background-repeat: no-repeat;
    background-size: cover;
    color: #FEFCF8;
    border: 6px solid #C8783E;
    padding: 1em;
    border-radius: 15px 15px 0px 0px;
    text-align: left;
    text-shadow: -1px -1px 0 #C8783E, 2px -1px 0 #C8783E, 0px 2px 0 #C8783E, 2px 2px 0 #C8783E;
}

.header2 {
    font-family: 'JunebugSans';
    grid-area: "header";
    grid-column: left / span 2;
    grid-row: header;
    background: #FEFCF8;
    background-image: url('img/Banner2.png');
    background-repeat: no-repeat;
    background-size: cover;
    color: #FEFCF8;
    border: 6px solid #C8783E;
    padding: 1em;
    border-radius: 15px 15px 0px 0px;
    text-align: left;
    text-shadow: -1px -1px 0 #C8783E, 2px -1px 0 #C8783E, 0px 2px 0 #C8783E, 2px 2px 0 #C8783E;
}

.content {
    overflow-y: scroll;
    grid-area: "content";
    grid-column: right;
    grid-row: main;
    background: #FEFCF8;
    color: #91B241;
    border: 6px solid #C8783E;
    padding: 1em;
}

.content::-webkit-scrollbar {
    width: 8px;
        }

        .content::-webkit-scrollbar-track {
        background-color: #FEFCF8;
        -webkit-border-radius: 10px;
        border-radius: 15px;
        border: 1px solid #C8783E;
        }

        .content::-webkit-scrollbar-thumb {
        -webkit-border-radius: 10px;
        border-radius: 10px;
        background: #FEFCF8;
        border: 1px solid #C8783E;
        }

.nav {
    grid-area: "nav";
    grid-column: left;
    grid-row: main;
    background: #FEFCF8;
    background-image: url('img/textureboxcolor6.png');
    background-repeat: repeat;
    border-radius: 15px;
}

.footer {
    grid-area: "footer";
    grid-column: left / span 2;
    grid-row: footer;
    background: #FEFCF8;
    color: #FEFCF8;
    border: 6px solid #C8783E;
    padding: 0.5em;
    border-radius: 0px 0px 15px 15px;
    background-image: url('img/footerimg.png'); 
    height: auto;
    display: block;
    background-repeat:no-repeat;
    text-shadow: -1px -1px 0 #FEFCF8, 2px -1px 0 #FEFCF8, 0px 2px 0 #FEFCF8, 2px 2px 0 #FEFCF8;
}

.footer2 {
    grid-area: "footer";
    grid-column: left / span 2;
    grid-row: footer;
    background: #C8783E;
    color: #FEFCF8;
    border: 6px solid #C8783E;
    padding: 0.5em;
    border-radius: 0px 0px 15px 15px;
    background-image: url('img/Banner2.png'); 
    height: auto;
    display: block;
    background-repeat:no-repeat;
    text-shadow: -1px -1px 0 #FEFCF8, 2px -1px 0 #FEFCF8, 0px 2px 0 #FEFCF8, 2px 2px 0 #FEFCF8;
}

.columns {
    display: flex;
    flex-direction: row;
}

.column-half {
    width:50%;
    height: auto;
}

.portfoliotitle {
  width: 90%;
  background: #FEFCF8(50, 50, 50, 0.6);
  color: #C8783E;
  border: 6px dashed #C8783E;
  border-radius: 15px 15px 0px 0px;
  text-align: center;
  margin: 1em;
}

.portfolio {
  width: 100%;
  height: auto;
  margin: -5px;
}

.updatebox {
  width: 90%;
  background: #FEFCF8(50, 50, 50, 0.6);
  border: 6px dashed #C8783E;
  border-radius: 15px 15px 15px 15px;
  text-align: center;
  margin: 1em;
}

.navcontainer1 {
    margin: 0.5em;
    height: fit-content;
    background-color:#91B241;
    background-image: url('img/textureboxcolor1.png');
    background-repeat: repeat;
    border-radius: 25px;
    padding: 0.5em;
    color: #FEFCF8;
    line-height: 0.2em;
}

.navcontainer2 {
    margin: 0.5em;
    height: fit-content;
    background-color:#A574C4;
    background-image: url('img/textureboxcolor3.png');
    background-repeat: repeat;
    border-radius: 25px;
    padding: 0.5em;
    color: #FEFCF8;
    line-height: 0.2em;
}

.navcontainer3 {
    margin: 0.5em;
    height: fit-content;
    background-color:#F0703C;
    background-image: url('img/textureboxcolor2.png');
    background-repeat: repeat;
    border-radius: 25px;
    padding: 0.5em;
    color: #FEFCF8;
    line-height: 0.2em;
}

.navcontainer4 {
    margin: 0.5em;
    height: fit-content;
    background-color:#F1AC2F;
    background-image: url('img/textureboxcolor4.png');
    background-repeat: repeat;
    border-radius: 25px;
    padding: 0.5em;
    color: #FEFCF8;
    line-height: 0.2em;
}


.navlinks {
    margin: auto;
    height: fit-content;
    background-color: #FEFCF8;
    border-radius: 15px;
    border: dashed 2px #C8783E;
    box-shadow: 0 0 0 4px #FEFCF8;
    color: #91B241;
    padding: 0px 0.3em 0px 0.3em;
    line-height: 1em;
}

.favis {
    width: 20px;
    height: auto;
    padding: 1px;
}

.stickers {
    width: 150px;
    height: auto;
    padding: 1px;
}

.buttons {
    width: 100px;
    height: auto;
    padding: 1px;
}

.sticker1 {
    position: absolute;
    top: 1em;
    left: 15em;
    width: 15px;
    height: auto;
}

.sticker2 {
    position: absolute;
    bottom: -62em;
    right: 23em;
    width: 15px;
    height: auto;
}

.sticker3 {
    position: absolute;
    top: 1em;
    right: 15em;
    width: 15px;
    height: auto;
}

.sticker4 {
    position: absolute;
    bottom: -1100px;
    left: 400px;
    width: 15px;
    height: auto;
}

@media (max-width: 800px) {
    .page {
        display:block;
    }
}