/* CSS Document */


body {
    background-color: #e7fffd;
    padding: 0;
    margin: 0;
    

}

.container {
    width: 90%;
    margin: 0 auto;
    background-color: rgb(255, 255, 255);
    box-shadow: 2px 2px 10px rgb(84, 84, 84);
    border: solid 1px black;
    padding: 0;
   

}

nav {
    background-color: black;
    border: #000000 1px solid;
}

.navi {
    display: flex;
    min-height: 90%;

    list-style: none;
    justify-content:center;
    align-items:center;
    gap: 5%;
    padding: 2% 5%;
}

.main {
    min-height: 500px;
    padding: 0%;
    display: flex;
    
    
}

.left{
    min-width: 30%;
    min-height: 500px;
    padding: 3% 3% 2% 10%;
    box-sizing: border-box;
    
}

.right{
    min-width: 60%;
    min-height: 500px;
    box-sizing: border-box;
    background: url(images/main_images.jpg) no-repeat;
    background-size: cover;

    
    
}

#mainimage {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.row {
    display: flex;
    background-color: rgb(255, 255, 255);
    padding: 4% 10%;
    justify-content: center;
    gap: 3%;

}

.column {
    min-width: 30%;
    min-height: 300px;
    box-sizing: border-box;
    background-color: rgb(255, 255, 255);
    box-shadow: 1px 1px 5px rgb(104, 104, 104);
    

}
.columntext {
    min-width: 30%;
    min-height: 300px;
    padding: 10%;
    padding-top: 2%;
    box-sizing: border-box;
    background-color: rgb(255, 255, 255);

}

.columnimage {
    width: 100%;
    height: 200px;
    object-fit:cover;

}

.tips {
    min-height: 60px;
    display: flex;
    padding: 1%;
    justify-content: center;
    align-items: center; 
    align-content: center;
    margin: 0 10% 5%;
}

.tipstext {
    min-width: 65%;
    min-height: 60px;
    box-sizing: border-box;
    padding: 1% 5% 2% 7%;
    border: solid 1px black;
    
    
}

.tipsphoto {
    min-width: 35%;
    min-height: 60px;
    box-sizing: border-box;
    padding: auto;
    background-color: rgb(255, 255, 255);
}

.photoshoplogo{
   max-height: 200px;
   margin: 0 20% 0;
   
}

.footer {
    min-height: 100px;
    background: rgb(81, 154, 163);
}
 
.footerinfo {
    display: flex;
    list-style: none;
    justify-content: center;
    gap: 2%;
    padding: 2%;  
    padding-bottom: 1%;
}

.copyright{
    list-style: none;
    text-align: center;
    justify-content: center;
    padding: 0 2%;
    padding-bottom: 3%;
}

h1, h2, h3, h4, p, li {
    font-family: 'Poppins', sans-serif;
}

p, li {
    font-size: 1em;
}

.copyright li {
    font-size: 0.8em;
}

a:link, a:visited { 
    text-decoration: none;
    color: #ea4a8f;
}

a:hover, a:active {
    text-decoration: underline;
}

.navi a:link, .navi a:visited {
    background-color: rgb(0, 0, 0);
    color: aliceblue;
    text-decoration: none;
    padding: 15px;
    display: inline-block;

}
.navi a:hover, .navi a:active {
    background-color: #ea4a8f;
    color: azure;
}


.footerinfo a:link, .footerinfo a:visited {
    text-decoration: none;
    color: rgb(0, 0, 0);
}

.footerinfo a:hover, .footerinfo a:active {
    color: #a3e4e1;
}



@media (max-width:992px) { 
    .row {
    display: block;
}
.column {
    width: 100%;
    margin: 10px auto;
}
.left { f
    float: none;
    width: 100%;
    margin: 10px auto;
}

.right { 
    float: none; 
    width: 100%;
    margin: 10px auto;
}

.navi {
display: block;
} 

.footerlink {
    display: block;
}

.main {
    display: block;
}

.tips {
    display: block;
}

.tipstext {
    float: none; 
    width: 100%;
    margin: 10px auto;
}

.tipsphoto {
    float: none; 
    width: 100%;
    margin: 10px auto;
}

}