@import url('https://fonts.googleapis.com/css2?family=Kristi&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Bebas+Neue&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Open+Sans:wght@300&display=swap');

body {background-color:#5cd668; margin:0;}

h1 {font-family: 'Bebas Neue', cursive; font-size:36pt; line-height:24pt; margin-bottom:0}
h2 {font-family: 'Bebas Neue', cursive; font-size:24pt; opacity:0.5; line-height:0}

#wrapper {width:60vw; margin:0 auto}
#mandala {width:60%; margin:0 auto}
#mandala img {width:100%;}

#titleText {font-family:'Kristi', cursive; font-size:48pt; text-align:center; margin:0; padding:0; line-height:24pt;}

#mainDesc {font-family:'Open Sans', sans-serif; font-size:24pt; text-align:center; margin:0 auto; width:30vw; margin-top:6vw; margin-bottom:5vw; animation:flash 3s linear infinite;}

@keyframes flash {
    0% {opacity:0.3;}
    50% {opacity:1;}
    100% {opacity:0.3;}
}

#fullWidthLinkBlock {text-align:center; margin-top:3vw}
#linkWrapper {font-family: 'Bebas Neue', cursive; font-size:36pt; width:auto; display:block; margin:0 auto}
.singleLink {width:auto; text-decoration:none; color:black; display:inline-block; text-align:center; padding:15px; opacity:0.7}
.singleLink img {height:25pt;}
.singleLink:hover {opacity:1}

#divider {width:auto; display:inline-block; text-align:center; opacity:0.5}

#latest {width:40vw; margin:0 auto; margin-top:4vw}

#player {font-family:'Open Sans', sans-serif; width:40vw; margin:0 auto; background-color:rgba(30,30,30,0.5); padding:0; margin-top:0}

.entry {width:100%; display:grid; grid-template: auto / 60% 30%}
.entry a:link {text-decoration:none;}

.episodeTitle {font-family: 'Bebas Neue', cursive; font-size:24pt; opacity:0.8; line-height:0pt; margin:0; padding:0; margin-top:48pt}
.episodeBox {font-family:'Open Sans', sans-serif; width:100%; min-height:8vw; background-color:rgba(30,30,30,0.5); grid-column-start:1; grid-column-end:2; opacity:0.7;}
.episodeBox:hover {opacity:1;}

#currentEpisodeName {width:40vw; margin:0 auto; margin-top:24pt; line-height:30pt;}


.dateBox {grid-column-start:2; grid-column-end:3; font-family: 'Bebas Neue', cursive; font-size:24pt; opacity:0.5; text-align:right; margin-top:3vw;}

#latestCover {width:30%; float:left; padding-right:1vw; padding-bottom:2vw}
.listCover {height:8vw; float:left; padding-right:1vw}

#latestDesc {font-size:14pt; color:white; margin:1vw; padding-top: 1vw; text-align:justify}
.listDesc {font-size:14pt; color:white; margin:1vw; padding-top:1vw; padding-bottom: 1vw; text-align:justify}

#controlsHolder {padding:2vw}

.separator {width:100%; height:1px; background-image:linear-gradient(to right,#5cd668,black,#5cd668); display:inline-block; margin-top:2vw;}

.time-container {font-size:14pt; font-weight:bold; color:white;}
.current-time {float:left}
.remaining {float:right; opacity:0.8}

div.amplitude-play-pause.amplitude-paused {
    background: url('/images/playbutton.svg');
    background-size: cover;
}

div.amplitude-play-pause.amplitude-playing {
    background: url('/images/pausebutton.svg');
    background-size: cover;
}

div.amplitude-play-pause {width:3vw; height:3vw; margin:0 auto; opacity:0.8;
    transition:opacity 0.5s;
}
div.amplitude-play-pause:hover {opacity:1}

.amplitude-song-slider {width:100%}

.posted {width:40vw; text-align:right; margin:0 auto; line-height:24pt}

#bottomSection {width:100%; background-color:#230a00; margin-top:10vw; box-shadow: 0 50vh 0 50vh #230a00;}
#credits {width:50vw; margin:0 auto; font-family:'Open Sans', sans-serif; font-size:14pt; color:white; opacity:0.8; padding-top:4vw;}
#credits a {color:lightblue;}

@media only screen and (max-width: 1000px) {
    #wrapper {width:100%}
    #titleText {font-size:60pt;}
    #mainDesc {width:80vw; font-size:30pt; margin-bottom:10vw;}
    #latest {width:95vw;}
    h1 {font-size:50pt; line-height:50pt;}
    h2 {font-size:36pt;}
    #player {width:100%}
    #latestCover {padding-bottom:5vw;}
    #latestDesc {font-size:24pt}
    .time-container {font-size:24pt;}
    div.amplitude-play-pause {width:10vw; height:10vw;}
    .posted {width:100%; padding-top:10pt;}
    #linkWrapper {font-size:50pt}
    .singleLink img {height:36pt;}
    .separator {opacity:0;}
    .episodeTitle {font-size:50pt; line-height:50pt;}
    .listCover {height:20vw;}
    .episodeBox {min-height:20vw;}
    .listDesc {font-size:24pt; padding:2vw;}
    .dateBox {font-size:32pt; margin-top:10vw; padding-right:2vw;}
    .entry {grid-template: auto / 80% 20%}
    #credits {font-size:18pt; opacity:0.4}
    #currentEpisodeName {width:100%; line-height:50pt;}
}