body {
    background-image: url(los\ gatos.jpeg);
    background-size: cover;
}

h1 {
    line-height: 1em;
}

.topmenu{
    padding: 10px;
    background-color: rgba(255,255,255, 0.8);
    background-size: 100%;
    transition: 2s ease-in;
    /* position: absolute; */
}

.topmenu:hover {
    max-height: 12.9%;
}

#myLinks {
    display: none;
    font-family: Poppins;
    font-size: 150%;
    margin: 5px;
}

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

.topmenu:hover #myLinks{
    display: flex;
    overflow: hidden;
    position: absolute;
    transform: translateY(4.8px);
    display: flex;
    flex-direction: column;
    padding: 20px;
    max-width: 10%;
    background-color: rgba(255,255,255, 0.8);
    margin-left: -0.63%;
}

.spin {
    transition: 0.03s linear;
    transform-origin: 50% 50%;
    max-width: 6%;
}

.spin:hover {
    transform: rotate(-17.5deg);
}

.markd {
    float: right;
    max-width:30%;
    margin-top: -5%;
    margin-right: 1.5%;
}

.blurbone {
    display: flex;
    flex-direction: column;
    overflow: hidden;
    float: right;
    text-align: right;
    column-gap: -100px;
    background-color: rgba(255,255,255, 0.8);
    margin-top: 90px;
    font-family: Poppins;
    max-width: 30%;
    padding-left: 30px;
    padding-right: 30px;
}

.blurbone h1 {
    font-size: 400%;
}

.blurbone p {
    font-size: 125%;
}

.contactheader {
    background-color: rgba(255,255,255, 0.8);
    font-family: Poppins;
    margin-left: 15%;
    font-size: 125%;
    text-align: center;
    max-width: 30%;
}

#subutton {
    background-color:rgb(0, 0, 0);
    color: rgb(255, 255, 255);
    font-family: Poppins;
    border-style: none;
    font-size: 20px;
    padding: 5px 10px;
}

#subutton:hover {
    background-color: white;
    color: black;
}

.songrid {
    display: grid;
    grid-template-areas: 
    'song1 song2'
    'song3 song4';
    grid-template-columns: 75% 75%;
    column-gap: 10px;
}

.blurbtwo{
    background-color: rgba(255,255,255, 0.8);
    grid-area: song1;
    font-family: Poppins;
    margin-top: 700px;
    text-align: center;
}

.songlistone {
    display: none;
    list-style: none;
}

.blurbtwo:hover .songlistone {
    display: flex;
    flex-direction: column;
}

.blurbthree{
    background-color: rgba(255,255,255, 0.8);
    font-family: Poppins;
    margin-top: 700px;
    grid-area: song2;
    text-align: center;
}

.songlisttwo {
    display: none;
    list-style: none;
}

.blurbthree:hover .songlisttwo {
    display: flex;
    flex-direction: column;
}

.blurbfour{
    background-color: rgba(255,255,255, 0.8);
    font-family: Poppins;
    grid-area: song3;
    margin-top: 400px;
    text-align: center;
}

.songlistthree {
    display: none;
    list-style: none;
}

.blurbthree:hover .songlistthree {
    display: flex;
    flex-direction: column;
}

.blurbfive{
    background-color: rgba(255,255,255, 0.8);
    font-family: Poppins;
    grid-area: song4;
    margin-top: 400px;
    text-align: center;
}

.songlistfour {
    display: none;
    list-style: none;
}

.blurbfive:hover .songlistfour {
    display: flex;
    flex-direction: column;
}

.end {
    background-color: rgba(255,255,255, 0.8);
    text-align: center;
    font-size: 125%;
    font-family: Poppins;
    padding: 2px;
}

.facebook {
    max-width: 4%;
    padding: 5px;
    float: left;
}

.maps {
    float:right;
    margin-right: 200px;
    margin-top: -32%;
}

.bandgrid {
    background-color: rgba(255,255,255, 0.8);
    font-family: Poppins;
    max-width: 70%;
    margin-left: 15%;
}
.bandgrid img {
    max-width: 200px;
    padding: 2%
}
.bandgrid h1 {
    float: inline-end;
    margin-top: 10%;
    font-size: 150%;
    padding: 2%;
}

.portgrid {
    display: grid;
    grid-template-areas:
    'port1 port2 port3'
    'port4 port5 port6'
    'port7 port8 port9';
    background-color: rgba(255,255,255, 0.8);
    padding: 10px;
}

.port1 {
    grid-area: port1;
}

.port2 {
    grid-area: port2;
}

.port3 {
    grid-area: port3;
}

.port4 {
    grid-area: port4;
}

.port5 {
    grid-area: port5;
    height: 70%;
}

.port6 {
    grid-area: port6;
}

.port7 {
    grid-area: port7;
}

.port8 {
    grid-area: port8;
    max-width: 100%;
}

.port9 {
    grid-area: port9;
    max-width: 90%;
}

.message {
    margin-top: 10%;
}

.message a {
    font-family: Poppins;
    color: white;
    text-align: center;
}

.message h1 {
    font-size: 500%;
}

.message p {
    font-size: 200%;
}