@import url('https://fonts.googleapis.com/css2?family=Michroma&display=swap');

*{
    margin: 0;
    padding: 0;

}
body{
    background-color: #F2F0EB;
}

.mobile-container {
    max-width: 480px;
    margin: auto;
   background-color: #F2F0EB;
    height: 500px;
    border-radius: 10px;
    display: none;
  }
  

  
  .topnav #myLinks {
    display: none;
  }
  
  .topnav a {
    color: #F2F0EB;
    padding: 14px 16px;
    text-decoration: none;
    font-size: 17px;
    display: none;
  }
  
  .topnav a.icon {
   background-color: #da407b;
    display: none;
    position: absolute;
    right: 0;
    top: 0;
  }
  
  .topnav a:hover {
    background-color: #F2F0EB;
   
  }
  
  .active {

    color: #F2F0EB;
  }

.flex-container-header {
    display: flex;
    flex-direction: in-line;
    width: 100%;
    height: 100%;
    background-color: #F2F0EB;
    font-family: 'Michroma', sans-serif;
    justify-content: right;
 
}


#kayla {
    font-size: 18px;
    text-align: left;
    color: #000000;
    font-family: 'Michroma', sans-serif;
    justify-content: left;
    padding-right: 20px;
    padding-left:20px;
    text-wrap: nowrap;
    text-decoration: none;
    
}

#kayla:hover{
    color: #da407b;
}


#contact{
    font-size: 18px;
    text-align: left; /* Added property to align text on the left */
    color: #000000;
    font-family: 'michroma', sans-serif;
    padding-right: 20px;
    text-decoration: none;
    padding-left: 20px;
}

#contact:hover{
    color: #da407b;
}

#resume{
    font-size: 18px;
    text-align: left; /* Added property to align text on the left */
    color: #000000;
    font-family: 'michroma', sans-serif;
    text-wrap: nowrap;
    padding-right: 20px;
    padding-left: 10px;
    text-decoration: none;
}

#resume:hover{
    color: #da407b;
}

/* Dropdown Button */
.dropbtn {
    font-size: 18px;
    text-align: left; /* Added property to align text on the left */
    color: #000000;
    font-family: 'Michroma', sans-serif;
    text-decoration: none;
   
   
}

/* The container <div> - needed to position the dropdown content */
.dropdown {
  position: relative;
  display: inline-block;
  padding-left:10px;
}

/* Dropdown Content (Hidden by Default) */
.dropdown-content {
  display: none;
  position: absolute;
  background-color: #F2F0EB;
  min-width: 160px;
box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
border-color:#000000;
  z-index: 1;
  font-family: 'Courier New', Courier, monospace;
}

/* Links inside the dropdown */
.dropdown-content a {
  color: black;
  padding: 12px 16px;
  text-decoration: none;
  display: block;
  
}

/* Change color of dropdown links on hover */
.dropdown-content a:hover {background-color: #ddd;}

/* Show the dropdown menu on hover */
.dropdown:hover .dropdown-content {display: block;}

/* Change the background color of the dropdown button when the dropdown content is shown */
.dropdown:hover .dropbtn {background-color: #ff0000;}

.flex-container-main{
    display: flex;
    flex-direction: inline;
    width: 100%;
    height: 150px;
    background-color: #F2F0EB;
   
  
    

}
h1{
    font-size:60px;
    text-align: left; /* Added property to align text on the left */
    color: #000000;
        font-family: 'Michroma', sans-serif;
        justify-content: center;
    margin-top: 20px;
    flex-wrap: nowrap;
    flex-direction: flex;
    /* padding-left: 20px; */
    /* margin-left: 300px;
    margin-right: auto; */

    }
  

h2{
    font-size: 80px;
    text-align: center; /* Added property to align text on the left */
    color: #000000;
    font-family: 'Michroma', sans-serif;
    /* margin-left: 0px;
     margin-right: 300px; */
     flex-wrap: nowrap;
     animation: colorchange 5s infinite;



}

@keyframes colorchange {
    0% {
        color: #000000;
    }
    50% {
        color: #da407b;
    }
    100% {
        color: #000000;
    }
}
    
h4{
    font-family: 'Courier New', Courier, monospace;
    font-size: 20px;
    margin-top: -10px;
    padding-left: 20px;
    padding-bottom: 20px;
}

.flex-container1 {
    display: flex;
    justify-content: space-around; /* Distributes items evenly */
    align-items: left; /* Centers items vertically */
    flex-wrap: wrap; /* Allows items to wrap if they overflow */
    width: 100%;
    background-color: #1ba165; /* Example background color */
    padding: 10px; /* Example padding */
}

.flexbox-postmodern, .flexbox-forum, .flexbox-longing, .flexbox-lamosca, .flexbox-bjork, .flexbox-trees, .flexbox-risocal, .flexbox-trees, .flexbox-otherdans{


    text-align: center;
    margin: 10px; /* Adds some space between items */
}

.images img {
    width: 50px; /* Adjust the width as needed */
    height: auto;
}

h4 {
    margin-top: 10px; /* Adds some space between image and text */
    color: rgb(0, 0, 0); /* Example text color */
}


.flexbox-postmodern{
    display: block;
    flex-direction: column;
    width: 100%;
    height: 100%;
    background-color: #F2F0EB;
    align-items: center;
    justify-content: center;
    padding-left: 5px;

} 

.images {
    opacity: 1;
    display: block;
    width: 100%;
    height: auto;
    transition: .5s ease;
    backface-visibility: hidden;
    text-decoration:none;
/*   
        width: 100%;
        height: 100%;
        object-fit: cover;
        object-position: 50% 100%;
        opacity: 1;
        transition: .5s ease;
        backface-visibility: hidden;  */
     
        
  }
  
  .middle {
    transition: .5s ease;
    opacity: 0;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    -ms-transform: translate(-50%, -50%);
    text-align: center;
    text-decoration:none;
  }
  
  /* .flexbox-postmodern:hover {
    opacity: 0.3;
    text-decoration:none
  }
  
  .flexbox-postmodern:hover .middle {
    opacity: 1;
    text-decoration:none;
  } */
  
  .text {
    background-color: #F2F0EB;
    color: black;
    font-size: 60px;
    padding: 16px 32px;
    font-family: 'Courier New', Courier, monospace;
    text-decoration:none;

  }




.flexbox-bjork{
    display: block;
    flex-direction: column;
    width: 100%;
    height: 100%;
    background-color: #F2F0EB;
    align-items: center;
    justify-content: center;
    padding-left: 5px;
} 


.flexbox-trees{
    display: block;
    flex-direction: column;
    width: 100%;
    height: 100%;
    background-color: #F2F0EB;
    align-items: center;
    justify-content: center;
    padding-left: 5px;

} 

.flexbox-risocal{
    display: block;
    flex-direction: column;
    width: 100%;
    height: 100%;
    background-color: #F2F0EB;
    align-items: center;
    justify-content: center;
    padding-left: 5px;

} 

.flexbox-forum{
    display: block;
    flex-direction: column;
    width: 100%;
    height: 100%;
    background-color: #F2F0EB;
    align-items: center;
    justify-content: center;
    padding-left: 5px;

} 

.flexbox-lamosca{
    display: block;
    flex-direction: column;
    width: 100%;
    height: 100%;
    background-color: #F2F0EB;
    align-items: center;
    justify-content: center;
    padding-left: 5px;

} 

.flexbox-longing{
    display: block;
    flex-direction: column;
    width: 100%;
    height: 100%;
    background-color: #F2F0EB;
    align-items: center;
    justify-content: center;
    padding-left: 5px;

} 



    #postmodern{
        width: 100%;
        height:300px;
        object-fit: cover;
        object-position: 50% 50%;
        
    }  

    #postmodern:hover{
        opacity: 0.3;
    }

 #bjork{
    width: 100%;
    height: 300px;
    object-fit: cover;
    object-position: 50% 100%;
    margin-top:-5px;
    
}  

#bjork:hover{
    opacity: 0.3;
}

#forum{
    width: 100%;
    height: 300px;
    object-fit: cover;
    object-position: 80% 100%;
   

}

#forum:hover{
    opacity: 0.3;
}

#cal{
    width: 100%;
    height: 300px;
    object-fit: cover;
    object-position: 80% 100%;
    margin-top:-5px;
    

}

#cal:hover{
    opacity: 0.3;
}

#lamosca{
    width: 100%;
    height: 300px;
    object-fit: cover;
    object-position: 50% 80%;
    margin-top:-5px;
    
}

#lamosca:hover{
    opacity: 0.3;
}

#trees{
    width: 100%;
    height: 300px;
    object-fit: cover;
    object-position: 30% 40%;
    margin-top:-5px;
    
}

#trees:hover{
    opacity: 0.3;
}

#longing{
    width: 100%;
    height: 300px;
    object-fit: cover;
    object-position: 50% 50%;
    margin-top:-5px;
    
}


#longing:hover{
    opacity: 0.3;
}

#cal{
    width: 100%;
    height: 300px;
    object-fit: cover;
    object-position: 50% 50%;
    margin-top:-5px;


}

#cal:hover{
    opacity: 0.3;
}


#brochure{
    width: 100%;
    height: 300px;
    object-fit: cover;
    object-position: 50% 50%;
    margin-top:-5px;
    

}


#brochure:hover{
    opacity: 0.3;
}

#natk{
    width: 100%;
    height: 300px;
    object-fit: cover;
    object-position: 50% 50%;
    margin-top:-5px;
    


}

#natk:hover{
    opacity: 0.3;
}


.flex-container-footer{
    display: flex;
    flex-direction: in-line;
    width: 100%;
    height: 20%;
    background-color: #F2F0EB;
    font-family: 'Michroma', sans-serif;
    justify-content: center;
    align-items: center;
    text-decoration:none;
   position: absolute;

}



/* Media Queries */


/* ---------------iphone 10 --------------*/

@media (max-width: 475px) and (max-height: 812px) {
    .flex-container-header {
         display: none;
     

      
     }

     .mobile-container {
        max-width: 480px;
        margin: auto;
        background-color: #F2F0EB;
        height: 500px;;
        border-radius: 10px;
        display: block;
        padding-bottom: 20px;
      }
      
    
      
      .topnav #myLinks {
        display: none;
      }
      
      .topnav a {
        color: black;
        padding: 14px 16px;
        text-decoration: none;
        font-family: 'courier new', sans-serif;
        font-size: 17px;
        display: block;
        background-color: #F2F0EB;
      }
      
      .topnav a.icon {
       background-color:#F2F0EB ;
        display: block;
        position: absolute;
        right: 0;
        top: 0;
      }
      
      .topnav a:hover {
        background-color: #da407b;
       
      }
      
      .active {
    
        color: #F2F0EB;
      }

     .flex-container-main{
        display: none;
     }

     #resume{
        font-family: 'courier new', sans-serif;
     }
 

     #contact{
        font-family: 'courier new', sans-serif;
     }
        
         .flex-container-pages{
             display: block;
             margin-left: auto;
             margin-right: auto;
              width: 100%;
              height: 100%; 
              background-color: #F2F0EB;
              font-family: 'Montserrata', sans-serif;
             justify-content: center;
          
          }
        
          h1{
             font-size: 30px;
             margin-top: auto;
             margin-right: auto;
             flex-direction: inline;
             flex-wrap: nowrap;
             justify-content: left;
             text-decoration: none;
            
          
          }
        
          h2{
             font-size: 40px;
             /* padding-top: 20px;
             padding-right: 10px; */
             flex-direction: inline;
             flex-wrap: nowrap;
          
          }
        
        
         p{
             font-size: 10px;
             padding-bottom: 30px;
         }
 
       
            h4{
                font-family: 'Courier New', Courier, monospace;
                font-size: 12px;
                margin-top: -10px;
                padding-left: 20px;
            }
         
         
         }
 
         .flex-container1{
             display: block;
             flex-direction: column;
             width: 100%;
             height: 80%;
             background-color: #F2F0EB;
             justify-content: center;
             text-decoration:none;
             
         }
     
     #postmodern{
         width: 80%;
          object-fit: cover; 
          object-position: 50% 50%; 
         padding-left: 10px;
            padding-right: 10px;
            padding-bottom: 10px;
            justify-content: center;
            
        }
    
        #forum{
            width: 80%;
             object-fit: cover; 
             object-position: 50% 50%; 
            padding-left: 10px;
               padding-right: 10px;
               padding-bottom: 20px;
               justify-content: center;
        }
    
        #cal{
            width: 80%;
          object-fit: cover; 
          object-position: 50% 50%; 
         padding-left: 10px;
            padding-right: 10px;
            padding-bottom: 20px;
            justify-content: center;
        }
    
        #lamosca{
            width: 80%;
             object-fit: cover; 
            object-position: 50% 50%; 
            padding-left: 10px;
               padding-right: 10px;
               padding-bottom: 20px;
               justify-content: center;
        }
    
        #trees{
            width: 80%;
             object-fit: cover; 
             object-position: 50% 50%; 
            padding-left: 10px;
               padding-right: 10px;
               padding-bottom: 20px;
               justify-content: center;
        }
    
        #longing{
            width: 80%;
             object-fit: cover; 
             object-position: 50% 50%; 
            padding-left: 10px;
               padding-right: 10px;
               padding-bottom: 20px;
               justify-content: center;
        }

        #bjork{
            width: 80%;
             object-fit: cover; 
             object-position: 50% 50%; 
            padding-left: 10px;
               padding-right: 10px;
               padding-bottom: 20px;
               justify-content: center;
        }
 
 
     
          
        
 


/* ---------------iphone 5/SE --------------*/

 @media (max-width: 320px) and (max-height: 627px) {
   .flex-container-header {
        display: block;
        flex-direction: in-line;
        width: 100%;
        height: 100%;
        background-color: #F2F0EB;
        font-family: 'Michroma', sans-serif;
     
    }

    .flex-container-header {
        display: none;
    

     
    }

    .mobile-container {
       max-width: 320px;
       margin: auto;
       background-color: #F2F0EB;
       height: 500px;;
       border-radius: 10px;
       display: block;
       padding-bottom: 20px;
     }
     
   
     
     .topnav #myLinks {
       display: none;
     }
     
     .topnav a {
       color: black;
       padding: 14px 16px;
       text-decoration: none;
       font-family: 'courier new', sans-serif;
       font-size: 17px;
       display: block;
       background-color: #F2F0EB;
     }
     
     .topnav a.icon {
      background-color:#F2F0EB ;
       display: block;
       position: absolute;
       right: 0;
       top: 0;
     }
     
     .topnav a:hover {
       background-color: #da407b;
      
     }
     
     .active {
   
       color: #F2F0EB;
     }

    .flex-container-main{
       display: none;
    }

    #resume{
       font-family: 'courier new', sans-serif;
    }


    #contact{
       font-family: 'courier new', sans-serif;
    }


    h4{
        font-family: 'Courier New', Courier, monospace;
        font-size: 12px;
        margin-top: -10px;
        padding-left: 20px;
    }
       
        .flex-container-pages{
            display: block;
            margin-left: auto;
            margin-right: auto;
             width: 100%;
             height: 100%; 
             background-color: #F2F0EB;
             font-family: 'Montserrata', sans-serif;
            justify-content: center;
         
         }
       
         h1{
            font-size: 10px;
            /* padding-bottom: 50px; */
           
         
         }
       
         h2{
            font-size: 10px;
            padding-top: 20px;
            padding-right: 10px;
            padding-bottom: 30px;
         
         }
       
       
        p{
            font-size: 10px;
            padding-bottom: 30px;
        }


        .flex-container1{
            display: block;
            flex-direction: column;
            width: 100%;
            height: 80%;
            background-color: #F2F0EB;
            justify-content: center;
            text-decoration:none;
            
        }
    
    #postmodern{
        width: 100%;
        object-fit: cover;
        object-position: 50% 50%;
           
       }
   
       #forum{
           width: 100%;
           object-fit: cover;
           object-position: 50% 40%;
       }
   
       #cal{
           width: 100%;
           object-fit: cover;
           object-position: 80% 100%;
       }
   
       #lamosca{
           width: 100%;
           object-fit: cover;
           object-position: 50% 80%;
       }
   
       #trees{
           width: 100%;
           object-fit: cover;
           object-position: 30% 40%;
       }
   
       #longing{
           width: 100%;
           object-fit: cover;
           object-position: 50% 50%;
       }


       .flexbox-postmodern{
        display: flex;
        flex-direction: column;
       }

       #about{
        width: 100%;
       }
         
       }

/* ---------------iphone 6/7/8 --------------*/


@media (max-width: 375px) and (max-height: 627px) {
 
   
    .flex-container-header {
        display: none;
    

     
    }

    .mobile-container {
       max-width: 375px;
       margin: auto;
       background-color: #F2F0EB;
       height: 500px;;
       border-radius: 10px;
       display: block;
       padding-bottom: 20px;
     }
     
   
     
     .topnav #myLinks {
       display: none;
     }
     
     .topnav a {
       color: black;
       padding: 14px 16px;
       text-decoration: none;
       font-family: 'courier new', sans-serif;
       font-size: 17px;
       display: block;
       background-color: #F2F0EB;
     }
     
     .topnav a.icon {
      background-color:#F2F0EB ;
       display: block;
       position: absolute;
       right: 0;
       top: 0;
     }
     
     .topnav a:hover {
       background-color: #da407b;
      
     }
     
     .active {
   
       color: #F2F0EB;
     }

    .flex-container-main{
       display: none;
    }

    #resume{
       font-family: 'courier new', sans-serif;
    }


    #contact{
       font-family: 'courier new', sans-serif;
    }
  

   
    .flex-container-pages{
        display: block;
        margin-left: auto;
        margin-right: auto;
         width: 100%;
         height: 100%; 
         background-color: #F2F0EB;
         font-family: 'Montserrata', sans-serif;
        justify-content: center;
     
     }
  
     h1{
        font-size: 12.rem;
        margin-left: auto;
        margin-right:auto;
        padding-bottom: 50px;
         
     
     }
   
     h2{
        font-size: 20.rem;
        padding-top: 20px;
        padding-right: 10px;
        padding-bottom: 30px;
     
     }
   
   
    p{
        font-size: 10px;
        padding-bottom: 30px;
    }
   
    #postmodern{
     width: 100%;
     object-fit: cover;
     object-position: 50% 50%;
        
    }

    #forum{
        width: 100%;
        object-fit: cover;
        object-position: 50% 40%;
    }

    #cal{
        width: 100%;
        object-fit: cover;
        object-position: 80% 100%;
    }

    #lamosca{
        width: 100%;
        object-fit: cover;
        object-position: 50% 80%;
    }

    #trees{
        width: 100%;
        object-fit: cover;
        object-position: 30% 40%;
    }

    #longing{
        width: 100%;
        object-fit: cover;
        object-position: 50% 50%;
    }

    h4{
        font-family: 'Courier New', Courier, monospace;
        font-size: 12px;
        margin-top: -10px;
        padding-left: 20px;
    }
   
     
   }

/* ---------------iphone large --------------*/


@media (max-width: 425px) and (max-height: 627px) {
    .flex-container-header {
        display: none;
    

     
    }

    .mobile-container {
       max-width: 480px;
       margin: auto;
       background-color: #F2F0EB;
       height: 500px;;
       border-radius: 10px;
       display: block;
       padding-bottom: 20px;
     }
     
   
     
     .topnav #myLinks {
       display: none;
     }
     
     .topnav a {
       color: black;
       padding: 14px 16px;
       text-decoration: none;
       font-family: 'courier new', sans-serif;
       font-size: 17px;
       display: block;
       background-color: #F2F0EB;
     }
     
     .topnav a.icon {
      background-color:#F2F0EB ;
       display: block;
       position: absolute;
       right: 0;
       top: 0;
     }
     
     .topnav a:hover {
       background-color: #da407b;
      
     }
     
     .active {
   
       color: #F2F0EB;
     }

    .flex-container-main{
       display: none;
    }

    #resume{
       font-family: 'courier new', sans-serif;
    }


    #contact{
       font-family: 'courier new', sans-serif;
    }
   
    .flex-container-pages{
        display: block;
        margin-left: auto;
        margin-right: auto;
         width: 100%;
         height: 100%; 
         background-color: #F2F0EB;
         font-family: 'Montserrata', sans-serif;
        justify-content: center;
     
     }
   
     h1{
        font-size: 8px;
        margin-left: auto;
        margin-right:auto;
        padding-bottom: 50px;
     
     }
   
     h2{
        font-size: 8px;
        padding-top: 20px;
        padding-right: 10px;
        /* padding-left: 10px; */
        padding-bottom: 30px;
     
     }
   
   
    p{
        font-size: 10px;
        padding-bottom: 30px;
    }
   
    #postmodern{
     width: 100%;
     object-fit: cover;
     object-position: 50% 50%;
        
    }

   
   
    #postmodern{
        width: 100%;
        object-fit: cover;
        object-position: 50% 50%;
           
       }
   
       #forum{
           width: 100%;
           object-fit: cover;
           object-position: 50% 40%;
       }
   
       #cal{
           width: 100%;
           object-fit: cover;
           object-position: 80% 100%;
       }
   
       #lamosca{
           width: 100%;
           object-fit: cover;
           object-position: 50% 80%;
       }
   
       #trees{
           width: 100%;
           object-fit: cover;
           object-position: 30% 40%;
       }
   
       #longing{
           width: 100%;
           object-fit: cover;
           object-position: 50% 50%;
       }


       h4{
        font-family: 'Courier New', Courier, monospace;
        font-size: 12px;
        margin-top: -10px;
        padding-left: 20px;
    }
     
   }

/* ---------------tablet --------------*/


@media (max-width: 768px) and (max-height: 627px) {
    #kayla{
        font-size: 8px;
        padding-right: 5px;
        padding-left: 5px;
        text-wrap: nowrap;

    }
   
    #contact{
        font-size: 8px;
        padding-right: 5px;
        padding-left: 5px;
    }
   
    #resume{
        font-size: 8px;
        padding-right: 5px;
        padding-left: 5px;
    }

    .dropdown{
        font-size: 4px;
        padding-right: 5px;
        padding-left: 10px;
    }

    .dropbtn {
        font-size: 8px;
        text-align: left; 
        color: #000000;
        font-family: 'Michroma', sans-serif;
        text-decoration: none;
       
    }
   
    .flex-container-pages{
        display: block;
        margin-left: auto;
        margin-right: auto;
         width: 100%;
         height: 100%; 
         background-color: #F2F0EB;
         font-family: 'Montserrata', sans-serif;
        justify-content: center;
     
     }
   
     h1{
        font-size: 40px;
        margin-left: auto;
        padding-bottom: 50px;
     
     }
   
     h2{
        font-size: 40px;
        padding-right: 10px;
        padding-bottom: 30px;
     
     }
   
   
    p{
        font-size: 10px;
        padding-bottom: 30px;
    }
   
    #postmodern{
     width: 100%;
     object-fit: cover;
     object-position: 50% 50%;
        
    }

    .flexbox-postmodern{
        display: block;
        flex-direction: column;
        width: 100%;
        /* height: 100%; */
        background-color: #F2F0EB;
        font-family: 'Michroma', sans-serif;
        align-items: center;
        justify-content: center;
        margin-top: 50px;
    }
     

    h4{
        font-family: 'Courier New', Courier, monospace;
        font-size: 12px;
        margin-top: -10px;
        padding-left: 20px;
    }

    
   }