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

*{
    margin: 0;
    padding: 0;

}
body{
    background-color: #F2F0EB;
}

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

h3{
    font-size: 24px;
    color: #000000;
    font-family: 'Michroma', sans-serif;
    padding-top: 20px;
    padding-right: 20px;
    padding-left: 20px;
    padding-bottom: 20px; 
    text-align: center;

}

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

#kayla:hover{
    color: #da407b;
    text-decoration: none;
}

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

#contact:hover{
    color: #da407b;
    text-decoration: none;
}

#resume{
    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;
}

#resume:hover{
    color: #da407b;
    text-decoration: none;
}


.flexbox{
    display: block;
    width: 100vw;
    height: 100vh;
    background-color: #F2F0EB;
    font-family: 'Michroma', sans-serif;
    flex-wrap: nowrap;
    
  

}

h1{
    font-size: 24px;
    color: #000000;
    font-family: 'Michroma', sans-serif;
     padding-top: auto;
    /* padding-right: 100px; */
    /* padding-left: 100px; */
    padding-bottom: 20px; 
   
    
}

p{
    font-size: 16px;
    color: #000000;
    padding-top: 20px;
    /* padding-right: 100px;
    padding-left: 100px; */
    padding-bottom: 20px; 
    padding-left: 20px;
    padding-right: 20px;
    font-family: 'figtree',sans-serif;

}

a{
    text-decoration:none;

}

a:hover{
    color: #da407b;
}

.flex-container-pages{
   display: block;
   justify-content: center;
   flex-direction: column;
   margin-left: auto;
   margin-right: auto;
    width: 50%;
    height: 50%; 
    /* padding-right: 400px;
    padding-left: 400px; */
    background-color: #F2F0EB;
    font-family: 'Montserrata', sans-serif;
   justify-content: center;
   flex: wrap;

}


.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;
    margin-top: 400px;

}



 h2{
    font-size: 24px;
    color: #000000;
    font-family: 'Michroma', sans-serif;
     padding-top: 100px;
    /* padding-right: 100px; */
    /* padding-left: 100px; */
    padding-bottom: 20px; 
   
    

}



.flexbox{
    display: flex;
    width: 100vw;
    height: 100vh;
    background-color: #F2F0EB;
    font-family: 'Michroma', sans-serif;
    flex-wrap: nowrap;
    
  


}

.flex-container-image{
    display: flex;
    flex-direction: in-line;
    width: 55%;
    height: 40%;
    background-color: #20195c;
    font-family: 'Michroma', sans-serif;
    margin-top:30px;
flex-wrap: nowrap;  

} 

 .flex-container-description{
    display: flex;
    flex-direction: in-line;
    width: 50%;
    height: 30%;
    /* background-color: #4e8482; */
    font-family: 'Michroma', sans-serif;
   flex-wrap: nowrap;
   margin-top:40px;
} 



#postmodern{
    width: 100%;
    /* height: 100%; */
}

#riso{
    width: 100%;
    /* height: 100%; */
}


#bjork{
    width: 100%;
    /* height: 100%; */
}



#trees{
    width: 100%;
    /* height: 100%; */
}

#forum{
    width: 100%;
    /* height: 100%; */
}

#lamosca{
    width: 100%;
    /* height: 100%; */
}

#riso{
    width: 100%;
    /* height: 100%; */

}

#about{
    width:60%;
   margin-top: 50px;
   margin-left:120px;


}

#abouttext{
    text-decoration: none;
}

#abouttext:hover{
    color: #da407b;
}

#longing{
    width: 100%;
    /* height: 100%; */

}

.mobile-container {
    max-width: 480px;
    margin: auto;
    background-color: #F2F0EB;
    height: 500px;;
    border-radius: 10px;
    display: none;
    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: none;
    background-color: #F2F0EB;
  }
  
  .topnav a.icon {
   background-color:#F2F0EB ;
    display: none;
    position: absolute;
    right: 0;
    top: 0;
  }
  
  .topnav a:hover {
    background-color: #da407b;
   
  }
  
  .active {

    color: #F2F0EB;
  }





/* Style form elements */
#form-container {
    width: 100%;
    max-width: 400px;
    margin: 0 auto;
}

label {
    display: block;
    margin-bottom: 5px;
    font-weight: bold;
    font-family: 'Courier New', Courier, monospace;
}

input[type="text"],
input[type="email"],
input[type="password"],
textarea {
    width: 100%;
    padding: 10px;
    border: 1px solid #ccc;
    border-radius: 4px;
    box-sizing: border-box;
    margin-bottom: 10px;
}

textarea {
    height: 150px;
}

input[type="submit"] {
    background-color: #F2F0EB;
    color: black;
    padding: 10px 20px;
    border: 2px solid black;
    border-radius: 4px;
    cursor: pointer;
    font-family: 'Courier New', Courier, monospace;
}

input[type="submit"]:hover {
    background-color: #da407b;
}

/* Style message */
.message {
    font-size: 14px;
    color: #888;
    font-family: 'Courier New', Courier, monospace;
}

/* Style form elements */
input[type="text"],
input[type="email"],
input[type="password"],
select,
textarea {
    width: 100%;
    padding: 10px;
    border: 1px solid #ccc;
    border-radius: 4px;
    box-sizing: border-box;
    margin-bottom: 10px;
}

/* Style text area */
textarea {
    height: 150px;
}




  
 

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

@media (max-width: 320px) 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;
     }

  
  

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

    #kayla{
        font-family: 'courier new', sans-serif;
    }
   
    .flex-container-pages{
        display: block;
        margin-left: auto;
        margin-right: auto;
         width: 100%;
         height: 100%; 
         /* padding-right: 400px;
         padding-left: 400px; */
         background-color: #F2F0EB;
         font-family: 'Montserrata', sans-serif;
        justify-content: center;
     
     }
   
     h1{
       display:block;
       margin-left:auto;
       margin-right:auto;
        font-size: 10px;
        padding-right: 10px;
        padding-left: 10px;
     
     }
   
   
   
    p{
        font-size: 10px;
        padding-bottom: 20px;
        margin-left: 10px;
        margin-right: 10px;
    }
   

#about{
    width: 100%;
    margin-left: auto;
    margin-right: auto;
}

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

@media (max-width: 475px) and (max-height: 812px) {
    .mobile-container {
        max-width: 480px;
        margin: auto;
        background-color: #F2F0EB;
        height: 500px;
        border-radius: 10px;
        display: block;
        padding-bottom: 40px;
       
      }
      
    
      
      .topnav #myLinks {
        display: none;
      }
      
      .topnav a {
        color: black;
        padding: 14px 16px;
        text-decoration: block;
        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-header{
        display: none;
     }

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

     }

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

     }

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

     a{
        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: 30px;
        margin-top: 5px;
        margin-right: auto;
        flex-direction: inline;
        flex-wrap: nowrap;
        justify-content: left;
       
     
     }
   
h3{
    font-size: 20px;
    margin-top: auto;
    margin-right: auto;
    flex-direction: inline;
    flex-wrap: nowrap;
    justify-content: left;
}

   
    p{
        font-size: 12px;
        width: 80%;
        /* object-fit: cover; */
        /* object-position: 50% 50%; */
        padding-left: 50px;

           justify-content: center;
    }
}
   
 

#about{
    width: 80%;
   justify-content: center;
   margin-left: auto;
   margin-right:auto;
   padding-left: 50px;
   padding-right: 20px;
}

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


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

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

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

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

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

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

        
    /* -----------------tablet----------------- */
        @media (max-width: 768px) and (max-height: 812px) {


        .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-header{
            display: none;
          }   
   
        }