@import url('https://fonts.googleapis.com/css2?family=Poppins&display=swap');
*{
 border-radius: 10px;
 padding: 0;
 margin: 0;
 box-sizing: border-box;
 scroll-behavior: smooth;
}

*::selection{
    background: #2d6a4f;
    color: #fff;
}

.header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    /* background: #95d5b2; */
    background-color: #95d5b269;
    padding: 0 1rem;
    backdrop-filter: blur(5px);
    -webkit-backdrop-filter: blur(5px); /* fallback property for safari; Iphone users be wilding these days for real*/
}

:root{
    --link: #333;
}

.logo img {
    height: 15dvh; /* Adjust the size as needed */
}

/* 
Colour Palletes
https://coolors.co/palettes/popular/green
 */

.icons {
    display: flex;
    /* background-color:#52b788; */
    background-color: #52b78811;
    padding: 0.5rem 0 0.5rem 0.5rem;
    justify-content: center;
    align-items: stretch;
    /* position: sticky; */
    /* top: 0; */
    backdrop-filter: opacity(90%) blur(10px);
    -webkit-backdrop-filter: opacity(90%) blur(10px);
}

.icon {
    margin-right: 2rem;
    cursor: pointer;
    /* Style the icons as needed */
    font: bold clamp(0.5rem, 3vw, 2rem) sans-serif; 
}

a{
    color: var(--link);
} 
a:visited{
    color: var(--link);
}

body {
    font-family: Arial, sans-serif;
    /* background-color: #d8f3dc; */
    /* background-image: url("site-bg.jpg"); */
    background-image: url("../img/site-bg-5.jpg");
    background-size: cover;
    background-repeat: no-repeat;
    /* background-attachment: fixed; */
    color: #333;
    margin: 0;
    padding: 0;
}

.calculator {
    /* max-width: 70%; */
    margin: 0 auto;
    padding: 20px;
}

.cards {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(350px, 3fr));
    gap: 1rem;
    margin-top: 1rem;
    padding: 5rem;
}

.card {
    /* background-color: #fff; */
    background: #ffffff2e;
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
    padding: 20px;
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    border: 5px solid transparent;
    padding: 5% ;
    font: normal clamp(1rem, 1vw, 3rem) 'poppins', sans-serif,;
}

.card h2 {
    font: bold clamp(1rem, 10vw, 2rem)  'poppins', sans-serif; 
    margin-bottom: 10px;
}
/* Dark mode */
body.dark-mode {
    background-color: #1e1e1e;
    color: #fff;
    background-image: url('../img/dark-bg.jpg');
    --link: #fff;
}

.card.dark-mode, .read-btn.dark-mode{
    background-color: #000000;
    color: #737373;
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
}

.choice-card > div{
    min-height: 50%;
    max-width: 70%;
    margin: auto;
}
.choice-card{
    min-height: 100dvh;
    padding: 5vw;
    margin: auto;
}

.choice-card h1, .introduction h1{
    text-align: center;
    font: bold clamp(1rem, 10vw, 2rem)  'poppins', sans-serif;  
    padding: 2rem;
    margin: 2rem auto;
    max-width: fit-content;
}

.choice-card h1{
    backdrop-filter: blur(5px);
    -webkit-backdrop-filter: blur(5px);
    background-color: #ffffff4f;
}

.introduction{
    /* text-align: center; */
    padding: 2rem 5rem 5rem 5rem;
    backdrop-filter: blur(5px);
    -webkit-backdrop-filter: blur(5px);
    max-width: 70%;
    margin: 5rem auto;
    background-color: rgba(200, 200, 200, 0.5);
}
.introduction p, .sizeM{
    /* padding: 1rem; */
    font: normal clamp(1rem, 3vw, 2rem) 'poppins', sans-serif;
}

.read-btn{
    border: transparent;
    background-color: #ffffff50;
    color: #333;
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    font: bold clamp(1rem, 1vw, 2rem) 'poppins', sans-serif;
    padding: 1rem;
    display: flex;
    align-items: center;
    margin-top: 2vw;
    cursor: pointer;
}
.read-btn:hover{
    transform: scale(0.89);
    transition: all 500ms;
}