html {  
    height: 100%;
}
body  {
    background-attachment: fixed;
    background-image: linear-gradient(to bottom, #003c71 0%, #017f7c 100%);
    background-size: cover;
    color: white;
    filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#017f7c', endColorstr='#003c71'); /* for older IE */
    font-family: 'Noto Sans', 'Roboto', sans-serif;
    margin: 0;
    padding: 0;
}
.overlay {
    content: '';
    background-image: url('../assets/clouds-unsuported-browser-background.png');
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;
    bottom: 0;
    height: 65vh;
    position: fixed;  
    width: 100%;
}  
.unsupported {
    max-width: 37rem;
    padding: 6rem 1.75rem;
    position: relative;
}
.unsupported__header {
    padding-top: 3rem;
    padding-bottom: 1.5rem;
}
.unsupported__title {
    font-size: 2.5rem;
    font-weight: 100;
    line-height: 1.2;
    margin-bottom: 1rem;
}
.unsupported__sub-title {
    font-size: 1.125rem;
    font-weight: 200;
    line-height: 1.33;
}
.browsers__heading {
    font-size: 0.75rem;
    font-weight: 600;
    letter-spacing: 3.12px;
    line-height: 1.33;
    text-transform: uppercase;
}
.browser__list {
    padding-left: 0;     
}
.browser__block {
    list-style: none;
    padding: 0.5rem 0 2rem;
}
.browser__icon {
    max-height: 3.75rem;
    display: inline-block;
    vertical-align: middle;
}
.browser__wrap {
    padding-left: 1rem;
    display: inline-block;
    vertical-align: middle;
}
.browser__name {
    display: block;
    font-size: 1rem;
    font-weight: normal;
    line-height: 1.38;
    padding-bottom: 4px;
}
.browser__download {
    color: inherit;
    display: block;
    font-size: 0.875rem;
    font-weight: 600;
    line-height: 1.5;
    position: relative;
    text-decoration: none;
}
.browser__download::after {
    content: url('../assets/browser-download.svg');
    height: 12px;
    padding-left: 8px;
    position: absolute;
    top: 0.75px;
}
@media  (min-width: 768px) {
    .overlay {
        height: 50vh; 
    } 
    .unsupported {
        padding: 6rem 4.25rem;
    }
    .unsupported__header {
        padding: 2.15rem 4.25rem 2.15rem 0;
    }
    .unsupported__title {
        font-size: 3.75rem;
    }
}
@media  (min-width: 1024px) {
    .overlay {
        height: 90vh; 
    }  
    .unsupported {
        padding-left: 9.5rem;
    }
    .unsupported__header {
        padding-right: 0;
    }
    .browser__block {
        width: 49%;
        display: inline-block;
    }
}
@media  (max-width: 1023px) {
    .browser__block.hide {
        display: none;
    }
}