@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@400;600&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Open+Sans&display=swap');
.attribution { font-size: 11px; text-align: center; }
.attribution a { color: hsl(228, 45%, 44%); }
html, body  {
    height:100%;
    box-sizing:border-box;
}
html {
    font-family: 'Open Sans', sans-serif;
    background: url('../images/bg-mobile.svg')  no-repeat , #674BAF;
    background-size:cover;
    color:white;
}
main {
    margin-top:3.5rem;
    text-align:center;
}
h1 {
    text-align:center;
    font-family: 'Poppins', sans-serif;
    font-size:1.44rem;
    font-weight:700;
    line-height:2rem;
}
p {
    font-weight:400;
    font-size:1.01rem;
    line-height:1.6rem;
}
button {
    font-size:0.9rem;
    color: #674BAF;
    margin-top:0.7rem;
    padding:0.7rem 4.5rem;
    border-radius:2rem;
    border:none;
    cursor:pointer;
    -webkit-box-shadow: 1px 2px 15px -5px #000000; 
    box-shadow: 1px 2px 15px -5px #000000;
}
button:hover {
    color:white;
    background-color: #E882E8;
    cursor:pointer;
}
#main-body {
    padding: 2rem  ;
}
img {
    display:block;

}
#logo {
    width:7rem;
}
#compCell {
    margin-top:4rem;
    width:100%;
 
}

.bottom__icons {
    margin-top:65px;
    text-align:center;
}
.circle-icon {
    padding:7px;
    border-radius:50%;
}
.circle-icon:hover {
    color:hsl(300, 69%, 71%);
    border-color:hsl(300, 69%, 71%);
    cursor:pointer;
}
#size1 {
    height:16px;
    width:16px;
}
#size2 {
    height:16px;
    width:16px;
}
#size3 {
    height:16px;
    width:16px;
}
@media all and (min-width:768px) {
    #logo {
        width:10rem;
    }
    p {
        font-size:1.2rem;
    }
}
@media all and (min-width:900px) {
    #compCell {
        margin-top:7rem;
    }
    main {
        margin-top:7.5rem;
    }
    main button {
        padding:1rem 6rem;
        font-size:1.5rem;
    }
    h1 {
        font-size:2.44rem;
    }
    p {
        font-size:1.5rem;
        line-height:2rem;
    }
}
@media all and (min-width:1025px) {
    html {
        background: url('../images/bg-desktop.svg')  no-repeat , #674BAF ;
        background-size:cover;
    }
    #main-body {
        padding:0;
        display:grid;
        grid-template-rows:10vh 81vh 9vh;
        grid-template-columns:0.6fr 0.4fr;
        grid-template-areas: "header ."
                             "compCell main"
                             ". bottom__icons";
        align-content:center;
        justify-content:center;
        padding:3rem 5rem 0rem 5rem;
        column-gap:3rem;
        row-gap:1.5rem;
    }
    header {
        grid-area:header;
    }
    #compCell {
        width:100%;
        margin:0rem;
        margin-top:1rem;
        grid-area:compCell;
    }
    main {
        margin:0;
        text-align:left;
        grid-area:main;
    }
    main h1 {
        font-size:2rem;
        line-height:3rem;
        text-align:left;
    }
    main  button {
        font-size:1.1rem;
        margin-top:0.5rem;
        padding:1.2rem 4.2rem;
        font-family: 'Poppins', sans-serif;
    }
    p {

        font-size:1.06rem;
    }
    .bottom__icons {
        row-gap:0;
        grid-area:bottom__icons;
        margin:0;
        justify-content:flex-end;
        align-items:center;
        margin-bottom:4rem;
    }
    .fab {
        margin:0.5rem;
    }
    #logo {
        width:14rem;
    }
}
@media all and (min-width:1400px) {
    html {
        background: url('../images/bg-desktop.svg')  no-repeat , #674BAF ;
        background-size:100%;
    }
    #main-body {
        padding:0;
        display:grid;
        grid-template-rows:10vh 65vh 7vh;
        grid-template-columns:0.6fr 0.4fr;
        grid-template-areas: "header ."
                             "compCell main"
                             ". bottom__icons";
        align-content:center;
        justify-content:center;
        padding:3rem 5rem 0rem 5rem;
        column-gap:3rem;
        row-gap:3rem;
    }
    header {
        grid-area:header;
    }
    #compCell {
        width:100%;
        margin:0rem;
        margin-top:1rem;
        grid-area:compCell;
    }
    main {
        margin:0;
        margin-top:2rem;
        text-align:left;
        grid-area:main;
    }
    main h1 {
        font-size:2.4rem;
        line-height:4rem;
        text-align:left;
    }
    main  button {
        font-size:1.1rem;
        margin-top:0.5rem;
        padding:1.2rem 4.2rem;
        font-family: 'Poppins', sans-serif;
    }
    p {

        font-size:1.06rem;
    }
    .bottom__icons {
        row-gap:0;
        grid-area:bottom__icons;
        margin:0;
        margin-bottom:4rem;
        text-align:right;
        display:flex;
        gap:10px
    }
    #size1 {
        height:20px;
        width:20px;
    }
    #size2 {
        height:20px;
        width:20px;
    }
    #size3 {
        height:20px;
        width:20px;
    }
    .circle__icon {
        padding:15px;
    }
    .fab {
        margin:0.5rem;
        
    }
    #logo {
        width:14rem;
    }
}