.box-with-shadow { border-style: solid; border-width: 0.1px; border-radius: 10px; } img.profile{ border-radius: 50%; width: 35vw; max-width: 150px; border: solid 1px; } div.default{ width: 90%; max-width: 1024px; border: solid 1px; padding: 10px 10px; margin: auto; margin-top: 50px; margin-bottom: 50px; text-align: center; @media screen and (min-width: 768px) { width: 80%; } } .image-container{ width: 80%; margin: auto; text-align: center; align-items: center; img{ max-width: 100%; max-height: 300px; object-fit: scale-down; } } a { text-decoration:none; color: black; } /* Generated Styles - Do Not Edit */ .display1 { font-family: var(--md-sys-typescale-display1-font); font-weight: var(--md-sys-typescale-display1-weight); font-size: var(--md-sys-typescale-display1-size); line-height: var(--md-sys-typescale-display1-line-height); letter-spacing: var(--md-sys-typescale-display1-tracking); } .display2, .display-large { font-family: var(--md-sys-typescale-display2-font); font-weight: var(--md-sys-typescale-display2-weight); font-size: var(--md-sys-typescale-display2-size); line-height: var(--md-sys-typescale-display2-line-height); letter-spacing: var(--md-sys-typescale-display2-tracking); } .display3, .display-medium { font-family: var(--md-sys-typescale-display3-font); font-weight: var(--md-sys-typescale-display3-weight); font-size: var(--md-sys-typescale-display3-size); line-height: var(--md-sys-typescale-display3-line-height); letter-spacing: var(--md-sys-typescale-display3-tracking); } .headline1, .display-small { font-family: var(--md-sys-typescale-headline1-font); font-weight: var(--md-sys-typescale-headline1-weight); font-size: var(--md-sys-typescale-headline1-size); line-height: var(--md-sys-typescale-headline1-line-height); letter-spacing: var(--md-sys-typescale-headline1-tracking); } .headline2, .headline-large { font-family: var(--md-sys-typescale-headline2-font); font-weight: var(--md-sys-typescale-headline2-weight); font-size: var(--md-sys-typescale-headline2-size); line-height: var(--md-sys-typescale-headline2-line-height); letter-spacing: var(--md-sys-typescale-headline2-tracking); } .headline3, .headline-medium { font-family: var(--md-sys-typescale-headline3-font); font-weight: var(--md-sys-typescale-headline3-weight); font-size: var(--md-sys-typescale-headline3-size); line-height: var(--md-sys-typescale-headline3-line-height); letter-spacing: var(--md-sys-typescale-headline3-tracking); } .headline4, .headline-small { font-family: var(--md-sys-typescale-headline4-font); font-weight: var(--md-sys-typescale-headline4-weight); font-size: var(--md-sys-typescale-headline4-size); line-height: var(--md-sys-typescale-headline4-line-height); letter-spacing: var(--md-sys-typescale-headline4-tracking); } .headline5, .title-large { font-family: var(--md-sys-typescale-headline5-font); font-weight: var(--md-sys-typescale-headline5-weight); font-size: var(--md-sys-typescale-headline5-size); line-height: var(--md-sys-typescale-headline5-line-height); letter-spacing: var(--md-sys-typescale-headline5-tracking); } .headline6 { font-family: var(--md-sys-typescale-headline6-font); font-weight: var(--md-sys-typescale-headline6-weight); font-size: var(--md-sys-typescale-headline6-size); line-height: var(--md-sys-typescale-headline6-line-height); letter-spacing: var(--md-sys-typescale-headline6-tracking); } .subhead1, .title-medium { font-family: var(--md-sys-typescale-subhead1-font); font-weight: var(--md-sys-typescale-subhead1-weight); font-size: var(--md-sys-typescale-subhead1-size); line-height: var(--md-sys-typescale-subhead1-line-height); letter-spacing: var(--md-sys-typescale-subhead1-tracking); } .subhead2, .title-small { font-family: var(--md-sys-typescale-subhead2-font); font-weight: var(--md-sys-typescale-subhead2-weight); font-size: var(--md-sys-typescale-subhead2-size); line-height: var(--md-sys-typescale-subhead2-line-height); letter-spacing: var(--md-sys-typescale-subhead2-tracking); } .body1, .body-large { font-family: var(--md-sys-typescale-body1-font); font-weight: var(--md-sys-typescale-body1-weight); font-size: var(--md-sys-typescale-body1-size); line-height: var(--md-sys-typescale-body1-line-height); letter-spacing: var(--md-sys-typescale-body1-tracking); } .body2, .body-medium { font-family: var(--md-sys-typescale-body2-font); font-weight: var(--md-sys-typescale-body2-weight); font-size: var(--md-sys-typescale-body2-size); line-height: var(--md-sys-typescale-body2-line-height); letter-spacing: var(--md-sys-typescale-body2-tracking); } .caption, .body-small { font-family: var(--md-sys-typescale-caption-font); font-weight: var(--md-sys-typescale-caption-weight); font-size: var(--md-sys-typescale-caption-size); line-height: var(--md-sys-typescale-caption-line-height); letter-spacing: var(--md-sys-typescale-caption-tracking); } .button, .label-large { font-family: var(--md-sys-typescale-button-font); font-weight: var(--md-sys-typescale-button-weight); font-size: var(--md-sys-typescale-button-size); line-height: var(--md-sys-typescale-button-line-height); letter-spacing: var(--md-sys-typescale-button-tracking); } .overline, .label-medium { font-family: var(--md-sys-typescale-overline-font); font-weight: var(--md-sys-typescale-overline-weight); font-size: var(--md-sys-typescale-overline-size); line-height: var(--md-sys-typescale-overline-line-height); letter-spacing: var(--md-sys-typescale-overline-tracking); } .material-theme { --md-sys-typescale-display1-font: Roboto; --md-sys-typescale-display1-weight: Regular; --md-sys-typescale-display1-size: 64px; --md-sys-typescale-display1-line-height: 76px; --md-sys-typescale-display1-tracking: -0.5px; --md-sys-typescale-display2-font: Roboto; --md-sys-typescale-display2-weight: Regular; --md-sys-typescale-display2-size: 57px; --md-sys-typescale-display2-line-height: 64px; --md-sys-typescale-display2-tracking: -0.25px; --md-sys-typescale-display3-font: Roboto; --md-sys-typescale-display3-weight: Regular; --md-sys-typescale-display3-size: 45px; --md-sys-typescale-display3-line-height: 52px; --md-sys-typescale-display3-tracking: 0px; --md-sys-typescale-headline1-font: Roboto; --md-sys-typescale-headline1-weight: Regular; --md-sys-typescale-headline1-size: 36px; --md-sys-typescale-headline1-line-height: 44px; --md-sys-typescale-headline1-tracking: 0px; --md-sys-typescale-headline2-font: Roboto; --md-sys-typescale-headline2-weight: Regular; --md-sys-typescale-headline2-size: 32px; --md-sys-typescale-headline2-line-height: 40px; --md-sys-typescale-headline2-tracking: 0px; --md-sys-typescale-headline3-font: Roboto; --md-sys-typescale-headline3-weight: Regular; --md-sys-typescale-headline3-size: 28px; --md-sys-typescale-headline3-line-height: 36px; --md-sys-typescale-headline3-tracking: 0px; --md-sys-typescale-headline4-font: Roboto; --md-sys-typescale-headline4-weight: Regular; --md-sys-typescale-headline4-size: 24px; --md-sys-typescale-headline4-line-height: 32px; --md-sys-typescale-headline4-tracking: 0px; --md-sys-typescale-headline5-font: Roboto; --md-sys-typescale-headline5-weight: Regular; --md-sys-typescale-headline5-size: 22px; --md-sys-typescale-headline5-line-height: 28px; --md-sys-typescale-headline5-tracking: 0px; --md-sys-typescale-headline6-font: Roboto; --md-sys-typescale-headline6-weight: Regular; --md-sys-typescale-headline6-size: 18px; --md-sys-typescale-headline6-line-height: 24px; --md-sys-typescale-headline6-tracking: 0px; --md-sys-typescale-subhead1-font: Roboto; --md-sys-typescale-subhead1-weight: Medium; --md-sys-typescale-subhead1-size: 16px; --md-sys-typescale-subhead1-line-height: 24px; --md-sys-typescale-subhead1-tracking: 0.1px; --md-sys-typescale-subhead2-font: Roboto; --md-sys-typescale-subhead2-weight: Medium; --md-sys-typescale-subhead2-size: 14px; --md-sys-typescale-subhead2-line-height: 20px; --md-sys-typescale-subhead2-tracking: 0.1px; --md-sys-typescale-body1-font: Roboto; --md-sys-typescale-body1-weight: Regular; --md-sys-typescale-body1-size: 16px; --md-sys-typescale-body1-line-height: 24px; --md-sys-typescale-body1-tracking: 0.5px; --md-sys-typescale-body2-font: Roboto; --md-sys-typescale-body2-weight: Regular; --md-sys-typescale-body2-size: 14px; --md-sys-typescale-body2-line-height: 20px; --md-sys-typescale-body2-tracking: 0.25px; --md-sys-typescale-caption-font: Roboto; --md-sys-typescale-caption-weight: Regular; --md-sys-typescale-caption-size: 12px; --md-sys-typescale-caption-line-height: 16px; --md-sys-typescale-caption-tracking: 0.4px; --md-sys-typescale-button-font: Roboto; --md-sys-typescale-button-weight: Medium; --md-sys-typescale-button-size: 14px; --md-sys-typescale-button-line-height: 20px; --md-sys-typescale-button-tracking: 0.1px; --md-sys-typescale-overline-font: Roboto; --md-sys-typescale-overline-weight: Medium; --md-sys-typescale-overline-size: 12px; --md-sys-typescale-overline-line-height: 16px; --md-sys-typescale-overline-tracking: 0.5px; --md-sys-color-primary-light: #5056a9; --md-sys-color-on-primary-light: #ffffff; --md-sys-color-primary-container-light: #dfe0ff; --md-sys-color-on-primary-container-light: #050764; --md-sys-color-secondary-light: #5c5d72; --md-sys-color-on-secondary-light: #ffffff; --md-sys-color-secondary-container-light: #e1e0fa; --md-sys-color-on-secondary-container-light: #191a2b; --md-sys-color-tertiary-light: #79536b; --md-sys-color-on-tertiary-light: #ffffff; --md-sys-color-tertiary-container-light: #ffd7ef; --md-sys-color-on-tertiary-container-light: #2e1126; --md-sys-color-error-light: #ba1b1b; --md-sys-color-on-error-light: #ffffff; --md-sys-color-error-container-light: #ffdad4; --md-sys-color-on-error-container-light: #410001; --md-sys-color-outline-light: #777680; --md-sys-color-background-light: #fffbff; --md-sys-color-on-background-light: #1b1b1f; --md-sys-color-surface-light: #fffbff; --md-sys-color-on-surface-light: #1b1b1f; --md-sys-color-surface-variant-light: #e4e1ec; --md-sys-color-on-surface-variant-light: #46464f; --md-sys-color-inverse-surface-light: #313034; --md-sys-color-inverse-on-surface-light: #f3eff4; --md-sys-color-primary-dark: #bdc2ff; --md-sys-color-on-primary-dark: #202578; --md-sys-color-primary-container-dark: #383e90; --md-sys-color-on-primary-container-dark: #dfe0ff; --md-sys-color-secondary-dark: #c5c4dd; --md-sys-color-on-secondary-dark: #2e2f42; --md-sys-color-secondary-container-dark: #444559; --md-sys-color-on-secondary-container-dark: #e1e0fa; --md-sys-color-tertiary-dark: #e8b9d5; --md-sys-color-on-tertiary-dark: #45263b; --md-sys-color-tertiary-container-dark: #5e3c52; --md-sys-color-on-tertiary-container-dark: #ffd7ef; --md-sys-color-error-dark: #ffb4a9; --md-sys-color-on-error-dark: #680003; --md-sys-color-error-container-dark: #930006; --md-sys-color-on-error-container-dark: #ffdad4; --md-sys-color-outline-dark: #91909a; --md-sys-color-background-dark: #1b1b1f; --md-sys-color-on-background-dark: #e4e1e6; --md-sys-color-surface-dark: #1b1b1f; --md-sys-color-on-surface-dark: #e4e1e6; --md-sys-color-surface-variant-dark: #46464f; --md-sys-color-on-surface-variant-dark: #c7c5d0; --md-sys-color-inverse-surface-dark: #e4e1e6; --md-sys-color-inverse-on-surface-dark: #1b1b1f; } @media (prefers-color-scheme: light) { .material-theme { --md-sys-color-primary: var(--md-sys-color-primary-light); --md-sys-color-on-primary: var(--md-sys-color-on-primary-light); --md-sys-color-primary-container: var(--md-sys-color-primary-container-light); --md-sys-color-on-primary-container: var(--md-sys-color-on-primary-container-light); --md-sys-color-secondary: var(--md-sys-color-secondary-light); --md-sys-color-on-secondary: var(--md-sys-color-on-secondary-light); --md-sys-color-secondary-container: var(--md-sys-color-secondary-container-light); --md-sys-color-on-secondary-container: var(--md-sys-color-on-secondary-container-light); --md-sys-color-tertiary: var(--md-sys-color-tertiary-light); --md-sys-color-on-tertiary: var(--md-sys-color-on-tertiary-light); --md-sys-color-tertiary-container: var(--md-sys-color-tertiary-container-light); --md-sys-color-on-tertiary-container: var(--md-sys-color-on-tertiary-container-light); --md-sys-color-error: var(--md-sys-color-error-light); --md-sys-color-on-error: var(--md-sys-color-on-error-light); --md-sys-color-error-container: var(--md-sys-color-error-container-light); --md-sys-color-on-error-container: var(--md-sys-color-on-error-container-light); --md-sys-color-outline: var(--md-sys-color-outline-light); --md-sys-color-background: var(--md-sys-color-background-light); --md-sys-color-on-background: var(--md-sys-color-on-background-light); --md-sys-color-surface: var(--md-sys-color-surface-light); --md-sys-color-on-surface: var(--md-sys-color-on-surface-light); --md-sys-color-surface-variant: var(--md-sys-color-surface-variant-light); --md-sys-color-on-surface-variant: var(--md-sys-color-on-surface-variant-light); --md-sys-color-inverse-surface: var(--md-sys-color-inverse-surface-light); --md-sys-color-inverse-on-surface: var(--md-sys-color-inverse-on-surface-light); } .dark-theme { --md-sys-color-primary: var(--md-sys-color-primary-dark); --md-sys-color-on-primary: var(--md-sys-color-on-primary-dark); --md-sys-color-primary-container: var(--md-sys-color-primary-container-dark); --md-sys-color-on-primary-container: var(--md-sys-color-on-primary-container-dark); --md-sys-color-secondary: var(--md-sys-color-secondary-dark); --md-sys-color-on-secondary: var(--md-sys-color-on-secondary-dark); --md-sys-color-secondary-container: var(--md-sys-color-secondary-container-dark); --md-sys-color-on-secondary-container: var(--md-sys-color-on-secondary-container-dark); --md-sys-color-tertiary: var(--md-sys-color-tertiary-dark); --md-sys-color-on-tertiary: var(--md-sys-color-on-tertiary-dark); --md-sys-color-tertiary-container: var(--md-sys-color-tertiary-container-dark); --md-sys-color-on-tertiary-container: var(--md-sys-color-on-tertiary-container-dark); --md-sys-color-error: var(--md-sys-color-error-dark); --md-sys-color-on-error: var(--md-sys-color-on-error-dark); --md-sys-color-error-container: var(--md-sys-color-error-container-dark); --md-sys-color-on-error-container: var(--md-sys-color-on-error-container-dark); --md-sys-color-outline: var(--md-sys-color-outline-dark); --md-sys-color-background: var(--md-sys-color-background-dark); --md-sys-color-on-background: var(--md-sys-color-on-background-dark); --md-sys-color-surface: var(--md-sys-color-surface-dark); --md-sys-color-on-surface: var(--md-sys-color-on-surface-dark); --md-sys-color-surface-variant: var(--md-sys-color-surface-variant-dark); --md-sys-color-on-surface-variant: var(--md-sys-color-on-surface-variant-dark); --md-sys-color-inverse-surface: var(--md-sys-color-inverse-surface-dark); --md-sys-color-inverse-on-surface: var(--md-sys-color-inverse-on-surface-dark); } } @media (prefers-color-scheme: dark) { .material-theme { --md-sys-color-primary: var(--md-sys-color-primary-dark); --md-sys-color-on-primary: var(--md-sys-color-on-primary-dark); --md-sys-color-primary-container: var(--md-sys-color-primary-container-dark); --md-sys-color-on-primary-container: var(--md-sys-color-on-primary-container-dark); --md-sys-color-secondary: var(--md-sys-color-secondary-dark); --md-sys-color-on-secondary: var(--md-sys-color-on-secondary-dark); --md-sys-color-secondary-container: var(--md-sys-color-secondary-container-dark); --md-sys-color-on-secondary-container: var(--md-sys-color-on-secondary-container-dark); --md-sys-color-tertiary: var(--md-sys-color-tertiary-dark); --md-sys-color-on-tertiary: var(--md-sys-color-on-tertiary-dark); --md-sys-color-tertiary-container: var(--md-sys-color-tertiary-container-dark); --md-sys-color-on-tertiary-container: var(--md-sys-color-on-tertiary-container-dark); --md-sys-color-error: var(--md-sys-color-error-dark); --md-sys-color-on-error: var(--md-sys-color-on-error-dark); --md-sys-color-error-container: var(--md-sys-color-error-container-dark); --md-sys-color-on-error-container: var(--md-sys-color-on-error-container-dark); --md-sys-color-outline: var(--md-sys-color-outline-dark); --md-sys-color-background: var(--md-sys-color-background-dark); --md-sys-color-on-background: var(--md-sys-color-on-background-dark); --md-sys-color-surface: var(--md-sys-color-surface-dark); --md-sys-color-on-surface: var(--md-sys-color-on-surface-dark); --md-sys-color-surface-variant: var(--md-sys-color-surface-variant-dark); --md-sys-color-on-surface-variant: var(--md-sys-color-on-surface-variant-dark); --md-sys-color-inverse-surface: var(--md-sys-color-inverse-surface-dark); --md-sys-color-inverse-on-surface: var(--md-sys-color-inverse-on-surface-dark); } .light-theme { --md-sys-color-primary: var(--md-sys-color-primary-light); --md-sys-color-on-primary: var(--md-sys-color-on-primary-light); --md-sys-color-primary-container: var(--md-sys-color-primary-container-light); --md-sys-color-on-primary-container: var(--md-sys-color-on-primary-container-light); --md-sys-color-secondary: var(--md-sys-color-secondary-light); --md-sys-color-on-secondary: var(--md-sys-color-on-secondary-light); --md-sys-color-secondary-container: var(--md-sys-color-secondary-container-light); --md-sys-color-on-secondary-container: var(--md-sys-color-on-secondary-container-light); --md-sys-color-tertiary: var(--md-sys-color-tertiary-light); --md-sys-color-on-tertiary: var(--md-sys-color-on-tertiary-light); --md-sys-color-tertiary-container: var(--md-sys-color-tertiary-container-light); --md-sys-color-on-tertiary-container: var(--md-sys-color-on-tertiary-container-light); --md-sys-color-error: var(--md-sys-color-error-light); --md-sys-color-on-error: var(--md-sys-color-on-error-light); --md-sys-color-error-container: var(--md-sys-color-error-container-light); --md-sys-color-on-error-container: var(--md-sys-color-on-error-container-light); --md-sys-color-outline: var(--md-sys-color-outline-light); --md-sys-color-background: var(--md-sys-color-background-light); --md-sys-color-on-background: var(--md-sys-color-on-background-light); --md-sys-color-surface: var(--md-sys-color-surface-light); --md-sys-color-on-surface: var(--md-sys-color-on-surface-light); --md-sys-color-surface-variant: var(--md-sys-color-surface-variant-light); --md-sys-color-on-surface-variant: var(--md-sys-color-on-surface-variant-light); --md-sys-color-inverse-surface: var(--md-sys-color-inverse-surface-light); --md-sys-color-inverse-on-surface: var(--md-sys-color-inverse-on-surface-light); } }