diff --git a/design/Screenshot Hydrosystems - VIS Studies.png b/design/Screenshot Hydrosystems - VIS Studies.png
new file mode 100644
index 0000000000000000000000000000000000000000..a6943b0dc32c93ccee70afb581039c472812f278
Binary files /dev/null and b/design/Screenshot Hydrosystems - VIS Studies.png differ
diff --git a/design/Screenshot VIS Studies.png b/design/Screenshot VIS Studies.png
new file mode 100644
index 0000000000000000000000000000000000000000..ee3d5e7ab0fdcfc65d4c43a09aa7b4b1561f3baf
Binary files /dev/null and b/design/Screenshot VIS Studies.png differ
diff --git a/design/fonts/Kanit/Kanit-Bold.ttf b/design/fonts/Kanit/Kanit-Bold.ttf
new file mode 100644
index 0000000000000000000000000000000000000000..8f2e43672ab28080ff856c03a207659a17483e5c
Binary files /dev/null and b/design/fonts/Kanit/Kanit-Bold.ttf differ
diff --git a/design/fonts/Kanit/Kanit-SemiBold.ttf b/design/fonts/Kanit/Kanit-SemiBold.ttf
new file mode 100644
index 0000000000000000000000000000000000000000..2f0c23b7221a7358ba870fc3c523940cd299dbd6
Binary files /dev/null and b/design/fonts/Kanit/Kanit-SemiBold.ttf differ
diff --git a/design/fonts/Kanit/OFL.txt b/design/fonts/Kanit/OFL.txt
new file mode 100644
index 0000000000000000000000000000000000000000..1fd9f8e65d07e0e5fcecba4386b28910ebffa456
--- /dev/null
+++ b/design/fonts/Kanit/OFL.txt
@@ -0,0 +1,93 @@
+Copyright 2020 The Kanit Project Authors (https://github.com/cadsondemak/kanit)
+
+This Font Software is licensed under the SIL Open Font License, Version 1.1.
+This license is copied below, and is also available with a FAQ at:
+http://scripts.sil.org/OFL
+
+
+-----------------------------------------------------------
+SIL OPEN FONT LICENSE Version 1.1 - 26 February 2007
+-----------------------------------------------------------
+
+PREAMBLE
+The goals of the Open Font License (OFL) are to stimulate worldwide
+development of collaborative font projects, to support the font creation
+efforts of academic and linguistic communities, and to provide a free and
+open framework in which fonts may be shared and improved in partnership
+with others.
+
+The OFL allows the licensed fonts to be used, studied, modified and
+redistributed freely as long as they are not sold by themselves. The
+fonts, including any derivative works, can be bundled, embedded,
+redistributed and/or sold with any software provided that any reserved
+names are not used by derivative works. The fonts and derivatives,
+however, cannot be released under any other type of license. The
+requirement for fonts to remain under this license does not apply
+to any document created using the fonts or their derivatives.
+
+DEFINITIONS
+"Font Software" refers to the set of files released by the Copyright
+Holder(s) under this license and clearly marked as such. This may
+include source files, build scripts and documentation.
+
+"Reserved Font Name" refers to any names specified as such after the
+copyright statement(s).
+
+"Original Version" refers to the collection of Font Software components as
+distributed by the Copyright Holder(s).
+
+"Modified Version" refers to any derivative made by adding to, deleting,
+or substituting -- in part or in whole -- any of the components of the
+Original Version, by changing formats or by porting the Font Software to a
+new environment.
+
+"Author" refers to any designer, engineer, programmer, technical
+writer or other person who contributed to the Font Software.
+
+PERMISSION & CONDITIONS
+Permission is hereby granted, free of charge, to any person obtaining
+a copy of the Font Software, to use, study, copy, merge, embed, modify,
+redistribute, and sell modified and unmodified copies of the Font
+Software, subject to the following conditions:
+
+1) Neither the Font Software nor any of its individual components,
+in Original or Modified Versions, may be sold by itself.
+
+2) Original or Modified Versions of the Font Software may be bundled,
+redistributed and/or sold with any software, provided that each copy
+contains the above copyright notice and this license. These can be
+included either as stand-alone text files, human-readable headers or
+in the appropriate machine-readable metadata fields within text or
+binary files as long as those fields can be easily viewed by the user.
+
+3) No Modified Version of the Font Software may use the Reserved Font
+Name(s) unless explicit written permission is granted by the corresponding
+Copyright Holder. This restriction only applies to the primary font name as
+presented to the users.
+
+4) The name(s) of the Copyright Holder(s) or the Author(s) of the Font
+Software shall not be used to promote, endorse or advertise any
+Modified Version, except to acknowledge the contribution(s) of the
+Copyright Holder(s) and the Author(s) or with their explicit written
+permission.
+
+5) The Font Software, modified or unmodified, in part or in whole,
+must be distributed entirely under this license, and must not be
+distributed under any other license. The requirement for fonts to
+remain under this license does not apply to any document created
+using the Font Software.
+
+TERMINATION
+This license becomes null and void if any of the above conditions are
+not met.
+
+DISCLAIMER
+THE FONT SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND,
+EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO ANY WARRANTIES OF
+MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT
+OF COPYRIGHT, PATENT, TRADEMARK, OR OTHER RIGHT. IN NO EVENT SHALL THE
+COPYRIGHT HOLDER BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY,
+INCLUDING ANY GENERAL, SPECIAL, INDIRECT, INCIDENTAL, OR CONSEQUENTIAL
+DAMAGES, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING
+FROM, OUT OF THE USE OR INABILITY TO USE THE FONT SOFTWARE OR FROM
+OTHER DEALINGS IN THE FONT SOFTWARE.
diff --git a/design/fonts/Nunito_Sans/NunitoSans-Italic-VariableFont_YTLC,opsz,wdth,wght.ttf b/design/fonts/Nunito_Sans/NunitoSans-Italic-VariableFont_YTLC,opsz,wdth,wght.ttf
new file mode 100644
index 0000000000000000000000000000000000000000..6d00cca22984383d48ffc6eda515f8112c14fcf3
Binary files /dev/null and b/design/fonts/Nunito_Sans/NunitoSans-Italic-VariableFont_YTLC,opsz,wdth,wght.ttf differ
diff --git a/design/fonts/Nunito_Sans/NunitoSans-VariableFont_YTLC,opsz,wdth,wght.ttf b/design/fonts/Nunito_Sans/NunitoSans-VariableFont_YTLC,opsz,wdth,wght.ttf
new file mode 100644
index 0000000000000000000000000000000000000000..91abf0d223c60dbae7452dff80f89f3361be0674
Binary files /dev/null and b/design/fonts/Nunito_Sans/NunitoSans-VariableFont_YTLC,opsz,wdth,wght.ttf differ
diff --git a/design/fonts/Nunito_Sans/OFL.txt b/design/fonts/Nunito_Sans/OFL.txt
new file mode 100644
index 0000000000000000000000000000000000000000..2ae17359801c71b7b568854b98f73969ad822474
--- /dev/null
+++ b/design/fonts/Nunito_Sans/OFL.txt
@@ -0,0 +1,93 @@
+Copyright 2016 The Nunito Sans Project Authors (https://github.com/Fonthausen/NunitoSans)
+
+This Font Software is licensed under the SIL Open Font License, Version 1.1.
+This license is copied below, and is also available with a FAQ at:
+http://scripts.sil.org/OFL
+
+
+-----------------------------------------------------------
+SIL OPEN FONT LICENSE Version 1.1 - 26 February 2007
+-----------------------------------------------------------
+
+PREAMBLE
+The goals of the Open Font License (OFL) are to stimulate worldwide
+development of collaborative font projects, to support the font creation
+efforts of academic and linguistic communities, and to provide a free and
+open framework in which fonts may be shared and improved in partnership
+with others.
+
+The OFL allows the licensed fonts to be used, studied, modified and
+redistributed freely as long as they are not sold by themselves. The
+fonts, including any derivative works, can be bundled, embedded,
+redistributed and/or sold with any software provided that any reserved
+names are not used by derivative works. The fonts and derivatives,
+however, cannot be released under any other type of license. The
+requirement for fonts to remain under this license does not apply
+to any document created using the fonts or their derivatives.
+
+DEFINITIONS
+"Font Software" refers to the set of files released by the Copyright
+Holder(s) under this license and clearly marked as such. This may
+include source files, build scripts and documentation.
+
+"Reserved Font Name" refers to any names specified as such after the
+copyright statement(s).
+
+"Original Version" refers to the collection of Font Software components as
+distributed by the Copyright Holder(s).
+
+"Modified Version" refers to any derivative made by adding to, deleting,
+or substituting -- in part or in whole -- any of the components of the
+Original Version, by changing formats or by porting the Font Software to a
+new environment.
+
+"Author" refers to any designer, engineer, programmer, technical
+writer or other person who contributed to the Font Software.
+
+PERMISSION & CONDITIONS
+Permission is hereby granted, free of charge, to any person obtaining
+a copy of the Font Software, to use, study, copy, merge, embed, modify,
+redistribute, and sell modified and unmodified copies of the Font
+Software, subject to the following conditions:
+
+1) Neither the Font Software nor any of its individual components,
+in Original or Modified Versions, may be sold by itself.
+
+2) Original or Modified Versions of the Font Software may be bundled,
+redistributed and/or sold with any software, provided that each copy
+contains the above copyright notice and this license. These can be
+included either as stand-alone text files, human-readable headers or
+in the appropriate machine-readable metadata fields within text or
+binary files as long as those fields can be easily viewed by the user.
+
+3) No Modified Version of the Font Software may use the Reserved Font
+Name(s) unless explicit written permission is granted by the corresponding
+Copyright Holder. This restriction only applies to the primary font name as
+presented to the users.
+
+4) The name(s) of the Copyright Holder(s) or the Author(s) of the Font
+Software shall not be used to promote, endorse or advertise any
+Modified Version, except to acknowledge the contribution(s) of the
+Copyright Holder(s) and the Author(s) or with their explicit written
+permission.
+
+5) The Font Software, modified or unmodified, in part or in whole,
+must be distributed entirely under this license, and must not be
+distributed under any other license. The requirement for fonts to
+remain under this license does not apply to any document created
+using the Font Software.
+
+TERMINATION
+This license becomes null and void if any of the above conditions are
+not met.
+
+DISCLAIMER
+THE FONT SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND,
+EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO ANY WARRANTIES OF
+MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT
+OF COPYRIGHT, PATENT, TRADEMARK, OR OTHER RIGHT. IN NO EVENT SHALL THE
+COPYRIGHT HOLDER BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY,
+INCLUDING ANY GENERAL, SPECIAL, INDIRECT, INCIDENTAL, OR CONSEQUENTIAL
+DAMAGES, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING
+FROM, OUT OF THE USE OR INABILITY TO USE THE FONT SOFTWARE OR FROM
+OTHER DEALINGS IN THE FONT SOFTWARE.
diff --git a/design/fonts/Nunito_Sans/README.txt b/design/fonts/Nunito_Sans/README.txt
new file mode 100644
index 0000000000000000000000000000000000000000..60a7ab07b0af0882388e3c247869d586c85baa2e
--- /dev/null
+++ b/design/fonts/Nunito_Sans/README.txt
@@ -0,0 +1,226 @@
+Nunito Sans Variable Font
+=========================
+
+This download contains Nunito Sans as both variable fonts and static fonts.
+
+Nunito Sans is a variable font with these axes:
+ YTLC
+ opsz
+ wdth
+ wght
+
+This means all the styles are contained in these files:
+ Nunito_Sans/NunitoSans-VariableFont_YTLC,opsz,wdth,wght.ttf
+ Nunito_Sans/NunitoSans-Italic-VariableFont_YTLC,opsz,wdth,wght.ttf
+
+If your app fully supports variable fonts, you can now pick intermediate styles
+that aren’t available as static fonts. Not all apps support variable fonts, and
+in those cases you can use the static font files for Nunito Sans:
+ Nunito_Sans/static/NunitoSans_7pt_Condensed-ExtraLight.ttf
+ Nunito_Sans/static/NunitoSans_7pt_Condensed-Light.ttf
+ Nunito_Sans/static/NunitoSans_7pt_Condensed-Regular.ttf
+ Nunito_Sans/static/NunitoSans_7pt_Condensed-Medium.ttf
+ Nunito_Sans/static/NunitoSans_7pt_Condensed-SemiBold.ttf
+ Nunito_Sans/static/NunitoSans_7pt_Condensed-Bold.ttf
+ Nunito_Sans/static/NunitoSans_7pt_Condensed-ExtraBold.ttf
+ Nunito_Sans/static/NunitoSans_7pt_Condensed-Black.ttf
+ Nunito_Sans/static/NunitoSans_7pt_SemiCondensed-ExtraLight.ttf
+ Nunito_Sans/static/NunitoSans_7pt_SemiCondensed-Light.ttf
+ Nunito_Sans/static/NunitoSans_7pt_SemiCondensed-Regular.ttf
+ Nunito_Sans/static/NunitoSans_7pt_SemiCondensed-Medium.ttf
+ Nunito_Sans/static/NunitoSans_7pt_SemiCondensed-SemiBold.ttf
+ Nunito_Sans/static/NunitoSans_7pt_SemiCondensed-Bold.ttf
+ Nunito_Sans/static/NunitoSans_7pt_SemiCondensed-ExtraBold.ttf
+ Nunito_Sans/static/NunitoSans_7pt_SemiCondensed-Black.ttf
+ Nunito_Sans/static/NunitoSans_7pt-ExtraLight.ttf
+ Nunito_Sans/static/NunitoSans_7pt-Light.ttf
+ Nunito_Sans/static/NunitoSans_7pt-Regular.ttf
+ Nunito_Sans/static/NunitoSans_7pt-Medium.ttf
+ Nunito_Sans/static/NunitoSans_7pt-SemiBold.ttf
+ Nunito_Sans/static/NunitoSans_7pt-Bold.ttf
+ Nunito_Sans/static/NunitoSans_7pt-ExtraBold.ttf
+ Nunito_Sans/static/NunitoSans_7pt-Black.ttf
+ Nunito_Sans/static/NunitoSans_7pt_SemiExpanded-ExtraLight.ttf
+ Nunito_Sans/static/NunitoSans_7pt_SemiExpanded-Light.ttf
+ Nunito_Sans/static/NunitoSans_7pt_SemiExpanded-Regular.ttf
+ Nunito_Sans/static/NunitoSans_7pt_SemiExpanded-Medium.ttf
+ Nunito_Sans/static/NunitoSans_7pt_SemiExpanded-SemiBold.ttf
+ Nunito_Sans/static/NunitoSans_7pt_SemiExpanded-Bold.ttf
+ Nunito_Sans/static/NunitoSans_7pt_SemiExpanded-ExtraBold.ttf
+ Nunito_Sans/static/NunitoSans_7pt_SemiExpanded-Black.ttf
+ Nunito_Sans/static/NunitoSans_7pt_Expanded-ExtraLight.ttf
+ Nunito_Sans/static/NunitoSans_7pt_Expanded-Light.ttf
+ Nunito_Sans/static/NunitoSans_7pt_Expanded-Regular.ttf
+ Nunito_Sans/static/NunitoSans_7pt_Expanded-Medium.ttf
+ Nunito_Sans/static/NunitoSans_7pt_Expanded-SemiBold.ttf
+ Nunito_Sans/static/NunitoSans_7pt_Expanded-Bold.ttf
+ Nunito_Sans/static/NunitoSans_7pt_Expanded-ExtraBold.ttf
+ Nunito_Sans/static/NunitoSans_7pt_Expanded-Black.ttf
+ Nunito_Sans/static/NunitoSans_10pt_Condensed-ExtraLight.ttf
+ Nunito_Sans/static/NunitoSans_10pt_Condensed-Light.ttf
+ Nunito_Sans/static/NunitoSans_10pt_Condensed-Regular.ttf
+ Nunito_Sans/static/NunitoSans_10pt_Condensed-Medium.ttf
+ Nunito_Sans/static/NunitoSans_10pt_Condensed-SemiBold.ttf
+ Nunito_Sans/static/NunitoSans_10pt_Condensed-Bold.ttf
+ Nunito_Sans/static/NunitoSans_10pt_Condensed-ExtraBold.ttf
+ Nunito_Sans/static/NunitoSans_10pt_Condensed-Black.ttf
+ Nunito_Sans/static/NunitoSans_10pt_SemiCondensed-ExtraLight.ttf
+ Nunito_Sans/static/NunitoSans_10pt_SemiCondensed-Light.ttf
+ Nunito_Sans/static/NunitoSans_10pt_SemiCondensed-Regular.ttf
+ Nunito_Sans/static/NunitoSans_10pt_SemiCondensed-Medium.ttf
+ Nunito_Sans/static/NunitoSans_10pt_SemiCondensed-SemiBold.ttf
+ Nunito_Sans/static/NunitoSans_10pt_SemiCondensed-Bold.ttf
+ Nunito_Sans/static/NunitoSans_10pt_SemiCondensed-ExtraBold.ttf
+ Nunito_Sans/static/NunitoSans_10pt_SemiCondensed-Black.ttf
+ Nunito_Sans/static/NunitoSans_10pt-ExtraLight.ttf
+ Nunito_Sans/static/NunitoSans_10pt-Light.ttf
+ Nunito_Sans/static/NunitoSans_10pt-Regular.ttf
+ Nunito_Sans/static/NunitoSans_10pt-Medium.ttf
+ Nunito_Sans/static/NunitoSans_10pt-SemiBold.ttf
+ Nunito_Sans/static/NunitoSans_10pt-Bold.ttf
+ Nunito_Sans/static/NunitoSans_10pt-ExtraBold.ttf
+ Nunito_Sans/static/NunitoSans_10pt-Black.ttf
+ Nunito_Sans/static/NunitoSans_10pt_SemiExpanded-ExtraLight.ttf
+ Nunito_Sans/static/NunitoSans_10pt_SemiExpanded-Light.ttf
+ Nunito_Sans/static/NunitoSans_10pt_SemiExpanded-Regular.ttf
+ Nunito_Sans/static/NunitoSans_10pt_SemiExpanded-Medium.ttf
+ Nunito_Sans/static/NunitoSans_10pt_SemiExpanded-SemiBold.ttf
+ Nunito_Sans/static/NunitoSans_10pt_SemiExpanded-Bold.ttf
+ Nunito_Sans/static/NunitoSans_10pt_SemiExpanded-ExtraBold.ttf
+ Nunito_Sans/static/NunitoSans_10pt_SemiExpanded-Black.ttf
+ Nunito_Sans/static/NunitoSans_10pt_Expanded-ExtraLight.ttf
+ Nunito_Sans/static/NunitoSans_10pt_Expanded-Light.ttf
+ Nunito_Sans/static/NunitoSans_10pt_Expanded-Regular.ttf
+ Nunito_Sans/static/NunitoSans_10pt_Expanded-Medium.ttf
+ Nunito_Sans/static/NunitoSans_10pt_Expanded-SemiBold.ttf
+ Nunito_Sans/static/NunitoSans_10pt_Expanded-Bold.ttf
+ Nunito_Sans/static/NunitoSans_10pt_Expanded-ExtraBold.ttf
+ Nunito_Sans/static/NunitoSans_10pt_Expanded-Black.ttf
+ Nunito_Sans/static/NunitoSans_7pt_Condensed-ExtraLightItalic.ttf
+ Nunito_Sans/static/NunitoSans_7pt_Condensed-LightItalic.ttf
+ Nunito_Sans/static/NunitoSans_7pt_Condensed-Italic.ttf
+ Nunito_Sans/static/NunitoSans_7pt_Condensed-MediumItalic.ttf
+ Nunito_Sans/static/NunitoSans_7pt_Condensed-SemiBoldItalic.ttf
+ Nunito_Sans/static/NunitoSans_7pt_Condensed-BoldItalic.ttf
+ Nunito_Sans/static/NunitoSans_7pt_Condensed-ExtraBoldItalic.ttf
+ Nunito_Sans/static/NunitoSans_7pt_Condensed-BlackItalic.ttf
+ Nunito_Sans/static/NunitoSans_7pt_SemiCondensed-ExtraLightItalic.ttf
+ Nunito_Sans/static/NunitoSans_7pt_SemiCondensed-LightItalic.ttf
+ Nunito_Sans/static/NunitoSans_7pt_SemiCondensed-Italic.ttf
+ Nunito_Sans/static/NunitoSans_7pt_SemiCondensed-MediumItalic.ttf
+ Nunito_Sans/static/NunitoSans_7pt_SemiCondensed-SemiBoldItalic.ttf
+ Nunito_Sans/static/NunitoSans_7pt_SemiCondensed-BoldItalic.ttf
+ Nunito_Sans/static/NunitoSans_7pt_SemiCondensed-ExtraBoldItalic.ttf
+ Nunito_Sans/static/NunitoSans_7pt_SemiCondensed-BlackItalic.ttf
+ Nunito_Sans/static/NunitoSans_7pt-ExtraLightItalic.ttf
+ Nunito_Sans/static/NunitoSans_7pt-LightItalic.ttf
+ Nunito_Sans/static/NunitoSans_7pt-Italic.ttf
+ Nunito_Sans/static/NunitoSans_7pt-MediumItalic.ttf
+ Nunito_Sans/static/NunitoSans_7pt-SemiBoldItalic.ttf
+ Nunito_Sans/static/NunitoSans_7pt-BoldItalic.ttf
+ Nunito_Sans/static/NunitoSans_7pt-ExtraBoldItalic.ttf
+ Nunito_Sans/static/NunitoSans_7pt-BlackItalic.ttf
+ Nunito_Sans/static/NunitoSans_7pt_SemiExpanded-ExtraLightItalic.ttf
+ Nunito_Sans/static/NunitoSans_7pt_SemiExpanded-LightItalic.ttf
+ Nunito_Sans/static/NunitoSans_7pt_SemiExpanded-Italic.ttf
+ Nunito_Sans/static/NunitoSans_7pt_SemiExpanded-MediumItalic.ttf
+ Nunito_Sans/static/NunitoSans_7pt_SemiExpanded-SemiBoldItalic.ttf
+ Nunito_Sans/static/NunitoSans_7pt_SemiExpanded-BoldItalic.ttf
+ Nunito_Sans/static/NunitoSans_7pt_SemiExpanded-ExtraBoldItalic.ttf
+ Nunito_Sans/static/NunitoSans_7pt_SemiExpanded-BlackItalic.ttf
+ Nunito_Sans/static/NunitoSans_7pt_Expanded-ExtraLightItalic.ttf
+ Nunito_Sans/static/NunitoSans_7pt_Expanded-LightItalic.ttf
+ Nunito_Sans/static/NunitoSans_7pt_Expanded-Italic.ttf
+ Nunito_Sans/static/NunitoSans_7pt_Expanded-MediumItalic.ttf
+ Nunito_Sans/static/NunitoSans_7pt_Expanded-SemiBoldItalic.ttf
+ Nunito_Sans/static/NunitoSans_7pt_Expanded-BoldItalic.ttf
+ Nunito_Sans/static/NunitoSans_7pt_Expanded-ExtraBoldItalic.ttf
+ Nunito_Sans/static/NunitoSans_7pt_Expanded-BlackItalic.ttf
+ Nunito_Sans/static/NunitoSans_10pt_Condensed-ExtraLightItalic.ttf
+ Nunito_Sans/static/NunitoSans_10pt_Condensed-LightItalic.ttf
+ Nunito_Sans/static/NunitoSans_10pt_Condensed-Italic.ttf
+ Nunito_Sans/static/NunitoSans_10pt_Condensed-MediumItalic.ttf
+ Nunito_Sans/static/NunitoSans_10pt_Condensed-SemiBoldItalic.ttf
+ Nunito_Sans/static/NunitoSans_10pt_Condensed-BoldItalic.ttf
+ Nunito_Sans/static/NunitoSans_10pt_Condensed-ExtraBoldItalic.ttf
+ Nunito_Sans/static/NunitoSans_10pt_Condensed-BlackItalic.ttf
+ Nunito_Sans/static/NunitoSans_10pt_SemiCondensed-ExtraLightItalic.ttf
+ Nunito_Sans/static/NunitoSans_10pt_SemiCondensed-LightItalic.ttf
+ Nunito_Sans/static/NunitoSans_10pt_SemiCondensed-Italic.ttf
+ Nunito_Sans/static/NunitoSans_10pt_SemiCondensed-MediumItalic.ttf
+ Nunito_Sans/static/NunitoSans_10pt_SemiCondensed-SemiBoldItalic.ttf
+ Nunito_Sans/static/NunitoSans_10pt_SemiCondensed-BoldItalic.ttf
+ Nunito_Sans/static/NunitoSans_10pt_SemiCondensed-ExtraBoldItalic.ttf
+ Nunito_Sans/static/NunitoSans_10pt_SemiCondensed-BlackItalic.ttf
+ Nunito_Sans/static/NunitoSans_10pt-ExtraLightItalic.ttf
+ Nunito_Sans/static/NunitoSans_10pt-LightItalic.ttf
+ Nunito_Sans/static/NunitoSans_10pt-Italic.ttf
+ Nunito_Sans/static/NunitoSans_10pt-MediumItalic.ttf
+ Nunito_Sans/static/NunitoSans_10pt-SemiBoldItalic.ttf
+ Nunito_Sans/static/NunitoSans_10pt-BoldItalic.ttf
+ Nunito_Sans/static/NunitoSans_10pt-ExtraBoldItalic.ttf
+ Nunito_Sans/static/NunitoSans_10pt-BlackItalic.ttf
+ Nunito_Sans/static/NunitoSans_10pt_SemiExpanded-ExtraLightItalic.ttf
+ Nunito_Sans/static/NunitoSans_10pt_SemiExpanded-LightItalic.ttf
+ Nunito_Sans/static/NunitoSans_10pt_SemiExpanded-Italic.ttf
+ Nunito_Sans/static/NunitoSans_10pt_SemiExpanded-MediumItalic.ttf
+ Nunito_Sans/static/NunitoSans_10pt_SemiExpanded-SemiBoldItalic.ttf
+ Nunito_Sans/static/NunitoSans_10pt_SemiExpanded-BoldItalic.ttf
+ Nunito_Sans/static/NunitoSans_10pt_SemiExpanded-ExtraBoldItalic.ttf
+ Nunito_Sans/static/NunitoSans_10pt_SemiExpanded-BlackItalic.ttf
+ Nunito_Sans/static/NunitoSans_10pt_Expanded-ExtraLightItalic.ttf
+ Nunito_Sans/static/NunitoSans_10pt_Expanded-LightItalic.ttf
+ Nunito_Sans/static/NunitoSans_10pt_Expanded-Italic.ttf
+ Nunito_Sans/static/NunitoSans_10pt_Expanded-MediumItalic.ttf
+ Nunito_Sans/static/NunitoSans_10pt_Expanded-SemiBoldItalic.ttf
+ Nunito_Sans/static/NunitoSans_10pt_Expanded-BoldItalic.ttf
+ Nunito_Sans/static/NunitoSans_10pt_Expanded-ExtraBoldItalic.ttf
+ Nunito_Sans/static/NunitoSans_10pt_Expanded-BlackItalic.ttf
+
+Get started
+-----------
+
+1. Install the font files you want to use
+
+2. Use your app's font picker to view the font family and all the
+available styles
+
+Learn more about variable fonts
+-------------------------------
+
+ https://developers.google.com/web/fundamentals/design-and-ux/typography/variable-fonts
+ https://variablefonts.typenetwork.com
+ https://medium.com/variable-fonts
+
+In desktop apps
+
+ https://theblog.adobe.com/can-variable-fonts-illustrator-cc
+ https://helpx.adobe.com/nz/photoshop/using/fonts.html#variable_fonts
+
+Online
+
+ https://developers.google.com/fonts/docs/getting_started
+ https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Fonts/Variable_Fonts_Guide
+ https://developer.microsoft.com/en-us/microsoft-edge/testdrive/demos/variable-fonts
+
+Installing fonts
+
+ MacOS: https://support.apple.com/en-us/HT201749
+ Linux: https://www.google.com/search?q=how+to+install+a+font+on+gnu%2Blinux
+ Windows: https://support.microsoft.com/en-us/help/314960/how-to-install-or-remove-a-font-in-windows
+
+Android Apps
+
+ https://developers.google.com/fonts/docs/android
+ https://developer.android.com/guide/topics/ui/look-and-feel/downloadable-fonts
+
+License
+-------
+Please read the full license text (OFL.txt) to understand the permissions,
+restrictions and requirements for usage, redistribution, and modification.
+
+You can use them in your products & projects – print or digital,
+commercial or otherwise.
+
+This isn't legal advice, please consider consulting a lawyer and see the full
+license for all details.
diff --git a/design/fonts/Nunito_Sans/static/NunitoSans_10pt-Bold.ttf b/design/fonts/Nunito_Sans/static/NunitoSans_10pt-Bold.ttf
new file mode 100644
index 0000000000000000000000000000000000000000..df75a46b255f4fe62ad17bec70f8a30d6b9767b6
Binary files /dev/null and b/design/fonts/Nunito_Sans/static/NunitoSans_10pt-Bold.ttf differ
diff --git a/design/fonts/Nunito_Sans/static/NunitoSans_10pt-SemiBold.ttf b/design/fonts/Nunito_Sans/static/NunitoSans_10pt-SemiBold.ttf
new file mode 100644
index 0000000000000000000000000000000000000000..9ebc876390c80c7b31dbddeeeb5b1e69bc19aacc
Binary files /dev/null and b/design/fonts/Nunito_Sans/static/NunitoSans_10pt-SemiBold.ttf differ
diff --git a/design/hydrosystems.html b/design/hydrosystems.html
new file mode 100644
index 0000000000000000000000000000000000000000..5e2b6b916c0aed576fec700bbd3a2e29ac50706d
--- /dev/null
+++ b/design/hydrosystems.html
@@ -0,0 +1,87 @@
+<!DOCTYPE html>
+<html lang="en">
+
+ <head>
+ <meta charset="utf-8">
+ <meta name="viewport" content="width=device-width, initial-scale=1">
+ <meta name="description" content="">
+ <meta name="author" content="">
+ <title>Hydrosystems - VIS Studies</title>
+ <link rel="stylesheet" href="style/normalize.css">
+ <link rel="stylesheet" href="style/style.css">
+ </head>
+
+ <body>
+
+ <nav>
+ <div class="nav__logo"><a class="nav__logo-link" href="index.html"><img class="ufz_logo" src="img/logo.jpg"></a></div>
+ <div class="hamburger__menu" onclick="hamburgerToX(this); showMenu('mainMenu')">
+ <div class="hamburger__animation" id="hamburgerAni">
+ <div class="bar1"></div>
+ <div class="bar2"></div>
+ <div class="bar3"></div>
+ </div>
+ </div>
+ <ul id="mainMenu" class="hide__nav nav__menulist">
+ <li class="nav__item"><a href="index.html#projects" class="nav__link">Projects</a></li>
+ <li class="nav__item"><a href="index.html#data_integration" class="nav__link">Data integration</a></li>
+ <li class="nav__item"><a href="index.html#work" class="nav__link">The way we work</a></li>
+ <li class="nav__item"><a href="index.html#team" class="nav__link">Team</a></li>
+ <li class="nav__item"><a href="index.html#publications" class="nav__link">Publications</a></li>
+ </ul>
+ </nav>
+
+ <header class="header__no-img">
+ <h1 class="header__font-color--dark">Hydrosystems Projects</h1>
+ <p class="header__subtitle header__font-color--dark">at the Visualization Center TESSIN VISLab</p>
+ </header>
+
+ <main>
+
+ <div class="introduction__box">
+ <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Eget mi proin sed libero enim sed faucibus turpis. Arcu dictum varius duis at. Pellentesque dignissim enim sit amet venenatis urna. Adipiscing tristique risus nec feugiat in fermentum.</p>
+ </div>
+
+ <section class="section__bg-color--lightgray">
+ <h2>MOSES-Müglitz: Monitoring and Modelling Campaign</h2>
+ <div class="h2__underline"></div>
+ <!-- swap img for slideshow -->
+ <div class="slideshow__box"><img class="slideshow__img" src="img/pr_moses.jpg"></div>
+ <p class="p__padding-left">The hydrological study in the Müglitz catchment is part of the MOSES initiative (<a href="https://www.ufz.de/moses">Modular Observation Solutions for Earth Systems</a>, coordinated by UFZ) investigating the impact extreme meteorological events on local hydrological processes. The presented visualization study is also a result of a close collaboration of the ESM and Digital Earth initiatives combining the expertise in monitoring and modelling environmental processes in a Virtual Reality framework.</p>
+ <p class="p__padding-left"><b>Project Links</b></p>
+ <p class="p__padding-left"><a href="https://www.ufz.de/moses">MOSES</a>, <a href="https://www.esm-project.net/">ESM</a>, <a href="https://www.digitalearth-hgf.de/">Digital Earth</a></p>
+ <p class="p__padding-left"><b>Videos</b></p>
+ <p class="p__padding-left"><a href="https://www.youtube.com/watch?v=plPEtkkR0pQ">Virtual Environment Presentation</a>, <a href="https://www.youtube.com/watch?v=iIRBpXOWuPg&t=2716s">Presentation</a></p>
+ <p class="p__padding-left"><b>Publications</b></p>
+ <p class="p__padding-left">K Rink, Ö O Şen, et al.: A Virtual Geographic Environment for the Exploration of Hydro-Meteorological Extremes. <a hre="https://diglib.eg.org/bitstream/handle/10.2312/envirvis20211084/051-059.pdf?sequence=1&isAllowed=y">Full text</a></p>
+ <p class="p__padding-left">K Rink, Ö O Şen, et al. (2022): An Environmental Exploration System for Visual Scenario Analysis of Regional Hydro-Meteorological Systems Comput Graph 103, pages 192-200. <a href="https://www.sciencedirect.com/science/article/abs/pii/S0097849322000309">Full text</a></p>
+ </section>
+
+ <section class="section__bg-color--lightgray">
+ <h2>Monitoring and Modelling in Large River-Lake Systems</h2>
+ <div class="h2__underline"></div>
+ <!-- swap img for slideshow -->
+ <div class="slideshow__box"><img class="slideshow__img" src="img/pr_monitoring.jpg"></div>
+ <p class="p__padding-left">Virtual geographic environments for catchments of rivers or lakes, combining a wide range of 2D and 3D observation data sets with simulation resultsa for holistic analysis of water and solute dynamics.</p>
+ <p class="p__padding-left"><b>Project Link</b></p>
+ <p class="p__padding-left"><a href="">A modelling platform prototype for environmental systems</a></p>
+ <p class="p__padding-left"><b>Video</b></p>
+ <p class="p__padding-left"><a href="https://www.youtube.com/watch?v=7r282lIGsHk">Poyang Lake Basin - Virtual Geographic Environment</a></p>
+ <p class="p__padding-left"><b>Publications</b></p>
+ <p class="p__padding-left">K Rink, E Nixdorf, et al.: A Virtual Geographic Environment for Multi-Compartment Water and Solute Dynamics in Large Catchments. <a href="http://dx.doi.org/10.1016/j.jhydrol.2019.124507">Full text</a></p>
+ <p class="p__padding-left">C Yan, K Rink et al.: Virtual geographical environment-based environmental information system for Poyang Lake Basin. <a href="http://dx.doi.org/10.1007/978-3-319-97725-6_18">Full text</a></p>
+ </section>
+
+
+ </main>
+
+ <footer>
+ <p>© 2023 Lorem Ipsum.</p>
+ <p><a href="">Privacy policy</a> | <a href="">Legal statements/Impressum</a> | <a href="">Contact</a></p>
+ </footer>
+
+ <script src="script.js"></script>
+
+ </body>
+
+</html>
\ No newline at end of file
diff --git a/design/img/header-bg.jpg b/design/img/header-bg.jpg
new file mode 100644
index 0000000000000000000000000000000000000000..ae7e00fa6b469d76e484c9876687323c8d158bef
Binary files /dev/null and b/design/img/header-bg.jpg differ
diff --git a/design/img/logo.jpg b/design/img/logo.jpg
new file mode 100644
index 0000000000000000000000000000000000000000..6ca5f45d5385cd2530b41d3b9873defcbd512efa
Binary files /dev/null and b/design/img/logo.jpg differ
diff --git a/design/img/pr_monitoring.jpg b/design/img/pr_monitoring.jpg
new file mode 100644
index 0000000000000000000000000000000000000000..4235f49666ac936cb9849f615685e4d7453d84fa
Binary files /dev/null and b/design/img/pr_monitoring.jpg differ
diff --git a/design/img/pr_moses.jpg b/design/img/pr_moses.jpg
new file mode 100644
index 0000000000000000000000000000000000000000..ea27f4ef4f9b0068de5983508c6e39019ff7cab7
Binary files /dev/null and b/design/img/pr_moses.jpg differ
diff --git a/design/img/projects_overview_climate.jpg b/design/img/projects_overview_climate.jpg
new file mode 100644
index 0000000000000000000000000000000000000000..876312303aa4b1b9c3828c69788b21cc70866c9b
Binary files /dev/null and b/design/img/projects_overview_climate.jpg differ
diff --git a/design/img/projects_overview_energy.jpg b/design/img/projects_overview_energy.jpg
new file mode 100644
index 0000000000000000000000000000000000000000..718a6fd2f7910271dd69634a5b3ab71fa7d84b06
Binary files /dev/null and b/design/img/projects_overview_energy.jpg differ
diff --git a/design/img/projects_overview_hydro.jpg b/design/img/projects_overview_hydro.jpg
new file mode 100644
index 0000000000000000000000000000000000000000..edc08c54118f152d14363e6aa8622127a72b3170
Binary files /dev/null and b/design/img/projects_overview_hydro.jpg differ
diff --git a/design/img/projects_overview_urban.jpg b/design/img/projects_overview_urban.jpg
new file mode 100644
index 0000000000000000000000000000000000000000..598c00b8ae8f7ca50e1060deb02431f2c87c0cb0
Binary files /dev/null and b/design/img/projects_overview_urban.jpg differ
diff --git a/design/img/team1.jpg b/design/img/team1.jpg
new file mode 100644
index 0000000000000000000000000000000000000000..7e61cef1823f05da5d6f1588107c1fec1f24999f
Binary files /dev/null and b/design/img/team1.jpg differ
diff --git a/design/img/team2.jpg b/design/img/team2.jpg
new file mode 100644
index 0000000000000000000000000000000000000000..3af1814570942a75bcb3ebb63c18a0f33ce1551b
Binary files /dev/null and b/design/img/team2.jpg differ
diff --git a/design/img/team3.jpg b/design/img/team3.jpg
new file mode 100644
index 0000000000000000000000000000000000000000..cc02a26507183f4e570ba2df6036c82ddcc16830
Binary files /dev/null and b/design/img/team3.jpg differ
diff --git a/design/index.html b/design/index.html
new file mode 100644
index 0000000000000000000000000000000000000000..28f150c207b2b56eb50409f82dd02d992f0678c1
--- /dev/null
+++ b/design/index.html
@@ -0,0 +1,145 @@
+<!DOCTYPE html>
+<html lang="en">
+
+ <head>
+ <meta charset="utf-8">
+ <meta name="viewport" content="width=device-width, initial-scale=1">
+ <meta name="description" content="">
+ <meta name="author" content="">
+ <title>VIS Studies</title>
+ <link rel="stylesheet" href="style/normalize.css">
+ <link rel="stylesheet" href="style/style.css">
+ </head>
+
+ <body>
+
+ <nav>
+ <div class="nav__logo"><a class="nav__logo-link" href="#"><img class="ufz_logo" src="img/logo.jpg"></a></div>
+ <div class="hamburger__menu" onclick="hamburgerToX(this); showMenu('mainMenu')">
+ <div class="hamburger__animation" id="hamburgerAni">
+ <div class="bar1"></div>
+ <div class="bar2"></div>
+ <div class="bar3"></div>
+ </div>
+ </div>
+ <ul id="mainMenu" class="hide__nav nav__menulist">
+ <li class="nav__item"><a href="#projects" class="nav__link">Projects</a></li>
+ <li class="nav__item"><a href="#data_integration" class="nav__link">Data integration</a></li>
+ <li class="nav__item"><a href="#work" class="nav__link">The way we work</a></li>
+ <li class="nav__item"><a href="#team" class="nav__link">Team</a></li>
+ <li class="nav__item"><a href="#publications" class="nav__link">Publications</a></li>
+ </ul>
+ </nav>
+
+ <header class="header__with-img">
+ <h1 class="header__font-color--white">Visualization Studies</h1>
+ <p class="header__subtitle header__font-color--white">Welcome to the Visualization Center TESSIN VISLab</p>
+ </header>
+
+ <main>
+
+ <div class="introduction__box">
+ <p>The Visualization Center TESSIN VISLab (Vislab) allows scientists with different backgrounds to explore and analyse complex and heterogeneous spatial data sets. A large interactive stereoscopic projection screen is used to dive right into the displayed environmental data sets thus helping in understanding scientific questions and challenges. The Vislab fosters knowledge transfer in the scientific community as well as among the general public.</p>
+ </div>
+
+ <section id="projects" class="section__bg-color--lightgray">
+ <h2>Projects</h2>
+ <div class="h2__underline"></div>
+ <p class="p__padding-left">Vislab projects cover a large range of environmental research fields in terrestrial systems such as weather phenomena in the atmosphere, urban systems including various infrastructures such as water supply and waste water management, heating and cooling supply based on ground source heat pumps and geothermal systems, energy resources, storage and waste deposition in the subsurface, surface processes including land use and hydrosystems.</p>
+ <div class="project-category__box">
+ <img class="project-category__info--img" src="img/projects_overview_hydro.jpg" alt="" title="">
+ <div class="project-category__info--textbox">
+ <h3>Hydrosystems</h3>
+ <p class="project-category__info--text">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Eget mi proin sed libero enim sed faucibus turpis. Arcu dictum varius duis at. Pellentesque dignissim enim sit amet venenatis urna. Adipiscing tristique risus nec feugiat in fermentum.</p>
+ <p><a href="">Hydrosystems projects</a></p>
+ </div>
+ </div>
+ <div class="project-category__box">
+ <img class="project-category__info--img" src="img/projects_overview_urban.jpg" alt="" title="">
+ <div class="project-category__info--textbox">
+ <h3>Urban Systems</h3>
+ <p class="project-category__info--text">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Eget mi proin sed libero enim sed faucibus turpis. Arcu dictum varius duis at. Pellentesque dignissim enim sit amet venenatis urna. Adipiscing tristique risus nec feugiat in fermentum.</p>
+ <p><a href="">Urban systems projects</a></p>
+ </div>
+ </div>
+ <div class="project-category__box">
+ <img class="project-category__info--img" src="img/projects_overview_energy.jpg" alt="" title="">
+ <div class="project-category__info--textbox">
+ <h3>Energy Systems & Geotechnics</h3>
+ <p class="project-category__info--text">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Eget mi proin sed libero enim sed faucibus turpis. Arcu dictum varius duis at. Pellentesque dignissim enim sit amet venenatis urna. Adipiscing tristique risus nec feugiat in fermentum.</p>
+ <p><a href="">Energy systems & Geotechnics projects</a></p>
+ </div>
+ </div>
+ <div class="project-category__box">
+ <img class="project-category__info--img" src="img/projects_overview_climate.jpg" alt="" title="">
+ <div class="project-category__info--textbox">
+ <h3>Climate & Eco Systems</h3>
+ <p class="project-category__info--text">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Eget mi proin sed libero enim sed faucibus turpis. Arcu dictum varius duis at. Pellentesque dignissim enim sit amet venenatis urna. Adipiscing tristique risus nec feugiat in fermentum.</p>
+ <p><a href="">Climate & Eco systems projects</a></p>
+ </div>
+ </div>
+ </section>
+
+ <section id="data_integration" class="section__bg-color--lightblue">
+ <h2>Data Integration</h2>
+ <div class="h2__underline"></div>
+ <p class="p__padding-left">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Vestibulum sed arcu non odio euismod. Nibh nisl condimentum id venenatis a condimentum vitae sapien. In ornare quam viverra orci sagittis eu volutpat. Nibh praesent tristique magna sit amet purus gravida quis. Sit amet nulla facilisi morbi tempus iaculis. Bibendum arcu vitae elementum curabitur vitae nunc sed velit. Arcu bibendum at varius vel pharetra vel turpis. Ultrices tincidunt arcu non sodales neque. Augue ut lectus arcu bibendum at varius vel.</p>
+ <p class="p__padding-left"><a href="">Read more about data integration</a></p>
+ </section>
+
+ <section id="work" class="section__bg-color--lightgray">
+ <h2>The way we work</h2>
+ <div class="h2__underline"></div>
+ <p class="p__padding-left">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Eget mi proin sed libero enim sed faucibus turpis. Arcu dictum varius duis at. Pellentesque dignissim enim sit amet venenatis urna. Dictum varius duis at consectetur lorem donec massa sapien. Volutpat consequat mauris nunc congue nisi vitae suscipit. Sollicitudin nibh sit amet commodo nulla facilisi nullam vehicula ipsum. Vestibulum sed arcu non odio euismod. Nibh nisl condimentum id venenatis a condimentum vitae sapien. In ornare quam viverra orci sagittis eu volutpat. Nibh praesent tristique magna sit amet purus gravida quis.</p>
+ <p class="p__padding-left"><a href="">Read more about how we work</a></p>
+ </section>
+
+ <section id="team" class="section__bg-color--lightblue">
+ <h2>Team</h2>
+ <div class="h2__underline"></div>
+ <p class="p__padding-left">These are the voyages of the Starship Enterprise. Its continuing mission, to explore strange new worlds, to seek out new life and new civilizations, to boldly go where no one has gone before. We need to neutralize the homing signal. Each unit has total environmental control, gravity, temperature, atmosphere, light, in a protective field.</p>
+ <div class="team__box">
+ <div class="team__member">
+ <img class="team__member--photo" src="img/team1.jpg" alt="" title=""></img>
+ <p class="team__member--name">Team Member</p>
+ <p class="team__member--info">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Sit amet nulla facilisi morbi tempus iaculis. Bibendum arcu vitae elementum curabitur vitae nunc sed velit.</p>
+ <p class="team__member--contact"><a href="">Contact</a></p>
+ </div>
+ <div class="team__member">
+ <img class="team__member--photo" src="img/team2.jpg" alt="" title=""></img>
+ <p class="team__member--name">Team Member</p>
+ <p class="team__member--info">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Sit amet nulla facilisi morbi tempus iaculis. Bibendum arcu vitae elementum curabitur vitae nunc sed velit.</p>
+ <p class="team__member--contact"><a href="">Contact</a></p>
+ </div>
+ <div class="team__member">
+ <img class="team__member--photo" src="img/team3.jpg" alt="" title=""></img>
+ <p class="team__member--name">Team Member</p>
+ <p class="team__member--info">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Sit amet nulla facilisi morbi tempus iaculis. Bibendum arcu vitae elementum curabitur vitae nunc sed velit.</p>
+ <p class="team__member--contact"><a href="">Contact</a></p>
+ </div>
+ </div>
+ </section>
+
+ <section id="publications" class="section__bg-color--lightgray">
+ <h2>Recent Publications</h2>
+ <div class="h2__underline"></div>
+ <p class="p__padding-left">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Eget mi proin sed libero enim sed faucibus turpis.</p>
+ <p class="p__padding-left">Rink, K., Şen, Ö. O., Schwanebeck, M., Hartmann, T., Gasanzade, F., Nordbeck, J., Bauer, S., Kolditz, O. (2022): <em>An Environmental Information System for the Exploration of Energy Systems</em>. Geotherm. Energ. 10 (art. 4). <a href="">Full text</a></p>
+ <p class="p__padding-left">Rink, K., Şen, Ö. O., Hannemann, M., Ködel, U., Nixdorf, E., Weber, U., Werban, U., Schrön, M., Kalbacher, T, Kolditz, O. (2022): <em>An Environmental Exploration System for Visual Scenario Analysis of Regional Hydro-Meteorological Systems</em>. Comput. Graph. 103, 192-200. <a href="">Full text</a></p>
+ <p class="p__padding-left">Ziefle, G., Cajuhi, T., Graebling, N., Jaeggi, D., Kolditz, O., Kunz, H., Maßmann, J., Rink, K. (2022): <em>Multi-disciplinary investigation of the hydraulic-mechanically driven convergence behavior: CD-A twin niches in the Mont Terri Rock Laboratory during the first year</em>. Geomechanics for Energy and the Environment. <a href="">Full text</a></p>
+ <p class="p__padding-left">Rink, K., Şen, Ö. O., Hannemann, M., Ködel, U., Nixdorf, E., Weber, U., Werban, U., Schrön, M., Kalbacher, T, Kolditz, O. (2022): <em>A Virtual Geographic Environment for the Exploration of Hydro-Meteorological Extremes</em>. Proc of EuroVis Workshop on Visualisation in Environmental Sciences. <a href="">Full text</a></p>
+ <p class="p__padding-left"><a href="">See more publications</a></p>
+ </section>
+
+ </main>
+
+ <footer>
+ <p>© 2023 Lorem Ipsum.</p>
+ <p><a href="">Privacy policy</a> | <a href="">Legal statements/Impressum</a> | <a href="">Contact</a></p>
+ </footer>
+
+ <script src="script.js"></script>
+
+ </body>
+
+</html>
\ No newline at end of file
diff --git a/design/info.md b/design/info.md
new file mode 100644
index 0000000000000000000000000000000000000000..f2af5e6596451ca57968c7b20481c2edeae952b9
--- /dev/null
+++ b/design/info.md
@@ -0,0 +1,84 @@
+# Info-Sheet
+
+This document provides some notes and informations concerning the VIS Website design.
+
+The current design is not a finished product. It is rather a starting point for how the website could look like in the end.
+
+## Colors
+
+Taken from UFZ Corporate Design. (Possible Transparency according to CD: 80% / 40% / 20%)
+
+- Helmholtz-Blue: hsla(206, 100%, 31%, 1) / #005aa0
+ used for h2 underline and links
+
+- Gray: hsla(195, 10%, 39%, 1) / #5a696e
+ used for footer bg-color (transparency 40%)
+
+- Logo-Gradient:
+ 1. Aqua-blue: hsla(190, 85%, 48%, 1) / #13c1e3
+ 1. Green: hsla(101,47%,49%,1) / #69b843
+
+- Department-Orange: hsla(36, 100%, 59%, 1) / #ffac2e
+ used for hover on link
+
+Other colors:
+
+- White: hsla(0, 0%, 100%, 1)
+
+- Lightgray: hsla(0, 0%, 96%, 1)
+ used for possible section bg-color
+
+- Soft-black: hsla(206, 10%, 14%, 1)
+ used for text, hamburger menu bars
+
+- Kind-of-UFZ-Blue: hsla(206, 91%, 31%, 1)
+ used for visited links
+
+- Dark-Department-orange: hsla(240, 100%, 50%, 1)
+ used for active link
+
+- Shadow-Black: hsla(0, 0%, 25%, 1)
+ used for hamburger menu box-shadow
+
+- Lightblue: hsla(190, 85%, 48%, 0.12)
+ used for possible section bg-color
+
+- Lightgreen: hsla(101, 47%, 49%, 0.15)
+ used for possible section bg-color
+
+## Typography
+
+Due to privacy reasons all fonts should be hosted locally.
+
+Fonts:
+ Headers, team names: "Kanit"
+ Paragraphs, header subtitle: "Nunito Sans"
+
+Font-weight:
+ h1: 700
+ h2-h5, team names: 600
+ navigation links: 500
+ other text: 400
+
+Font size:
+ Based on 16px in mobile view, 18px in desktop view.
+ Scale: 1.250 (Major Third)
+
+### Links and tools used
+
+Header photo by Pawel Czerwinski auf Unsplash: https://unsplash.com/de/fotos/eybM9n4yrpE
+
+Team pug photos by charlesdeluvio on Unsplash: https://unsplash.com/@charlesdeluvio
+ - https://unsplash.com/de/fotos/DziZIYOGAHc
+ - https://unsplash.com/de/fotos/Mv9hjnEUHR4
+ - https://unsplash.com/de/fotos/K4mSJ7kc0As
+
+Impressum-Generator Recht24: https://www.e-recht24.de/
+
+Matomo Analytics: https://matomo.org/
+
+Color Code Converter: https://web-toolbox.dev/en/tools/color-converter
+
+Typography scale: https://typescale.com
+
+Autoprefixer CSS online: https://autoprefixer.github.io
\ No newline at end of file
diff --git a/design/info.txt b/design/info.txt
new file mode 100644
index 0000000000000000000000000000000000000000..6db8b8f8d68aebacc5be0485b21a2eb78ff5e135
--- /dev/null
+++ b/design/info.txt
@@ -0,0 +1,83 @@
+# Info-Sheet
+
+This document provides some notes and informations concerning the VIS Website design.
+
+The current design is not a finished product. It is rather a starting point for how the website could look like in the end.
+
+## Colors
+
+Taken from UFZ Corporate Design. (Possible Transparency according to CD: 80% / 40% / 20%)
+
+- Helmholtz-Blue: hsla(206, 100%, 31%, 1) / #005aa0
+ used for h2 underline and links
+
+- Gray: hsla(195, 10%, 39%, 1) / #5a696e
+ used for footer bg-color (transparency 40%)
+
+- Logo-Gradient:
+ 1. Aqua-blue: hsla(190, 85%, 48%, 1) / #13c1e3
+ 1. Green: hsla(101,47%,49%,1) / #69b843
+
+- Department-Orange: hsla(36, 100%, 59%, 1) / #ffac2e
+ used for hover on link
+
+Other colors:
+
+- White: hsla(0, 0%, 100%, 1)
+
+- Lightgray: hsla(0, 0%, 96%, 1)
+ used for possible section bg-color
+
+- Soft-black: hsla(206, 10%, 14%, 1)
+ used for text, hamburger menu bars
+
+- Kind-of-UFZ-Blue: hsla(206, 91%, 31%, 1)
+ used for visited links
+
+- Dark-Department-orange: hsla(240, 100%, 50%, 1)
+ used for active link
+
+- Shadow-Black: hsla(0, 0%, 25%, 1)
+ used for hamburger menu box-shadow
+
+- Lightblue: hsla(190, 85%, 48%, 0.12)
+ used for possible section bg-color
+
+- Lightgreen: hsla(101, 47%, 49%, 0.15)
+ used for possible section bg-color
+
+## Typography
+
+Due to privacy reasons all fonts should be hosted locally.
+
+Fonts:
+ Headers, team names: "Kanit"
+ Paragraphs, header subtitle: "Nunito Sans"
+
+Font-weight:
+ h1: 700
+ h2-h5, team names: 600
+ navigation links: 500
+ other text: 400
+
+Font size:
+ Based on 16px in mobile view, 18px in desktop view.
+ Scale: 1.250 (Major Third)
+
+### Links and tools used
+
+Header photo by Pawel Czerwinski auf Unsplash: https://unsplash.com/de/fotos/eybM9n4yrpE
+
+Team pug photos by charlesdeluvio on Unsplash: https://unsplash.com/@charlesdeluvio (https://unsplash.com/de/fotos/DziZIYOGAHc, https://unsplash.com/de/fotos/Mv9hjnEUHR4, https://unsplash.com/de/fotos/K4mSJ7kc0As)
+
+Impressum-Generator Recht24: https://www.e-recht24.de/
+
+Matomo Analytics: https://matomo.org/
+
+## Used Tools
+
+Color Code Converter: https://web-toolbox.dev/en/tools/color-converter
+
+Typography scale: https://typescale.com
+
+Autoprefixer CSS online: https://autoprefixer.github.io
\ No newline at end of file
diff --git a/design/script.js b/design/script.js
new file mode 100644
index 0000000000000000000000000000000000000000..db569227ebdac6eda49b6c99568626d4799a438a
--- /dev/null
+++ b/design/script.js
@@ -0,0 +1,10 @@
+//Change Hamburger to X with onclick
+function hamburgerToX(x) {
+ x.classList.toggle("change");
+}
+
+//Show mobile menu
+function showMenu() {
+ var y = document.querySelector('#mainMenu');
+ y.classList.toggle("hide__nav");
+}
\ No newline at end of file
diff --git a/design/style/normalize.css b/design/style/normalize.css
new file mode 100644
index 0000000000000000000000000000000000000000..c46998948fb011776a50634b88887bf662736a0c
--- /dev/null
+++ b/design/style/normalize.css
@@ -0,0 +1,349 @@
+/*! normalize.css v8.0.1 | MIT License | github.com/necolas/normalize.css */
+
+/* Document
+ ========================================================================== */
+
+/**
+ * 1. Correct the line height in all browsers.
+ * 2. Prevent adjustments of font size after orientation changes in iOS.
+ */
+
+ html {
+ line-height: 1.15; /* 1 */
+ -webkit-text-size-adjust: 100%; /* 2 */
+}
+
+/* Sections
+ ========================================================================== */
+
+/**
+ * Remove the margin in all browsers.
+ */
+
+body {
+ margin: 0;
+}
+
+/**
+ * Render the `main` element consistently in IE.
+ */
+
+main {
+ display: block;
+}
+
+/**
+ * Correct the font size and margin on `h1` elements within `section` and
+ * `article` contexts in Chrome, Firefox, and Safari.
+ */
+
+h1 {
+ font-size: 2em;
+ margin: 0.67em 0;
+}
+
+/* Grouping content
+ ========================================================================== */
+
+/**
+ * 1. Add the correct box sizing in Firefox.
+ * 2. Show the overflow in Edge and IE.
+ */
+
+hr {
+ box-sizing: content-box; /* 1 */
+ height: 0; /* 1 */
+ overflow: visible; /* 2 */
+}
+
+/**
+ * 1. Correct the inheritance and scaling of font size in all browsers.
+ * 2. Correct the odd `em` font sizing in all browsers.
+ */
+
+pre {
+ font-family: monospace, monospace; /* 1 */
+ font-size: 1em; /* 2 */
+}
+
+/* Text-level semantics
+ ========================================================================== */
+
+/**
+ * Remove the gray background on active links in IE 10.
+ */
+
+a {
+ background-color: transparent;
+}
+
+/**
+ * 1. Remove the bottom border in Chrome 57-
+ * 2. Add the correct text decoration in Chrome, Edge, IE, Opera, and Safari.
+ */
+
+abbr[title] {
+ border-bottom: none; /* 1 */
+ text-decoration: underline; /* 2 */
+ text-decoration: underline dotted; /* 2 */
+}
+
+/**
+ * Add the correct font weight in Chrome, Edge, and Safari.
+ */
+
+b,
+strong {
+ font-weight: bolder;
+}
+
+/**
+ * 1. Correct the inheritance and scaling of font size in all browsers.
+ * 2. Correct the odd `em` font sizing in all browsers.
+ */
+
+code,
+kbd,
+samp {
+ font-family: monospace, monospace; /* 1 */
+ font-size: 1em; /* 2 */
+}
+
+/**
+ * Add the correct font size in all browsers.
+ */
+
+small {
+ font-size: 80%;
+}
+
+/**
+ * Prevent `sub` and `sup` elements from affecting the line height in
+ * all browsers.
+ */
+
+sub,
+sup {
+ font-size: 75%;
+ line-height: 0;
+ position: relative;
+ vertical-align: baseline;
+}
+
+sub {
+ bottom: -0.25em;
+}
+
+sup {
+ top: -0.5em;
+}
+
+/* Embedded content
+ ========================================================================== */
+
+/**
+ * Remove the border on images inside links in IE 10.
+ */
+
+img {
+ border-style: none;
+}
+
+/* Forms
+ ========================================================================== */
+
+/**
+ * 1. Change the font styles in all browsers.
+ * 2. Remove the margin in Firefox and Safari.
+ */
+
+button,
+input,
+optgroup,
+select,
+textarea {
+ font-family: inherit; /* 1 */
+ font-size: 100%; /* 1 */
+ line-height: 1.15; /* 1 */
+ margin: 0; /* 2 */
+}
+
+/**
+ * Show the overflow in IE.
+ * 1. Show the overflow in Edge.
+ */
+
+button,
+input { /* 1 */
+ overflow: visible;
+}
+
+/**
+ * Remove the inheritance of text transform in Edge, Firefox, and IE.
+ * 1. Remove the inheritance of text transform in Firefox.
+ */
+
+button,
+select { /* 1 */
+ text-transform: none;
+}
+
+/**
+ * Correct the inability to style clickable types in iOS and Safari.
+ */
+
+button,
+[type="button"],
+[type="reset"],
+[type="submit"] {
+ -webkit-appearance: button;
+}
+
+/**
+ * Remove the inner border and padding in Firefox.
+ */
+
+button::-moz-focus-inner,
+[type="button"]::-moz-focus-inner,
+[type="reset"]::-moz-focus-inner,
+[type="submit"]::-moz-focus-inner {
+ border-style: none;
+ padding: 0;
+}
+
+/**
+ * Restore the focus styles unset by the previous rule.
+ */
+
+button:-moz-focusring,
+[type="button"]:-moz-focusring,
+[type="reset"]:-moz-focusring,
+[type="submit"]:-moz-focusring {
+ outline: 1px dotted ButtonText;
+}
+
+/**
+ * Correct the padding in Firefox.
+ */
+
+fieldset {
+ padding: 0.35em 0.75em 0.625em;
+}
+
+/**
+ * 1. Correct the text wrapping in Edge and IE.
+ * 2. Correct the color inheritance from `fieldset` elements in IE.
+ * 3. Remove the padding so developers are not caught out when they zero out
+ * `fieldset` elements in all browsers.
+ */
+
+legend {
+ box-sizing: border-box; /* 1 */
+ color: inherit; /* 2 */
+ display: table; /* 1 */
+ max-width: 100%; /* 1 */
+ padding: 0; /* 3 */
+ white-space: normal; /* 1 */
+}
+
+/**
+ * Add the correct vertical alignment in Chrome, Firefox, and Opera.
+ */
+
+progress {
+ vertical-align: baseline;
+}
+
+/**
+ * Remove the default vertical scrollbar in IE 10+.
+ */
+
+textarea {
+ overflow: auto;
+}
+
+/**
+ * 1. Add the correct box sizing in IE 10.
+ * 2. Remove the padding in IE 10.
+ */
+
+[type="checkbox"],
+[type="radio"] {
+ box-sizing: border-box; /* 1 */
+ padding: 0; /* 2 */
+}
+
+/**
+ * Correct the cursor style of increment and decrement buttons in Chrome.
+ */
+
+[type="number"]::-webkit-inner-spin-button,
+[type="number"]::-webkit-outer-spin-button {
+ height: auto;
+}
+
+/**
+ * 1. Correct the odd appearance in Chrome and Safari.
+ * 2. Correct the outline style in Safari.
+ */
+
+[type="search"] {
+ -webkit-appearance: textfield; /* 1 */
+ outline-offset: -2px; /* 2 */
+}
+
+/**
+ * Remove the inner padding in Chrome and Safari on macOS.
+ */
+
+[type="search"]::-webkit-search-decoration {
+ -webkit-appearance: none;
+}
+
+/**
+ * 1. Correct the inability to style clickable types in iOS and Safari.
+ * 2. Change font properties to `inherit` in Safari.
+ */
+
+::-webkit-file-upload-button {
+ -webkit-appearance: button; /* 1 */
+ font: inherit; /* 2 */
+}
+
+/* Interactive
+ ========================================================================== */
+
+/*
+ * Add the correct display in Edge, IE 10+, and Firefox.
+ */
+
+details {
+ display: block;
+}
+
+/*
+ * Add the correct display in all browsers.
+ */
+
+summary {
+ display: list-item;
+}
+
+/* Misc
+ ========================================================================== */
+
+/**
+ * Add the correct display in IE 10+.
+ */
+
+template {
+ display: none;
+}
+
+/**
+ * Add the correct display in IE 10.
+ */
+
+[hidden] {
+ display: none;
+}
diff --git a/design/style/style.css b/design/style/style.css
new file mode 100644
index 0000000000000000000000000000000000000000..9814e07e6dab1a540916fe5d5e4bdcb0e9e437af
--- /dev/null
+++ b/design/style/style.css
@@ -0,0 +1,481 @@
+@font-face {
+ font-family: "Kanit";
+ src: url(../fonts/Kanit/Kanit-Bold.ttf) format("truetype");
+ font-weight: 700;
+ font-display: swap;
+}
+
+@font-face {
+ font-family: "Kanit";
+ src: url(../fonts/Kanit/Kanit-SemiBold.ttf) format("truetype");
+ font-weight: 600;
+ font-display: swap;
+}
+
+@font-face {
+ font-family: "Nunito Sans";
+ src: url(../fonts/nunito_sans/NunitoSans-VariableFont_YTLC,opsz,wdth,wght.ttf) format("truetype");
+ font-display: swap;
+}
+
+html {
+ font-size: 100%; /* 16px */
+ margin: 0;
+ background-color: hsla(0,0%,96%,1);
+}
+
+body {
+ margin: 0 auto;
+ max-width: 1920px;
+ background: hsla(0,0%,100%,1);
+ font-family: 'Nunito Sans', Arial, Helvetica, sans-serif;
+ font-weight: 400;
+ line-height: 1.75;
+ color: hsla(206,10%,14%,1);
+}
+
+p {
+ margin-bottom: 1rem;
+}
+
+h1, h2, h3, h4, h5, .team__member--name {
+ font-family: 'Kanit', Arial, Helvetica, sans-serif;
+ line-height: 1.3;
+}
+
+h1 {
+ margin-top: 0;
+ margin-bottom: 18px;
+ font-size: 3.052rem; /* 54.93px */
+ font-weight: 700;
+}
+
+h2 {
+ font-size: 2.441rem; /* 43.95px */
+ font-weight: 600;
+ margin: 0 0 0.5rem 0;
+}
+
+.h2__underline {
+ height: 2px;
+ background-color: hsla(206, 100%, 31%, 1); /* Helmholtz-Blue */
+ max-width: 320px;
+}
+
+h3 {
+ font-size: 1.953rem; /* 35.16px */
+ font-weight: 600;
+ margin-top: 0;
+ margin-bottom: 18px;
+}
+
+h4 {
+ font-size: 1.563rem; /* 28.13px */
+ font-weight: 600;
+}
+
+h5 {
+ font-size: 1.25rem; /* 22.50px */
+ font-weight: 600;
+}
+
+small, .text_small {
+ font-size: 0.8rem; /* 14.40px */
+}
+
+.header__subtitle {
+ font-size: 1.25rem; /* 22.50px */
+ margin-top: 0;
+ font-family: 'Nunito Sans', Arial, Helvetica, sans-serif;
+}
+
+.header__font-color--white {
+ color: hsla(0,0%,100%,1);
+}
+
+.header__font-color--dark {
+ color: hsla(206,10%,14%,1);
+}
+
+a {
+ color: hsla(206, 100%, 31%, 1); /* Helmholtz-Blue */
+ transition: 0.12s ease-in-out;
+}
+
+a:visited {
+ color: hsla(206,91%,31%,1);
+}
+
+a:hover {
+ color: hsla(36, 100%, 59%, 1);
+}
+
+a:active {
+ color: hsla(36, 100%, 45%, 1);
+}
+
+/* Navigation: should be accessible at all times. Either make it stick when scrolling or add a "Back to top"-button floating on the bottom left. */
+
+nav {
+ background-color: hsla(0, 0%, 100%, 1);
+ border-bottom: 1px solid hsla(0,0%,96%,1);
+ display: -webkit-box;
+ display: -ms-flexbox;
+ display: flex;
+ -webkit-box-orient: horizontal;
+ -webkit-box-direction: normal;
+ -ms-flex-direction: row;
+ flex-direction: row;
+ -webkit-box-pack: justify;
+ -ms-flex-pack: justify;
+ justify-content: space-between;
+ -webkit-box-align: center;
+ -ms-flex-align: center;
+ align-items: center;
+}
+
+.hide__nav {
+ visibility: hidden;
+}
+
+.nav__menulist {
+ display: block;
+ list-style: none;
+ margin: 0;
+ padding: 80px 40px 40px 0;
+ position: absolute;
+ background-color: white;
+ z-index: 2;
+ text-align: right;
+ width: 200px;
+ height: auto;
+ top: 0;
+ right: 0;
+ -webkit-box-shadow: -6px 0px 10px 0px hsla(0,0%,25%,1);
+ box-shadow: -6px 0px 10px 0px hsla(0,0%,25%,1);
+}
+
+.nav__link {
+ display: inline-block;
+ height: 50px;
+ top: 200px;
+}
+
+/* In case of adding single pages, use the following class to highlight the active site in the navbar */
+
+/* .nav__link--active {
+ font-weight: 500;
+ text-decoration: underline;
+} */
+
+.ufz_logo {
+ height: 90px;
+ width: auto;
+}
+
+.nav__item {
+ margin: 0 0 0 40px;
+}
+
+.nav__link {
+ text-decoration: none;
+}
+
+.hamburger__menu {
+ display: -webkit-box;
+ display: -ms-flexbox;
+ display: flex;
+ -webkit-box-align: center;
+ -ms-flex-align: center;
+ align-items: center;
+ -webkit-box-orient: vertical;
+ -webkit-box-direction: normal;
+ -ms-flex-direction: column;
+ flex-direction: column;
+ margin-right: 40px;
+ z-index: 3;
+ cursor: pointer;
+ -webkit-user-select: none;
+ -moz-user-select: none;
+ -ms-user-select: none;
+ user-select: none;
+}
+
+.hamburger__animation {
+ text-align: center;
+ font-weight: 700;
+ font-size: 25px;
+ display: inline-block;
+}
+
+.bar1, .bar2, .bar3 {
+ width: 35px;
+ height: 3px;
+ background-color: hsla(206,10%,14%,1);
+ margin: 6px 0;
+ -webkit-transition: 0.4s;
+ -o-transition: 0.4s;
+ transition: 0.4s;
+}
+
+.change .bar1 {
+ -webkit-transform: rotate(-45deg) translate(-7px, 7px);
+ transform: rotate(-45deg) translate(-7px, 7px);
+}
+
+.change .bar2 {
+ opacity: 0;
+}
+
+.change .bar3 {
+ -webkit-transform: rotate(45deg) translate(-6px, -6px);
+ transform: rotate(45deg) translate(-6px, -6px);
+}
+
+header {
+ display: -webkit-box;
+ display: -ms-flexbox;
+ display: flex;
+ -webkit-box-pack: center;
+ -ms-flex-pack: center;
+ justify-content: center;
+ -webkit-box-align: center;
+ -ms-flex-align: center;
+ align-items: center;
+ -webkit-box-orient: vertical;
+ -webkit-box-direction: normal;
+ -ms-flex-direction: column;
+ flex-direction: column;
+ text-align: center;
+
+ margin-bottom: 80px;
+}
+
+.header__with-img {
+ height: 500px;
+ background-image: url("../img/header-bg.jpg");
+ background-color: hsla(72,71%,1%,1); /* make sure to use the main color of the header image */
+ background-position: center;
+ background-repeat: no-repeat;
+}
+
+.header__no-img {
+ height: 320px;
+ margin-bottom: 0;
+}
+
+main {
+ max-width: 1280px;
+ margin: 0 auto;
+ padding: 0 20px;
+}
+
+.introduction__box {
+ max-width: 900px;
+ margin: 0 auto 80px auto;
+ font-size: 1.111rem;
+}
+
+section {
+ margin-top: 40px;
+ padding: 40px;
+ border-radius: 12px; /* optional */
+}
+
+/* possible section background-colors */
+
+.section__bg-color--lightgray {
+ background-color: hsla(0,0%,96%,1);
+}
+
+.section__bg-color--lightblue {
+ background-color: hsla(190, 85%, 48%, 0.12);
+}
+
+.section__bg-color--lightgreen {
+ background-color: hsla(101, 47%, 49%, 0.15);
+}
+
+.p__padding-left {
+ padding-left: 40px;
+}
+
+.project-category__box {
+ display: -webkit-box;
+ display: -ms-flexbox;
+ display: flex;
+ -webkit-box-pack: left;
+ -ms-flex-pack: left;
+ justify-content: left;
+ -webkit-box-orient: vertical;
+ -webkit-box-direction: normal;
+ -ms-flex-direction: column;
+ flex-direction: column;
+ padding: 40px;
+ max-width: 550px; /* = width of project-category__info--img */
+ margin: 0 auto;
+}
+
+.project-category__info--img {
+ max-width: 550px;
+ max-height: 309px; /* 16:9 ratio */
+ padding-right: 40px;
+ margin-bottom: 40px;
+}
+
+.project-category__info--textbox {
+ -webkit-box-orient: vertical;
+ -webkit-box-direction: normal;
+ -ms-flex-direction: column;
+ flex-direction: column;
+}
+
+.project-category__info--text {
+ margin-top: 0;
+}
+
+.team__box {
+ display: -webkit-box;
+ display: -ms-flexbox;
+ display: flex;
+ -webkit-box-pack: justify;
+ -ms-flex-pack: justify;
+ justify-content: space-between;
+ -webkit-box-align: top;
+ -ms-flex-align: top;
+ align-items: top;
+ -webkit-box-orient: horizontal;
+ -webkit-box-direction: normal;
+ -ms-flex-direction: row;
+ flex-direction: row;
+ padding: 40px 40px 0 40px;
+ -ms-flex-wrap: wrap;
+ flex-wrap: wrap;
+}
+
+.team__member {
+ -webkit-box-orient: vertical;
+ -webkit-box-direction: normal;
+ -ms-flex-direction: column;
+ flex-direction: column;
+ max-width: 270px;
+}
+
+.team__member--photo {
+ width: 270px;
+ height: 360px;
+}
+
+.team__member--name {
+ weight: 600;
+ font-size: 1.563rem;
+ text-align: center;
+ margin-bottom: 0;
+}
+
+.team__member--info {
+ margin-top: 12px;
+}
+
+footer {
+ background-color: hsla(195, 10%, 39%, 0.4);
+ text-align: center;
+ overflow:auto;
+ margin-top: 40px;
+}
+
+.slideshow__box {
+ display: -webkit-box;
+ display: -ms-flexbox;
+ display: flex;
+ -webkit-box-pack: center;
+ -ms-flex-pack: center;
+ justify-content: center;
+ margin-top: 36px;
+ margin-bottom: 36px;
+}
+
+.slideshow__img { /* max-width: 900px; */
+ max-width: 100%;
+}
+
+@media only screen and (min-width: 1024px) {
+ /* desktop view here */
+
+ html {
+ font-size: 112.5%; /* 18px */
+ }
+
+ nav {
+ display: -webkit-box;
+ display: -ms-flexbox;
+ display: flex;
+ -ms-flex-wrap: wrap;
+ flex-wrap: wrap;
+ -webkit-box-pack: justify;
+ -ms-flex-pack: justify;
+ justify-content: space-between;
+ -webkit-box-align: center;
+ -ms-flex-align: center;
+ align-items: center;
+ padding: 0 40px 0 0;
+ }
+
+ .hamburger__menu {
+ display: none;
+ }
+
+ .hide__nav {
+ visibility: visible;
+ }
+
+ .nav__menulist {
+ padding: 0;
+ position: static;
+ background-color: transparent;
+ display: -webkit-box;
+ display: -ms-flexbox;
+ display: flex;
+ -webkit-box-orient: horizontal;
+ -webkit-box-direction: normal;
+ -ms-flex-direction: row;
+ flex-direction: row;
+ -webkit-box-align: start;
+ -ms-flex-align: start;
+ align-items: flex-start;
+ text-align: start;
+ width: auto;
+ height: auto;
+ -webkit-box-shadow: none;
+ box-shadow: none;
+ }
+
+ .nav__link {
+ display: block;
+ height: auto;
+ }
+
+ .project-category__box {
+ display: -webkit-box;
+ display: -ms-flexbox;
+ display: flex;
+ -webkit-box-pack: left;
+ -ms-flex-pack: left;
+ justify-content: left;
+ -webkit-box-align: top;
+ -ms-flex-align: top;
+ align-items: top;
+ -webkit-box-orient: horizontal;
+ -webkit-box-direction: normal;
+ -ms-flex-direction: row;
+ flex-direction: row;
+ padding: 40px;
+ margin: 0;
+ max-width: none;
+ }
+
+ .project-category__info--img {
+ margin-bottom: 0;
+ }
+
+}
\ No newline at end of file