body {
    margin: 0 auto;
    padding: 0;
    background-color: lightgrey;
}

a {
    text-decoration: none;
    color: white;
}

a:hover {
    text-decoration: underline;
    color: blue;
}

img {
    height: auto;
    width: 100%;
}

img:hover {
    opacity: 0.5;
}

.header {
    font-family: Georgia, 'Times New Roman', Times, serif;
    text-align: center;
}

p { 
    font-family: Georgia, 'Times New Roman', Times, serif;
    color: white;
    text-align: center;
    background-color: black;
    width: auto;
    padding: 10px;
    margin: -1% 0 0 0;
}

.picture-a-text {
    padding: 10px;
    margin: -2% 0 0 0;
}

.picture-b-text {
    padding: 10px;
    margin: -2% 0 0 0;
}

.news {
    font-family: Georgia, 'Times New Roman', Times, serif;
    text-align: center;
    color: red;
    background-color: black;
}

.films {
    font-family: Georgia, 'Times New Roman', Times, serif;
    text-align: center;
    color: red;
    background-color: black;
}

.games {
    font-family: Georgia, 'Times New Roman', Times, serif;
    text-align: center;
    color: red;
    background-color: black;
}

.music {
    font-family: Georgia, 'Times New Roman', Times, serif;
    text-align: center;
    color: red;
    background-color: black;
}

.netflix {
    font-family: Georgia, 'Times New Roman', Times, serif;
    text-align: center;
    color: red;
    background-color: black;
}

.amazon-primevideo {
    font-family: Georgia, 'Times New Roman', Times, serif;
    text-align: center;
    color: red;
    background-color: black;
}

.subscribe {
    font-family: Georgia, 'Times New Roman', Times, serif;
    text-align: center;
    color: red;
    background-color: black;
}

/* news */

.row-news {
    margin-top: 1%;
}

.card {
    width: 100%;
    background: #fff;
    border: 1px solid #ccc;
    margin-bottom: 2%;
    transition: 0.3s;
}

.card-header {
    text-align: center;
    height: 2vh;
    background: linear-gradient(to right, #ff416c, #ff4b2b);
    color: #fff;  
}

.card-body {
    padding: 8% 1%;
    text-align: center;
}

.img-card {
    display: block;
    object-fit: cover;
    margin-top: -4%;
}

.card-news {
    font-family: Georgia, 'Times New Roman', Times, serif;
    margin-top: 4%;   
    color: black;
    font-weight: bold;
    background-color: white;
}

.btn {
    display: block;
    color: #fff;
    text-align: center;
    background: linear-gradient(to right, #ff416c, #ff4b2b);
    text-decoration: none;
    padding: 3% 1.6%;
    margin-bottom: -8%;
}

.card:hover {
  transform: scale(1.05);
  box-shadow: 0 0 40px -10px rgba(0, 0, 0, 0.25);
}

/* films */

.row-films {
    margin-top: 1%;
}

.card-films {
    margin-top: 4%;   
    color: black;
    font-weight: bold;
    background-color: white;
}

/* games */

.row-games {
    margin-top: 1%;
}

.card-games {
    margin-top: 4%;   
    color: black;
    font-weight: bold;
    background-color: white;
}

/* music */

.row-music {
    margin-top: 1%;
}

.card-music {
    margin-top: 4%;   
    color: black;
    font-weight: bold;
    background-color: white;
}

/* netflix */

.row-netflix {
    margin-top: 1%;
}

.card-netflix { 
    margin-top: 4%;   
    color: black;
    font-weight: bold;
    background-color: white;
}

/* amazon primevideo */

.row-primevideo {
    margin-top: 1%;
}

.card-amazon { 
    margin-top: 4%;   
    color: black;
    font-weight: bold;
    background-color: white;   
}

/* aside */

.content {
    font-family: Georgia, 'Times New Roman', Times, serif;
    text-align: center;
    color: red;
    background-color: black;
    padding: 1%;
}

.amazon-advert-one-one {
    margin: 1% 0;

}
.amazon-advert-one {
    padding: 10%;
}

.amazon-advert-one-two {
    margin: 1% 0;
}

.amazon-advert-two {
    padding: 10%;
}

.google-advert-one-one {
    margin: 1% 0;
}

.google-advert-one {
    padding: 10%;
}

.google-advert-one-one {
    margin: 1% 0;
}

.google-advert-two {
    padding: 10%;
}

.facebook-one {
    margin: 1% 0;
}

.facebook {
    padding: 10%;
}

.subscribe {
    margin: 1% 0;
}

/* footer */


@media only screen and (max-width: 539px) {

    .container {
        display: grid;
        grid-template-columns: 1fr;
        grid-row: auto;
        width: 100%;
    }

    .main {
        margin: 1%;
    }

    .picture-a {
        margin: 1%;
    }

    .picture-b {
        margin: 1%;
    }

    .microsoft {
        margin: 1%;
    }

    .news {
        margin: 1%;
        padding: 1%;
    }

    .row-news {
        margin: 0% 1%;
    }

    .films {
        margin: 1%;
        padding: 1%;
    }

   .rocketman {
       margin: 1%;
   }

    .row-films {
        margin: 1%;
    }

    .games {
        margin: 1%;
        padding: 1%;
    }

    .fifa {
        margin: 1%;
    }

    .row-games {
        margin: 1%;
    }

    .music {
        margin: 1%;
        padding: 1%;
    }

    .tom-morello {
        margin: 1%;
    }

    .row-music {
        margin: 1%;
    }

    .netflix {
        margin: 1%;
        padding: 1%;
    }

    .narcos {
        margin: 1%;
    }

    .row-netflix {
        margin: 1%;
    }

    .amazon-primevideo {
        margin: 1%;
        padding: 1%;
    }

    .primevideo {
        margin: 1%;
    }

    .row-primevideo {
        margin: 1%;
    }

    .content {
        margin: 1%;
    }

    .amazon-advert-one-one {
        margin: 1%;
    }

    .amazon-advert-one-two {
        margin: 1%;
    }

    .google-advert-one-one {
        margin: 1%;
    }

    .google-advert-one-two {
        margin: 1%;
    }

    .facebook-one {
        margin: 1%;
    }

    .subscribe {
        margin: 1%;
        padding: 1%;
    }

    .subscription {
        margin: 1%;
    }

}

@media only screen and (min-width: 540px) {

    .container {
        display: grid;
        grid-template-columns: 50% 50%;
        grid-row: auto;
        row-gap: 0.1%;
        width: 100%;
    }

    .header {
        grid-column: 1/3;
    }

    .main {
        grid-column: 1/3;
    }

    .picture-a {
        grid-column: 1/2;
    }

    .picture-b {
        grid-column: 2/3;
        grid-row: 3;
    }

    .news {
        grid-column: 1/2;
    }

    .microsoft {
        grid-column: 1/2;
    }

    .row-news {
        grid-column: 1/2;
    }

    .films {
        grid-column: 1/2;
    }

    .rocketman {
        grid-column: 1/2;
    }

    .queen {
        grid-column: 1/2;
    }

    .mule {
        grid-column: 1/2;
    }

    .row-films {
        grid-column: 1/2;
    }

    .games {
        grid-column: 1/2;
    }

    .fifa {
        grid-column: 1/2;
    }

    .row-games {
        grid-column: 1/2;
    }

    .music {
        grid-column: 1/2;
    }

    .tom-morello {
        grid-column: 1/2;
    }

    .row-music {
        grid-column: 1/2;
    }

    .netflix {
        grid-column: 1/2;
    }

    .narcos {
        grid-column: 1/2;
    }

    .row-netflix {
        grid-column: 1/2;
    }

    .amazon-primevideo {
        grid-column: 1/2;
    }

    .primevideo {
        grid-column: 1/2;
    }

    .row-primevideo {
        grid-column: 1/2;
    }

    .content {
        grid-column: 2/3;
        grid-row: 4;
    }

    aside {
        grid-column: 2/3;
        grid-row: 5 / span 12;
    }

    .amazon-advert-one {
        padding: 0;
    }

    .amazon-advert-two {
        padding: 0;
    }

    .facebook {
        padding: 0;
    }

    .subscription {
        padding: 0;
    }

    .footer {
        grid-column: 1/3;
    }

}

@media only screen and (min-width: 600px) {

    .container {
        display: grid;
        grid-template-columns: 1% 48% 48% 1%;
        grid-template-rows: auto;
        column-gap: 0.5%;
        row-gap: 0.125%;
        width: 100%;
    }

    .header {
        grid-column: 2/4;
    }

    .main {
        grid-column: 2/4;
    }

    .picture-a {
        grid-column: 2/3;
        grid-row: 3;
    }

    .picture-b {
        grid-column: 3/4;
        grid-row: 3;
    }

    .news {
        grid-column: 2/3;
        grid-row: 4;
    }

    .microsoft {
        grid-column: 2/3;
    }

    .row-news {
        grid-column: 2/3;
    }

    .films {
        grid-column: 2/3;
    }

    .rocketman {
        grid-column: 1/2;
    }

    .queen {
        grid-column: 2/3;
    }

    .mule {
        grid-column: 2/3;
    }

    .row-films {
        grid-column: 2/3;
    }

    .games {
        grid-column: 2/3;
    }

    .fifa {
        grid-column: 2/3;
    }

    .row-games {
        grid-column: 2/3;
    }

    .music {
        grid-column: 2/3;
    }

    .tom-morello {
        grid-column: 2/3;
    }

    .row-music {
        grid-column: 2/3;
    }

    .netflix {
        grid-column: 2/3;
    }

    .narcos {
        grid-column: 2/3;
    }

    .row-netflix {
        grid-column: 2/3;
    }

    .amazon-primevideo {
        grid-column: 2/3;
    }

    .primevideo {
        grid-column: 2/3;
    }

    .row-primevideo {
        grid-column: 2/3;
    }

    .content {
        display: grid;
        grid-column: 3/4;
        grid-row: 4;
    }

    aside {
        grid-column: 3/4;
        grid-row: 5 / span 12;
    }

    .footer {
        grid-column: 2/4;
    }

}

@media only screen and (min-width: 768px) {

    .container {
        display: grid;
        grid-template-columns: 1% 32% 32% 32% 1%;
        grid-template-rows: auto;
        column-gap: 0.5%;
        row-gap: 0.125%;
    }

    .header {
        display: grid;
        grid-column: 1/5;
        font-size: 2em;
    }

    .main {
        display: grid;
        grid-column: 2/4;
        grid-row: 2 / span 2;
    }

    .headline {
        padding-top: 6%;
        margin: -8% 0 0 0;
    }

    .picture-a {
        display: grid;
        grid-column: 4/5;
        grid-row: 2;
    }

    .picture-b {
        display: grid;
        grid-column: 4/5;
        grid-row: 3;
    }

    .news {
        grid-column: 2/4;
    }

    .microsoft {
        grid-column: 2/4;
    }

    .row-news {
        grid-column: 2/4;
    }

    .films {
        grid-column: 2/4;
    }

    .rocketman {
        grid-column: 2/4;
    }

    .row-films {
        grid-column: 2/4;
    }

    .games {
        grid-column: 2/4;
    }

    .fifa {
        grid-column: 2/4;
    }

    .row-games {
        grid-column: 2/4;
    }

    .music {
        grid-column: 2/4;
    }

    .tom-morello {
        grid-column: 2/4;
    }

    .row-music {
        grid-column: 2/4;
    }

    .netflix {
        grid-column: 2/4;
    }

    .narcos {
        grid-column: 2/4;
    }

    .row-netflix {
        grid-column: 2/4;
    }

    .amazon-primevideo {
        grid-column: 2/4;
    }

    .primevideo {
        grid-column: 2/4;
    }

    .row-primevideo {
        grid-column: 2/4;
    }

    .content {
        grid-column: 4/5;
        grid-row: 4;
    }

    aside {
        grid-column: 4/5;
        grid-row: 5 / span 12;
    }

    .amazon-advert-one {
        padding: 0;
    }

    .amazon-advert-two {
        padding: 0;
    }

    .facebook {
        padding: 0;
    }

    .subscription {
        padding: 0;
    }

    .footer {
        grid-column: 2/5;
    }

}

@media only screen and (min-width: 992px) {

    .container {
        display: grid;
        grid-template-columns: 8% 51.5% 30% 8%;
        grid-template-rows: auto;
        column-gap: 0.5%;
        row-gap: 0.125%;
    }

    .main {
        display: grid;
        grid-column: 2/3;
        grid-row: 2 / span 2;
    }

    .headline {
        padding-top: 8%;
        margin: -10% 0 0 0;
    }
    
    .picture-a {
        display: grid;
        grid-column: 3/4;
        grid-row: 2;
    }

    .picture-b {
        display: grid;
        grid-column: 3/4;
        grid-row: 3;
    }

    .news {
        grid-column: 2/3;
    }

    .microsoft {
        grid-column: 2/3;
    }

    .row-news {
        grid-column: 2/3;
    }

    .films {
        grid-column: 2/3;
    }

    .rocketman {
        grid-column: 2/3;
    }

    .row-films {
        grid-column: 2/3;
    }

    .games {
        grid-column: 2/3;
    }

    .fifa {
        grid-column: 2/3;
    }

    .row-games {
        grid-column: 2/3;
    }

    .music {
        grid-column: 2/3;
    }

    .tom-morello {
        grid-column: 2/3;
    }

    .row-music {
        grid-column: 2/3;
    }

    .netflix {
        grid-column: 2/3;
    }

    .narcos {
        grid-column: 2/3;
    }

    .row-netflix {
        grid-column: 2/3;
    }

    .amazon-primevideo {
        grid-column: 2/3;
    }

    .primevideo {
        grid-column: 2/3;
    }

    .row-primevideo {
        grid-column: 2/3;
    }

    .content {
        grid-column: 3/4;
        grid-row: 4;
    }

    aside {
        grid-column: 3/4;
        grid-row: 5 / span 12;
    }

    .amazon-advert-one {
        padding: 0;
    }

    .amazon-advert-two {
        padding: 0;
    }

    .facebook {
        padding: 0;
    }

    .subscription {
        padding: 0;
    }

    .footer {
        grid-column: 2/5;
    }
}

@media only screen and (min-width: 1200px) {

    .container {
        display: grid;
        grid-template-columns: 1fr 40% 300px 1fr;
        grid-template-rows: auto;
        column-gap: 0.5%;
        row-gap: 0.125%;
    }

    .header {
        font-size: 3em;
    }
    
    p {
        font-size: larger;
        padding: 2%;
    }

    .headline {
        font-size: 1.2em;
        padding-top: 3.6%;
    }

    .picture-a-text {
        padding: 10%;
        
    }

    .picture-b-text {
        padding: 10%;
    }

    .news {
        font-weight: 800;
        font-size: xx-large;
        padding-top: 0.5%;
        padding-bottom: 0.5%;
    }

    .films {
        font-weight: 800;
        font-size: xx-large;
        padding-top: 0.5%;
        padding-bottom: 0.5%;
    }

    .games {
        font-weight: 800;
        font-size: xx-large;
        padding-top: 0.5%;
        padding-bottom: 0.5%;
    }

    .music {
        font-weight: 800;
        font-size: xx-large;
        padding-top: 0.5%;
        padding-bottom: 0.5%;
    }

    .netflix {
        font-weight: 800;
        font-size: xx-large;
        padding-top: 0.5%;
        padding-bottom: 0.5%;
    }

    .amazon-primevideo {
        font-weight: 800;
        font-size: xx-large;
        padding-top: 0.5%;
        padding-bottom: 0.5%;
    }

    .content {
        grid-column: 3/4;
        grid-row: 4;
        font-weight: 800;
        font-size: xx-large;
        padding-top: 0.5%;
        padding-bottom: 0.5%;
    }

    .subscribe {
        font-weight: 800;
        font-size: xx-large;
        padding-top: 0.5%;
        padding-bottom: 0.5%;
    }

    .row-news {
        display: flex;
        flex-direction: row;
        justify-content: space-between;
        flex-wrap: nowrap;
    }

    .row-films {
        display: flex;
        flex-direction: row;
        justify-content: space-between;
        flex-wrap: nowrap;
    }

    .row-games {
        display: flex;
        flex-direction: row;
        justify-content: space-between;
        flex-wrap: nowrap;
    }

    .row-music {
        display: flex;
        flex-direction: row;
        justify-content: space-between;
        flex-wrap: nowrap;
    }

    .row-netflix {
        display: flex;
        flex-direction: row;
        justify-content: space-between;
        flex-wrap: nowrap;
    }

    .row-primevideo {
        display: flex;
        flex-direction: row;
        justify-content: space-between;
        flex-wrap: nowrap;
    }

    .card {
        display: grid;
        grid-template-columns: repeat(auto-fit, min-max(42%, 1fr));
        width: 32%;
        margin-bottom: 0.5em;
    }

    .card-header {
        height: 8vh;
    }

    .card-body {
        padding: 1.8em 0.6em;
        font-size: 1.2em;
    }

    .img-card {
        height: 30vh;
    }

    .card-news {
        font-size: 1.2em;
        margin-top: 10%;
    }

    .footer {
        grid-column: 2/4;
    }
}