@media (min-width: 300px) {

    section {
        width: 80%;
        margin-left:auto;
        margin-right:auto;
        padding-top: 10px;
        padding-bottom: 30px;
        border: white;
        border-width: 30px;
        background-color: white;
    }

    .dots {
        position: absolute;
        left: 15%;
        z-index: 0;
        height: 1800px;
        width: 180px;
        object-fit: cover;
    }

    h1 {
        margin-top: 50px;
        margin-bottom: 0;
        text-align: center;
        font-family: "garamond-premier-pro-display", serif; 
        font-weight: 500;
        font-size: 100px;
        color: black;
    }

    h2 {
        margin-top: 0;
        text-align: center;
        font-size: 20px;
        color:rgb(21, 99, 255);
        font-family: p22-folk-art-stitch, sans-serif; 
    }

    .image-citation {
        margin-top: 50px;
        color: grey;
        font-family: "acumin-variable", sans-serif;
        font-size: 15px;
        max-width: 90%;
        font-variation-settings: "slnt" 0, "wdth" 100, "wght" 500;
        text-decoration: none; 
        text-align: center;
    }

    .wiki-link {
        color:rgb(21, 99, 255);
        writing-mode: vertical-lr;
        text-orientation: sideways;
        z-index: -1;
        float: left;
        font-family: "acumin-variable", sans-serif;
        font-size: 12px;
        font-variation-settings: "slnt" 0, "wdth" 100, "wght" 500;
        text-decoration: none; 
    }

    .ipod-menu {
        float: left;
        position: relative;
        height: 500px;
        z-index: 9999;
    }

    .ipod-mainframe {
        z-index: 1;
        height:500px;
    }

    .menu-screen-1 {
        position: absolute;
        top: 50px;
        left:80px;
        right:80px;
        z-index:2;
    }

    .menu-screen-1 .menu-title {
        text-align: center;
        font-size: 15px;
        font-family: "acumin-variable", sans-serif;
        font-variation-settings: "slnt" 0, "wdth" 100, "wght" 700;
    }

    .menu-buttons {
        line-height: 80%;
        padding: 5px;
        z-index: 3;
    }

    .menu-btn-home {
        color: black;
        display: inline-block;
        transition: all .25s;
        width: 100%;
        font-size: 15px;
        font-family: p22-folk-art-stitch, sans-serif; 
        text-decoration: none;
        animation-name: flash;
        animation-duration: 0.75s;
        animation-iteration-count: 6;
        animation-direction: alternate;
    }

    @keyframes flash {
        from { background-color: none; }
        to { background-color: #532832; }
        from {color: black;}
        to {color: white;}
    }

    .menu-btn-home:hover {
        background-color: #532832;
        color: white;
    }

    .menu-btn-history {
        color: black;
        display: inline-block;
        transition: all .25s;
        width: 100%;
        font-size: 15px;
        font-family: p22-folk-art-stitch, sans-serif; 
        text-decoration: none;
    }

    .menu-btn-history:hover {
        background-color: #532832;
        color: white;
    }

    .menu-btn-hardware {
        color: black;
        display: inline-block;
        transition: all .25s;
        width: 100%;
        font-size: 15px;
        font-family: p22-folk-art-stitch, sans-serif; 
        text-decoration: none;
    }

    .menu-btn-hardware:hover {
        background-color: #532832;
        color: white;
    }

    .menu-btn-software {
        color: black;
        display: inline-block;
        transition: all .25s;
        width: 100%;
        font-size: 15px;
        font-family: p22-folk-art-stitch, sans-serif; 
        text-decoration: none;
    }

    .menu-btn-software:hover {
        background-color: #532832;
        color: white;
    }

    .menu-btn-criticism-legacy {
        color: black;
        display: inline-block;
        transition: all .25s;
        width: 100%;
        font-size: 15px;
        font-family: p22-folk-art-stitch, sans-serif; 
        text-decoration: none;
    }

    .menu-btn-criticism-legacy:hover {
        background-color: #532832;
        color: white;
    }

    .menu-btn-sources {
        color: black;
        display: inline-block;
        transition: all .25s;
        width: 100%;
        font-size: 15px;
        font-family: p22-folk-art-stitch, sans-serif; 
        text-decoration: none;
    }

    .menu-btn-sources:hover {
        background-color: #532832;
        color: white;
    }

    .introduction {
        margin-top: 25%;
        font-family: "acumin-variable", sans-serif;
        font-size: 18px;
        max-width: 100%;
        font-variation-settings: "slnt" 0, "wdth" 100, "wght" 500;
    }

    .menu-screen-2 {
        margin-top: 10%;
        margin-left: none;
    }

    .menu-buttons-2 {
        line-height: 120%;
        padding: 5px;
        z-index: 3;
    }

    .menu-btn-home2 {
        color: black;
        display: inline-block;
        transition: all .25s;
        width: 100%;
        font-size: 30px;
        font-family: p22-folk-art-stitch, sans-serif; 
        text-decoration: none;
    }

    .menu-btn-home2:hover {
        background-color: #532832;
        color: white;
    }

    .menu-btn-history2 {
        color: black;
        display: inline-block;
        transition: all .25s;
        width: 100%;
        font-size: 30px;
        font-family: p22-folk-art-stitch, sans-serif; 
        text-decoration: none;
    }

    .menu-btn-history2:hover {
        background-color: #532832;
        color: white;
    }

    .menu-btn-hardware2 {
        color: black;
        display: inline-block;
        transition: all .25s;
        width: 100%;
        font-size: 30px;
        font-family: p22-folk-art-stitch, sans-serif; 
        text-decoration: none;
    }

    .menu-btn-hardware2:hover {
        background-color: #532832;
        color: white;
    }

    .menu-btn-software2 {
        color: black;
        display: inline-block;
        transition: all .25s;
        width: 100%;
        font-size: 30px;
        font-family: p22-folk-art-stitch, sans-serif; 
        text-decoration: none;
    }

    .menu-btn-software2:hover {
        background-color: #532832;
        color: white;
    }

    .menu-btn-criticism-legacy2 {
        color: black;
        display: inline-block;
        transition: all .25s;
        width: 100%;
        font-size: 30px;
        font-family: p22-folk-art-stitch, sans-serif; 
        text-decoration: none;
    }

    .menu-btn-criticism-legacy2:hover {
        background-color: #532832;
        color: white;
    }

    .menu-btn-sources2 {
        color: black;
        display: inline-block;
        transition: all .25s;
        width: 100%;
        font-size: 30px;
        font-family: p22-folk-art-stitch, sans-serif; 
        text-decoration: none;
    }

    .menu-btn-sources2:hover {
        background-color: #532832;
        color: white;
    }

}

@media (min-width: 1350px) {

    section {
        width: 75%;
        margin-left:auto;
        margin-right:auto;
        padding-top: 150px;
        padding-bottom: 45px;
        border: white;
        border-width: 30px;
        background-color: white;
    }

    .dots {
        position: absolute;
        left: 15%;
        z-index: 0;
        height: 1400px;
        width: 180px;
        object-fit: cover;
    }

    h1 {
        margin-top: 70px;
        margin-bottom: 0;
        margin-left: 35%;
        font-family: "garamond-premier-pro-display", serif; 
        font-weight: 500;
        font-size: 200px;
        color: black;
        text-align: left;
    }

    h2 {
        margin-top: 0;
        margin-left: 38%;
        color:rgb(21, 99, 255);
        font-family: p22-folk-art-stitch, sans-serif; 
        text-align: left;
    }

    .image-citation {
        margin-top: 50px;
        color: grey;
        font-family: "acumin-variable", sans-serif;
        font-size: 12px;
        max-width: 68%;
        font-variation-settings: "slnt" 0, "wdth" 100, "wght" 500;
        text-decoration: none; 
        text-align: left;
    }

    .wiki-link {
        color:rgb(21, 99, 255);
        writing-mode: vertical-lr;
        text-orientation: sideways;
        z-index: -1;
        float: left;
        font-family: "acumin-variable", sans-serif;
        font-size: 12px;
        font-variation-settings: "slnt" 0, "wdth" 100, "wght" 500;
        text-decoration: none; 
    }

    .ipod-menu {
        float: left;
        position: relative;
        height: 500px;
        z-index: 9999;
    }

    .ipod-mainframe {
        z-index: 1;
        height:500px;
    }

    .menu-screen-1 {
        position: absolute;
        top: 50px;
        left:80px;
        right:80px;
        z-index:2;
    }

    .menu-screen-1 .menu-title {
        text-align: center;
        font-size: 15px;
        font-family: "acumin-variable", sans-serif;
        font-variation-settings: "slnt" 0, "wdth" 100, "wght" 700;
    }

    .menu-buttons {
        line-height: 80%;
        padding: 5px;
        z-index: 3;
    }

    .menu-btn-home {
        color: black;
        display: inline-block;
        transition: all .25s;
        width: 100%;
        font-size: 15px;
        font-family: p22-folk-art-stitch, sans-serif; 
        text-decoration: none;
        animation-name: flash;
        animation-duration: 0.75s;
        animation-iteration-count: 6;
        animation-direction: alternate;
    }

    @keyframes flash {
        from { background-color: none; }
        to { background-color: #532832; }
        from {color: black;}
        to {color: white;}
    }

    .menu-btn-home:hover {
        background-color: #532832;
        color: white;
    }

    .menu-btn-history {
        color: black;
        display: inline-block;
        transition: all .25s;
        width: 100%;
        font-size: 15px;
        font-family: p22-folk-art-stitch, sans-serif; 
        text-decoration: none;
    }

    .menu-btn-history:hover {
        background-color: #532832;
        color: white;
    }

    .menu-btn-hardware {
        color: black;
        display: inline-block;
        transition: all .25s;
        width: 100%;
        font-size: 15px;
        font-family: p22-folk-art-stitch, sans-serif; 
        text-decoration: none;
    }

    .menu-btn-hardware:hover {
        background-color: #532832;
        color: white;
    }

    .menu-btn-software {
        color: black;
        display: inline-block;
        transition: all .25s;
        width: 100%;
        font-size: 15px;
        font-family: p22-folk-art-stitch, sans-serif; 
        text-decoration: none;
    }

    .menu-btn-software:hover {
        background-color: #532832;
        color: white;
    }

    .menu-btn-criticism-legacy {
        color: black;
        display: inline-block;
        transition: all .25s;
        width: 100%;
        font-size: 15px;
        font-family: p22-folk-art-stitch, sans-serif; 
        text-decoration: none;
    }

    .menu-btn-criticism-legacy:hover {
        background-color: #532832;
        color: white;
    }

    .menu-btn-sources {
        color: black;
        display: inline-block;
        transition: all .25s;
        width: 100%;
        font-size: 15px;
        font-family: p22-folk-art-stitch, sans-serif; 
        text-decoration: none;
    }

    .menu-btn-sources:hover {
        background-color: #532832;
        color: white;
    }

    .introduction {
        margin-top: 13%;
        margin-left: 25%;
        font-family: "acumin-variable", sans-serif;
        font-size: 18px;
        max-width: 55%;
        font-variation-settings: "slnt" 0, "wdth" 100, "wght" 500;
    }

    .menu-screen-2 {
        margin-top: 10%;
        margin-left: 24%;
    }

    .menu-buttons-2 {
        line-height: 120%;
        padding: 5px;
        z-index: 3;
    }

    .menu-btn-home2 {
        color: black;
        display: inline-block;
        transition: all .25s;
        width: 100%;
        font-size: 30px;
        font-family: p22-folk-art-stitch, sans-serif; 
        text-decoration: none;
    }

    .menu-btn-home2:hover {
        background-color: #532832;
        color: white;
    }

    .menu-btn-history2 {
        color: black;
        display: inline-block;
        transition: all .25s;
        width: 100%;
        font-size: 30px;
        font-family: p22-folk-art-stitch, sans-serif; 
        text-decoration: none;
    }

    .menu-btn-history2:hover {
        background-color: #532832;
        color: white;
    }

    .menu-btn-hardware2 {
        color: black;
        display: inline-block;
        transition: all .25s;
        width: 100%;
        font-size: 30px;
        font-family: p22-folk-art-stitch, sans-serif; 
        text-decoration: none;
    }

    .menu-btn-hardware2:hover {
        background-color: #532832;
        color: white;
    }

    .menu-btn-software2 {
        color: black;
        display: inline-block;
        transition: all .25s;
        width: 100%;
        font-size: 30px;
        font-family: p22-folk-art-stitch, sans-serif; 
        text-decoration: none;
    }

    .menu-btn-software2:hover {
        background-color: #532832;
        color: white;
    }

    .menu-btn-criticism-legacy2 {
        color: black;
        display: inline-block;
        transition: all .25s;
        width: 100%;
        font-size: 30px;
        font-family: p22-folk-art-stitch, sans-serif; 
        text-decoration: none;
    }

    .menu-btn-criticism-legacy2:hover {
        background-color: #532832;
        color: white;
    }

    .menu-btn-sources2 {
        color: black;
        display: inline-block;
        transition: all .25s;
        width: 100%;
        font-size: 30px;
        font-family: p22-folk-art-stitch, sans-serif; 
        text-decoration: none;
    }

    .menu-btn-sources2:hover {
        background-color: #532832;
        color: white;
    }

}
