/* CSS is how you can add style to your website, such as colors, fonts, and positioning of your
   HTML content. To learn how to do something, just try searching Google for questions like
   "how to change link color." */

.main {
    font-family:"Verdana";
    position: absolute;
    padding:15px;
    height:100px;
    left:180px; top:150px; right:0; bottom:0;
}


.topbar {
  font-family:"Verdana";
  font-size:100%;
  position:absolute;
  display: flex;
  top:0; left:0; right:0;
  padding:15px;
  height: 120px;
  background: linear-gradient(90deg,rgba(0, 0, 0, 1) 0%, rgba(0, 0, 0, 1) 42%, rgba(115, 0, 0, 1) 100%);  
  line-height:1.5;
  align-items:center;
  gap: 50px;
}

.topbar div {
  align-items: center;
  line-height:1.5;
  padding: 0px;
}


.sidebar {
    position:absolute;
    left:0; top:150px; bottom: 0;
    width: 150px;
    height:1500px;
    padding:15px;
    background-color: #5A5A5A;
    background: linear-gradient(180deg,rgba(90, 90, 90, 1) 0%, rgba(90, 90, 90, 1) 45%, rgba(0, 0, 0, 1) 83%);
    font-family:"Verdana";

}

.sidebarbutton {
    position:relative;
    display:flex;
    border: 5px solid black;
    width:140px;
    height:50px;
    margin-top:10px;
    background-color:black;
}

.sidebartext {
    position:absolute;
    height:100%;
    width:100%;
    text-align:center;
    white-space:nowrap;
}

.bottombar {
    position:absolute;
    display: flex;
    top:1620px; left:0; right:0;
    width: 98%;
    padding:15px;
    background-color: black;
    line-height: 0.5;
    text-align: center;
}

.bottombar div {
  padding: 10px;
}

.mainimage {
  height:500px;
  width:auto;
}

.bottomimage {
  height:40px;
  width:auto;
}

.headimage {
  position:absolute;
  top:1077px; right:0;
  filter: drop-shadow(0 0 20px #000000);
}

.mediaplayer {
  position:absolute;
  top:0; right:0;
  border: 5px solid maroon;
  background-color:black;
  border-style:dashed;
  border-radius: 25px;
  padding:5px;
  margin:15px;
}

.guestbook {
  position:absolute;
  top:300px; right:0;
  width: 450px;
  height: 610px;
  border: 5px solid maroon;
  background-color:black;
  border-style:dashed;
  border-radius: 25px;
  padding:5px;
  margin:15px;
}

.dancing {
  position:absolute;
  top:0; right:500px;
  padding:20px;
}

.dancing2 {
  position:absolute;
  top:150px; right:520px;
}

.dancing3 {
  position:absolute;
  top:130px; right:620px;
  height:100%;
  width:auto;
}

.dancing4 {
  position:absolute;
  top:10px; right:650px;
  height:100%;
  width:auto;
}


h1 {
  color: white;
}

h2 {
  color: white;
}

h3 {
  color: white;
}

body {
  background-color: maroon;
  background-image:url("Background 1.jpg");
  background-size:130%;
  color: white;
}

footer {
  background-color: black;
}

a:link {
  color: gold;
}

a:visited {
  color: gold;
}


























@media (max-width: 600px) {

.main {
    font-family:"Verdana";
    position: absolute;
    width:70%;
    display: flex;
    flex-wrap: wrap;
    padding:15px;
    left:26%; top:180px; right:0; bottom:0;
}

.topbar {
  font-family:"Verdana";
  font-size:65%;
  position:absolute;
  display: flex;
  top:0; left:0; right:0;
  padding:15px;
  height: 150px;
  width:100vw;
  background: linear-gradient(90deg,rgba(0, 0, 0, 1) 0%, rgba(0, 0, 0, 1) 42%, rgba(115, 0, 0, 1) 100%);  line-height: 0.5;
  align-items:center;
  gap: 25px;
}

.topbar div {
  align-items: center;
  padding: 0px;
}

.sidebar {
    position:absolute;
    left:0; top:180px; bottom: 0;
    width: 20%;
    height:1500px;
    padding:15px;
    background-color: #5A5A5A;
    background: linear-gradient(180deg,rgba(90, 90, 90, 1) 0%, rgba(90, 90, 90, 1) 45%, rgba(0, 0, 0, 1) 83%);
    font-family:"Verdana";

}

.sidebarbutton {
    position:relative;
    display:flex;
    border: 5px solid black;
    width:95%;
    height:50px;
    margin-top:10px;
    background-color:black;
}

.sidebartext {
    position:absolute;
    height:100%;
    width:100%;
    font-size:65%;
    text-align:center;
    white-space:nowrap;
}

.bottombar {
    position:absolute;
    display: flex;
    flex-wrap: wrap;
    top:1620px; left:0; right:0;
    width:100%;
    padding:15px;
    background-color: black;
    line-height: 0.5;
    text-align: center;
}

.bottombar div {
  padding: 10px;
}

.mainimage {
  height:auto;
  width:100%;
}

.bottomimage {
  height:40px;
  width:auto;
}

.headimage {
  display:none;

}

.bluesky-embed {
  display:none;
}

.mediaplayer {
  display:none;
}

.guestbook {
  display:none;
}

.dancing {
  display:none;
}

.dancing2 {
  display:none;
}

.dancing3 {
  display:none;
}

.dancing4 {
  display:none;
}


h1 {
  color: white;
}

h2 {
  color: white;
}

h3 {
  color: white;
}

body {
 
}

footer {
  background-color: black;
}

a:link {
  color: gold;
}

a:visited {
  color: gold;
}

}