body{
    font-family: 'Work Sans', sans-serif;
    color:#0c39fa;
    margin: 0;
    padding: 0;
    width:100%;
    height: 100%;
    box-sizing: border-box;
}
.front-page{
    background-image: url('front_page_Animation.gif');
    background-position: center;
    background-size: cover;
    background-repeat: no-repeat;
}
#wrapper{
    max-width: 95%;
    height: 100vh;
    margin: 0 auto;
}
nav{
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin:0;
}
#logo a img{
    cursor: pointer;
    margin: 0;
    width: 50px;
}
nav ul li{
    display: inline-block;
    padding-left:50px;
}
nav ul li a{
    text-decoration: none;
    color: #fc4d50;
    font-size: 1.5em;
    position:relative;
}
.nav-profile{
    color:#24aa5c;
}
.nav-profile span{
    position: relative;
    display: inline-block;
   }
  .nav-profile:hover span{
    animation: rotation1 1s infinite;
    animation-delay: calc(0.09s * var(--flow));
  }
  @keyframes rotation1 {
    0%, 50% {
      transform: rotate(360deg);
    }
    
  }

.nav-work span{
    position: relative;
    display: inline-block;
   }
  .nav-work:hover span{
    animation: animate .5s infinite;
    animation-delay: calc(0.1s * var(--flow));
  }
  @keyframes animate {
    0% {
      transform: translateY(0px);
    }
    40% {
      transform: translateY(-6px);
    }
    100% {
      transform: translateY(0px);
    }
  }

/* Phone */


@media(max-width:1000px){
    .front-page{
        background-image: url('Phone.gif');
        background-position: center;
        background-size:contain;
        background-repeat: no-repeat;
        
    }

    
}


@media(max-width:1000px){
    nav ul{
        min-width: 55vw;
        display: inline-flex;
        justify-content: space-between;
    }
    nav ul li a{
        font-size: 1.5em;
    }
}

/* Contact Links*/

#contact-links{
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: space-around;
    position: fixed;
    bottom: 0;
}

#contact-links a{
    color: white;
    text-decoration: none;
    font-size: 1.5em;
}
#email-link{
    width: 33.3%;
    height: 50px;
    background-color: #24aa5c;
    display: flex;
    align-items: center;
    justify-content: center;
}
#email-link:hover{
    background-color: #febbc4;
    color: black;
    transition: .3s;
}
#instagram-link{
    width: 33.3%;
    height: 50px;
    background-color: #0c39fa;
    display: flex;
    align-items: center;
    justify-content: center;
}
#instagram-link:hover{
    background-color: #febbc4;
    color: black;
    transition: .3s;
}
#linkedin-link{
    width: 33.4%;
    height: 50px;
    background-color: #fc4d50;
    display: flex;
    align-items: center;
    justify-content: center;
}
#linkedin-link:hover{
    background-color: #febbc4;
    color: black;
    transition: .3s;
}

/**/

/* Profile Page*/

.profile-container{
    width: 100%;
    display: block;
    padding-bottom: 100px;
}
.alek-icon{
    display: flex;
    justify-content: center;
}
.alek-icon img{
    width: 100%;
    z-index: -1;
}
.profile-container h1{
    font-size: 5em;
    font-weight: 400;
    text-align: center;
    margin-top: 0;
    color:#fc4d50;
}
.profile-container h2{
    font-size: 5em;
    font-weight: 400;
    text-align: center;
    margin-top: 20px;
    color:#0c39fa;
    
}

@media(max-width:1000px){
    .profile-container h1, .profile-container h2{
        font-size: 3em;
    } 
    
}

/**/

/* Work Page*/

.container{
    padding: 100px 0;
    columns:3 250px;
    gap: 50px;
}
.container img{
    display: block;
    width: 100%;
    transition: transform .5s;
}
.box{
    break-inside: avoid;
    margin-bottom: 50px;
}
.box:hover img{
    transform: rotate(3deg);
}
.box h1{
    font-size: 1.5em;
    font-weight: 400;
}

/**/

/*Zooba Page*/

#zooba-page{
    width: 100%;
    height: auto;
    margin-bottom: 50px;
}
#zooba-page .zooba-images img{
    width: 100%;
    margin-bottom: 50px;
    display: block;
}
.zooba-layout{
    display: flex;
    justify-content: space-between;
}
.zooba-box{
    width: 48.5%;
}
.zooba-box2{
    width: 31%;
}
.zooba-layout2{
    width: 100%;
    columns: 3;
    column-gap: 50px;
}
.zooba-text li{
    list-style: none;
    font-size: 1.5em;
    letter-spacing: .7px;
    line-height: 150%;
    border-bottom: .5px solid white;
}
.zooba-text{
    padding-bottom: 100px;
}
@media(max-width:1000px){
    .zooba-layout{
        display: block;
    }
    .zooba-box, .zooba-box2{
        width: 100%;
    }
    .zooba-text li{
        line-height: 200%;
        font-size: 1.3em;
    }
}

/* eczema page*/

#eczema-page{
    width: 100%;
    height: 100vh;
}
#eczema-page .eczema-images img{
    width: 100%;
    margin-bottom: 50px;
}
.eczema-layout{
    display: flex;
    justify-content: space-between;
}
.eczema-box{
    width:48.5%;
}
.eczema-box p{
    font-size: 14px;
    margin-top: 0;
    margin-bottom: 80px;
}
@media(max-width:1000px){
    .eczema-layout{
        display: block;
    }
    .eczema-box{
        width: 100%;
    }
    #eczema-bottom{
        padding-bottom: 50px;
    }
}

/**/

/* Poppins Page*/

#poppins-page{
    width: 100%;
    height: 100vh;
}
#poppins-page .poppins-images img{
    width: 100%;
    margin-bottom:50px;
}
.poppins-layout{
    display: flex;
    justify-content: space-between;
}
.poppins-box2{
    width: 31%;
}
.poppins-box{
    width: 48.5%;
}
.poppins-box p{
    font-size: 14px;
    margin-top: 0;
    margin-bottom: 80px;
}
@media(max-width:1000px){
    .poppins-layout{
        display: block;
    }
    .poppins-box{
        width: 100%;
    }
    #poppins-bottom{
        padding-bottom: 50px; 
    }
}

/**/

/* Love of Dog*/

#loveofdog-page{
    width: 100%;
    height: 100vh;
}
#loveofdog-page .loveofdog-images img{
    width: 100%;
    margin-bottom: 50px;
}
.loveofdog-layout{
    display: flex;
    justify-content: space-between;
}
.loveofdog-box{
    width:48.5%;
}
.loveofdog-box p{
    font-size: 14px;
    margin-top: 0;
    margin-bottom: 80px;
}
@media(max-width:1000px){
    .loveofdog-layout{
        display: block;
    }
    .loveofdog-box{
        width: 100%;
    }
    #loveofdog-bottom{
        padding-bottom: 50px;
    }
}
/**/

/* Creature Coffe*/

#creature-page{
    width: 100%;
    height: 100vh;
}
#creature-page .creature-images img{
    width: 100%;
    margin-bottom:50px;
}
.creature-layout{
    display: flex;
    justify-content: space-between;
}
.creature-box{
    width: 31%;
}
.creature-box2{
    width: 48.5%;
}
.creature-box2 p{
    font-size: 14px;
    margin-top: 0;
    margin-bottom: 80px;
}
@media(max-width:1000px){
    .creature-layout{
        display: block;
    }
    .creature-box, .creature-box2{
        width: 100%;
    }
    #creature-bottom{
        padding-bottom: 50px;
    }
    
}

/**/

/* Mochi Page*/

#mochi-page{
    width: 100%;
    height: 100vh;
}
#mochi-page .mochi-images img{
    width: 100%;
    margin-bottom: 50px;
}
.mochi-layout{
    display: flex;
    justify-content: space-between;
}
.mochi-box{
    width:48.5%;
}
.mochi-box p{
    font-size: 14px;
    margin-top: 0;
    margin-bottom: 80px;
}
@media(max-width:1000px){
    .mochi-layout{
        display: block;
    }
    .mochi-box{
        width: 100%;
    }
    #mochi-bottom{
        padding-bottom: 50px;  
    }
}
/**/

/* Dukkan Page*/

#dukkan-page{
    width: 100%;
    height: 100vh;
}
#dukkan-page .dukkan-images img{
    width: 100%;
    margin-bottom: 50px;
}
.dukkan-layout{
    display: flex;
    justify-content: space-between;
}
.dukkan-box{
    width:48.5%;
}
.dukkan-box2{
    width: 31%;
}
.dukkan-box p{
    font-size: 14px;
    margin-top: 0;
    margin-bottom: 80px;
}
@media(max-width:1000px){
    .dukkan-layout{
        display: block;
    }
    .dukkan-box, .dukkan-box2{
        width: 100%;
    }
    #dukkan-bottom{
        padding-bottom: 50px;
    }
}

/**/

/* trawnik Page*/

#trawnik-page{
    width: 100%;
    height: 100vh;
}
#trawnik-page .trawnik-images img{
    width: 100%;
    margin-bottom: 50px;
}
.trawnik-layout{
    display: flex;
    justify-content: space-between;
}
.trawnik-box{
    width:48.5%;
}
.trawnik-box p{
    font-size: 14px;
    margin-top: 0;
    margin-bottom: 80px;
}
@media(max-width:1000px){
    .trawnik-layout{
        display: block;
    }
    .trawnik-box{
        width: 100%;
    }
    #trawnik-bottom{
        padding-bottom: 50px;
    }
}

/**/

/* Spillt Page*/

#spillt-page{
    width: 100%;
    height: 100vh;
}
#spillt-page .spillt-images img{
    width: 100%;
    margin-bottom: 50px;
}
.spillt-layout{
    display: flex;
    justify-content: space-between;
}
.spillt-box{
    width:48.5%;
}
.spillt-box p{
    font-size: 14px;
    margin-top: 0;
    margin-bottom: 80px;
}
@media(max-width:1000px){
    .spillt-layout{
        display: block;
    }
    .spillt-box{
        width: 100%;
    }
    #spillt-bottom{
        padding-bottom: 50px;
    }
}
/**/

/* Smart Labels */

#smartlabels-page{
    width: 100%;
    height: 100vh;
}
#smartlabels-page .smartlabels-images img{
    width: 100%;
    margin-bottom: 50px;
}
.smartlabels-layout{
    display: flex;
    justify-content: space-between;
}
.smartlabels-box{
    width:48.5%;
}
.smartlabels-box p{
    font-size: 14px;
    margin-top: 0;
    margin-bottom: 80px;
}
@media(max-width:1000px){
    .smartlabels-layout{
        display: block;
    }
    .smartlabels-box{
        width: 100%;
    }
    #smartlabels-bottom{
        padding-bottom: 50px;
    }
}

/* Fetch Page*/
#fetch-page{
    width: 100%;
    height: 100vh;
}
#fetch-page .fetch-images img{
    width: 100%;
    margin-bottom: 50px;
}
.fetch-layout{
    display: flex;
    justify-content: space-between;
}
.fetch-box{
    width:48.5%;
}
.fetch-box p{
    font-size: 14px;
    margin-top: 0;
    margin-bottom: 80px;
}
@media(max-width:1000px){
    .fetch-layout{
        display: block;
    }
    .fetch-box{
        width: 100%;
    }
    #fetch-bottom{
        padding-bottom: 50px;
    }
}
/**/

/*Cakery Page*/
#cakery-page{
    width: 100%;
    height: 100vh;
}
#cakery-page .cakery-images img{
    width: 100%;
    margin-bottom: 50px;
}
.cakery-layout{
    display: flex;
    justify-content: space-between;
}
.cakery-box{
    width:48.5%;
}
.cakery-box p{
    font-size: 14px;
    margin-top: 0;
    margin-bottom: 80px;
}
@media(max-width:1000px){
    .cakery-layout{
        display: block;
    }
    .cakery-box{
        width: 100%;
    }
    #cakery-bottom{
        padding-bottom: 50px;
    }
  
}
/**/

/*Hello Darling*/

#darling-page{
    width: 100%;
    height: 100vh;
}
#darling-page .darling-images img{
    width: 100%;
    margin-bottom: 50px;
}
.darling-layout{
    display: flex;
    justify-content: space-between;
}
.darling-box{
    width:48.5%;
}
.darling-box2{
    width: 31%;
}
.darling-box p{
    font-size: 14px;
    margin-top: 0;
    margin-bottom: 80px;
}
@media(max-width:1000px){
    .darling-layout{
        display: block;
    }
    .darling-box, .darling-box2{
        width: 100%;
    }
    #darling-bottom{
        padding-bottom: 50px;
    }
}
/**/

/* Miami Waffel */

#miamiwaffel-page{
    width: 100%;
    height: 100vh;
}
#miamiwaffel-page .miamiwaffel-images img{
    width: 100%;
    margin-bottom: 50px;
}
.miamiwaffel-layout{
    display: flex;
    justify-content: space-between;
}
.miamiwaffel-box{
    width:48.5%;
}
.miamiwaffel-box p{
    font-size: 14px;
    margin-top: 0;
    margin-bottom: 80px;
}
@media(max-width:1000px){
    .miamiwaffel-layout{
        display: block;
    }
    .miamiwaffel-box{
        width: 100%;
    }
    #miamiwaffel-bottom{
        padding-bottom: 50px;
    }
}
/**/