Website/res/css/vtuber.css

body {
    background-image: linear-gradient(to bottom right,#0087ED, #3BC18E);
    background-repeat: no-repeat;
    color: white;
    font-family: monospace;
    font-size: 20pt;
    margin: 2%;
    background-size: cover;
}

body h1 {
    font-size: 28pt;
}

body h2 {
    font-size: 24pt;
}

nav {
    position: fixed;
    background-image: linear-gradient(to right, black, rgb(75, 75, 75));
    top: 0%;
    left: 0%;
    right: 0%;
    max-height: 10%;
    text-align: center;
    padding: 1%;
    z-index: 1;
}

nav ul {
    list-style-type: none;
    margin: 0;
    padding: 0;
}

nav ul li {
    float: left;
    padding-left: 4pt;
    padding-right: 4pt;
    border-right: 1pt solid gray;
}

nav ul li:last-child {
    border-right: none;
}

nav ul li a {
    text-transform: capitalize;
    display: block;
    padding-left: 4pt;
    padding-right: 4pt;
}

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

a:hover {
    color: cyan;
    transition: color 0.5s ease;
}

nav ul li a img {
    width: 22pt;
    height: 22pt;
}

main {
    position: relative;
    top: 0%;
    left: 0%;
    right: 0%;
    bottom: 0%;
    text-align: center;
    text-shadow: black 2pt 2pt;
    margin-top: 8%;
}

main .left {
    float: left;
    width: 49%;
    margin-bottom: 4%;
    margin-right: 1%;
}

main .right {
    float: right;
    width: 49%;
    margin-bottom: 4%;
    margin-left: 1%;
}

.cork_board {
    background-image: url(/res/img/Cork\ Board\ 420x420.png);
    padding-top: 5%;
    padding-bottom: 5%;
    border-style:outset;
    border-color:black;
    border-top-width:1pt;
    border-bottom-width: 2pt;
    border-left-width: 1pt;
    border-right-width: 2pt;
}

.crinkled_paper {
    background-image: url(/res/img/Crinkled\ Paper\ 420x420.png);
    width: 90%;
    margin-left: 5%;
    padding-top: 1%;
    padding-bottom: 1%;
    border-style:outset;
    border-color:black;
    border-top-width:1pt;
    border-bottom-width: 2pt;
    border-left-width: 1pt;
    border-right-width: 2pt;
}

@media only screen and (max-width: 719px) {
    body {
        font-size: 18pt;
    }

    body h1 {
        font-size: 26pt;
    }

    body h2 {
        font-size: 22pt;
    }

    nav {
        font-size: 10pt;
    }

    nav ul li {
        padding-left: 2pt;
        padding-right: 2pt;
    }

    nav ul li a {
        padding-left: 2pt;
        padding-right: 2pt;
    }

    nav ul li a img {
        width: 10pt;
        height: 10pt;
    }

    main {
        margin-top: 10%;
        text-shadow: black 1.75pt 1.75pt;
    }

    main .crinkled_paper {
        font-size: 16pt;
    }

    main .crinkled_paper h1 {
        font-size: 24pt;
    }

    main .crinkled_paper h2 {
        font-size: 20pt;
    }

    main .left {
        float: none;
        width: auto;
    }

    main .right {
        float: none;
        width: auto;
    }
}

@media only screen and (max-width: 280px) {
    body {
        font-size: 14pt;
    }

    body h1 {
        font-size: 18pt;
    }

    body h2 {
        font-size: 16pt;
    }

    main {
        text-shadow: black 1.25pt 1.25pt;
    }

    main .crinkled_paper {
        font-size: 12pt;
    }

    main .crinkled_paper h1 {
        font-size: 16pt;
    }

    main .crinkled_paper h2 {
        font-size: 14pt;
    }

    nav {
        font-size: 8pt;
    }

    nav ul li {
        padding-left: 1pt;
        padding-right: 1pt;
    }

    nav ul li a {
        padding-left: 1pt;
        padding-right: 1pt;
    }

    nav ul li a img {
        width: 10pt;
        height: 10pt;
    }
}