diff --git a/styles.css b/styles.css
index fda2853..ba66405 100644
--- a/styles.css
+++ b/styles.css
@@ -178,4 +178,98 @@ footer{
     margin-top: 25px;
     margin-left: 46px;
     align-items: center;
+}
+@media screen and (max-width: 768px) {
+    .top {
+        background: rgba(0,0,0,0.5) url("assets/Title-Image.png");
+        background-blend-mode: darken;
+        background-size: cover;
+        background-position: center;
+    }
+    nav {
+        flex-direction: column;
+        height: auto;
+        align-items: center;
+    }
+    
+    .nav-bar {
+        flex-direction: column;
+        align-items: center;
+        text-align: center;
+    }
+    
+    .nav-bar ul {
+        flex-direction: column;
+        padding: 0;
+    }
+    
+    .menu {
+        margin: 10px 0;
+    }
+    
+    .menu ul {
+        display: flex;
+        justify-content: center;
+    }
+    
+    .logo {
+        width: 100px;
+        margin: 10px 0;
+    }
+    
+    .title {
+        margin-top: 100px;
+        text-align: center;
+        align-items: center;
+    }
+    
+    .name {
+        font-size: 50px;
+    }
+    
+    .name-buttons {
+        flex-direction: column;
+    }
+    
+    .play-btn, .info-btn {
+        width: 100%;
+        justify-content: center;
+    }
+    
+    .middle .images {
+        flex-wrap: wrap;
+        justify-content: center;
+    }
+    
+    .images img {
+        width: 150px;
+        margin: 5px;
+    }
+    
+    .topTen .rank {
+        flex-direction: column;
+        align-items: center;
+    }
+    
+    .topTen .images img {
+        width: 80px;
+        height: auto;
+    }
+    
+    .socials {
+        justify-content: center;
+    }
+    
+    .artists {
+        flex-wrap: wrap;
+        justify-content: center;
+    }
+    
+    .artists ul {
+        text-align: center;
+    }
+    
+    .highlight, .copyright {
+        text-align: center;
+    }
 }
\ No newline at end of file