:root {
  --science-blue: #016AC5;
  --deep-blue: #01288A;
}

*, *::before, *::after {
  box-sizing: border-box;
}

*:not(dialog) {
  margin: 0;
}

html {
    -webkit-text-size-adjust: 100%; /*prevent font size increase in landscape mode in safari*/
}

body {
    font-family: 'MyRoboto', sans-serif;
  /* line-height: 1.5; */
}

img, picture, video, canvas, svg {
  display: block;
  max-width: 100%;
}

input, button, textarea, select {
  font: inherit;
}

p, h1, h2, h3, h4, h5, h6 {
  overflow-wrap: break-word;
}

a {
    text-decoration: none;
}

a:link,
a:visited,
a:hover,
a:active {
    color: var(--science-blue);
    text-decoration: none;
}

a:hover {
    color: var(--deep-blue);
}

@font-face {
    font-family: 'MyRoboto';
    src: url('../fonts/Roboto-VariableFont.ttf') format('truetype');
    font-weight: 100 900;  
    font-stretch: 75% 100%;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'MyRoboto';
    src: url('../fonts/Roboto-Italic-VariableFont.ttf') format('truetype');
    font-weight: 100 900;  
    font-stretch: 75% 100%;
    font-style: italic;
    font-display: swap;
}

#site-header-marketing {
    display: flex;
    gap: 5px;
    align-items: center;
    padding: 10px;
}

#site-header-text {
    font-size: 24pt;
}

#site-header-icon {
    height: 40px;
    width: 40px;
    border-radius: 5px;
}

#site-nav {
    display: flex;
    padding: 10px;
}

#site-nav > a {
    padding: 5px 7px;
    border-radius: 3px;
}

.active-link {
    color:white;
    background-color:var(--science-blue);
}

a.active-link:link,
a.active-link:visited,
a.active-link:hover,
a.active-link:active {
    color:white;
    text-decoration: none;
} 

a.active-link:hover {
    text-decoration: none;
}

#download-links > p {
    margin-bottom: 1rem;
}

#ios-download-app-link {
    font-size: 18pt;
    text-decoration: underline;
    font-weight: bold;
}

#android-download-app-link {
    font-size: 18pt;
    text-decoration: underline;
    font-weight: bold;
}

main {
    padding: 10px;
    font-size: 12pt;
}