#wrapper {
    display: grid;
    gap: 10px 5px;
    width: auto;
    max-width: 960px;
    margin: auto;
    
}

header {
    grid-area: header;
}
nav {
    grid-area: nav;
}
aside {
    grid-area: aside;
}
bside {
    grid-area: bside;
}
main {
    grid-area: main;
    max-width: max-content;
}
footer {
    grid-area: footer;
}

@media screen and (max-width: 550px) {
    #wrapper {
        grid-template-areas:
        'header header'
        'nav nav'
        'bside main'
        'bside aside'
        'footer footer'

        
    }
}
@media screen and (min-width: 549px) {
    #wrapper {
        grid-template-areas:
        'header header header'
        'nav nav nav'
        'aside main bside'
        'footer footer footer';
    }
}

/* Above this line is GRID CSS! */
/* Below this line is DROPDOWN CSS! (NAVIGATION) */

.dropdown {
    position: relative;
    display: inline-block;
}
  
.dropdown p {
    line-height: 17px;
    font-size: 85%;
    margin: 10px;
    margin-bottom: 5px;
}
/* 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 {
    background-color: #e974a560;
    color: #c5318d;
}
  
  
/* Dropdown Content (Hidden by Default) */
.dropdown-content {
    display: none;
    position: absolute;
    background-color: #ffdeea;
    min-width: 125px;
    box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
    z-index: 1;
}
  
/* Links inside the dropdown */
.dropdown-content a {
    color: rgb(102, 0, 59);
    padding: 6px 10px;
    text-decoration: none;
    display: block;
}
  
/* Change color of dropdown links on hover */
.dropdown-content a:hover {background-color: #d442739f;
}


/* Above this line is DROPDOWN CSS (NAVIGATION)! */
/* Below this line is COLOR + STYLE CSS! */

body {
    background-image: url(https://file.garden/Z06GUJZl_xbMtxnn/wallpapers/hearttiletemp.webp);background-attachment: fixed;
    background-size: 250px;
    background-color: rgb(117, 1, 1);
    background-blend-mode: color-burn;

    img {
  object-fit: contain;
  min-width: 200px;
  height: 100%;
  width: 100%;
    }
}

nav, main, aside, bside, footer {
    border: 3px inset #ff008c;
    border-radius: 5px;
    background-color: #f5b6d5;
    padding: 5px;
    color: #be0c56;
}

a:link{
    color: #850636;
}

a:visited{
    color: #46021c;
}
  
main, aside, bside, footer {
    font-family: 'jaimelepoisson';
}

header, nav {
    font-family: 'supermorning';
    text-align: center;

    a:link {
        text-decoration: none;
        color: #be0c56;
        
    }
}

header {
    color: #fd006a;
    border-radius: 50px;
    background-repeat: no-repeat;
    background-size: auto;
    -webkit-text-stroke-width: 2px;
    -webkit-text-stroke-color: #2e0112;

    img {
        border-radius: 50px;
    }
}

h2 {
    line-height: 25px;
    
}

h3 {
    line-height: 20px;
}

/* Image fade code - https://www.w3schools.com/css/tryit.asp?filename=trycss_css_image_overlay_fade */