@font-face {
    font-family: comic;
    src: url(ComicSansMS.woff);
}

body {
    display:flex;
    flex-direction:column;
    font-family: comic;
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}
.contents{
    margin-left:2vw;

}
.logo {
    margin:auto;
    background-image: url("balls.gif");
    width:70vw;
    height: 40vh;
    background-size: fill;
    background-repeat: no-repeat;
    position: relative;
    overflow: visible;
}

.logo img {
    position:fixed;
    left:2vw;
    right:auto;
    width: 200px; 
    height: 300px;
    object-fit: contain;
    animation:rotate 5s linear infinite;
}
@keyframes rotate {
    25% {transform: rotate(20deg);}
    50% {transform: rotate(0deg);}
    75% {transform: rotate(-20deg);}
    100% {transform: rotate(0deg);}

}

.link {
      display: inline-block;        
  transition: transform 0.3s ease;
  text-decoration: none;        
  color: #D46F17;  
 border: 1px solid orange;
  background-color:lightgrey;
  border-radius:10px;
  padding:2px 5px;
}
.link:hover {
    transform:scaleX(1.25);
}
.mainholder{
    margin:auto;
    border-radius:16px;
    background-color:#e3d3c5;
    max-width:90vw;
    min-width:50vw;
}

.barholder {
    display: flex;
    flex-direction: row;
    gap: 5px; 
    margin: 10px;
}


.selectionbar {

    border: 1px solid lightgrey;
    border-radius: 6px 6px 0 0;
    height: 40px;
    width: 80px;
    text-align: center;
    line-height: 40px;
    cursor: pointer;
    transition:0.4s;
    background-color: #f0f0f0;
    color:black;
}


.selectionbar:hover {
    border-color: red;
    background-color: orange;
    transform: translateY(-2px) scaleY(1.25) scaleX(0.75);
}


@keyframes color-change {
    0%   { color: red; }
    15%  { color: orange; }
    30%  { color: yellow; }
    45%  { color: green; }
    60%  { color: blue; }
    75% { color: purple; }
    90% { color: pink; }
    100% { color: red;}
}

#overview {
    display: inline-block;
    animation: color-change 5s linear infinite;
}


#media {
    width: 60px;
}

#channel {
    width: 80px;
}

#about {
    width: 60px;
}