style.css

@media (min-width:300px) {
    * {
        margin: 0;
        padding: 0;
    }
    
    .hide {
        display: none;
    }


    
    .header-background {
        display: flex;
        flex-direction: row;
        justify-content: center;
        align-items: flex-end;
        background-image: url('./assets/mount_fuji.jpg');
        background-size: cover;
        background-repeat: no-repeat;
        min-height: 50vh;
    }
    
    .header-title {
        color: white;
    }
    
    .left-header {
        margin: 10px;
    }
    
 
    
    li {
        list-style-type: none;
        font-family: 'Notable', sans-serif;
        color: white;
    }
    
    li a {
        text-decoration: none;
        font-family: 'Notable', sans-serif;
        color: white;
    }
    
    body {
        background-image: linear-gradient(to right, rgba(0, 0, 0, 0.5), rgb(0, 0, 0));
    }
    
    
    .profile-image-container {
        display: flex;
        flex-direction: row;
        justify-content: center;
        align-items: center;
    }
    
    .navbar {
        margin: 10px auto;
    }
    
    .navbar-items {
        min-height: 50px;
        display: flex;
        flex-direction: column;
        justify-content: space-evenly;
        align-items: center;
    }
    
    .navbar-item {
        margin: 0 auto;
        padding: 3px;
        width: 10rem;
        text-align: center;
        font-weight: 600;
        font-size: large;
       
    }
    
    .main-container {
        margin: 5px;
        padding: 10px;
        display: flex;
        flex-direction: column;
        justify-content: space-evenly;
    }
    
    .left-container {
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: center;
        align-self: center;
        margin: 15px;;
        width: 100%;
        min-height: 50px;
    }
    
    .right-container {
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-self: center;
        margin: 15px;
        width: 100%;
        min-height:  50px;
        background-color: rgba(0,0,0, .2);
        font-family: 'Bungee Inline', cursive;
        color: white;
    }
    
    .media-container {
        margin: 10px;
        display: flex;
        flex-direction: row;
        flex-wrap: wrap;
        justify-content: space-around;
    }
    
    .media-links {
        margin: 10px;
        color: royalblue;
    }
    
    .about-me-box {
        padding: 10px;
    }
    
    .about-me-header {
        margin: 5px auto;
        text-align: center;
    }
    
    .image-container {
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: center;
    }
    
    #profile-img {
        border: 5px solid black;
        margin: 10px auto;
        border-radius: 50%;
        width: 300px;
        height: 300px;
    }
    
    .footer-container {
        margin: 10px;
        padding: 10px;
        display: flex;
        flex-direction: row;
        justify-content: space-around;
        align-items: center;
    }

    #img-content {
   
        color: white;
        border-width: 3px;
        border-style: solid;
        border-image: 
          linear-gradient(
            to bottom, 
            red, 
            rgba(0, 0, 0, 0)
          ) 1 100%;
      }

      .app-images {
        border: 7px solid black;
        margin: 10px auto;
        
        width: 200px;
        height: 200px;
    }

          .rainbow-text {
        background-image: linear-gradient(to left, violet, indigo, blue, green, yellow, orange, red);   -webkit-background-clip: text;
        color: transparent;
      }
    

    .app-image-container {
        display: flex;
        flex-direction: row;
    }

    .project-container {
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: center;
    }
    
#findme-hr {
    width: 25%;
}

#name-hr {
    width: 35%;
}

#projects-hr {
    width: 35%;
}

.game-images {
    display: flex;
    flex-flow: row wrap;
    justify-content: center;
    align-items: center;
}

p {
    color: white;
    margin: 10px;
}

.big-font {
    font-size: 36px;
}

.game-images{
    display: flex;
    flex-flow: row wrap;
    justify-content: center;
    align-items: center;
}

.email-icon {
    color: royalblue;
}

footer {
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
    align-items: baseline;
}

    
}


@media (min-width: 700px){
    * {
        margin: 0;
        padding: 0;
    }
    
    
    .header-background {
        display: flex;
        flex-direction: row;
        justify-content: center;
        align-items: flex-end;
        background-image: url('./assets/mount_fuji.jpg');
        background-size: cover;
        background-repeat: no-repeat;
        min-height: 50vh;
    }
    
    .header-title {
        color: white;
    }
    
    
    
    li {
        list-style-type: none;
    }
    
    li a {
        text-decoration: none;
        font-family: 'Notable', sans-serif;
        color: white;
    }
    
    body {
        background-image: linear-gradient(to right, rgba(0, 0, 0, 0.5), rgb(0, 0, 0));
    }
    
    
    .profile-image-container {
        display: flex;
        flex-direction: row;
        justify-content: center;
        align-items: center;
    }
    
    .navbar {
        margin: 10px auto;
    }
    
    .navbar-items {
        min-height: 50px;
        display: flex;
        flex-direction: row;
        justify-content: space-evenly;
        align-items: center;
    }
    
    .navbar-item {
        margin: 5px auto;
        padding: 3px;
        width: 10rem;
        text-align: center;
        font-weight: 600;
        font-size: large;
       
    }
    
    .main-container {
        margin: 15px;
        padding: 15px;
        display: flex;
        flex-direction: row;
        justify-content: space-evenly;
    }
    
    .left-container {
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: center;
        margin: 15px;;
        width: 50%;
        min-height: 50px;
    }
    
    .right-container {
        display: flex;
        flex-direction: column;
        margin: 15px;
        width: 50%;
        min-height:  50px;
        background-color: rgba(0,0,0, .2);
        font-family: 'Bungee Inline', cursive;
        color: white;
    }
    
    .media-container {
        display: flex;
        flex-direction: row;
        flex-wrap: wrap;
        justify-content: space-evenly;
    }
    
    .media-links {
        margin: 10px;
        color: black;
        color: royalblue;
    }
    
    .about-me-box {
        padding: 10px;
    }
    
    .about-me-header {
        margin: 5px auto;
        text-align: center;
    }
    
    .image-container {
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: center;
    }
    
    .app-images {
        border: 7px solid black;
        margin: 10px auto;
        border-radius: 50%;
        width: 300px;
        height: 300px;
    }
    
    .footer-container {
        margin: 10px;
        padding: 10px;
        display: flex;
        flex-direction: row;
        justify-content: space-around;
        align-items: center;
    }
    

    .rainbow-text {
        background-image: linear-gradient(to left, violet, indigo, blue, green, yellow, orange, red);   -webkit-background-clip: text;
        color: transparent;
      }

      .module {
       
    
        color: white;
        border-width: 3px;
        border-style: solid;
        border-image: 
          linear-gradient(
            to bottom, 
            red, 
            rgba(0, 0, 0, 0)
          ) 1 100%;
      }
    
}