/*This is the code for the styling of the webpage - don't change my dark gray hex colour. Also do not change my background colour- I specifically looked up 'banana yellow'. Put all your styling that applies to everything under this comment. (if you have styling specific to one page, create a tag in the and add it to your tag.*/ /* [] []]] []]]] []]]]]] []]]]]]] []]]]]]]]] ]]]]]]] | |__ ___ ___ ___ ___ ___ ___ ____ ___ | \ / | | / \ / | | / \ / | | / \ /____\ | | | (___ |__/ \__/ \ |/ | \__/ \ |/ | \__/ \ |/ | \____ \__/\__/ ___) _____________________________________________________________________________________________________________________________ | | | __ | __ | | | \ __ _ _ | __ | _ _ __ __ __| __ |/ _ _ /__ o _ __ | | | |__/ /__\ / \ | \ | /__\ | | | |__ / \ |/ /__\ / | / | | | (__ |\ | / \ / \ | | | | | |/ (__ _|__ | | | \__ \_/ |_/ | \__ \_/ \_/ | | \_/ | \__ \_/ \\_/| \_/\ __) | \ |/ | \_/ \_/ \_/ | | | __) |_/ | | | | |_____________________________________________________________________________________________________________________________| If you're the sort of person who looks at the source code of webpages, try our challenge: https://banana-news.github.io/banana/share_this_page */ table { width: 100%; border-collapse: collapse; margin-top: 10px; font-family: "Open Sans", sans-serif; } th, td { border: 1px solid #dddddd; text-align: left; padding: 8px; } th { background-color: #f2f2f2; } .science-div { background-color: white; border-radius: 30px; color:black; padding:20px; box-shadow: 0 5px 10px rgba(154, 160, 185, 0.05), 0 15px 40px rgba(166, 173, 201, 0.2); margin-bottom: 20px; } .kt { background-color: lightyellow; padding: 5px; border-bottom: yellow 2px solid; } #border{ border-bottom:5px solid white; position: absolute; top:0; left:0; } select:hover { cursor: pointer; background-color: grey; } select { width: 200px; font-size: 20px; padding: 15px; border-radius: 7px; background-color: white; border: none; } .background { background-color:#ffeb7b; border-bottom: #ffe135 50px; position: relative; background-size: cover; width: 100%; height: 500px; } .background::before { content: ""; position: absolute; top: 0; left: 0; width: 100%; height: 100%; background: rgba(0, 0, 0, 0.3); /* Adjust opacity as desired */ z-index: -1; } .background img { filter:brightness(65%); display: block; width: 100%; height: 100%; object-fit: cover; } .background h1, .background p, .background h2 { position: absolute; transform: translate(-50%, -50%); color: #ffffff; left: 50%; /* Other styling for the heading (font-size, font-weight, etc.) */ } .background h1{ font-size: 100px; font-family: 'Comfortaa', sans-serif; top: 20%; } .background h2{ top:70%; } .background p { top: 90%; } /* .tomatoMessage{ background-image: linear-gradient(#008000,#ff6347); padding: 20px; color: #ffffff; } .tomatoMessage a{ color:#ffffff; -webkit-text-fill-color: #ffffff; }*/ a{ text-decoration: none; } a:hover{ text-decoration: underline; } button { font-size: 16px; font-weight: 500; border-radius: 9999px; padding: 10px 24px; color: #ffffff; font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif; border: none; cursor: pointer; /* Classic Liquid Glass Effect */ background: rgba(255, 255, 255, 0.1); backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); border: 1px solid rgba(255, 255, 255, 0.2); box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1), inset 0 1px 0 rgba(255, 255, 255, 0.2), inset 0 -1px 0 rgba(0, 0, 0, 0.1); transition: all 0.25s ease; } button:hover { background: rgba(255, 255, 255, 0.15); backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px); border: 1px solid rgba(255, 255, 255, 0.3); box-shadow: 0 8px 20px rgba(0, 0, 0, 0.15), inset 0 1px 0 rgba(255, 255, 255, 0.3), inset 0 -1px 0 rgba(0, 0, 0, 0.1); transform: translateY(-2px); } h1{ font-family: 'IBM Plex Serif', serif; font-size: 100px; text-align: center; } .bheading{ background-image: linear-gradient(to right,#f8ab5e 0,#f36961 20%,#a176c8 40%,#759beb 60%,#65beb3 80%,#70db96 100%); -webkit-background-clip: text; background-clip:text; -webkit-text-fill-color: transparent; color:transparent; } /*.stripe{ background-color: #ffffff; width: 100%; }*/ h2{ font-family: 'Lato', sans-serif; font-size: 35px; text-align: center; } p{ font-family: 'Open Sans', sans-serif; font-size: 16px; text-align: center; color: black; } h3{ font-family: Arial, Helvetica, sans-serif; font-size: 20px; text-decoration-line: underline; text-align: center; } body { background: linear-gradient(#fff6c2, rgb(189, 255, 189)); margin: 20px; } #sci-container{ width:60%; margin:auto; } /* input{ border-top:none; border-right:none; border-left:none; border-bottom:3px solid rgb(0,0,0); transition:0.25s ease-in-out; } input:hover{ border:3px solid #000000; } input:focus{ border:3px solid #000000; outline:none; } */ .topnav { position:fixed; background-color:#363434; width:100%; height:50px; opacity:97.5%; top:0px; left: 0; z-index:1000; filter: none; } .topnav a { position:relative; top:5px; text-decoration:none; opacity:98%; padding:10px; color:#ffffff; background-color:#00000000; transition:0.15s ease-in-out; font-size:14px; font-family:'Open Sans', sans-serif; text-align:center; } #searchButton{ float:right; } .rightNerd{ margin-right:27.33!important; } .topnav a:hover { color:#8f8e8e; transition: 0.15s ease-in-out; } @keyframes slideDown { from { max-height:0; visibility:hidden; height: 0; display:none; } to { max-height:200px; visibility:visible; height: 200px; display:block; } } @keyframes slideUp{ from{ max-height:200px; visibility:visible; height: 200px; display:block; } to{ max-height:0; visibility:hidden; height: 0; display:none; } } #searchButton{ position:absolute; top: 10px; right:20px; } @media screen and (max-width:600px) { #searchButton{ right: 40px; } } #div-to-show { filter: none; display:none; height:0px; background-color: #444444; width:100%; position:fixed; top:50px; left:0; padding:20px; overflow:hidden; z-index:1000; } #div-to-show:hover{cursor:pointer;} #searchbar{ color:#ffffff; font-size:25px; border:none; background-color:#444444; background-image: linear-gradient(to right,#f8ab5e 0,#f36961 20%,#a176c8 40%,#759beb 60%,#65beb3 80%,#70db96,100%); min-width:175px; } #searchbar:focus{ outline:none; } .quick{list-style:none;color:#f5f5f5; font-family:'Open Sans',sans-serif;width:100%;padding-left:5px; font-size:16px; border-radius:2px} .quick:hover{color:#ffffff;cursor:pointer;background-color:#555555} .not-und{text-decoration:none} .not-und:hover{text-decoration: none;} .label{ font-family:'Open Sans',sans-serif; color:#d3d3d3; text-align: left; } .stripped{ /*Dont change the '#00000000' the amount of zeros is there to make it transparent*/ background-color:#00000000; /**/ border:none; padding:3px; color:#f5f5f5; transition:0.25s ease-in-out; } .stripped:hover{ color:#ffffff;cursor:pointer;background: #00000000;} .topnav .icon { display: none; } @media screen and (max-width: 600px) { .topnav a:not(:first-child) {display: none;} .topnav a.icon { float: right; display: block; margin:5px; } } @media (max-width:768px){ h1{font-size: 75px;} p{font-size:18px;} h2{font-size:25px;} } @media screen and (max-width: 600px) { #searchButton{display:block} .topnav.responsive {position: relative; height: 300px;} .topnav.responsive a.icon { position: absolute; right: 30px; top: 0; } .topnav.responsive a { float: none; display: block; text-align: left; } } .options div img { display: block; margin: auto; } /*PLEASE don't change table styling (below) it will mess it up*/ tr:nth-child(even){ background-color: #919191; } td{padding:20px;} th,td,table,tr{font-family: 'Open Sans', sans-serif;font-size:20px;border: 1px solid #000000;} /*I know what you're thinking. Just don't.*/ footer { font-size: 16px; font-family: 'Open Sans', sans-serif; position: relative; bottom: 5px; left: 5px; } .tomatonews{ padding: 20px; background-image: linear-gradient(#ff6347, #008000); font-family: 'Open Sans', sans-serif; position: fixed; top: 100px; left: 40%; width: 400px; } @keyframes mymove { 100% {transform: rotate(360deg);} } @media(max-width:768px){p{font-size:18px;}}