/* Technical */

* {
    padding: 0;
    margin: 0;
}

html {
    scroll-behavior: smooth;
    font-size: 16px;
}

h1, h2, h3, h4, h5, h6 {
    letter-spacing: 2px;
}

/* Variables */
:root {
    --backgroundInner: #080818;
    --backgroundOuter: #090a0F;
    --fontColor: #F6F5F0;
    --menuLink: #F6F5F0;
    --menuBackground: rgba(8, 8, 23, .25);
    --modalBackground: rgba(64, 64, 64, .75);
    --buttonBackground: #080818;
    --buttonBackgroundHover: #F6F5F0;
    --buttonFont: #F6F5F0;
    --buttonFontHover: #080818;
    --buttonBorderColor: #3e3e3e;
    --contactBackground: #3e3e3e;
    --inputBorder: #0000c0;
}


.light-mode {
    --backgroundInner: #F7F7E7;
    --backgroundOuter: #F6F5F0;
    --fontColor: #090a0F;
    --menuLink: #090a0F;
    --menuBackground: rgba(247, 247, 230, .25);
    --modalBackground: rgba(192, 192, 192, .25);
    --buttonBackground: #F6F5F0;
    --buttonBackgroundHover: #080818;
    --buttonFont: #080818;
    --buttonFontHover: #F6F5F0;
    --contactBackground: #3e3e3e;
    transition: .5s ease-in-out;
}

/* Fonts */
@font-face {
    font-family: 'Yapari';
    src: url('../fonts/yapariVariable.ttf');
}

@font-face {
    font-family: 'Big Shoulders Display';
    src: url('../fonts/bigShouldersDisplayVariable.ttf');
}

/* exo-2-regular - latin */
@font-face {
    font-family: 'Exo 2';
    font-style: normal;
    font-weight: 400;
    src: url('../fonts/exo-2-v20-latin-regular.eot');
    /* IE9 Compat Modes */
    src: local(''),
        url('../fonts/exo-2-v20-latin-regular.eot?#iefix') format('embedded-opentype'),
        /* IE6-IE8 */
        url('../fonts/exo-2-v20-latin-regular.woff2') format('woff2'),
        /* Super Modern Browsers */
        url('../fonts/exo-2-v20-latin-regular.woff') format('woff'),
        /* Modern Browsers */
        url('../fonts/exo-2-v20-latin-regular.ttf') format('truetype'),
        /* Safari, Android, iOS */
        url('../fonts/exo-2-v20-latin-regular.svg#Exo2') format('svg');
    /* Legacy iOS */
}

/* exo-2-800 - latin */
@font-face {
    font-family: 'Exo 2';
    font-style: normal;
    font-weight: 800;
    src: url('../fonts/exo-2-v20-latin-800.eot');
    /* IE9 Compat Modes */
    src: local(''),
        url('../fonts/exo-2-v20-latin-800.eot?#iefix') format('embedded-opentype'),
        /* IE6-IE8 */
        url('../fonts/exo-2-v20-latin-800.woff2') format('woff2'),
        /* Super Modern Browsers */
        url('../fonts/exo-2-v20-latin-800.woff') format('woff'),
        /* Modern Browsers */
        url('../fonts/exo-2-v20-latin-800.ttf') format('truetype'),
        /* Safari, Android, iOS */
        url('../fonts/exo-2-v20-latin-800.svg#Exo2') format('svg');
    /* Legacy iOS */
}

/* exo-2-italic - latin */
@font-face {
    font-family: 'Exo 2';
    font-style: italic;
    font-weight: 400;
    src: url('../fonts/exo-2-v20-latin-italic.eot');
    /* IE9 Compat Modes */
    src: local(''),
        url('../fonts/exo-2-v20-latin-italic.eot?#iefix') format('embedded-opentype'),
        /* IE6-IE8 */
        url('../fonts/exo-2-v20-latin-italic.woff2') format('woff2'),
        /* Super Modern Browsers */
        url('../fonts/exo-2-v20-latin-italic.woff') format('woff'),
        /* Modern Browsers */
        url('../fonts/exo-2-v20-latin-italic.ttf') format('truetype'),
        /* Safari, Android, iOS */
        url('../fonts/exo-2-v20-latin-italic.svg#Exo2') format('svg');
    /* Legacy iOS */
}

/* exo-2-800italic - latin */
@font-face {
    font-family: 'Exo 2';
    font-style: italic;
    font-weight: 800;
    src: url('../fonts/exo-2-v20-latin-800italic.eot');
    /* IE9 Compat Modes */
    src: local(''),
        url('../fonts/exo-2-v20-latin-800italic.eot?#iefix') format('embedded-opentype'),
        /* IE6-IE8 */
        url('../fonts/exo-2-v20-latin-800italic.woff2') format('woff2'),
        /* Super Modern Browsers */
        url('../fonts/exo-2-v20-latin-800italic.woff') format('woff'),
        /* Modern Browsers */
        url('../fonts/exo-2-v20-latin-800italic.ttf') format('truetype'),
        /* Safari, Android, iOS */
        url('../fonts/exo-2-v20-latin-800italic.svg#Exo2') format('svg');
    /* Legacy iOS */
}

/* Design */

/* General Design */
body {
    height: 100vh;
    width: 100%;
    overflow-x: hidden;
    background: radial-gradient(ellipse at bottom, var(--backgroundInner) 0%, var(--backgroundOuter) 100%);
}

body::-webkit-scrollbar {
    display: none;
}

#wrapper {
    height: 100%;
    width: 100%;
}

.trenner {
    height: 5vw;
}

.sectionPreHeading {
    font-family: 'Yapari';
    font-size: 2rem;
    /* line-height: 0.9em; */
    color: var(--fontColor);
}

.sectionHeading {
    font-family: 'Big Shoulders Display';
    font-size: 6rem;
    color: var(--fontColor);
    line-height: 0.9em;
    font-weight: 600;
}

.button3D,
.button3D:visited {
    /* position: absolute !important; */
    font-family: 'Yapari';
    text-decoration: none;
    color: var(--buttonFont);
    padding: 20px;
    cursor: pointer;
    background: #333;
    border: none;
    border-radius: 10px;
    box-shadow: -5px -5px 15px #444, 5px 5px 15px #222, inset 5px 5px 10px #444, inset -5px -5px 10px #222;
    font-size: 1rem;
    transition: 500ms;
}

.button3D:hover {
    box-shadow: -5px -5px 15px #444, 5px 5px 15px #222, inset 5px 5px 10px #222, inset -5px -5px 10px #444;
    font-size: 1rem;
    transition: 500ms;
}

.leftButton {
    float: left;
}

.rightButton {
    float: right;
}

.clear {
    clear: both;
}



/* Section Designs */
/* Home */

#home {
    position: relative;
    height: 100vh;
    width: 98vw;
    margin-left: 1vw;
    margin-right: 1vw;
}

#homeWrapper {
    height: 80vh;
    padding-top: 40vh;
    padding-left: 45vw;
}

#homeHeader {
    position: absolute;
    bottom: 5vh;
}

#homeLine1 {
    text-transform: uppercase;
    font-size: 7rem;
    font-family: 'Big Shoulders Display';
    font-weight: 600;
    font-stretch: semi-condensed;
}

#homeLine2 {
    text-transform: capitalize;
    font-size: 3rem;
    font-family: 'Yapari';
    /* font-stretch: normal; */
}

#home #scrollMe {
    position: fixed;
    width: 100vw;
    bottom: 2vh;
    left: 50vw;
    z-index: 10000;
}

#scrollMeIcon {
    height: 75px;
}

/* Portfolio */

#portfolio {
    position: relative;
    height: 100vh;
    width: 98vw;
    margin-left: 1vw;
    margin-right: 1vw;

    background: radial-gradient(ellipse at top, var(--backgroundInner) 0%, var(--backgroundOuter) 100%);
}

#portfolioWrapper {
    height: 80vh;
}

#portfolioHeader {
    position: absolute;
    bottom: 5vh;
}

.portfolioGrid {
    padding-top: 3vh;
    width: 80vw;
    margin-left: 10vw;
    margin-right: 10vw;
    display: grid;
    grid-template-columns: 1fr 1fr 1fr 1fr 1fr;
    grid-template-rows: 1fr 1fr;
    gap: 15px 15px;
    grid-auto-flow: row;
    justify-content: stretch;
    align-content: stretch;
    justify-items: stretch;
    align-items: stretch;
    grid-template-areas:
        "whisky whisky filetsteak filetsteak filetsteak"
        "hyggehus hyggehus hyggehus bobi bobi";
        
}

.gridItem {
    height: 35vh;
    text-align:center;
}

.gridItem a {
    display: inline-block;
    width: 100%;
    height: 100%;
}
.gridItem a img {
    margin-top: 5vh;
    height: 25vh;
    max-width: 90%;
}

.whisky {
    grid-area: whisky;
    background-color: gold;
}

.filetsteak {
    grid-area: filetsteak;
    background-color: red;
}

.hyggehus {
    grid-area: hyggehus;
    background-color: lightskyblue;
}

.bobi {
    grid-area: bobi;
    background-color: silver;
}

/* Venobox Modal Containers */

.vbox-child {
    background-color: var(--modalBackground) !important;
    padding: 30px !important;
}

.venoInlineBoxHeader {
    margin-bottom: 5em;
    width: 100%;
}

.venoInlineBoxHeader h3 {
    font-family: 'Big Shoulders Display', sans-serif;
    font-size: 3rem;
    text-align: center;
    color: var(--fontColor);
}

.portfolioModalBox {
    display: grid;
    grid-template-columns: 5fr 3fr;
    grid-template-rows: 1fr;
    gap: 0px 20px;
    grid-auto-flow: row;
    justify-content: stretch;
    align-content: stretch;
    justify-items: stretch;
    align-items: stretch;
    grid-template-areas:
        "portfolioModalBoxImage portfolioModalBoxDesc";
}

.portfolioModalBoxImage {
    grid-area: portfolioModalBoxImage;
}

.portfolioModalBoxDesc {
    grid-area: portfolioModalBoxDesc;
}

.portfolioModalBoxDesc {
    font-family: 'Exo 2';
    font-weight: 400;
    font-size: 1.5rem;
    color: var(--fontColor);
}

.portfolioModalBoxDescButton {
    margin-top: 50px;
    margin-left: auto;
    margin-right: auto;
}

.portfolioModalBoxDescButtonWebsite {
    padding: 10px 20px;
    border: 2px solid var(--buttonFont);
    border-radius: 10px;
    color: var(--buttonFont);
    background-color: var(--buttonBackground);
    text-decoration: none;
}

.portfolioModalBoxDescButtonWebsite:visited {
    color: var(--buttonFont);
}

.portfolioModalBoxDescButtonWebsite:hover {
    background-color: var(--buttonBackgroundHover);
    color: var(--buttonFontHover);
}



/* About Me */
#aboutMe {
    position: relative;
    height: 100vh;
    width: 98vw;
    margin-left: 1vw;
    margin-right: 1vw;
    background: radial-gradient(ellipse at bottom, var(--backgroundInner) 0%, var(--backgroundOuter) 100%);
}

#aboutMeWrapper {
    height: 80vh;
}

.aboutMeGrid {
    display: grid;
    grid-template-columns: 2fr 3fr;
    grid-template-rows: 1fr;
    gap: 0px 50px;
    grid-auto-flow: row;
    justify-content: center;
    align-content: center;
    justify-items: center;
    align-items: center;
    grid-template-areas:
        "aboutMeImage aboutMeText";
}

.aboutMeImage {
    grid-area: aboutMeImage;
    padding: 10%;
}

.aboutMeTextWrapper {
    grid-area: aboutMeText;
    align-content: center;
    font-family: 'Exo 2', sans-serif;
    color: var(--fontColor);
    font-size: 1.5rem;
    width: 50vw;
}

#aboutMeText {
    padding-bottom: 10vh;
}


#aboutMeHeader {
    position: absolute;
    bottom: 5vh;
}

/* Contact */
#contact {
    position: relative;
    height: 100vh;
    width: 98vw;
    margin-left: 1vw;
    margin-right: 1vw;
    background: radial-gradient(ellipse at bottom, var(--backgroundInner) 0%, var(--backgroundOuter) 100%);
}

#contactHeader {
    position: absolute;
    bottom: 5vh;
}


#contactWrapper {
    display: flex;
    height: 80vh;
    align-items: center;
    justify-content: center;
}

#contactBox {
    min-height: 60vh;
    width: 60vw;
    background-color: var(--contactBackground);
    border-radius: 25px;
    padding-top: 3vh;
}

#contactBox h2 {
    font-family: 'Yapari', sans-serif;
    font-size: 1.6rem;
    line-height: 2rem;
    color: var(--fontColor);
    text-align: center;
    letter-spacing: 2px;
}

#contactBox h3 {
    font-family: 'Yapari', sans-serif;
    font-size: 1.3rem;
    color: var(--fontColor);
    text-align: center;
}

.contactBoxGrid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    grid-template-rows: 1fr;
    gap: 0px 50px;
    grid-auto-flow: row;
    justify-content: start;
    align-content: center;
    justify-items: start;
    align-items: flex-start;
    grid-template-areas:
        "contactBoxLeft contactBoxRight";
}

.contactBoxLeft {
    grid-area: contactBoxLeft;
    padding-top: 5vh;
    padding-left: 5vw;
}

.contactBoxLeft address {
    font-family: 'Exo 2';
    font-size: 1.5rem;
    color: var(--fontColor);
}

.contactBoxLeft a, .contactBoxLeft a:visited, .contactBoxLeft a:hover  {
    color: var(--fontColor);
    font-size: 1em;
    text-decoration: none;
}

.contactBoxRight {
    grid-area: contactBoxRight;
    padding-top: 5vh;
}

.contactBoxRight form label {
    font-family: 'Yapari', sans-serif;
    color: var(--fontColor);
    font-size: 1rem;
    line-height: 1.2rem;
    display: inline-block;
    margin-bottom: 2vh;
}

.contactBoxRight form input[type="text"],
.contactBoxRight form input[type="email"],
.contactBoxRight form textarea {
    background: none;
    border: none;
    border-bottom: 1px solid var(--fontColor);
    font-family: 'Exo 2', sans-serif;
    font-size: 1em;
    line-height: 1.2rem;
    color: var(--fontColor);
}

.contactBoxInputField {
    margin-bottom: 2vh;
}

#contactBoxInputField2 {
    margin-bottom: 0;
}

#contactBoxInputFieldFirstName {
    visibility: hidden;
}
		
#popup {
      display: none;
      position: fixed;
      top: 20%;
      left: 50%;
      transform: translate(-50%, -50%);
      background-color: #f4f4f4;
      border: 1px solid #ccc;
      padding: 20px;
      z-index: 9999;
      border-radius: 8px;
      box-shadow: 0 0 10px rgba(0,0,0,0.2);
    }		

/* Footer */
footer {
    width: 98vw;
    margin-left: 1vw;
}

footer li,
footer li a,
footer li a:visited,
footer li a:hover {
    display: inline;
    font-family: 'Yapari';
    font-size: 1.5rem;
    color: var(--fontColor);
    text-decoration: none;
    margin-right: 1vw;
}

/* Hamburger Menu */
button:focus {
    outline: none;
}

/* THAT FIXED HEADER */
header.banner {
    position: fixed;
    top: 0;
    z-index: 100;

    width: 100%;
    padding: 30px;
    box-sizing: border-box;
}

/* MENU TOGGLE ICON */
#menu-toggle {
    position: relative;

    width: 51px;
    height: 51px;

    cursor: pointer;

    border: 1px solid var(--fontColor);
    border-radius: 50px;
    background: transparent;
}

#menu-toggle:before,
#menu-toggle:after {
    position: absolute;

    content: "";
    content: "";
    transition: all .350s ease;

    background-color: var(--fontColor);
}

#menu-toggle:before {
    top: 12px;
    left: 25px;

    width: 1px;
    height: 27px;
}

#menu-toggle:after {
    top: 25px;
    left: 12px;

    width: 27px;
    height: 1px;
}

#menu-toggle:hover:before,
#menu-toggle:hover:after {
    transform: rotate(5deg);
}

.open #menu-toggle:before,
.open #menu-toggle:after {
    transform: rotate(45deg);
}

/* OVERLAY MENU */
#menu {
    position: fixed;
    top: 0;
    bottom: 0;
    z-index: 10;

    display: table;
    visibility: hidden;
    width: 100%;
    height: 100%;

    font-family: "Yapari", sans-serif;

    transition: opacity .5s, visibility .5s;
    text-align: center;

    opacity: 0;
    background-color: rgba(0, 0, 0, .25);
    -webkit-backdrop-filter: blur(4px);
    backdrop-filter: blur(4px);
}

.open #menu {
    visibility: visible;

    opacity: 1;
}

#menu ul {
    display: table-cell;
    padding: 0;
    margin-top: 30px;

    list-style: none;

    vertical-align: middle;
}

#menu ul li a {
    display: block;
    font-size: 2rem;
    font-weight: 100;
    line-height: 80px;
    transition: all .3s ease;
    text-decoration: none;

    color: var(--menuLink);
}

#menu ul li a:hover {
    font-size: 2rem;
}

/* CONTENT CONTAINER */
.container {
    position: absolute;
    right: 30px;
    bottom: 30px;
    z-index: -100;

    max-width: 550px;
    min-width: 200px;
    padding: 20px 40px;

    background-color: var(--modalBackground);
}

/* Light Switch */
#lightSwitch {
    float: right;
    height: 51px;
    font-size: 4.5rem;
    font-weight: 100;
    line-height: .6;
}

#lightSwitch a {
    transition: all .350s ease;
    text-decoration: none;

    color: #ccc;
}

#lightSwitch a:hover {
    cursor: pointer;

    color: var(--fontColor);
}

#lightSwitch a img {
    height: 75px;
    width: 50px;
}

.open #lightSwitch {
    color: var(--fontColor);
}

/* Animations */
.lazer {
    display: inline-block;
    overflow: hidden;
    -webkit-animation: blink .75s step-end infinite;
    animation: blink .75s step-end infinite;
    white-space: nowrap;
    border-right: 4px solid rgb(55, 0, 255);
    box-sizing: border-box;
}

@-webkit-keyframes blink {

    from,
    to {
        border-color: transparent
    }

    50% {
        border-color: rgb(55, 0, 255);
    }
}

@keyframes blink {

    from,
    to {
        border-color: transparent
    }

    50% {
        border-color: rgb(55, 0, 255);
    }
}

#legal {
    position: relative;
    height: 100vh;
    width: 98vw;
    margin-left: 1vw;
    margin-right: 1vw;
}

#legalWrapper {
    height: 80vh;
    padding-top: 35vh;
    padding-left: 40vw;
    color: white;
}

#legalInWrapper {
    width: 30vw;
}

#legalHeader {
    position: fixed;
    z-index: 999;
    bottom: 5vh;
}

/* Media Queries */
/* Mobile Portrait */
@media screen and (max-width: 480px) {
header.banner {
    width: 400px;
}

.open #menu {
    width: 100vw;
    height: 100vh;
    max-width: 100vw;
    max-width: 100vh;
}

#menu ul li a {
    font-size: 1rem;
}

#homeHeader {
    bottom: 10vh;
}

#homeLine1 {
    font-size: 5rem;
}

#homeLine2 {
    font-size: 2rem;
}

#scrollMe {
    display: none;
}

#portfolioWrapper {
    height: 80vh;
}

.portfolioGrid {
    grid-template-columns: 1fr 1fr;
    grid-template-areas: "whisky filetsteak"
                         "hyggehus bobi";
}

.gridItem {
    height: 30vh;
}

#portfolioHeader {
    bottom: 10vh;
    left: 3vw;
}
.sectionHeading {
    font-size: 3rem;
}

#aboutMeWrapper {
    margin-top: -5vh;
}

.aboutMeGrid {
display: block;
width: 80vw;
margin-left: 10vw;
}

.aboutMeImage img {
    width: 32vw;
    margin-left: 10vw;
}

.aboutMeTextWrapper {
    width: 100%;
    font-size: 1rem;
}

#aboutMeText {
    padding-bottom: 2vh;
}

#aboutMeHeader {
    bottom: 10vh;
}
}

/* Mobile Landscape */
@media screen and (min-width: 481px) and (max-width: 812px) {

}

/* Tablet Portrait */