@import url('https://fonts.googleapis.com/css2?family=SN+Pro:ital,wght@0,200..900;1,200..900&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Nunito:ital,wght@0,200..1000;1,200..1000&display=swap');
*{
    margin:0;
    padding:0;
    box-sizing: border-box;
}

body{
    background-color: #faeed8;
    background-image: url(../img/blured_background.PNG);
    background-repeat: no-repeat;
    background-size: 100% 100%;
    background-attachment:fixed;
    font-family: "Nunito", sans-serif;
    font-optical-sizing: auto;
    font-style: normal;
    font-size: 1.5rem;
    display: grid;
    grid-template-columns: repeat(8, 1fr);
    grid-auto-rows: auto auto 10rem;
    grid-template-areas:
    "hd hd hd hd hd hd hd hd"
    "sb sb mn mn mn mn mn mn"
    "ft ft ft ft ft ft ft ft"
    ;
}
.header{
    grid-area: hd;
    display:grid;
    width: 100%;
    grid-template-columns: 0.5fr 2fr 1fr;
    grid-auto-flow: column;
    align-items: center;
    justify-items: center;
}
.sidebar{
    background-color: #faeed8;
    margin-left: min(120px, 10%);
    grid-area: sb;
    display: flex;
    flex-wrap: nowrap;
    flex-direction: column;
    align-items: center;
    border-bottom-left-radius: 2rem;
    border-top-left-radius: 2rem;
}
.main{
    border-bottom-right-radius: 2rem;
    border-top-right-radius: 2rem;
    background-color: #faeed8;
    grid-area: mn;
    display: flex;
    flex-direction: column;
    flex-wrap: nowrap;
    align-items: center;
    margin-right: min(120px, 10%);
}
.footer{
    grid-area: ft;
}

h1 {
    overflow-wrap: break-word;
    width: 90%;
    font-size: 3rem;
    font-family: "SN Pro", sans-serif;
    font-optical-sizing: auto;
    font-style: normal;
}
h2 {
    display: inline-block;
    font-weight: bolder;
    font-size: 2rem;
}

.icon{
    max-width: 100%;
    height: auto;
}
figure{
    width: 100%;
    height: auto;
    position: relative;
}

p{
    width: 80%;
    background-color: #f3e899;
    margin: clamp(20px, 10%, 30px);
    font-size: 1.3rem;
}
#home_button{
    position: relative;
    width: clamp(70px, 100%, 150px);
    height: auto;
    left: clamp(10px, 30%, 200px);
    bottom: clamp(-20px, -20%, -150px )
}
#nelli_donate{
    width: clamp(100px, 100%, 300px);
    height: auto;
}
.title{
    width: clamp(150px, 100%, 750px);
    height: auto;
}
a,
a:visited{
    text-decoration: underline;
    color: black;
}

button{
    font-size: 2rem;
    background-color: #47cae1;
    border-radius: 1rem;
}
button:hover{
    background-color: #e37620;
    border-radius: 1rem;
}
.redemption{
    position: relative;
    left: clamp(100px, 60%, 400px);
    width: auto;
    height: 4rem;
    font-size: 1.8rem;
    display: flex;
    align-items: center;
    background-color: #d95848;
    border-radius: 50%;
    padding: 1rem;
    color: aliceblue;
}
.redemption:hover{
    border-radius: 50%;
}

img{
    max-width: 100%;
    height: auto;
}
#info{
    text-align: center;
}