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

.topbar {
  width:100vw;
  height:20vh;
  color:rgb(120,160,220);
  font-weight: bold;
  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);
  vertical-align: bottom;
  float: right;
  margin-right:1vw;
  padding-top:2vh;
  padding-bottom:2vh;
  padding-left:3vw;
  padding-right:3vw;
  font-weight: bold;
  border-radius:5px;
}

.title {
  display:grid;
  grid-template-columns: 80vw 20vw;
  text-align:left;
  height:8vh;
  text-decoration:none;
  font-weight: bold;
}

.clock {
  font-family:Monospace;
  grid-column-start: 2;
  grid-row-start: 1;
  grid-column-end: 3;
  grid-row-end: 2;
}

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

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

.sidebar .arti {
  background-image:url("rainbow.png");
  background-size:contain;
  z-index:2;
}

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

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


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

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

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

.marquee {
    width: 80vw;
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;
    font-family: Verdana;
    font-weight: bold;
}
@keyframes marquee {
    0%   { transform: translate(100%, 0); }
    100% { transform: translate(-100%, 0); }
    }