* {
    margin: 0;
    padding: 0;
    background-color: #343b46;
    box-sizing: border-box;
}

.homeimage {
    position: absolute;
    display: flex;
    background-image: url("./Images/band.jpg");
    background-size: cover;
    background-repeat: no-repeat;
    background-position: center;
    box-shadow: 0 1px 50px black;
    width: 100%;
    height: 750px;
    align-items: center;
    justify-content: center;
    z-index: 0;
  }
  
  .phototitle {
    font-size: 1020%;
    color: rgb(255, 255, 255);
    text-shadow: 4px 4px 6px #000000;
    justify-content: center;
    align-items: center;
    margin-top: 150px;
    display: flex;
    font-family: "Geostar Fill", serif;
    letter-spacing: 20px;
    background-color: rgba(0, 0, 0, 0.5);
    color: #e5bd5a;
    height: 50%;
    width: 100%;
    margin-top: 10px;
  }

html {
  scroll-behavior: smooth;
  scroll-padding: 25%;
}

body {
    margin: 0;
}

.logo {
    background-color: #2e2c2c;
    rotate: 10deg;
    margin-left: 2%;
    width: 2%;
}

ul.topnav {
  position: sticky;
  top: 0;
  list-style-type: none;
  margin: auto;
  overflow: hidden;
  font-family: "Federo", sans-serif;
  font-size: larger;
  background-color: #2e2c2c;
  padding-top: 1%;
  padding-bottom: 1%;
  z-index: 1;
}

ul.topnav li {
  background-color: #2e2c2c;
  padding-top: .5%;
  float: right;
}

ul.topnav li a {
  display: block;
  background-color: #2e2c2c;
  color: white;
  text-align: center;
  padding: 15px 35px;
  text-decoration: none;
}

ul.topnav li a:hover {
    color: #e5bd5a;
    background-color:#2e2c2c;
    transition: 1s;
}

ul.topnav li.right {
    float: right;
}

.intro {
  font-size: x-large;
  font-family:"Federo", sans-serif;
  color: white;
  margin-top: 42%;
  text-align: center;
}

div.gallery {
  margin-top: 25%;
  font-size: larger;
  font-family: "Federo", sans-serif;
  color: white;
  width: 100%;
  box-shadow: 0 1px 40px black;
}

div.gallery img {
  width: 100%;
  height: auto;
}

div.desc {
  padding: 15px;
  text-align: center;
}

.responsive {
  padding: 0 45px;
  float: left;
  width: 24.99999%;
}

#about {
  margin-top: 35%;
  margin-bottom: 2%;
  text-align: center;
  color: white;
  font-family: "Geostar Fill", serif;
  font-size: 450%;
}

.m1 {grid-area: m1;}
.m2 {grid-area: m2;}
.m3 {grid-area: m3;}
.m4 {grid-area: m4;}
.m5 {grid-area: m5;}
.m6 {grid-area: m6;}
.m7 {grid-area: m7;}
.m8 {grid-area: m8;}
.m9 {grid-area: m9;}
.m10 {grid-area: m10;}
.m11 {grid-area: m11;}
.m12 {grid-area: m12;}

.gridnames {
  margin-top: 5%;
  color: white;
  font-family: "Federo", sans-serif;
  background-color: #343b46;
}

.grid-container {
  display: grid;
  margin-top: 5%;
  grid-template-areas: 
  'm3 m10 m1'
  'm4 m6 m5'
  'm2 m7 m8'
  'm9 m11 m12';
  gap: 100px;
}

.griddesc {
  font-family:"Federo", sans-serif;
  color: white;
  font-size: 20px;
  margin-top: 5%;
  text-align: left;
}

.griddesc1 {
  font-family:"Federo", sans-serif;
  color: white;
  font-size: 20px;
  margin-top: 5%;
  text-align: left;
  padding-right: 5%;
}

.grid-container > div {
  background-color: #343b46;
  text-align: left;
  padding: 30px 30px;
  font-size: 20px;
}

.linkcolor {
  background-color: #2e2c2c;
  color: white;
}

#contact {
  margin-top: 15%;
  margin-bottom: 2%;
  text-align: center;
  color: white;
  font-family: "Geostar Fill", serif;
  font-size: 450%;
}

form {
  display: flex;
  flex-direction: column;
  width: 35%;  
  padding: 45px 250px;
  color: white;
  background-color: #e5bd5a;
  margin-left: 5%;
  margin-top: 7%;
  box-shadow: 0 1px 40px black;
}

input, textarea {
  font-family: "Federo", sans-serif;
  color: white;
  background-color: #2e2c2c;
}

label {
  background-color: #e5bd5a;
}

.forminfo {
  font-family: "Federo", sans-serif;
  font-size: 115%;
  color: white;
  background-color: #e5bd5a;
}

.button {
  margin-left: 8%;
  background-color: #2e2c2c;
  color: white;
  padding: 20px;
  font-family: "Federo", sans-serif;
  font-size: 15px;
  cursor: pointer;
  border: none;
  box-shadow: 0 1px 10px black;
}

.message {
  display: flex;
  flex-direction: column;
  font-family: "Federo", sans-serif;
  width: 35%;
  padding: 190px 195px 235px;
  font-size: larger;
  text-align: center;
  color: white;
  background-color: #e5bd5a;
  margin-left: 5%;
  margin-top: 7%;
  box-shadow: 0 1px 40px black;
}

.map {
  margin-top: -22%;
  margin-left: 65%;
}

#portfolio {
  margin-top: 15%;
  margin-bottom: 2%;
  text-align: center;
  color: white;
  font-family: "Geostar Fill", serif;
  font-size: 450%;
}

.videos {
  display: flex;
  justify-content: space-evenly;
  margin-top: 5%;
}

.set-title {
  margin-top: 5%;
  margin-left: 2%;
  font-size: x-large;
  font-family: "Federo", sans-serif;
  color: white;
}

li {
  margin-left: 2%;
  font-family: "Federo", sans-serif;
  font-size: larger;
  color: white;
}

.song1 {
  display: flex;
  flex-direction: column;
}

.song2 {
  display: flex;
  flex-direction: column;
  margin-top: -30%;
  margin-left: 35%;
}

.song3 {
  display: flex;
  flex-direction: column;  
  margin-top: -25%;
  margin-left: 75%;
}

.song4 {
  display: flex;
  flex-direction: column;
  margin-left: 25%;
}

.song5 {
  display: flex;
  flex-direction: column;
  margin-top: -29%;
  margin-left: 55%;
}

footer {
  font-size: large;
  font-family: "Federo", sans-serif;
  background-color: #2e2c2c;
  color: white;
  text-align: center;
  padding-top: 3%;
  padding-bottom: 3%;
  margin-top: 15%;
}

@media only screen and (max-width: 410px) {
  .responsive, body {
    width: 49.99999%;
    margin: 6px 0;
  }
}

@media only screen and (max-width: 410px) {
  .responsive, body {
    width: 100%;
  }
}

@media screen and (max-width: 410px) {
  ul.topnav li.right, 
  ul.topnav li, body {
    float: none;
}
}

@media only screen and (max-width: 1024px) {
  .responsive, body {
    width: 49.99999%;
    margin: 6px 0;
  }
}

@media only screen and (max-width: 1024px) {
  .responsive, body {
    width: 100%;
  }
}

@media screen and (max-width: 1024px) {
  ul.topnav li.right, 
  ul.topnav li, body {
    float: none;
}
}