问我的网站在任何地方都有响应，但在调整浏览器窗口大小时

EN

        /*Globals*/
        
        @import url('https://fonts.googleapis.com/css2?family=Hachi+Maru+Pop&display=swap');
        * {
            margin: 0;
            padding: 0%;
            box-sizing: border-box;
            font-family: 'Hachi Maru Pop', monospace;
        }
        
        body {
            line-height: 1.6;
        }
        
        .container {
            max-width: 1100px;
            margin: 0 auto;
            padding: 0 40px;
        }
        
        ul {
            list-style-type: none;
        }
        
        a {
            text-decoration: none;
        }
        
        img {
            display: block;
            margin: auto;
        }
        
        .greeting {
            margin-top: 60px;
            font-size: 35px;
            padding-bottom: 20px;
        }
        
        p {
            margin: 15px auto 0px auto;
            font-size: 16px;
        }
        /* Repeating Styles*/
        
        .greeting,
        #about,
        #portfolio,
        #contact {
            text-align: center;
        }

        p,
        .contact-form {
            width: 80%;
        }
        
        .navbar,
        #portfolio,
        .social-footer {
            background: linear-gradient(to right, #ee7f7e, #f896fc, #b189f5, #87c1f1, #8ee3ee, #8cf391, #f1fa90, #f3cb8a, #f5a289);
        }
        
        span,
        .greeting,
        #contact,
        .contact-form,
        input,
        .message,
       .contact-form button,
       .menu-options li {
            background: linear-gradient(to right, #ee7f7e, #f896fc, #b189f5, #87c1f1, #8ee3ee, #8cf391, #f1fa90, #f3cb8a, #f5a289);
            background-clip: text;
            -webkit-background-clip: text;
            -webkit-text-fill-color: transparent;
            -moz-background-clip: text;
            -moz-text-fill-color: transparent;
            -o-background-clip: text;
            -o-text-fill-color: transparent;
            -ms-background-clip: text;
            -ms-text-fill-color: transparent;
        }
        
        .marquee,
       .contact-form button,
        .modal {
            border: 2px solid;
            border-image: conic-gradient(#ee7f7e, #f896fc, #b189f5, #87c1f1, #8ee3ee, #8cf391, #f1fa90, #f3cb8a, #ee7f7e) 1
        }
        
        ul,
        .navbar,
        .socials,
        .modal-bg,
        .modal{
            display: flex;
        }
        
        
        .contact-form input,
        .contact-form textarea,
        .contact-form button,
        .modal-bg {
            width: 100%;
        }
        
        .navbar,
        .navbar a,
        #portfolio {
            color: #fff;
        }
        
        .contact-form label,
        .marquee span {
            display: inline-block;
        }

        .project img,
        .portfolio-btn {
            border: 2px solid #fff;
            border-radius: 5px;
        }
        
        .contact-form input,
        .contact-form textarea,
        .contact-form button {
            padding: 12px 20px;
            outline: none;
        }
        
        .contact-form input,
        .contact-form textarea{
            border: none;
            border-bottom: 2px solid transparent;
            border-image: linear-gradient(to bottom right, #ee7f7e 0%, #f896fc 25%, #8ee3ee 50%, #f1fa90 75%, #f5a289 100%);
            border-image-slice: 1;
            border-radius: 3px;
        }
        
        .contact-form input:focus,
        .contact-form textarea:focus {
            border-bottom: 2px solid #000;
        }
        
        .modal-bg,
        .modal {
            justify-content: center;
        }
        
        .greeting,
        .headshot,
        .marquee span,
        .marquee {
            position: relative;
        }

        /* Navbar*/
        .navbar{
            height: 40px;
            justify-content: space-between;
        }
        
        .navbar img {
            margin: 10px;
        }
        
        #menu-button {
            display: none;
            margin: auto;
            background-color : transparent;
            outline: none;
            border: none;
        }

        .sections {
            margin-right: 1vh;
        }
        
        .sections li {
            margin: auto 2vh;
        }
        
        .seperation {
            padding: 0 1em;
            border-width: 0 1px;
            border-style: solid;
        }
        
        .navbar a:hover {
            color: #000000;
            border-bottom: solid #000000 1px;
        }
/* Drop down menu */
.menu-options {
    display: none;
    text-align: center;
}

.page-link{
    display: initial;
    
}
.page-link li {
    margin: 50px 0;
    font-size: 30px;
}

.social-link{
    justify-content: space-between;
    margin: 40px 10px;
    font-size: 20px;
}

.menu-container {
    position: absolute;
    margin: auto;
    top:40px;
    left: 0;
    right: 0;
    height: 400px;
    width: 100%;
    z-index: 1;
    animation: menu-container 1s linear;
}
.noMenu {
    display: none;
}

@keyframes menu-container {
    0% {
        top: -90%;
    }
}
        /*Marquee Scroller*/
        
        .marquee {
            width: 600px;
            height: 175px;
            white-space: nowrap;
            overflow: hidden;
            margin: 5% auto;
            position: relative;
        }
        
        .marquee span {
            top: 15%;
            left: 100%;
            animation: marquee 8.5s linear infinite;
        }
        
        .marquee:hover span {
            animation-play-state: paused;
        }
        
        .marquee span:nth-child(1) {
            animation-delay: 0s;
        }
        
        .marquee span:nth-child(2) {
            animation-delay: 0.4s;
        }
        
        .marquee span:nth-child(3) {
            animation-delay: 0.8s;
        }
        
        .marquee span:nth-child(4) {
            animation-delay: 1.2s;
        }
        
        .marquee span:nth-child(5) {
            animation-delay: 1.6s;
        }
        
        .marquee span:nth-child(6) {
            animation-delay: 2.0s;
        }
        
        .marquee span:nth-child(7) {
            animation-delay: 2.4s;
        }
        
        .marquee span:nth-child(8) {
            animation-delay: 2.75s;
        }
        
        @keyframes marquee {
            0% {
                left: 95%;
            }
            100% {
                left: -170%;
            }
        }
        /* Portfolio Section */
        
        #portfolio {
            padding-bottom: 5em;
        }
        
        #portfolio-container {
            display: grid;
            grid-template-columns: repeat(3, 1fr);
            grid-auto-rows: minmax(100, auto);
            padding: 20px;
            background-color: rgba(255, 255, 255, 0.329);
        }
    
        .portfolio-btn {
            outline: none;
            padding: 2%;
            margin: 5px;
            color: #fff;
            background-color: transparent;
            font-size: 15px;
            font-weight: 900;
        }

        /* Contact Section */
        #contact {
            margin-top: 20px;
        }

        .contact-form {
            margin: auto;
            padding: 10px 0;
        }
        
        .contact-form label {
            font-size: 20px;
            padding: 5%;
        }
        
        .contact-form button {
            font-size: 20px;
            font-weight: 600;
            cursor: pointer;
            transition: 0.2s ease-in-out;
        }
        
        @media all and (min-width: 1000px) {
            .contact-form {
                width: 60%;
            }
        }
        
        @media all and (min-width: 1080px) {
            .contact-form {
                width: 50%;
            }
        }
        
        /*Footer*/
        .footer {
            display: none;
        }
        
        /* Modal */
        
        .modal-bg {
            position: fixed;
            top: 0;
            left: 0;
            height: 100vh;
            background-color: rgba(0, 0, 0, 0.5);
            align-items: center;
            visibility: hidden;
            opacity: 0;
            transition: visibility 0s opacity 0.5s;
        }
        
        .modal-active {
            visibility: visible;
            opacity: 1;
        }
        
        .modal {
            width: 30%;
            height: 30%;
            background-color: rgba(255, 255, 255, 0.582);
        }

        .modal h1 {
            margin: auto;
        }
        /* Media Queries*/
        /*Phone*/
        /* Portrait */
        
        @media only screen and (max-device-width: 500px) and (orientation: portrait) {
            
            /* Navbar*/
            .navbar {
                position: absolute;
                width: 100%;
                top: 0;
                z-index: 2;
            }
            #menu-button{
                display: initial;
            }
            .menu-container{
            background: #474747ea;
            
            }
            .menu-options {
                display: initial;
            }
            .navbar img {
                margin: 0;
            }
            .socials {
                display: none;
            }
            .sections {
                display: none;
            }
            

            /* About Section */
            #about {
                margin-top: 10%;
            }

            .greeting {
                padding: 0 20px;
            }
    
        /*Marquee Scroller*/
        
        .marquee {
            bottom: initial;
            left: initial;
            width: 300px;
            height: 175px;
        }
        
        .marquee span {
            animation: marquee 9s linear infinite;
        }
        
        @keyframes marquee {
            0% {
                left: 200%;
            }
            100% {
                left: -340%;
            }
        }
        /* Portfolio Section */
        
        #portfolio-container {
            display: grid;
            grid-template-columns: initial;
            grid-auto-rows: initial;
        }
        
        .project {
            margin: 1em;
        }

        /*footer*/

        .footer {
            display: initial;
        }
        .social-footer {
            height: 40px;
            display: flex;
            align-items: center;
            justify-content: space-evenly;
            margin-top: 20px;
        }

        /* Modal */
        
        .modal {
            width: 70%;
            height: 30%;
            text-align: center;
        }
    }


        /* Landscape */
        @media only screen and (max-device-width: 900px){
            
           /* Portfolio Section */
        
        #portfolio-container {
            display: grid;
            grid-template-columns: initial;
            grid-auto-rows: initial;
        }
        
        .project {
            margin: 1em;
        }
          /*Marquee Scroller*/
        
          .marquee {
            bottom: initial;
            left: initial;
            width: 300px;
            height: 175px;
        }
        
        .marquee span {
            animation: marquee 9s linear infinite;
        }
        
        @keyframes marquee {
            0% {
                left: 200%;
            }
            100% {
                left: -340%;
            }
        }

        /* Modal */
        
        .modal-bg {
            position: fixed;
            background-color: rgba(0, 0, 0, 0.5);
            align-items: center;
            visibility: hidden;
            opacity: 0;
            transition: visibility 0s opacity 0.5s;
        }
        
        .modal-active {
            visibility: visible;
            opacity: 1;
        }
        
        .modal {
            width: 50%;
            height: 50%;
            text-align: center;
        }
        }

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
    <link rel="stylesheet" href="/css/style.css">
    <title>CV</title>
</head>

<body>

    <!--Nav-->
    <div class="navbar">
        <!-- Mobile view-->
        <button id="menu-button" ><img src="/images/Favorites/icons8-menu-rounded-25.png" alt=""></button>

<!-- Desktop view-->
        <div class="socials">
            <a href="***" target="_blank" rel="noopener noreferrer"><img src="/images/Favorites/icons8-instagram-20.png" alt=""></a>
            <a href="***" target="_blank" rel="noopener noreferrer"><img src="/images/Favorites/icons8-github-20-2.png" alt=""></a>
            <a href="***" target="_blank" rel="noopener noreferrer"><img src="/images/Favorites/icons8-linkedin-20.png" alt=""></a>
        </div>
        <ul class="sections">
            <li>
                <a href="#about">About</a>
            </li>
            <li class="seperation">
                <a href="#portfolio">Portfolio</a>
            </li>
            <li>
                <a href="#contact">Contact</a>
            </li>
        </ul>
    </div>
<!--Mobile drop down menu-->
    <div class="noMenu menu-container">
        <div class="menu-options">
            <ul class="page-link">
                <li>
                    <a class="menu-disappear" href="#about">About</a>
                </li>
                <li>
                    <a class="menu-disappear" href="#portfolio">Portfolio</a>
                </li>
                <li>
                    <a class="menu-disappear" href="#contact">Contact</a>
                </li>
            </ul>
            <ul class="social-link">
                <li>
                    <a class="menu-disappear" href="***" target="_blank" rel="noopener noreferrer"><img src="/images/Favorites/icons8-instagram-20.png" alt="">instagram</a>
                </li>
                <li>
                    <a class="menu-disappear" href="***" target="_blank" rel="noopener noreferrer"><img src="/images/Favorites/icons8-github-20-2.png" alt="">github</a>
                </li>
                <li>
                    <a class="menu-disappear" href="***" target="_blank" rel="noopener noreferrer"><img src="/images/Favorites/icons8-linkedin-20.png" alt="">linkedin</a>
                </li>
            </ul>
        </div>
      </div>

    <!--About-->
    <div id="about">
            <div class="greeting">Hello, my name is Prima. I'm a front-end web developer.
            </div>

            <img class="headshot" src="/images/my-pixel.gif" alt=" ">

            <div class="marquee">
                <span><img src="/images/Favorites/icons8-html-5-100.png" alt="HTML5"> HTML5</span>
                <span><img src="/images/Favorites/icons8-css3-100.png" alt="CSS3">CSS3</span>
                <span><img src="/images/Favorites/icons8-javascript-logo-100.png" alt="Javascript">Javascript</span>
                <span><img src="/images/Favorites/icons8-npm-100.png" alt="NPM">Node Package Manager</span>
                <span><img src="/images/Favorites/icons8-git-100.png" alt="Git Bash">Git</span>
                <span><img src="/images/Favorites/icons8-webpack-100.png" alt="">Webpack</span>
                <span><img src="/images/Favorites/icons8-github-100.png" alt="">Github</span>
                <span><img src="/images/Favorites/icons8-react-100.png" alt="">React</span>
            </div>
        </div>
    </div>


    <!--Portfolio-->
    <div id="portfolio">
        <h1>Portfolio</h1>
            <div id="portfolio-container">
                <div class="project">
                    <h3>Weather App</h3>
                        <img src="/images/weather.png">
                    <a href="https://simple-weatherapplication.netlify.app/" target="_blan" rel="noopener noreferrer"><button class="portfolio-btn">Preview</button></a>
                </div>
                <div class="project">
                    <h3>Portfolio Builder</h3>
                        <img src="/images/cv-maker.png">
                    <a href="https://resumeandcvbuilder.netlify.app/" target="_blank" rel="noopener noreferrer"><button class="portfolio-btn">Preview</button></a>
                </div>
                <div class="project">
                    <h3>Etch-a-Sketch</h3>
                        <img src="/images/etch-a-sketch.png">
                    <a href="https://my-etch-a-sketch-project.netlify.app/" target="_blank" rel="noopener noreferrer"><button class="portfolio-btn">Preview</button></a>
                </div>
                
            </div>
    </div>

    <!--Contact-->

    <div id="contact">
        <h1>Contact me</h1>
        <p>Send a message and I will get back to you within 24 hours.</p>
        <form method="POST" class="contact-form">
            <label>Name</label>
            <input class="name" type="text" placeholder="name" required/>
            <label>Email</label>
            <input class="email" type="email" placeholder="email" required/>
            <label>Message</label>
            <textarea class="message" cols="30 " rows="10" placeholder="message" required></textarea>
            <button type="submit">Submit</button>
        </form>
    </div>

<!--Footer on Mobile-->
    <div class="footer">
        <div class="social-footer">
            <a href="***" target="_blank" rel="noopener noreferrer"><img src="/images/Favorites/icons8-instagram-20.png" alt=""></a>
            <a href="***" target="_blank" rel="noopener noreferrer"><img src="/images/Favorites/icons8-github-20-2.png" alt=""></a>
            <a href="***" target="_blank" rel="noopener noreferrer"><img src="/images/Favorites/icons8-linkedin-20.png" alt=""></a>
        </div>
    </div>

    <!--Modal-->
    <div class="modal-bg">
        <div class="modal">
            <h1 class="message">Message sent!</h1>
        </div>
    </div>
    <script src="https://smtpjs.com/v3/smtp.js "></script>
    <script src="https://www.gstatic.com/firebasejs/8.2.2/firebase-app.js "></script>
    <script src="https://www.gstatic.com/firebasejs/8.2.2/firebase-database.js"></script>
    <script src="/js/main.js "></script>
</body>


</html>