/*maps*/
#map {
    height: 100%;
    margin-left: 28%;
  }

  /* Optional: Makes the sample page fill the window. */
  body {
      background-color: rgb(245, 245, 245);
  }

  html,
  body {
    margin-top: -20px;
    height: 100%;
    margin: 0;
    padding: 0;
  }
/*removes wite bar from bottom*/
.marginfix {
  margin-bottom: -10px;
}
#navy { 
    padding-top: -20px;
    font-family: Georgia, 'Times New Roman', Times, serif;
    font-size: 23px;
    
}

html {
    font-family: helvetica, Georgia, 'Times New Roman', Times, serif;
}




/* Smaller than standard 960 (devices and browsers) */
@media only screen and (max-width: 959px) {}

/* Tablet Portrait size to standard 960 (devices and browsers) */
@media only screen and (min-width: 768px) and (max-width: 959px) {}

/* All Mobile Sizes (devices and browser) */
@media only screen and (max-width: 767px) {}

/* Mobile Landscape Size to Tablet Portrait (devices and browsers) */
@media only screen and (min-width: 480px) and (max-width: 767px) {}

/* Mobile Portrait Size to Mobile Landscape Size (devices and browsers) */
@media only screen and (max-width: 479px) {}





/*====Synth section with pictures and write up*/
.row{
    margin: 0;
  }





.edgetoedge  {
font-family: Georgia, 'Times New Roman', Times, serif;
 font-size: large; 
margin-top:20px;
  height: auto;
  text-align: center;
  color: white;
  

}

.synths  {
    margin-top:20px; 
    height: auto;
    text-align: center;
    color: white;
    background-color: #61afdfc7;
    border-radius: 15px;
}


.synths img {
    object-fit: cover;
    border-radius: 15px;
    margin: 0 auto;
    padding-top: 5%;
    padding-bottom: 5%;
}



#center {
    position: absolute;
  top: 50%;
  left: 50%;
  
}




/*menu image*/
.resize {
    height: auto;
}




/*background video*/
#synthVideo {
    width: 100%;
    height: 400px;
    object-fit: cover;
    z-index: -100;
    /* margin-top: -100px;
    height: auto;
    width: 100%;
    opacity: 0.5;
    position: fixed; 
    right: 0; 
    bottom: 0; 
    min-height: 100%; 
    top: 0;
    z-index: -1; */
}

.modalbackground {
    background-color: #e7e7e7;
}

#signupbutton {
  
    margin-bottom: 15px;
}

#searchButton {
  padding-top: none;
  margin-bottom: 15px;
}
/*back to the top button*/
#myBtn {

    display: none; 
    position: fixed; 
    bottom: 20px; 
    right: 30px; 
    z-index: 99; 
    border: none; 
    outline: none; 
    color: black; 
    cursor: pointer; 
    padding: 15px; 
    border-radius: 15px; 
    font-size: 18px; 
  }
  
  #myBtn:hover {
    background-color: #555; 
  }

/*====Dark theme=====*/


/*hit songs section*/
#mySelect {
  margin: 0 auto;
  width: 50%;
  padding-bottom: 0px;
}


.artistList {
  font-size:3.5vw;
  text-align: left;
  margin-left: 35%;
  padding-top: none;
  padding-bottom: 10px;
  
}

#menu {
    margin-top: 11px;
    padding-bottom: 7px;
    width: 100%;
    height: auto;
    background-color: white;

    
}

#about {
    margin-top: 50px;
    align-items: center;
    color: black;
}

#signup {
    padding-top: 10px;
    background-color: rgba(71, 71, 71, 0.836);
    color: white;
    margin-top: 25px;
}




/*checkered section*/
 /* Table - this section covers the styling of the columns and rows within our table */
 * { /* The asterisk is a universal selector that applies this effect to all elements on the page */
    box-sizing: border-box; /* This creates a box with a border within which we will place most of our text */
}

.Column_1 {
    float: left;  
    width: 50%; /* This ensures one column takes up half the page width */
    padding: 1.6%; 
    background-color: #ffffff; 
    height: 448px; /* You may need to adjust this to fit your content */
}

.Column_2 {
    float: left;
    width: 50%;
    padding: 1.6%;
    height: 448px; /* You may need to adjust this to fit your content */
    background-color: #a5a5a5;
}

.Row:after { /* This inserts something after the content of selected elements */
    content: ""; /* By leaving this blank, we are allowing the footer (covered lower down) to be displayed - removing it makes the footer overwrite a column */
    display: table; /* The display property specifies the type of display behavior; the table value tells the browser to treat the element as a table */
    clear: both; /* This clears any other elements from floating on the left or the right of an element */
}

/* Heading 1 elements */
h1 {
    text-transform: uppercase; /* We are capitalizing our headings */
    font-family: "Trebuchet MS", Optima; 
    text-align: center;
    margin-top: 3%; /* We are adding a small margin above the headings */
    color: #1a1a1a;
}

/* Paragraph elements */
p {
    font-family: Perpetua, Rockwell Extra Bold;
    text-align: justify;
    letter-spacing: .1vw; /* This expands the text slightly */
    font-size: 1.5vw;
    padding-left: 1vw;
    padding-right: 1vw;
}

/* Center align elements - this embraces all centered text */
center {
    font-family: Perpetua, Rockwell Extra Bold;
    text-align: center;
    letter-spacing: .1vw;
    font-size: 1.5vw;
    padding-left: 5vw;
    padding-right: 5vw;
}

/* Anchor elements */
a {
    color: blue; /* We are ensuring all links are blue */
}

/* Quotation elements */
q {
    font-style: italic;
    font-weight: bold;
}

/* Image elements */
img {
    filter: grayscale(75%); /* This rids our pictures of 75% of their color */
    border-radius: 8px; /* This causes our images to have slightly rounded edges */
    max-width: 100%; 
    height: 100%;
    margin: auto auto auto auto;
    display: block;	/* By specifying block display we can ensure our images are able to be centered */
}

/* Center align element hover effect */

#instamap {
    display: inherit;
    
}

.map-responsive{
    overflow:hidden;
    padding-bottom:56.25%;
    position:relative;
    height:0;
}
.map-responsive iframe{
    left:0;
    top:0;
    height:100%;
    width:100%;
    position:absolute;
}

.insta-responsive{
    overflow:hidden;
    padding-bottom:56.25%;
    position:relative;
    height:0;
}
.insta-responsive blockquote{
    left:0;
    top:0;
    height:100%;
    width:100%;
    position:absolute;
}

.Column_2 , .Column_1 {
    float: left;
    width: 50%;
    padding: 10px;
     /* Should be removed. Only for demonstration */
  }
  
  /* Clear floats after the columns */
  .Column_2 , .Column_1:after {
    content: "";
    display: table;
    clear: both;
  }
  
  /* Responsive layout - makes the two columns stack on top of each other instead of next to each other */
  @media screen and (max-width: 600px) {
    .Column_2 , .Column_1 {
      width: 100%;
    }
  }

  * {
    box-sizing: border-box;
  }