html{
margin:0px;
padding:0px;
width:100%;
height:100%;
box-sizing:border-box;
overflow-x:hidden;
}
body{
padding: 0;
margin: 0px 0px;
--nav-height:calc(80px + .5vw);
padding-top:var(--nav-height);
}
.green_player{
background-color:#90a959;
}
.player_page_content{
display: block ;
}
.player_page_content img:nth-child(1){
width:100%;
}
.player_page_top{
display:flex;
align-content:left;
align-items: left;
}
.player_page_top h2{
padding:0px;
margin:0px;
}
.browse{
color:#ffffff;
font-family:fira sans;
font-weight:300;
}
.browse p{
color:#ffffff;
}
.browse a{
color:#ffffff;
}
.browse a:link{
color:#ffffff;
text-decoration:underline;
}
.browse a:visited{
color:#ffffff;
}
.browse a:hover{
color:black;
}
@media (max-width:900px){
.browse{
font-size:.90em;
margin-left:15%;
}
.green_player{
padding-bottom:30%;
}
.player_page_content{
margin-left:15%;
margin-right:15%;
}
.player_page_text{
margin-top:20%;
}
.player_page_text h2{
font-family:inconsolata;
color:#ffffff;
font-size:1.7em;
}
.player_page_top img{
width:10%;
content-aligm:left;
max-width:35px;
min-width:25px;
}
.player_page_top a{
width:100%;
margin-left:5%;
}
.player_page_text p{
font-family:fira sans;
font-size:1em;
color:#ffffff;
font-weight:300;
}
.text_nav_history{
background-color: #90a959;
margin:0px;
padding-top:2%;
text-align:right;
padding-right:5%;
}
.green_player h1{
font-size:3vw;
font-family:fira sans;
color:#dde3d1;
font-weight:350;
margin-bottom:20%;
padding-top:5%;
}
.green_player b{
color:#ffffff;
font-family:fira sans;
font-weight:500;
}
.text_nav_history a:link{
color:#dde3d1;
text-decoration: underline;
}
.text_nav_history a:visited{
color:#dde3d1;
}
.text_nav_history a:hover{
color:#ffffff;
}
.yellow{
background-color:#e9b872;
padding-top:10%;
padding-bottom:20%;
}
.yellow h2{
margin-top:0px;
padding-top:0px;
font-family:Inconsolata;
color:#ffffff;
font-size:1.7em;
}
.record_header img{
width:5%;
height:5%;
margin-left:8%;
margin-right:2%;
margin-top:auto;
margin-bottom:auto;
}
.hidden {
display:none;
}
.full-screen2 {
position:fixed;
top:var(--nav-height);
left:0;
right:0;
bottom:0;
width:100%;
height:100%;
background-color:rgba(166, 61, 64, .5);
}
.full-screen2 p{
background-color:rgba(166, 61, 64, 1);
padding:10%;
color:#ffffff;
font-size:.5em;
font-family:fira sans;
font-weight:300;
margin-top:10%;
margin-left:10%;
margin-right:10%;
}
.button3{
position:absolute;
width:5%;
height:5%;
margin-top:1%;
margin-left:84%;
background-color:white;;
border:none;
}
.full-screen {
position:fixed;
top:var(--nav-height);
left:0;
right:0;
bottom:0;
width:100%;
height:100%;
background-color:rgba(166, 61, 64, .5);
}
.full-screen p{
background-color:rgba(166, 61, 64, 1);
padding:10%;
color:#ffffff;
font-size:.5em;
font-family:fira sans;
font-weight:300;
margin-top:10%;
margin-left:10%;
margin-right:10%;
}
.button2{
position:absolute;
width:5%;
height:5%;
margin-top:1%;
margin-left:84%;
background-color:white;;
border:none;
}
.record_header{
display:flex;
}
.record p{
color:#ffffff;
font-family:fira sans;
font-size:1em;
margin-bottom:0px;
}
.record h3{
font-size:.8em;
color:#ffffff;
font-family:fira sans;
font-weight:300;
font-style:italic;
padding-top:0px;
margin-top:3%;
margin-bottom:15%;
padding-bottom:3%;
border-bottom:#ffffff solid .5vw;
}
.record{
margin-left:15%;
margin-right:15%;
}
}
@media (max-width:900px) and (min-width:450px){
.hidden {
display:none;
}
.full-screen2 {
position:fixed;
top:var(--nav-height);
left:0;
right:0;
bottom:0;
width:100%;
height:100%;
background-color:rgba(166, 61, 64, .5);
}
.full-screen2 p{
background-color:rgba(166, 61, 64, 1);
padding:10%;
color:#ffffff;
font-size:.6em;
font-family:fira sans;
font-weight:300;
margin-top:10%;
margin-left:10%;
margin-right:10%;
}
.button3{
position:absolute;
width:5%;
height:5%;
margin-top:1%;
margin-left:84%;
background-color:white;;
border:none;
}
.full-screen {
position:fixed;
top:var(--nav-height);
left:0;
right:0;
bottom:0;
width:100%;
height:100%;
background-color:rgba(166, 61, 64, .5);
}
.full-screen p{
background-color:rgba(166, 61, 64, 1);
padding:10%;
color:#ffffff;
font-size:.6em;
font-family:fira sans;
font-weight:300;
margin-top:10%;
margin-left:10%;
margin-right:10%;
}
.button2{
position:absolute;
width:5%;
height:5%;
margin-top:1%;
margin-left:84%;
background-color:white;;
border:none;
}
.browse{
font-size:.90em;
margin-left:20%;
}
.green_player{
padding-bottom:30%;
}
.player_page_content{
margin-left:20%;
margin-right:20%;
}
.player_page_text{
margin-top:20%;
}
.player_page_text h2{
font-family:inconsolata;
color:#ffffff;
font-size:2em;
margin-right:5%;
}
.player_page_top img{
width:100%;
content-aligm:left;
max-width:35px;
}
.player_page_top a{
width:10%;
margin-left:-0%;
}
.player_page_text p{
font-family:fira sans;
font-size:1.3em;
margin-top:6%;
color:#ffffff;
font-weight:300;
}
.text_nav_history{
background-color: #90a959;
margin:0px;
padding-top:2%;
text-align:right;
padding-right:5%;
}
.green_player h1{
font-size:2vw;
font-family:fira sans;
color:#dde3d1;
font-weight:350;
margin-bottom:15%;
padding-top:5%;
}
.green_player b{
color:#ffffff;
font-family:fira sans;
font-weight:500;
}
.text_nav_history a:link{
color:#dde3d1;
text-decoration: underline;
}
.text_nav_history a:visited{
color:#dde3d1;
}
.text_nav_history a:hover{
color:#ffffff;
}
.yellow{
background-color:#e9b872;
padding-top:10%;
padding-bottom:20%;
}
.yellow h2{
margin-top:0px;
padding-top:0px;
font-family:Inconsolata;
color:#ffffff;
font-size:2em;
}
.record_header img{
width:5%;
height:5%;
margin-left:12%;
margin-right:3%;
margin-top:calc(30px + .3vw);
margin-bottom:auto;
}
.record_header b{
display:none;
}
.record_header img:hover + b {
display:block;
position:absolute;
font-size:.4em;
font-family:fira sans;
font-weight:300;
background-color:#a63d40;
border-radius:0%;
padding:5%;
max-width:60%;
margin-top:10%;
margin-left:17%;
font-style:italic;
}
.record_header{
display:flex;
}
.record_header p{
}
.record p{
color:#ffffff;
font-family:fira sans;
font-size:1.2em;
margin-bottom:0px;
margin-top:0px;
}
.record h3{
font-size:1em;
color:#ffffff;
font-family:fira sans;
font-weight:300;
font-style:italic;
padding-top:0px;
margin-top:3%;
margin-bottom:7%;
padding-bottom:3%;
border-bottom:#ffffff solid .2vw;
}
.record{
margin-left:20%;
margin-right:20%;
}
.record_header p{
margin-bottom:3%;
}
}
@media (max-width:1920px) and (min-width:900px){
.hidden {
display:none;
}
.full-screen2 {
position:fixed;
top:0;
left:0;
right:0;
bottom:0;
width:100%;
height:100%;
background-color:rgba(166, 61, 64, .5);
}
.full-screen2 p{
background-color:rgba(166, 61, 64, 1);
padding:10%;
color:#ffffff;
font-size:.65em;
font-family:fira sans;
font-weight:300;
margin-top:15%;
margin-left:15%;
margin-right:15%;
}
.button3{
position:absolute;
width:3%;
height:5%;
margin-top:1%;
margin-left:81%;
background-color:white;;
border:none;
}
.full-screen {
position:fixed;
top:0;
left:0;
right:0;
bottom:0;
width:100%;
height:100%;
background-color:rgba(166, 61, 64, .5);
}
.full-screen p{
background-color:rgba(166, 61, 64, 1);
padding:10%;
color:#ffffff;
font-size:.65em;
font-family:fira sans;
font-weight:300;
margin-top:15%;
margin-left:15%;
margin-right:15%;
}
.button2{
position:absolute;
width:3%;
height:5%;
margin-top:1%;
margin-left:81%;
background-color:white;;
border:none;
}
.browse{
font-size:1.1em;
margin-left:20%;
}
.green_player{
padding-bottom:20%;
}
.player_page_content{
display:grid;
grid-template-columns:1.5fr 2fr;
margin-left:20%;
margin-right:20%;
}
.player_page_text{
margin-top:0px;
margin-left:10%;
}
.player_page_text h2{
font-family:inconsolata;
color:#ffffff;
font-size:2.5em;
}
.player_page_top img{
width:100%;
content-aligm:left;
max-width:40px;
min-width:30px;
}
.player_page_top a{
width:10%;
margin-left:5%;
}
.player_page_text p{
font-family:fira sans;
font-size:1.4em;
color:#ffffff;
font-weight:300;
}
.text_nav_history{
background-color: #90a959;
margin:0px;
padding-top:2%;
text-align:right;
padding-right:5%;
}
.green_player h1{
font-size:1.1vw;
font-family:fira sans;
color:#dde3d1;
font-weight:350;
margin-bottom:10%;
padding-top:2%;
}
.green_player b{
color:#ffffff;
font-family:fira sans;
font-weight:500;
}
.text_nav_history a:link{
color:#dde3d1;
text-decoration: underline;
}
.text_nav_history a:visited{
color:#dde3d1;
}
.text_nav_history a:hover{
color:#ffffff;
}
.yellow{
background-color:#e9b872;
padding-top:10%;
padding-bottom:20%;
}
.yellow h2{
margin-top:0px;
padding-top:0px;
font-family:Inconsolata;
color:#ffffff;
font-size:2em;
}
.record_header img{
width:2%;
height:2%;
margin-left:17%;
margin-right:1%;
margin-top:auto;
margin-bottom:auto;
}
.record_header b{
display:none;
}
.record_header img:hover + b {
display:block;
position:absolute;
font-size:.5em;
font-family:fira sans;
font-weight:300;
background-color:#a63d40;
border-radius:0%;
padding:5%;
max-width:20%;
margin-top:0%;
margin-left:50%;
font-style:italic;
}
.record_header{
display:flex;
}
.record_header p{
}
.record p{
color:#ffffff;
font-family:fira sans;
font-size:1.5em;
margin-bottom:0px;
}
.record h3{
font-size:1em;
color:#ffffff;
font-family:fira sans;
font-weight:300;
font-style:italic;
padding-top:0px;
margin-top:3%;
margin-bottom:5%;
padding-bottom:3%;
border-bottom:#ffffff solid .15vw;
}
.record{
margin-left:20%;
margin-right:20%;
}
}
@media (min-width:1920px) {
.hidden {
display:none;
}
.full-screen2 {
position:fixed;
top:var(--nav-height);
left:0;
right:0;
bottom:0;
width:100%;
height:100%;
background-color:rgba(166, 61, 64, .5);
}
.full-screen2 p{
background-color:rgba(166, 61, 64, 1);
padding:10%;
color:#ffffff;
font-size:.8em;
font-family:fira sans;
font-weight:300;
margin-top:10%;
margin-left:20%;
margin-right:20%;
}
.button3{
font-size:80%;
position:absolute;
width:5%;
height:5%;
margin-top:1%;
margin-left:74%;
background-color:white;;
border:none;
}
.full-screen {
position:fixed;
top:var(--nav-height);
left:0;
right:0;
bottom:0;
width:100%;
height:100%;
background-color:rgba(166, 61, 64, .5);
}
.full-screen p{
background-color:rgba(166, 61, 64, 1);
padding:10%;
color:#ffffff;
font-size:.8em;
font-family:fira sans;
font-weight:300;
margin-top:10%;
margin-left:20%;
margin-right:20%;
}
.button2{
font-size:80%;
position:absolute;
width:5%;
height:5%;
margin-top:1%;
margin-left:74%;
background-color:white;;
border:none;
}
.browse{
font-size:1.2em;
margin-left:20%;
}
.green_player{
padding-bottom:20%;
}
.player_page_content{
display:grid;
grid-template-columns:1.5fr 2fr;
margin-left:20%;
margin-right:20%;
}
.player_page_text{
margin-top:0px;
margin-left:10%;
}
.player_page_text h2{
font-family:inconsolata;
color:#ffffff;
font-size:2.5em;
}
.player_page_top img{
width:100%;
content-aligm:left;
max-width:40px;
}
.player_page_top a{
width:10%;
margin-left:5%;
}
.player_page_text p{
font-family:fira sans;
font-size:1.4em;
color:#ffffff;
font-weight:300;
}
.text_nav_history{
background-color: #90a959;
margin:0px;
padding-top:2%;
text-align:right;
padding-right:5%;
}
.green_player h1{
font-size:.8vw;
font-family:fira sans;
color:#dde3d1;
font-weight:350;
margin-bottom:10%;
padding-top:1%;
}
.green_player b{
color:#ffffff;
font-family:fira sans;
font-weight:500;
}
.text_nav_history a:link{
color:#dde3d1;
text-decoration: underline;
}
.text_nav_history a:visited{
color:#dde3d1;
}
.text_nav_history a:hover{
color:#ffffff;
}
.yellow{
background-color:#e9b872;
padding-top:10%;
padding-bottom:20%;
}
.yellow h2{
margin-top:0px;
padding-top:0px;
font-family:Inconsolata;
color:#ffffff;
font-size:2.5em;
}
.record_header img{
width:2%;
height:2%;
margin-left:17%;
margin-right:1%;
margin-top:auto;
margin-bottom:auto;
}
.record_header b{
display:none;
}
.record_header img:hover + b {
display:block;
position:absolute;
font-size:.5em;
font-family:fira sans;
font-weight:300;
background-color:#a63d40;
border-radius:0%;
padding:5%;
max-width:20%;
margin-top:-15%;
margin-left:10%;
font-style:italic;
}
.record_header{
display:flex;
}
.record_header p{
}
.record p{
color:#ffffff;
font-family:fira sans;
font-size:1.5em;
margin-bottom:0px;
}
.record h3{
font-size:1em;
color:#ffffff;
font-family:fira sans;
font-weight:300;
font-style:italic;
padding-top:0px;
margin-top:2%;
margin-bottom:6%;
padding-bottom:2%;
border-bottom:#ffffff solid .12vw;
}
.record{
margin-left:20%;
margin-right:20%;
}
}
.button2:hover{
opacity:50%;
cursor:pointer;
}
.full-screen:hover{
cursor:pointer;
}
.popup:hover{
cursor:pointer;
opacity:50%;
}
.button3:hover{
opacity:50%;
cursor:pointer;
}
.full-screen2:hover{
cursor:pointer;
}
.popup2:hover{
cursor:pointer;
opacity:50%;
}
.whole_page2 a{
color:#ffffff;
text-decoration: underline;
}
.whole_page2 a:hover{
color:#e9b872;
}