initial commit

css/discord.css

@@ -0,0 +1,93 @@
+@import url('https://fonts.googleapis.com/css2?family=Karla:wght@500&display=swap');
+@import url('https://fonts.googleapis.com/css2?family=Roboto:wght@500&display=swap');
+@import url('https://fonts.googleapis.com/css2?family=Montserrat:wght@500&display=swap');
+
+
+* {
+    margin: 0;
+    padding: 0;
+    box-sizing: border-box;
+}
+
+body{
+    background: url(../img/bg.jpg);
+    background-size: cover;
+    background-repeat: no-repeat;
+    font-size: 16px;
+    line-height: 1.4;
+    background-position: center;
+    color: #fff;
+        
+}
+
+.container{
+    width: 100%;
+    height: 100vh;
+    display: flex;
+    flex-direction: column;
+    justify-content: center;
+    align-items: center;
+}
+
+.profil{
+    display: flex;
+    flex-direction: column;
+    justify-content: center;
+    align-items: center;
+    border: 2px solid rgba(255, 255, 255, .2); 
+    -webkit-backdrop-filter: blur(15px);
+    backdrop-filter: blur(15px);
+    border-radius: 25px;
+    width: 90%;
+    padding: 10px;
+}
+
+.profil h1{
+    font-family: 'Karla', sans-serif;
+    text-shadow: 1px 1px 1px rgba(0, 0, 0, 0.4);
+    text-align: center;
+  }
+  
+  .profil p{
+    font-family: 'Roboto', sans-serif;
+    text-shadow: 1px 1px 1px rgba(0, 0, 0, 0.4);
+    padding: 10px;
+    text-align: center;
+  }
+
+
+  
+@media only screen and (min-width: 400px) {
+    .container{
+        height: 100vh;
+    }
+
+    
+}
+
+@media only screen and (min-width: 600px) {
+    .profil{
+        width: 70%;
+    }
+ 
+}
+
+@media only screen and (min-width: 850px) {
+    .profil{
+        width: 50%;
+    }   
+}
+
+@media only screen and (min-width: 1000px) {
+    .profil{
+        width: 40%;
+    }   
+}
+
+@media only screen and (min-width: 1300px) {
+    .profil{
+        width: 30%;
+    }
+    
+}
+