body {
  z-index: 0;
  width:100vw;
  height:110vh;
  color:rgb(40,0,20);
  display:inline-block;
  position:relative;
  font-family: Verdana;
  background-image:url("floral.jpg");
  background-size: contain;
  
}

.topbar {
  display:inline-block;
  width:100vw;
  height:14vh;
  text-align: center;
  color:rgb(120,160,220);
  background-image: url("toppattern.png");
  background-size: contain;
}

.topbar a {
  z-index:5;
  text-decoration:none;
  color:rgb(120,160,220);
  background-color:rgb(90,0,45);
  float: right;
  margin-right:1vw;
  padding-top:1vh;
  padding-bottom:1vh;
  padding-left:1vw;
  padding-right:1vw;
  font-weight: bold;
}
.topbar .title {
  display: grid;
  grid-template-columns: 85vw 15vw;
  height:7vh;
  width:98vw;
  text-align:left;
  text-decoration:none;
  font-weight: bold;
}
.topbar .clock{
  font-family: Monospace;
}

.sidebar {
  display:block;
  position:fixed;
  width:40vw;
  z-index:1;
  font-weight: bold;
  background: repeating-linear-gradient( -60deg, #AAE 0px, #AAE 5px, #ABD 6px, #ABD 11px, #AAE 12px);
  color: rgb(40,0,20);
  
}

.sidebar a {
  text-decoration:none;
  display:block;
  color:rgb(40,0,20);
  font-weight: normal;
  
}

.content {
  margin-left:40vw;
  width:60vw;
  min-height:80vh;
  max-height:200vh;
  display:inline-block;
  background: #ABD;
  
  
}

.content .juan {
  width: 30%;
  height:auto;
}

.content p {
  font-family:Garamond;
}

.bottombar {
  z-index:2;
  width:100vw;
  height:10vh;
  background-color:rgb(90,0,45);
  color:rgb(255,255,200);
}

.bottombar .pepepride {
  height:10vh;
  width:auto;
}

.bottombar ul {
  display: inline-block;
  vertical-align: top;
  
}

.marquee {
    width: 60vw;
line-height: 6px;
	background-color: yellow;
	color: Black;
    white-space: nowrap;
    overflow: hidden;
}
.marquee p {
    display: inline-block;
    padding-left: 50%;
    animation: marquee 12s linear infinite;
}
@keyframes marquee {
    0%   { transform: translate(100%, 0); }
    100% { transform: translate(-100%, 0); }
    }