about_page.css

/* Body */

html {
    font-size: 100%;
}

section {
    display: flex;
    align-items: center;
    justify-content: center;
    flex-direction: column;
    margin: 0 7% 0 7%;
}

img {
    max-width:100%;
}

h1 {
    font-size: 6vw;
    font-family: 'Zilla Slab', serif;
    
    /* animation */
    background-image: linear-gradient(
            90deg,
            yellow ,
            green 7%,
            black,
            black,
            green 93%,
            yellow 
        );
        background-size: 200% auto;
        -webkit-background-clip: text;
        -webkit-text-fill-color: transparent;
        animation: textclip 5s linear infinite;
        }
/* h1 animation */
@keyframes textclip {
    to {
            background-position: -200% center;
        }
    }

a {
    text-decoration: none;
}

h2{
    font-size: 5.3vw;
    font-family: 'Zilla Slab', serif;
    color: blue;
}

h4 {
    font-size: 2.3vw;
    font-family: 'Zilla Slab', serif;
    color: rgb(255, 0, 0);
    white-space: nowrap;
}

.title {
    font-style: italic;
    }

p {
    font-size: 3.8vw;
    font-family: 'Roboto Condensed', sans-serif;
    color: #000;
    align-self: center;
    text-align: center;
    background-color: transparent;
    position:relative;
    
}

body {
    padding-top: 4%;
    background-color: #ffee00;
}

/* navigation */

.sidenav2 {
    margin-top: -20px;
    margin-left: 0px;
    width: 20vw; /* Set the width of the sidebar */
    position: absolute;
    z-index: 1; /* Stay on top */
    top: 0; /* Stay at the top */
    left: 0;
    background-color: #ff306e; 
    overflow-x: hidden; /* Disable horizontal scroll */
    padding-top: 20px;
    }

/* The navigation menu links */
.sidenav2 a {
    display:inline;
    padding: 0 px 8px 6px 1px;
    text-decoration: none;
    line-height: 2em;
    text-align:center;
    display: block;
    }

.home:hover {
    background-color: #FFF;
    color: #0011ff;
    }

.home {
    font-size: 4vw;
    font-family: 'Zilla Slab', serif;
    background-color: #f00;
    color: #fff;
    
}

.insta {
    font-size: 4vw;
    font-family: 'Zilla Slab', serif;
    background-color: #0011ff;
    color: #ffee00;
    
}

.insta:hover {
    background-color: green;
    color: white;
    }

/* Media queries */

/* small phone */
@media screen and (max-width: 520px){
    p {
        font-size: 7vw;
    }
    h4 {
        font-size: 3vw;
    }
    h1 {
        font-size: 5vw;
    }
    .insta{
        font-size: 5vw;
    }
    .home{
        font-size: 5vw;
    }
    .sidenav2{
        width: 16vw;
    }

}
        
/* desktop */
@media only screen and (min-width: 990px){
    p {
        font-size: 2vw;
    }
    h4 {
        font-size: 2vw;
    }
    img {
        max-width: 80%;
    }
    .insta{
        font-size: 2vw;
    }
    .home{
        font-size: 2vw;
    }
    .sidenav2{
        width: 12vw;
    }

 
}

/* ticker code below */


    
    

/* (A) STANDARD ROW HEIGHT */
.vwrap, .vitem {
    height: 40px;
    line-height: 40px;
    width: 100%;
  }
   
  /* (B) FIXED WRAPPER */
  .vwrap {
    overflow: hidden; /* HIDE SCROLL BAR */
    background: radial-gradient(rgb(5, 54, 5), rgb(28, 252, 28));
    filter: drop-shadow(0 0 0.75rem rgb(12, 255, 12));
    color: yellow;
    padding: .5vw;
    font-size: 3vw;
    font-family: 'Roboto Condensed', sans-serif;
    text-transform: uppercase;
  }
  /* (C) TICKER ITEMS */
  .vitem { text-align: center; }
   
  /* (D) ANIMATION - MOVE ITEMS FROM TOP TO BOTTOM */
  /* CHANGE KEYFRAMES IF YOU ADD/REMOVE ITEMS */
  .vmove { position: relative; }
  @keyframes tickerv {
    0% { bottom: 0; } /* FIRST ITEM */
    30% { bottom: 40px; } /* SECOND ITEM */
    60% { bottom: 80px; } /* THIRD ITEM */
    90% { bottom: 120px; } /* FORTH ITEM */
    100% { bottom: 0; } /* BACK TO FIRST */
  }
  .vmove {
    animation-name: tickerv;
    animation-duration: 10s;
    animation-iteration-count: infinite;
    animation-timing-function: cubic-bezier(1, 0, .5, 0);
  }
  .vmove:hover { animation-play-state: paused; }