Update Ready

assets/css/master.css

@@ -0,0 +1,201 @@
+:root {
+    --blue: #425a86;
+    --blue-light: #6d9eeb;
+    --blue-light-hover: #a1bae2;
+    --max-width: clamp(0px, calc(100% - 50px), 1280px);
+}
+
+a {
+    color: var(--blue-light);
+    text-decoration: none;
+}
+img {
+    width: 100%;
+    pointer-events: none;
+    border-radius: 10px;
+}
+video {
+    width: 100%;
+}
+button {
+    background: var(--blue-light);
+    color: white;
+    border-radius: 4px;
+    border: none;
+    padding: 10px 20px;
+    cursor: pointer;
+    transition: 0.3s background;
+}
+button:hover {
+    background: var(--blue-light-hover);
+}
+#highlight {
+    color: var(--blue-light);
+}
+::selection {
+    background-color: var(--blue-light);
+    color: inherit;
+}
+
+body {
+    background: rgba(225,228,232,1);
+    font-family: arial;
+    width: 100%;
+    max-width: var(--max-width);
+    overflow-x: hidden;
+}
+
+#footer {
+    display: grid;
+    grid-template-columns: 50% 50%;
+    background: var(--blue);
+    color: white;
+    padding: 0px 100%;
+    left: 50%;
+    position: absolute;
+    transform: translate(-50%);
+    width: 100%;
+    margin-top: 25px;
+}
+
+header {
+    width: 100%;
+    max-width: var(--max-width);
+    align-items: center;
+    color: white;
+    position: fixed;
+    display: grid;
+    grid-template-columns: 50% 50%;
+    top: 0px;
+    left: 50%;
+    transform: translate(-50%);
+    z-index: 10;
+}
+header h1 {
+    font-size: 24px;
+}
+.menu {
+    position: absolute;
+    top: 20px;
+    left: 200px;
+    cursor: default;
+}
+.menu a {
+    font-weight: bold;
+    color: white;
+    padding: 8px 20px;
+    border-radius: 4px;
+    transition: 0.3s background;
+}
+.menu a:hover {
+    background: var(--blue-light-hover);
+    cursor: pointer;
+}
+.socials a {
+    color: white;
+    margin-left: 14px;
+}
+
+banner img {
+    position: absolute;
+    top: 0px;
+    left: 0px;
+    width: 100%;
+    height: 200px;
+    object-fit: cover;
+    object-position: 0px -240px;
+    opacity: 0.2;
+    filter: saturate(0);
+    /* transition: 2s object-position;
+    animation: 2s banner ease; */
+}
+banner::before {
+    content: "";
+    position: absolute;
+    top: 0px;
+    left: 0px;
+    width: 100%;
+    height: 200px;
+    opacity: 1;
+    background: var(--blue);
+    z-index: -2;
+}
+
+#for-banner {
+    color: white;
+    margin: 0px 0px 90px 0px;
+}
+
+#extra-menu {
+    background: white;
+    margin: -34px 0px 0px 0px;
+    padding: 0px 100%;
+    left: 50%;
+    position: absolute;
+    width: 100%;
+    transform: translate(-50%);
+}
+#extra-menu button {
+    color: black;
+    background: transparent;
+    font-weight: bold;
+    border-bottom: 4px transparent solid;
+    border-radius: 0px;
+    transition: 0.3s border-color, 0.3s background;
+}
+#extra-menu button:hover {
+    background: var(--blue-light-hover);
+}
+#extra-placeholder {
+    margin-top: 260px;
+    text-align: center;
+    padding: 0px;
+    margin-bottom: 130px;
+}
+.extra-content {display: none;}
+.extra-content {margin-top: 140px;}
+
+.content {
+    position: absolute;
+    top: 100px;
+    left: 50%;
+    transform: translate(-50%);
+    width: 100%;
+    max-width: var(--max-width);
+}
+
+.grid-40auto {
+    display: grid;
+    grid-template-columns: 40% auto;
+}
+.grid-5050 {
+    display: grid;
+    grid-template-columns: 50% 50%;
+    grid-gap: 25px;
+    margin-bottom: 25px;
+}
+#grid-S3 {
+    display: grid;
+    grid-template-columns: auto auto auto;
+    text-align: center;
+}
+#grid-S4 {
+    display: grid;
+    grid-template-columns: auto auto auto auto;
+    text-align: center;
+    grid-gap: 60px;
+}
+.vertical-center {
+    align-items: center;
+}
+
+
+
+@keyframes banner {
+    from {object-position: 0px 0px;}
+    to {object-position: 0px -240px;}
+}
+@keyframes bigBanner {
+    from {transform: scale(1.2);}
+    to {transform: scale(1);}
+}