body{
    /* ~ we just gotta tell it what to do! ~ */
    margin: 0; padding: 0;
    height: calc(100vh - 150px);
    overflow: auto;

    background: rgb(51,102,102);

    font-family: monospace;
}

header{
    height: 150px;
    background-color: #000;
    text-align: center;
}

h1, h2, h3{
    text-align: center;
    color: red;
}

.menu{
    display: flex;
    width: 100vw;
    margin: auto;
    justify-content: center;
}

.menu ul{
    display: flex;
    list-style-type: none;
}

.menu img{
    width: 90%;
}

.marquee{
    text-align: center;
    animation: marquee 600ms linear infinite alternate;

    overflow: hidden;
    margin:0  150px;
}

@keyframes marquee {
    from {transform: translateX(-15px);}
    50% {transform: translateX(0);}
    to {transform: translateX(15px);}
  }

.news{
    text-align: center;
}

.news a{
    font-size: 40pt;
    animation: flashy 500ms linear infinite;
}

@keyframes flashy{
    50% {color: yellow;}
}

.frblock{
    width: 800px; margin: auto;
    display: flex;
    flex-direction: row;
    justify-content: center;

    background-color: #000;
    border-radius: 25px;
}

.frblock img{
    align-self: center;
}

.frtxt{
    width: auto;
    color: gray;
    font-weight: bold;
}

.frtxt h1{
    color: red;
}

.frtxt h2{
    color: magenta;
    font-size: large;
    animation: blinky 500ms linear infinite;
}

@keyframes blinky{
    50% {color: cyan;}
}

.frtxt li{
    padding-bottom: 15px;
}

.frtxt a{
    color: yellow;
    text-decoration: none;
}

.frtxt a:hover{
    color: greenyellow;
    text-decoration: underline;
    letter-spacing: 1pt;
}

.hrgfx{
    display: flex;
    flex-direction: row;
    justify-content: center;
    margin: auto;
}

.hrgfx a{
    align-self: center;
    padding: 0;
}

.hrgfx img{
    align-self: center;
    padding: 0 2px 0 2px;
}

.blink h1, h2, h3{
    text-align: center;
    color: white;
}

.blink a {
    color: yellow;
    animation: blink-animation 1s steps(5, start) infinite;
    -webkit-animation: blink-animation 1s steps(5, start) infinite;
  }
  @keyframes blink-animation {
    to {
      visibility: hidden;
    }
  }
  @-webkit-keyframes blink-animation {
    to {
      visibility: hidden;
    }
  }
  
.card{
    width: 400px; margin: auto;
    background-color: wheat;
    padding: 20px;
    margin-top: 10px;
    margin-bottom: 40px;

    border-radius: 3px;
    box-shadow: 6px 6px gray;
}

.card h1{
    font-style: italic;
    color: #000;
}

#scroll{
    max-width: 100%; height: 100vh;
    
}

#main{
    width: inherit; height: inherit;
    /* ~ bg gradient ~ */
    background: rgb(51,102,102);
    background: -moz-linear-gradient(0deg, rgba(51,102,102,1) 0%, rgba(51,0,51,1) 25%, rgba(0,0,51,1) 50%, rgba(0,0,0,1) 100%);
    background: -webkit-linear-gradient(0deg, rgba(51,102,102,1) 0%, rgba(51,0,51,1) 25%, rgba(0,0,51,1) 50%, rgba(0,0,0,1) 100%);
    background: linear-gradient(0deg, rgba(51,102,102,1) 0%, rgba(51,0,51,1) 25%, rgba(0,0,51,1) 50%, rgba(0,0,0,1) 100%);
    filter: progid:DXImageTransform.Microsoft.gradient(startColorstr="#336666",endColorstr="#000000",GradientType=1);

    background-position: top;
    overflow: visible;
}

#main p{
    text-align: center;
}

#main a{
    color: red;
    text-decoration: none;
}

#main a:hover{
    color: cyan;
    text-decoration: underline;
}

#gallery{
    width: inherit;
    background-color: #000;
    padding-bottom: 40px;
    text-align: center;
    overflow: visible;
}

#gallery h1{
    margin: 0; padding: 16px;
}

#gallery img{
    border: 50px solid transparent;
    max-width: 800px;
    
}

#gallery img.frame1{
    border-image: url(./portfolio/frame/frame1.png);
    border-image-repeat: round;
    border-image-slice: 50;

    background-color: lightgray;
}

#gallery img.frame2{
    border-image: url(./portfolio/frame/frame2.png);
    border-image-repeat: round;
    border-image-slice: 50;

    background-color: aliceblue;
}

#gallery img.frame3{
    border-image: url(./portfolio/frame/frame3.png);
    border-image-repeat: round;
    border-image-slice: 50;

    background-color: antiquewhite;
}

#gallery img.frame4{
    border-image: url(./portfolio/frame/frame4.png);
    border-image-repeat: round;
    border-image-slice: 50;
    background-color: antiquewhite;
}

#gallery img.frame5{
    border-image: url(./portfolio/frame/frame5.png);
    border-image-repeat: round;
    border-image-slice: 50;
}