body {
	background-color: #FFF;
    padding:0;
    margin:0;
    font-family:Gotham, "Helvetica Neue", Helvetica, Arial, "sans-serif";
}

/*ON MAIN PAGE=====================================*/

:root {
     --thr-red:#EE4135;
}

.title p {
    color:var(--thr-red);
}
/*ON MAIN PAGE END=====================================*/

img {
    display: block;
    width:100%;
}
.embed {
	padding: 4%;
    
    p {
        font-size:clamp(1rem,2vw,1.5rem);
        margin:1em 0;
    }
    a {
        color:var(--thr-red);
        text-decoration: none;
    }
}
.platforms {
	padding:2% 6% 6% 6%;
	margin-bottom:4rem;
	border-top:solid 1px grey;
	border-bottom:solid 1px grey;
}
.platforms h2 {
    font-size:clamp(1rem,1.5vw,3rem);
	color:#000;
    position: relative;
}
.platforms h2:after {
    position: absolute;
    bottom:-22px;
    left:0;
    content:"Live on TooHotRadio | Fridays 7PM EST | Saturdays 12AM GMT";
    font-size:clamp(.8rem, 1vw, .7rem);
    color:var(--thr-red);
}

.platform-squares {
    display: flex;
    justify-content:flex-start;
    align-items: center;
    gap:2rem;
    margin-top: 2rem
}
.platform-square {
    width:15%;
    aspect-ratio:1;
    background-color:hsla(26,100%,50%,1.00);
    background-size: 80%;
    background-position: center;
    background-repeat: no-repeat;
}
.large .platform-square {
    width:30%;
}
.platform-square:hover {
    background-color: hsla(14,100%,50%,1.00);
}
.apple {
     background-image: url("http://sbdesigns.ca/wp-content/dj-assets/apple-podcast-icon.png");
}
.mixcloud {
     background-image: url("http://sbdesigns.ca/wp-content/dj-assets/mixcloud-podcast-icon.png");
}
.soundcloud {
     background-image: url("http://sbdesigns.ca/wp-content/dj-assets/soundcloud-podcasts-icon.png");
}
.youtube {
     background-image: url("http://sbdesigns.ca/wp-content/dj-assets/youtube-podcasts-icon.png");
}
.toohot {
     background-image: url("http://sbdesigns.ca/wp-content/dj-assets/toohot-radio-show-icon.png");
     position: relative;
}



@media screen and (max-width:780px){
    .platform-squares {
        flex-wrap: wrap;
    }
    .platform-square {
        width:30%;
    }
}
@media screen and (max-width:480px){
    .platform-squares {
        padding:10%;
    }
    .platform-square {
        width:100%;
    }
    .platforms h2:after {
        bottom:-2.5rem;
        left:0;
    }
}