initial work on redesign

2026-05-12 06:16:55 +00:00 · 2023-03-08 00:40:22 +01:00
parent 2f0b1e8307
commit 0beeab357b
8 changed files with 188 additions and 480 deletions
@@ -11,7 +11,7 @@
    <meta property="og:url" content="https://youhavetrouble.me"/>
    <meta property="og:description" content="Just a page about random person on the internet"/>
    <meta property="og:image" content="https://youhavetrouble.me/img/avatar.png"/>
-    <link rel="stylesheet" href="/style/main.css">
+    <link rel="stylesheet" href="main.css">
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.1.2/css/all.min.css"
          integrity="sha512-1sCRPdkRXhBV2PBLUdRb4tMg1w2YPf37qatUFeS7zlBy7jJI8Lf4VHwWfZZfpXtYSLy85pkm9GaYVYMfw5BC1A=="
          crossorigin="anonymous" referrerpolicy="no-referrer"/>
@@ -20,126 +20,40 @@
    <script src="index.js" defer></script>
 </head>
 <body>
-<nav>
-    <div class="pages">
-        <a class="button active">Home</a>
-        <a href="/projects" class="button">Projects</a>
-    </div>
-</nav>
-<section>
-    <div class="card">
-        <div class="title">
-            <div class="avatar"><img alt="avatar" src="img/avatar.png" draggable="false"></div>
-            <div>
-                <div class="name">YouHaveTrouble</div>
-                <div id="status">Status unknown</div>
-                <div id="status-action"></div>
-            </div>
-        </div>
-    </div>
-</section>
-<section>
-    <div class="card">
-        <h2>About me</h2>
-        <p>I'm self-taught software developer. I'm currently working as a fullstack web developer. In my free time I
-            make plugins for minecraft servers and mods for Terraria.</p>
-    </div>
-</section>
-<section>
-    <h2>Socials</h2>
-    <div class="row">
-        <a href="https://github.com/YouHaveTrouble" title="GitHub" target="_blank" class="vert-card">
-            <i class="fa-brands fa-github"></i>
-            <span>GitHub</span>
-        </a>
-        <a href="https://discord.gg/j8KK5dGBps" title="Discord" target="_blank" class="vert-card">
-            <i class="fa-brands fa-discord"></i>
-            <span>Discord</span>
-        </a>
-        <a href="https://ko-fi.com/youhavetrouble" title="Ko-fi" target="_blank" class="vert-card">
-            <i class="fa-solid fa-mug-hot"></i>
-            <span>Ko-fi</span>
-        </a>
-        <a href="https://modrinth.com/user/YouHaveTrouble" title="Modrinth" target="_blank" class="vert-card">
-            <div class="svg-logos">
-                <svg xmlns="http://www.w3.org/2000/svg" preserveAspectRatio="xMidYMin" viewBox="0 0 142 142" aria-hidden="true" class="text-logo"><g><path d="M159.07,89.29A70.94,70.94,0,1,0,20,63.52H32A58.78,58.78,0,0,1,145.23,49.93l-11.66,3.12a46.54,46.54,0,0,0-29-26.52l-2.15,12.13a34.31,34.31,0,0,1,2.77,63.26l3.19,11.9a46.52,46.52,0,0,0,28.33-49l11.62-3.1A57.94,57.94,0,0,1,147.27,85Z" transform="translate(-19.79)" fill="white" fill-rule="evenodd"></path><path d="M108.92,139.3A70.93,70.93,0,0,1,19.79,76h12a59.48,59.48,0,0,0,1.78,9.91,58.73,58.73,0,0,0,3.63,9.91l10.68-6.41a46.58,46.58,0,0,1,44.72-65L90.43,36.54A34.38,34.38,0,0,0,57.36,79.75C57.67,80.88,58,82,58.43,83l13.66-8.19L68,63.93l12.9-13.25,16.31-3.51L101.9,53l-7.52,7.61-6.55,2.06-4.69,4.82,2.3,6.38s4.64,4.94,4.65,4.94l6.57-1.74,4.67-5.13,10.2-3.24,3,6.84L104.05,88.43,86.41,94l-7.92-8.81L64.7,93.48a34.44,34.44,0,0,0,28.72,11.59L96.61,117A46.6,46.6,0,0,1,54.13,99.83l-10.64,6.38a58.81,58.81,0,0,0,99.6-9.77l11.8,4.29A70.77,70.77,0,0,1,108.92,139.3Z" transform="translate(-19.79)" fill="white"></path></g></svg>
-            </div>
-            <span>Modrinth</span>
-        </a>
-        <a href="https://wakatime.com/@YouHaveTrouble" title="WakaTime" target="_blank" class="vert-card">
-            <div class="svg-logos">
-                <svg style="fill: #fff" xmlns="http://www.w3.org/2000/svg" aria-hidden="true" width="1em" height="1em" preserveAspectRatio="xMidYMid meet" viewBox="0 0 256 256"><path d="M128 0C57.308 0 0 57.308 0 128c0 70.693 57.308 128 128 128c70.693 0 128-57.307 128-128C256 57.308 198.693 0 128 0m0 33.805c51.939 0 94.195 42.256 94.195 94.195c0 51.94-42.256 94.195-94.195 94.195c-51.939 0-94.195-42.255-94.195-94.195c0-51.939 42.256-94.195 94.195-94.195m-12.5 121.838h-.113a6.342 6.342 0 0 1-4.953-2.528L81.56 114.732a6.34 6.34 0 0 1 10.131-7.62l23.993 31.893l6.863-8.478a6.34 6.34 0 0 1 4.926-2.35h.008a6.331 6.331 0 0 1 4.93 2.364l6.59 8.187l37.692-48.594a6.338 6.338 0 0 1 10.015 7.77L144.1 152.837a6.338 6.338 0 0 1-4.95 2.453h-.057a6.335 6.335 0 0 1-4.938-2.364l-6.697-8.319l-7.033 8.686a6.336 6.336 0 0 1-4.926 2.35"></path></svg>
-            </div>
-            <span>WakaTime</span>
-        </a>
-        <a href="https://www.youtube.com/@YouHaveTrouble" title="YouTube" target="_blank" class="vert-card">
-            <i class="fa-brands fa-youtube"></i>
-            <span>YouTube</span>
-        </a>
-        <a href="https://steamcommunity.com/id/YouHavetrouble" title="Steam" target="_blank" class="vert-card">
-            <i class="fa-brands fa-steam"></i>
-            <span>Steam</span>
-        </a>
-    </div>
-</section>
-<section>
-    <h2>Technologies</h2>
-    <div class="row">
-        <div class="vert-card" title="Java">
-            <i class="fa-brands fa-java"></i>
-            <span>Java</span>
-        </div>
-        <div class="vert-card" title="PHP">
-            <i class="fa-brands fa-php"></i>
-            <span>PHP</span>
-        </div>
-        <div class="vert-card" title="JavaScript">
-            <i class="fa-brands fa-js"></i>
-            <span>JavaScript</span>
-        </div>
-        <div class="vert-card" title="MySQL">
-            <i class="fa-solid fa-database"></i>
-            <span>MySQL</span>
-        </div>
-        <div class="vert-card" title="Git">
-            <i class="fa-brands fa-git-alt"></i>
-            <span>Git</span>
-        </div>
-        <div class="vert-card" title="CSS3">
-            <i class="fa-brands fa-css3-alt"></i>
-            <span>CSS3</span>
-        </div>
-        <div class="vert-card">
-            <i class="fa-brands fa-html5"></i>
-            <span>HTML 5</span>
-        </div>
-        <div class="vert-card" title="Vue">
-            <i class="fa-brands fa-vuejs"></i>
-            <span>Vue</span>
-        </div>
-        <div class="vert-card" title="NodeJS">
-            <i class="fa-brands fa-node"></i>
-            <span>NodeJS</span>
-        </div>
-        <div class="vert-card" title="C#">
-            <div class="svg-logos black-n-white">
-                <svg xmlns="http://www.w3.org/2000/svg" width="256px" height="256px" viewBox="0 0 256 256" version="1.1" preserveAspectRatio="xMidYMid">
-                    <g>
-                        <circle fill="#05930C" cx="128" cy="128" r="128"/>
-                        <path d="M38.9025888,36.0996419 L219.736207,217.266384 C196.482539,241.159369 163.974377,256 128,256 C57.307552,256 0,198.692448 0,128 C0,91.9408943 14.9106206,59.3643506 38.9025888,36.0996419 Z" fill-opacity="0.1" fill="#FFFFFF"/>
-                        <path d="M121.72,174.2 C113.012357,178.436699 103.397317,180.469593 93.72,180.12 C80.781669,180.687012 68.2281624,175.642281 59.28,166.28 C50.3887459,156.313218 45.7513402,143.262439 46.36,129.92 C45.7341533,115.461218 50.986133,101.364559 60.92,90.84 C70.6307317,80.905133 84.0759119,75.5183492 97.96,76 C106.070463,75.6904785 114.157941,77.0520068 121.72,80 L121.72,92.6 C114.385477,88.52346 106.110425,86.4409051 97.72,86.56 C87.1508846,86.2096556 76.9448113,90.437886 69.72,98.16 C62.2299693,106.698203 58.356638,117.816099 58.92,129.16 C58.3659356,139.880667 61.9776495,150.4005 69,158.52 C75.8132352,165.845413 85.4836446,169.833362 95.48,169.44 C104.697583,169.669064 113.797049,167.32841 121.76,162.68 L121.72,174.2 Z M211.04,105.84 L209.44,113.28 L191.04,113.28 L186.64,134.4 L206.4,134.4 L204.52,141.84 L185.16,141.84 L178.96,169.84 L170.12,169.84 L176.16,141.84 L158.56,141.84 L152.64,169.84 L144,169.84 L149.92,141.84 L131.36,141.84 L132.76,134.4 L151.4,134.4 L155.68,113.32 L136.2,113.32 L137.68,105.88 L157.16,105.88 L163.08,77.6 L172,77.6 L166.08,105.88 L183.8,105.88 L189.84,77.6 L198.48,77.6 L192.56,105.88 L211.04,105.84 Z M182.36,113.28 L164.6,113.28 L160,134.4 L177.84,134.4 L182.36,113.28 Z" fill="#FFFFFF"/>
-                    </g>
-                    </svg>
-            </div>
-            <span>C#</span>
-        </div>
-        <div class="vert-card" title="Linux">
-            <i class="fa-brands fa-linux"></i>
-            <span>Linux</span>
-        </div>

+<header>
+    <div class="avatar"><img draggable="false" src="img/avatar.png" alt=""></div>
+    <div class="bio">
+        <p>
+            Hi! I'm Trouble, and I'm currently working as a fullstack developer. In my free time I enjoy working on my
+            side projects that mostly include programming. I'm extremely passionate about games and what goes into
+            creating them. I'm also "that one person" of every friend group that sets game servers up! Additionally,
+            I own and am slowly learning bass.
+        </p>
    </div>
-</section>
+</header>
+<main>
+    <h1 id="projects">Projects</h1>
+    <div class="projects">
+        <a href="https://yht.one/">
+            <article class="vertical-screen">
+                <div class="bg"></div>
+                <h2>Side Project Den</h2>
+                <p>A list of my side projects</p>
+            </article>
+        </a>
+        <a href="https://purpurmc.org/">
+        <article class="vertical-screen">
+            <h2>Purpur</h2>
+            <p>Minecraft server software</p>
+        </article>
+        </a>
+        <article class="vertical-screen">
+            <h2>Test</h2>
+        </article>
+    </div>
+</main>
+
 <footer>
    <small>&copy; Paweł "YouHaveTrouble" Michalewski</small>
 </footer>
@@ -2,8 +2,8 @@ const status = document.querySelector("#status");
 const action = document.querySelector("#status-action");
 const avatar = document.querySelector(".avatar img");

-updateStatus();
-window.setInterval(updateStatus, 10000);
+// updateStatus();
+// window.setInterval(updateStatus, 10000);

 async function updateStatus() {
    const result = await fetch("https://api.youhavetrouble.me/online");
@@ -0,0 +1,153 @@
+@import url('https://fonts.googleapis.com/css2?family=Open+Sans&display=swap');
+:root {
+    margin: 0;
+    padding: 0;
+    --max-width: 40rem;
+}
+html {
+    font-family: 'Open Sans', sans-serif;
+    color: white;
+    background-size: cover;
+    font-size: 1.2em;
+}
+body {
+    margin: 0;
+    background-color: rgba(16, 16, 16, 0.7);
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    gap: 1rem;
+    width: 100%;
+    min-height: 100vh;
+    padding: 0;
+    background-image: url("img/bg.jpg");
+    background-position: center;
+    background-attachment: fixed;
+    background-size: cover;
+    background-blend-mode: overlay;
+}
+
+small {
+    font-size: 0.6rem;
+}
+
+p, h1, h2, h3, h4, h5, h6 {
+    text-align: center;
+    margin: 0;
+}
+
+a {
+    text-decoration: none;
+}
+
+h2 {
+    font-size: 1.1rem;
+}
+
+header {
+    padding-block: 2rem;
+    padding-inline: 1rem;
+    display: flex;
+    flex-direction: column;
+    justify-content: center;
+    align-items: center;
+    gap: 1rem;
+}
+
+main {
+    width: 100%;
+    max-width: var(--max-width);
+    padding-inline: 1rem;
+    display: flex;
+    flex-direction: column;
+    gap: 1rem;
+}
+
+.avatar {
+    width: min(16rem, 100%);
+    height: min(16rem, 100%);
+    aspect-ratio: 1/1;
+    border-radius: 50%;
+    border: 3px solid #44251a;
+    background-color: gray;
+    overflow: clip;
+}
+
+.avatar img {
+    width: 100%;
+    height: 100%;
+}
+
+.bio {
+    padding: 1rem;
+    max-width: var(--max-width);
+    width: 100%;
+    border: 2px solid #000;
+    border-radius: 0.2rem;
+    background-color: rgba(0,0,0, 0.5);
+    backdrop-filter: blur(4px);
+    box-sizing: border-box;
+}
+
+.projects {
+    text-align: center;
+    width: 100%;
+    display: grid;
+    grid-gap: 1rem;
+    grid-template-columns: repeat(auto-fit, minmax(10rem, 1fr));
+
+}
+
+.vertical-screen {
+    padding: 1rem;
+    border: 2px solid #000;
+    border-radius: 0.2rem;
+    position: relative;
+    background-color: rgba(0,0,0, 0.5);
+    backdrop-filter: blur(4px);
+    box-sizing: border-box;
+    min-height: 20rem;
+    display: flex;
+    flex-direction: column;
+    justify-content: flex-end;
+    align-items: center;
+    text-decoration: none;
+    color: #fff;
+}
+
+.vertical-screen p {
+    font-size: 0.8rem;
+    color: rgba(255,255,255, 0.75);
+}
+
+.vertical-screen .bg {
+    position: absolute;
+    top: 0;
+    left: 0;
+    width: 100%;
+    height: 100%;
+    z-index: -1;
+    overflow: hidden;
+    opacity: 0.075;
+    background-image: url("img/board.jpg");
+    background-position: center;
+    animation: pan-image-1 30s infinite;
+}
+
+@keyframes pan-image-1 {
+    0% {
+        background-position: 36% 42%;
+    }
+    25% {
+        background-position: 60% 84%;
+    }
+    50% {
+        background-position: 45% 60%;
+    }
+    75% {
+        background-position: 12% 20%;
+    }
+    100% {
+        background-position: 36% 42%;
+    }
+}
@@ -1,78 +0,0 @@
-<!DOCTYPE html>
-<html lang="en">
-<head>
-  <title>YouHaveTrouble</title>
-  <meta name="title" content="YouHaveTrouble"/>
-  <meta name="description" content="Just a page about random person on the internet"/>
-  <meta property="twitter:title" content="YouHaveTrouble"/>
-  <meta property="twitter:image" content="https://youhavetrouble.me/img/avatar.png"/>
-  <meta property="twitter:description" content="Just a page about random person on the internet"/>
-  <meta property="og:title" content="YouHaveTrouble"/>
-  <meta property="og:url" content="https://youhavetrouble.me"/>
-  <meta property="og:description" content="Just a page about random person on the internet"/>
-  <meta property="og:image" content="https://youhavetrouble.me/img/avatar.png"/>
-  <link rel="stylesheet" href="/style/main.css">
-  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.1.2/css/all.min.css"
-        integrity="sha512-1sCRPdkRXhBV2PBLUdRb4tMg1w2YPf37qatUFeS7zlBy7jJI8Lf4VHwWfZZfpXtYSLy85pkm9GaYVYMfw5BC1A=="
-        crossorigin="anonymous" referrerpolicy="no-referrer"/>
-  <meta charset="UTF-8">
-  <meta name="viewport" content="width=device-width, initial-scale=1.0">
-  <script src="projects.js" defer></script>
-</head>
-<body>
-<nav>
-  <div class="pages">
-    <a href="/" class="button ">Home</a>
-    <a class="button active">Projects</a>
-  </div>
-</nav>
-<section>
-  <h2>Tutorials</h2>
-  <div class="row">
-    <a href="https://github.com/YouHaveTrouble/minecraft-optimization" class="hori-card" target="_blank">
-      <div class="icon">
-        <i class="fa-solid fa-server"></i>
-      </div>
-      <div class="desc">
-        <b>Server Optimization Guide</b>
-        <small>Minecraft server optimization guide aimed for bukkit-based servers</small>
-      </div>
-    </a>
-  </div>
-</section>
-<section>
-  <h2>Minecraft projects</h2>
-  <div class="row" data-plugins>
-    <noscript>Sorry, but this data is loaded by javascript, which seems to not be enabled!</noscript>
-  </div>
-</section>
-<section>
-  <h2>Terraria projects</h2>
-  <div class="row">
-    <a href="https://steamcommunity.com/sharedfiles/filedetails/?id=2897350075" class="hori-card" target="_blank">
-      <div class="icon">
-        <img draggable="false" src="https://steamuserimages-a.akamaihd.net/ugc/2006946285968997403/1444B38AE5A967655FD8C780CCD3A46DB08BCC86/?" alt=""/>
-      </div>
-      <div class="desc">
-        <b>YHT Mod</b>
-        <small>TModLoader mod with a bit of content and quality of life changes</small>
-      </div>
-    </a>
-  </div>
-</section>
-<footer>
-  <small>&copy; Paweł "YouHaveTrouble" Michalewski</small>
-</footer>
-</body>
-<template id="iconTemplate">
-  <a data-link class="hori-card" target="_blank">
-    <div class="icon">
-      <img draggable="false" data-iconimage loading="lazy" alt="">
-    </div>
-    <div class="desc">
-      <b data-name></b>
-      <small data-desc></small>
-    </div>
-  </a>
-</template>
-</html>
@@ -1,26 +0,0 @@
-const template = document.querySelector("#iconTemplate");
-
-getPlugins();
-
-async function getPlugins() {
-    const pluginSection = document.querySelector("[data-plugins]");
-    pluginSection.innerHTML = "<p>Loading data...</p>";
-    const result = await fetch("https://api.modrinth.com/v2/user/youhavetrouble/projects");
-    if (result.status !== 200) return;
-    const json = await result.json();
-    pluginSection.innerHTML = "";
-
-    for (const plugin in json) {
-        const pluginData = json[plugin];
-        const clonedTemplate = template.content.cloneNode(true);
-        const projectType = pluginData.project_type;
-        const slug = pluginData.slug;
-        clonedTemplate.querySelector("[data-link]").href = `https://modrinth.com/${projectType}/${slug}`;
-        clonedTemplate.querySelector("[data-name]").innerText = pluginData.title;
-        clonedTemplate.querySelector("[data-desc]").innerText = pluginData.description;
-        const icon = clonedTemplate.querySelector("[data-iconimage]");
-        icon.src = pluginData.icon_url;
-        icon.alt = pluginData.title;
-        pluginSection.append(clonedTemplate);
-    }
-}
@@ -1,255 +0,0 @@
-@import url('https://fonts.googleapis.com/css2?family=Open+Sans&display=swap');
-:root {
-    margin: 0;
-    padding: 0;
-    user-select: none;
-}
-html {
-    font-family: 'Open Sans', sans-serif;
-    color: white;
-    background-size: cover;
-    font-size: 1.2em;
-}
-body {
-    margin: 0;
-    background-color: rgb(16, 16, 16);
-    display: flex;
-    flex-direction: column;
-    align-items: center;
-    width: 100%;
-    min-height: 100vh;
-    padding: 0;
-}
-
-nav {
-    top: 0;
-    position: sticky;
-    display: flex;
-    flex-direction: row;
-    justify-content: space-between;
-    max-width: 38rem;
-    width: calc(100% - 2rem);
-    align-items: center;
-    padding-inline: 1rem;
-    height: 3rem;
-    margin: 0 auto;
-    z-index: 10;
-    background-color: rgb(16, 16, 16);
-}
-
-section {
-    width: 95%;
-    max-width: 42rem;
-    position: relative;
-    display: flex;
-    flex-direction: column;
-    justify-content: center;
-    align-items: center;
-    padding-block: 1rem;
-}
-
-.card {
-    width: 40rem;
-    background-color: #484848;
-    max-width: calc(85%);
-    border-radius: 1rem;
-    padding: 1rem;
-}
-
-.card .title {
-    width: 100%;
-    display: flex;
-    align-items: center;
-}
-
-.card .title .avatar {
-    width: 10rem;
-    min-width: 3rem;
-    aspect-ratio: 1/1;
-    padding: 1rem;
-}
-
-.card .title .avatar img {
-    position: relative;
-    width: 100%;
-    height: 100%;
-    border: 2px solid #3f230f;
-    background-color: #6e6e6e;
-    border-radius: 50%;
-}
-
-.card h2 {
-    margin-top: 0;
-}
-
-.title div {
-    font-size: 1.2rem;
-    min-height: 1.5rem;
-}
-
-.title div .name {
-    font-size: 1.4rem;
-    font-weight: 800;
-}
-
-.pages {
-    display: flex;
-    flex-direction: row;
-    align-items: center;
-    justify-content: end;
-    height: 100%;
-    width: 100%;
-}
-
-.pages a {
-    height: 100%;
-    display: flex;
-    position: relative;
-    align-items: center;
-    justify-content: center;
-    padding-inline: 0.5rem;
-    text-decoration: none;
-    color: #fff;
-    transition: background-color 150ms linear;
-}
-
-.pages a:hover {
-    background-color: rgba(255,255,255, 0.1);
-}
-
-.pages a::after {
-    display: block;
-    position: absolute;
-    content: '';
-    width: 100%;
-    height: 1px;
-    background-color: transparent;
-    bottom: 0;
-    transition: background-color 150ms linear;
-}
-
-.button.active {
-    cursor: default;
-}
-
-.pages a:hover::after, .button.active::after {
-    background-color: #fff;
-}
-
-.row {
-    display: flex;
-    justify-content: center;
-    flex-direction: row;
-    flex-wrap: wrap;
-    gap: 1rem;
-    width: 90%;
-}
-
-.vert-card {
-    display: flex;
-    justify-content: center;
-    align-items: center;
-    flex-direction: column;
-    background-color: #484848;
-    padding: 1rem;
-    min-width: 3rem;
-    text-align: center;
-    border-radius: 1rem;
-    text-decoration: none;
-    color: white;
-    transition: background-color 200ms linear;
-    gap: 0.15rem;
-}
-
-a.vert-card:hover {
-    background-color: #595959;
-}
-
-.hori-card {
-    display: flex;
-    justify-content: left;
-    align-items: center;
-    flex-direction: row;
-    background-color: #484848;
-    padding: 1rem;
-    text-align: center;
-    border-radius: 1rem;
-    text-decoration: none;
-    color: white;
-    transition: background-color 200ms linear;
-    gap: 0.5rem;
-    width: 100%;
-}
-
-a.hori-card:hover {
-    background-color: #595959;
-}
-
-.hori-card [data-name] {
-    overflow-wrap: anywhere;
-}
-
-.hori-card .desc {
-    display: flex;
-    flex-direction: column;
-    justify-content: center;
-    align-items: flex-start;
-    text-align: left;
-}
-
-.hori-card .icon {
-    width: 4rem;
-    min-width: 4rem;
-    min-height: 4rem;
-    height: 4rem;
-}
-
-footer {
-    text-align: center;
-    font-size: 0.8rem;
-    color: #595959;
-    padding-block: 1rem;
-}
-
-.fa-brands, .fa-database, .fa-solid {
-    font-size: 2rem;
-}
-
-.svg-logos {
-    width: 2rem;
-    height: 2rem;
-    display: flex;
-    justify-content: center;
-    align-items: center;
-    position: relative;
-}
-
-.svg-logos svg {
-    position: absolute;
-    width: 2rem;
-    height: 2rem;
-}
-
-.icon {
-    width: 4rem;
-    height: 4rem;
-    display: flex;
-    justify-content: center;
-    align-items: center;
-}
-
-.icon img {
-    width: 100%;
-    height: 100%;
-    border-radius: 0.5rem;
-}
-
-.black-n-white {
-    filter: grayscale(1);
-}
-
-@media screen and (max-width: 420px) {
-    div.title {
-        flex-direction: column;
-    }
-}