/* @font-face {
  font-family: 'SourceSansPro-Regular';
  src: url(../public/fonts/SourceSansPro-Regular.ttf);
  font-display: swap;
}

@font-face {
  font-family: 'SourceSansPro-Light';
  src: url(../public/fonts/SourceSansPro-Light.ttf);
  font-display: swap;
} */

* {
  box-sizing: border-box;
  word-wrap: break-word;
  align-content: center;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

a {
  color: inherit;
  text-decoration: none;
}

html, body {
  height: 100vh;
  width: 100%;
  padding: 0;
  margin: 0;
  font-family: SourceSansPro-Regular, SourceSansPro-ExtraLight, Verdana, BlinkMacSystemFont, sans-serif;
}

/* Global UI font stack (system-first, no downloads) */
:root {
  --ui-sans: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans", "Liberation Sans", sans-serif;
  --ui-serif: Georgia, Cambria, "Times New Roman", Times, serif;
  --ui-mono: ui-monospace, SFMono-Regular, Menlo, Monaco, "Roboto Mono", "Segoe UI Mono", "Courier New", monospace;
}

html, body {
  font-family: var(--ui-sans);
  font-size: 16px;
  line-height: 1.45;
  color: #222;
  background: #fff;
}

/* Headings — use the same stack or prefer a serif if you want contrast */
h1, h2, h3, h4, h5, h6 {
  font-family: var(--ui-sans);
  font-weight: 600;
}

/* Serif example */
.article-body {
  font-family: var(--ui-serif);
}

/* Monospace example */
.code, code, pre {
  font-family: var(--ui-mono);
  font-size: 0.95em;
}

@media only screen and (max-width: 768px) {
  .card {
    margin: 0.75rem;
    border-radius: 2.5px;
    transition: color 0.15s ease, border-color 0.25s ease;
  }
  .card:hover, .card:focus, .card:active {
    transform: scale(1.00);
  }
  .card h3 {
    margin: 0 0 2rem 0;
    font-size: 1.1rem;
  }
  .card p {
    margin: 0;
    font-size: 1.1rem;
    line-height: 1.25;
  }
}

.container {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  margin-bottom: 1em;
}

.column-one {
  flex: 33%;
  max-width: calc(100vw - 5vmax);
  padding: 20px;
}

/* Main column */

.column-two {
  flex: 33%;
  max-width: calc(100vw - 5vmax);
  padding: 20px;
}

.column-three {
  flex: 33%;
  max-width: calc(100vw - 5vmax);
  padding: 20px;
}

.column-one:hover, .column-two:hover, .column-three:hover {
  background-color: #b4cef041;
  border-radius: 4.14px;
}

@media (max-width: 1158px) {
  .column-one {
    flex: 30%;
    min-width: 70vw;
    max-width: calc(100vw - 5vmax);
    padding: 20px;
  }
  /* Main column */
  .column-two {
    flex: 30%;
    min-width: 70vw;
    max-width: calc(100vw - 5vmax);
    padding: 20px;
  }
  .column-three {
    flex: 30%;
    min-width: 70vw;
    max-width: calc(100vw - 5vmax);
    padding: 20px;
    margin-bottom: 55px;
  }
}

.column-one:hover, .column-two:hover, .column-three:hover {
  background-color: #b4cef041;
  border-radius: 4.14px;
}

/* transform: scale(1.03); */

.email, .number {
  color: rgb(0, 0, 0);
  z-index: 1;
  text-align: center;
  padding: 5px 4px 5px 4px;
}

.email:hover, .number:hover {
  color: rgb(28, 59, 143);
  background-color: #c4c4c488;
  border-radius: 4.14px;
}

@media only screen and (max-width: 768px) {
  footer {
    z-index: 1;
    padding: 0;
    margin: 0;
    flex-wrap: wrap;
    font-size: calc(0.4rem + 1.5vw);
  }
}

footer {
  width: 100vw;
  height: 55px;
  background: rgba(255, 255, 255, 0.913);
  border-radius: 0px 0px 0px 0px;
  display: flex;
  justify-content: center;
  align-items: center;
  left: 0;
  bottom: 0;
  box-shadow: #273246;
  position: fixed;
  box-shadow: 0px .4px 2px rgba(211, 211, 211, 0.432), 0px -2px 2px rgb(211, 211, 211);
}

footer img {
  margin-left: 0.5rem;
}

footer a {
  display: flex;
  justify-content: center;
  align-items: center;
}

.flex-container {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-wrap: wrap;
  max-width: 100vw;
  margin-bottom: 1rem;
}

@media (max-width: 1158px) {
  .flex-container {
    width: 90vw;
    flex-direction: column;
    margin-bottom: 50px;
  }
}

h1::selection {
  background-color:rgb(152, 231, 255);
}

a::selection, ::selection{
  background-color: transparent;
}
p::selection {
    background-color:rgb(152, 231, 255);
}

.info {
  padding: .25em;
  position: relative;
  width: calc(100% - 40vmax - 3vw);
  font-size: 1.40rem;
  margin-bottom: 0;
  text-align: center;
}


.info2{
  position: relative;
  width: calc(100% - 10vmax);
  font-size: 1.30rem;
  margin-bottom: 0;
  text-align: center;
}
@media (max-width: 768px) {
  .info {
    width: calc(100vw - 5vmax);
    text-align: center;
    font-size: 1.15rem;
  }
}

.logo {
  padding: 10px;
  margin: 5px;
}

.logo:hover {
  background-color: #ffffff;
  transform: scale(1.10);
  margin: 5px;
  border-radius: 100%;
}

main {
  flex: 1;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
}

@media (max-width: 768px) {
  .main {
    min-height: calc(100vw + 70px);
  }
}

main p {
  font-family: SourceSansPro-Light, Verdana, BlinkMacSystemFont, sans-serif;
  font-size: 1.15rem;
}

.pic {
  margin: 0px;
  border-radius: 50%;
}

.row {
  display: flex;
  flex-wrap: wrap;
  max-width: calc(100vw - 25vmax);
  margin-bottom: 55px;
}

@media only screen and (max-width: 768px) {
  .row {
    display: flex;
    flex-wrap: wrap;
    max-width: calc(100vw - 5vmax);
  }
}

.title a {
  color: #c4c4c4;
  text-decoration: none;
}

.title a:hover, .title a:focus, .title a:active {
  text-decoration: underline;
}

.title {
  margin-bottom: 25px;
  line-height: 1.05;
  font-size: 2rem;
}

.title, .description {
  text-align: center;
}