raghukamath-links/assets/css/style.css

:root {
    --font-size-h1: 2em;
    --font-size-h2: 1.25em;
    --font-size-h3: 1em;
    --font-size-small: .85em;

    /* spacers */
    --primary-spacer: 2rem;
    --secondary-spacer: 1.5rem;
    --tertiary-spacer: 1rem;

    /* colors */
    --white: #fff;
    --black: #1a1a1a;
    --dark-gray: #464f53;
    --gray: #798286;
    --high-gray: #c7ced1;
    --mid-gray: #e0e8eb;
    --low-gray: #f7f7f7;
    --link-color: #3c64dd;

    /*border*/
    --border-mid-gray: 1px solid var(--mid-gray);
    --border-high-gray: 1px solid var(--high-gray);

    /* fonts*/
    --system-fonts: -apple-system, BlinkMacSystemFont,"Segoe UI", "Roboto", Oxygen-Sans, Ubuntu, Cantarell,"Helvetica Neue", "Open Sans", "Noto Sans", "Droid Sans", sans-serif;
}

/* reset */
/*
  Josh's Custom CSS Reset
  https://www.joshwcomeau.com/css/custom-css-reset/
*/
*, *::before, *::after {
  box-sizing: border-box;
}
* {
  margin: 0;
}
html, body {
  height: 100%;
}
body {
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
}
img, picture, video, canvas, svg {
  max-width: 100%;
}
input, button, textarea, select {
  font: inherit;
}
p, h1, h2, h3, h4, h5, h6 {
  overflow-wrap: break-word;
}

:focus-visible {
 outline: 3px solid var(--link-color);
}

h2 a,
h1 a,
h3 a,
h4 a,
h5 a,
h6 a,
.menu-item a,
.logo,
.footer-links a,
.comment-meta a {
    text-decoration: none;
}

/* fonts */

@font-face {
  font-family: 'Inter';
  font-style:  normal;
  font-weight: 400;
  font-display: swap;
  src: url("/assets/fonts/Inter-Regular.woff2?v=3.13") format("woff2"),
       url("/assets/fonts/Inter-Regular.woff?v=3.13") format("woff");
}

@font-face {
  font-family: 'Inter';
  font-style:  normal;
  font-weight: 400;
  font-display: swap;
  src: url("/assets/fonts/Inter-Regular.woff2?v=3.19") format("woff2"),
       url("/assets/fonts/Inter-Regular.woff?v=3.19") format("woff");
}
@font-face {
  font-family: 'Inter';
  font-style:  italic;
  font-weight: 400;
  font-display: swap;
  src: url("/assets/fonts/Inter-Italic.woff2?v=3.19") format("woff2"),
       url("/assets/fonts/Inter-Italic.woff?v=3.19") format("woff");
}

@font-face {
  font-family: 'Inter';
  font-style:  normal;
  font-weight: 700;
  font-display: swap;
  src: url("/assets/fonts/Inter-Bold.woff2?v=3.19") format("woff2"),
       url("/assets/fonts/Inter-Bold.woff?v=3.19") format("woff");
}
@font-face {
  font-family: 'Inter';
  font-style:  italic;
  font-weight: 700;
  font-display: swap;
  src: url("/assets/fonts/Inter-BoldItalic.woff2?v=3.19") format("woff2"),
       url("/assets/fonts/Inter-BoldItalic.woff?v=3.19") format("woff");
}

@font-face {
  font-family: 'Inter';
  font-style:  normal;
  font-weight: 900;
  font-display: swap;
  src: url("/assets/fonts/Inter-Black.woff2?v=3.19") format("woff2"),
       url("/assets/fonts/Inter-Black.woff?v=3.19") format("woff");
}
@font-face {
  font-family: 'Inter';
  font-style:  italic;
  font-weight: 900;
  font-display: swap;
  src: url("/assets/fonts/Inter-BlackItalic.woff2?v=3.19") format("woff2"),
       url("/assets/fonts/Inter-BlackItalic.woff?v=3.19") format("woff");
}

html {
  scroll-behavior: smooth;
  font-size: 110%;
}


@media only screen and (min-width:1024px) {
html {
  font-size:125%;
 }
}

body {
    font-family: "Inter", var(--system-fonts);
    font-size: 1em;
    font-kerning: normal;
    letter-spacing:normal;
    font-style: normal;
    color: var(--dark-gray);
    fill: var(--dark-gray);
    background-color: var(--low-gray);
}

.main {
  max-width: 34rem;
  margin: 0 auto;
  text-align: center;
}

.intro {
  display: flex;
  flex-direction: column;
  align-items: center;
  margin: var(--primary-spacer) var(--secondary-spacer);
}

.intro h1,
.intro p {
    font-size: 1rem;
}

.dp {
    width: 150px;
    height: 150px;
    border-radius: 50%;
    border: calc(var(--tertiary-spacer)/3) solid white;
    margin-bottom: var(--secondary-spacer);
    box-shadow: 0 1px 2px var(--high-gray);
}

.list {
    list-style: none;
    padding: 0;
}

.links {
  margin: var(--primary-spacer) var(--secondary-spacer);
}


.link-item {
  margin: var(--secondary-spacer) 0;
}

.link {
    display: flex;
    align-items:center;
    justify-content: center;
    padding: .35rem;
    text-decoration: none;
    border-radius: calc(var(--tertiary-spacer) / 3);
    background-color: var(--white);
    border: var(--border-high-gray);
    box-shadow: 0 1px 2px var(--high-gray);
    transition: background-color 0.2s ease-out, color 0.2s ease-out, fill 0.2s ease-out;
    color: var(--dark-gray);
}

.link svg {
    margin-right: calc(var(--tertiary-spacer)/2);
}

.link:hover {
    background-color: var(--mid-gray);
    border-color: var(--gray);
    color: var(--black);
    color: var(--link-color);
    fill: var(--link-color);
}