:root{ --primary: #8b1a32; --secondary:#969696; --tertiary: #f15025; --whiteish: #fcf7ff; --light-blue:#cde6f5; --alt-secondary: #554640; } html{ width: 100%; height: 100%; } *{ margin: 0; padding: 0; box-sizing: border-box; } .parallax { /* The image used */ background-image: url("https://static.igem.org/mediawiki/2018/9/99/T--Uppsala--Transcriptomics-HEADER_2.jpeg"); /* Set a specific height */ min-height: 99vh; /* Create the parallax scrolling effect */ background-attachment: fixed; background-position: center; background-repeat: no-repeat; background-size: cover; /*background: linear-gradient(to bottom, transparent 90%);*/ } .blur-box { background-color: var(--whiteish); box-shadow: 0 0 10px 10px var(--whiteish); } .sub-header{ /* Set a specific height */ height:20vw; min-height: 150px; /* Create the parallax scrolling effect */ /*background-attachment: fixed;*/ background-position: center; background-repeat: no-repeat; background-size: cover; } .sub-header h1{ font-size: 60; text-align: center; position:absolute; left:0; right:0; margin-top:6.5% ; margin-left:auto; margin-right: auto; color:white; bottom: px; } /* TODO: CHANGE */ #blue{ background-image: url(redbanner.jpg); } h1, h2{ color: #661325; } h1{ margin-top:2em; margin-bottom: 0.5em; } #first-title{ top:100px; margin-top: 0; } .content{ position:relative; background-color: var(--whiteish); } .content-text{ margin-top:2em; min-width: 400px; width:70%; position: relative; margin: auto; /*background-color: #8c7cff;*/ } .scroll-pointer{ top:85%; position:absolute; /*margin-left:auto; margin-right:auto;*/ width: 100%; padding: 0; } .scroll-pointer img{ color: var(--primary) ; } .center-icon{ width:100px; position: relative; display: block; margin-right: auto; margin-left: auto; opacity: 0.8; } .center { display: block; margin-left: auto; margin-right: auto; width: 50%; }