/*

 ROOT, HTML, ETC

*/ 
:root {
    --main-one: black;
    --main-two: #FDF9F4;
    --main-text-fade: rgba(50, 8, 61, 0.7)
}
/*
rgba(52,7,61,1) 25%, rgba(239,116,92,1) 84%)
*/


.logo {
    border-radius: 4px;
}



@font-face {
    font-family: enmere;
    src: url("fonts/enmere.ttf");
}

@font-face {
    font-family: omvej;
    src: url("fonts/RockyToRoad.otf");
}

@font-face {
    font-family: solskin;
    src: url("fonts/HelloKetta-d99oX.ttf");
}

@font-face {
    font-family: regnvejr;
    src: url("fonts/Pumpkin Bites.ttf");
}

@font-face {
    font-family: regnvejr_layer;
    src: url("fonts/Pumpkin Bites Layer.ttf");
}

@font-face {
    font-family: groent;
    src: url("fonts/Wonderly.otf");
}

@font-face {
    font-family: lynafleder;
    src: url("fonts/SugarpunchDEMO.otf");
}

html, body {
    font-family: "Barlow" !important;
}


body {
    background: #FBDCB4;
    color: var(--main-one)
}



.header {
    background: hsla(141, 81%, 87%, 1);
    background: linear-gradient(90deg, hsla(141, 81%, 87%, 1) 0%, hsla(41, 88%, 75%, 1) 50%, hsla(358, 82%, 71%, 1) 100%);
    background: -moz-linear-gradient(90deg, hsla(141, 81%, 87%, 1) 0%, hsla(41, 88%, 75%, 1) 50%, hsla(358, 82%, 71%, 1) 100%);
    background: -webkit-linear-gradient(90deg, hsla(141, 81%, 87%, 1) 0%, hsla(41, 88%, 75%, 1) 50%, hsla(358, 82%, 71%, 1) 100%);
    filter: progid: DXImageTransform.Microsoft.gradient( startColorstr="#C5F9D7", endColorstr="#F7D486", GradientType=1 );
}

.middle {
    background: hsla(141, 81%, 87%, 1);
    background: linear-gradient(90deg, hsla(141, 81%, 87%, 1) 0%, hsla(211, 58%, 79%, 1) 100%);
    background: -moz-linear-gradient(90deg, hsla(141, 81%, 87%, 1) 0%, hsla(211, 58%, 79%, 1) 100%);
    background: -webkit-linear-gradient(270deg, hsla(141, 81%, 87%, 1) 0%, hsla(211, 58%, 79%, 1) 100%);
    filter: progid: DXImageTransform.Microsoft.gradient( startColorstr="#C5F9D7", endColorstr="#ABC9E9", GradientType=1 );
}

.things {
    background: hsla(141, 81%, 87%, 1);
    background: linear-gradient(90deg, hsla(141, 81%, 87%, 1) 0%, hsla(333, 73%, 85%, 1) 50%, hsla(211, 58%, 79%, 1) 100%);
    background: -moz-linear-gradient(90deg, hsla(141, 81%, 87%, 1) 0%, hsla(333, 73%, 85%, 1) 50%, hsla(211, 58%, 79%, 1) 100%);
    background: -webkit-linear-gradient(90deg, hsla(141, 81%, 87%, 1) 0%, hsla(333, 73%, 85%, 1) 50%, hsla(211, 58%, 79%, 1) 100%);
    filter: progid: DXImageTransform.Microsoft.gradient( startColorstr="#C5F9D7", endColorstr="#F5BFD7", GradientType=1 );
}


.link {
    color: black;
    position: relative;
}

.link::before {
content: '';
background-color: hsla(196, 61%, 58%, .75);
position: absolute;
left: 0;
bottom: 3px;
width: 100%;
height: 5px;
z-index: 2;
transition: all .3s ease-in-out;
}

.link:hover::before {
bottom: 0;
height: 100%;
}
  

/* 

 NAVBAR

*/

#logo-text {
    font-family: "Major Mono Display"; 
    font-weight: 400; 
}

.logo-io {
    font-family: "Major Mono Display";
    font-weight: 400;
}

.navbar-brand p {
    font-family: VT323;
    font-weight: 400;
    font-size: 1.5em;
    color: rgb(52,7,61)
}

.title, .subtitle {
    color: black
}

.navbar {
    background-color: transparent;
    color: #FAFAFA;
}

.navbar-item {
    color: #FAFAFA;
}

/* 

 SERVICES / SKILLS

*/

li:nth-child(n+1) {
    padding-top: 40px;
}

li > div {
    padding-left: 10px;
}

.box-about {
    border: 0.25rem solid;
    background: rgba(239, 222, 205, 0.25)
}


/* 

 PROJECTS, ETC 

*/

#lightblue {
    background-color: #b9d9eb;
}

#orange {
    background-color:#e2725b
}

#red {
    background-color:#cc4e5c
}

#purple {
    background-color:#e6e6fa
}

#green {
    background-color: #ace1af
        }
    
#blue {
        background-color:#73c2fb
    }
    
#brown {
        background-color: #E7AF95;
    }
    
#beige {
        background-color:#fffaf0
    }
    
#grayish {
        background-color:#e5e4e2
    }
    
#darkblue {
        background-color:#6495ed
    }

.app-container {
}

/* box-shadow: 5px 5px 0px #eb452b, 
10px 10px 0px #efa032, 
15px 15px 0px #46b59b
*/ 
.app {
    transition: all 1s ease-in-out; 
    border: 2px solid black;
    margin-bottom: 8px;
    border-radius: 5px;
}

.app:hover a {
    
}



.logo {
    box-shadow: rgba(0, 0, 0, 0.12) 0px 1px 3px, rgba(0, 0, 0, 0.24) 0px 1px 2px;
    /* box-shadow: rgba(0, 0, 0, 0.05) 0px 6px 24px 0px, rgba(0, 0, 0, 0.08) 0px 0px 0px 1px;*/
}
/*

 TOOLS

*/



/* different logo fonts */


.font-lynafleder {
    font: 1.5em lynafleder !important;
    word-break: keep-all;
}
.font-solskin {
    font: 3em solskin !important;
}

.font-groent {
    font: 3em groent !important;
}

.font-omvej {
    font: 3em omvej !important;
}

.font-enmere {
    font: 2em enmere !important;
}

.font-regnvejr-navn {
    padding-left: 4;
    font: 2em regnvejr;
    color:#06537A;
    position: relative;
    z-index: 1;
    word-break: keep-all;
}

.font-regnvejr-navn::before {
    padding-left: 4;
    content: "regnvejr";
    font-family: regnvejr_layer;
    color:white;
    position: absolute;
    left: 0;
    top: 0;
    z-index:-1;
    word-break: keep-all;   
   }