html {font-size: 16px;}
img {box-shadow: 0 0 50px 15px #ebb6f0; border-radius: 37%;}
.landingpage {background-color: #ffe6ff; }
.textbox {padding-top:5px;padding-bottom:5px;font-family:sans-serif; text-shadow: 0 0 3px #ebb6f0;}
body {
background-color: #ffe6ff;
color: black;
font-family: sans-serif;
text-shadow: 0 0 3px #ebb6f0;
line-height: 1.8;
text-align: center;
letter-spacing: 0.1em;
overflow-y: scroll;
}
a {
color: black;
}
a:hover {opacity: 0.75}
td {
background-color: white;
color: black;
font-family: Verdana;
line-height: 1.8;
text-align: center;}
hr {
border: 1px dashed black;}
.topheaderlanding {width: 100% ;
margin-left: auto ;
margin-right: auto ;
margin-top:10px ;
padding-bottom:20px;
}
.topheader {width: 100% ;
height: 200px ;
margin-left: auto ;
margin-right: auto ;
margin-top:10px ;
padding-bottom:20px;
}
.topheader img {
display: block;
margin-left: auto ;
margin-right: auto ;
margin-top:10px ;
height:200px;
}
.main-container {
min-height: 100vh;
max-width: 100vw;
display: block;
position: relative;
padding-bottom: 30px;
}
.biophotos img {
display: block;
margin-left: auto;
margin-right: auto;
width: 100%;
padding-top:10px;
padding-bottom:10px;
}
.menu {width: 100% ;
height: 50px ;
margin-left: auto ;
margin-right: auto ;
margin-top:10px ;
text-align: center;
}
.menu a {
color: black;
text-align: center;
text-decoration: none;
text-shadow: 0 0 5px #ebb6f0;
letter-spacing: 0.4em;
font-size: .9rem;
}
.menumobile {
overflow: hidden;
position: fixed;
top: 0px;
left: 0px;
margin-left: auto;
margin-right: auto;
width: 100%;
z-index:5;
line-height: 1.8;
}
.menumobile a {
color: #000000;
padding: 10px 16px;
text-decoration: none;
font-size: .8rem;
display: block;
}
.menumobile a:hover {
background-color: #ddd;
color: black;
}
.menumobile .active {
background-color: #c49bfd;
color: white;
}
.menumobile .icon {
float: right;
font-size:1rem;
padding: 14px 16px;
}
.badges {
display: inline-flex;
height: 70%;
margin-top: auto;
margin-bottom: auto;
margin-left: auto;
margin-right: auto;
padding-top: 20px;
}
.badges img {
width: 30%;
margin-top: auto;
margin-bottom: auto;
margin-left: auto;
margin-right: auto;
}
.music {
position:relative;
padding-top:10px;
}
.music iframe {
position:relative;
}
.music img {
position:relative;
width:40%;
height:auto;
min-width:250px;
}
.videos {
padding-top:10px;
padding-bottom:10px;
margin-left: auto ;
margin-right: auto ;
}
.bio {
padding-top:30px;
margin-left: auto ;
margin-right: auto ;
width:45%;
}
.bio img {
display: block;
margin-left: auto;
margin-right: auto;
width: 100%;
padding-top:10px;
padding-bottom:10px;
}
.title img {
width:50%;
}
.contact {
padding-top:30px;
margin-left: auto ;
margin-right: auto ;
}
.fa fa-solid fa-envelope {font-size: 1rem;}
.gigs {
padding-top:30px;
width:60%;
padding-bottom:10px;
margin-left: auto ;
margin-right: auto ;
font-size: .8rem;
}
.posters img {
margin-left: auto;
margin-right: auto;
height:250px;
width:auto;
object-fit: cover;
border-style: solid;
border-color: black;
}
.gigs a { text-decoration: none;
}
.posters {
padding-top:50px ;
}
}
.socials {
margin-left: auto ;
margin-right: auto ;
margin-top:10px ;
width:200px;
height:50px;
padding-top:10px;
padding-bottom:40px;
}
.fa { font-size:1.8em;}
.fa-brands { font-size:1.8em;}
.fa-apple { font-size:2.2em;}
.fa-bars { font-size:2em;}
@media only screen and (min-width: 850px) {
.landingpage img {
box-shadow: 0 0 50px 15px #ebb6f0;
display: block;
margin-left: auto ;
margin-right: auto ;
margin-top:10px ;
width: 50%;
}
}
@media only screen and (max-width: 1000px) {
body {
line-height: 2.8;
}
.menu {
}
.music img {
max-width:700;
width: 100%;
}
.music iframe {
width: 100%;
min-width:250;
max-width:700;
height: auto;
padding-top:30px;
}
.videos iframe {
width: 100%;
max-width:800;
height: auto;
min-height:300;
padding-bottom:30px;
}
.gigs { font-size: 1.5vw; width: 80% }
.bio { width:70%; font-size:.8rem;}
.fa { font-size:1.5rem;}
.fa-brands { font-size:1.5rem;}
.fa-apple { font-size:2rem;}
.videos {padding-top:30px;}
.topheaderlanding {
display: block;
margin-left: auto ;
margin-right: auto ;
margin-top:10px ;
}
.landingpage img {
box-shadow: 0 0 50px 15px #ebb6f0;
display: block;
margin-left: auto ;
margin-right: auto ;
width:100%;
height:auto;
}
.menumobile {
display:none;
}
}
@media only screen and (min-width: 1000px) {
.music img {
width: 40%;
}
.music iframe {
width: 40%;
min-width:250;
max-width:800;
height: auto;
max-height:160px;
padding-top:30px;
}
.videos iframe {
width: 70%;
min-width:450;
max-width:800;
height: auto;
min-height:400;
padding-bottom:30px;
}
.gigs {
line-height: 2;
}
.title img {
width:30%;
}
.menumobile {
display:none;
}
}
.overlay .icon {
float: right;
font-size:1rem;
padding: 14px 16px;
}
.overlay {
height: 100%;
width: 0;
position: fixed;
z-index: 10001; /* Sit on top */
left: 0;
top: 0;
background-color: rgb(0,0,0);
background-color: rgba(0,0,0, 1);
overflow-x: hidden;
transition: 0.5s;
}
/* Position the content inside the overlay */
.overlay-content {
position: relative;
top: 25%; /* 25% from the top */
width: 100%; /* 100% width */
text-align: center; /* Centered text/links */
margin-top: 30px; /* 30px top margin to avoid conflict with the close button on smaller screens */
}
/* The navigation links inside the overlay */
.overlay a {
text-align: center;
padding: 10px 0 10px 0;
text-decoration: none;
color: #fff;
font-size: 2vh;
display: block; /* Display block instead of inline */
transition: 0.3s; /* Transition effects on hover (color) */
}
/* When you mouse over the navigation links, change their color */
.overlay a:hover, .overlay a:focus {
}
/* Position the close button (top right corner) */
.overlay .closebtn {
position: absolute;
top: 20px;
right: 45px;
font-size: 2rem;
}
/* When the height of the screen is less than 450 pixels, change the font-size of the links and position the close button again, so they don't overlap */
@media screen and (max-height: 450px) {
.overlay a {font-size: 4vw}
.overlay .closebtn {
font-size: 1.75rem;
top: 15px;
right: 35px;
}
}