/* Colors used Text Color (Dark Gray): #2b2b2b; Primary Color (Purple): #357b70; Secondary Color (Orange): #e0b354; */ :root { --primary-color: #357b70; --secondary-color: #e0b354; --dark-grey: #2b2b2b; --hover-color: #0072ee; --visited-color: darkblue; --active-color: #791967; --background-color:#fff; --font-family: "Raleway", sans-serif; /* ❌ This is SCSS, not CSS / --primary-dark: darken(--primary-color, 15%);*/ --primary-dark: #2c80b4; } a { color: var(--primary-color); } /* universal * selector (which will apply the styling to all HTML elements) within your CSS file */ /* sizing- ✅ Keeps layouts consistent ✅ Prevents unwanted overflow ✅ Improves responsive designs */ /* define them in the :root pseudo-class - pseudo class targets all elements within the tag */ *{ color: #08080a; box-sizing: border-box; } .body { font-family: 'Lato', sans-serif; font-weight: 400; font-size: 16px; font-style: normal; line-height: 1.6; } h1 { font-size: 30px; font-weight: bold; /* font-style: italic; */ } h2 { font-size: 24px; font-weight: 700; font-variant: small-caps; margin: auto; } h3 { font-size: 18px; font-weight: 700; text-decoration: underline; } a { color: #005d47; text-decoration: none; transition: color 0.3s ease, text-shadow 0.3s ease; } a:visited { /* visited link */ color: var(--visited-color); } a:hover, a:focus { /* No underlining when hovering over a link */ text-decoration: none; cursor: pointer; color: var(--hover-color); text-shadow: 0px 2px 8px rgba(0, 123, 255, 0.3); } /*a:focus{ background-color:chocolate; }*/ a:active { /* selected link */ color: var(--active-color); } .button{ color: black; font-family: 'Gill Sans', 'Gill Sans MT', Calibri, 'Trebuchet MS', sans-serif; font-size: 18px; background-color: darkgrey; } .button_primary{ background-color: var(--primary-color); color: #021829; font-size: 18px; font-family: inherit; padding: 5px; border-radius: 3px; } .button_primary:visited{ color: #0e1090; } .button_primary:hover{ color:var(--hover-color); } .button_primary:focus{ background-color: bisque; } .button_primary:active{ color: var(--active-color); } .button_primary:hover, .button_primary:focus { /* lets the mouse appear as a hand when hovering over the button */ cursor: pointer; /* reduces the opacity of the button to 80% */ opacity: 0.8; } /* input, texture, select, button { font-family: system-ui; } */ .button_secondary { background-color: #e0b354; color: #2b2b2b; font-size: 18px; font-family: inherit; padding: 5px; border-radius: 3px; cursor: pointer; } .button_secondary:hover{ color: var(--hover-color); } .navigation-list__item--active { text-decoration: none; } /* span { display: block; } */ /* nav { position: relative; top: 20px; left: 20px; } */ .navigation-list { list-style-type: none; } .navigation-list li { display: inline-block; margin-left: 15px; } main{ margin: 5px; } .text{ text-align: center; } .text ul{ list-style-type: none; } .form-group { margin-bottom: 20px; text-align: left; } .standard-label { width: 100%; padding: 10px; margin-top: 5px; border: 1px solid #ccc; border-radius: 6px; font-size: 1rem; } button { padding: 10px 20px; border: none; background-color: #0072ee; color: #fff; border-radius: 6px; font-size: 1rem; cursor: pointer; } button:hover { background-color: #0056b3; } h1{ text-align: center; } .buttoncv{ /* overwrites browser defaults and resets the border */ border: none; display: inline-block; /* takes the font from the outer container */ font-family: inherit; /* styles the button */ background-color: #357b70; color: white; text-decoration: none; padding: 10px; border-radius: 3px; /* width of the border, type, color */ border-bottom: 2px solid rgba(0, 0, 0, 0.3); /* transition longer transition-duration: 0.9s; transition-property: opacity; */ /* transition shorter: transition: [transition-property] [transition-duration] [transition-timing-function] [transition-delay]; */ transition: opacity 0.2s; } .buttoncv:hover, .buttoncv:focus { /* lets the mouse appear as a hand when hovering over the button */ cursor: pointer; /* reduces the opacity of the button to 80% */ opacity: 0.8; color: var(--hover-color); background-color: #489c79; font-size: 15px; transform: scale(1.05); /* Slight enlargement */ } @keyframes color-change-cloud { from { fill: #FBFDFC; } to { fill: skyblue; } } @keyframes color-change-sun { 0% { fill: #edc655; } 50% { fill: #fcffad; } 100% { fill: #f76414; } } /* long */ /* .sun { animation-duration: 4s; animation-name: color-change; animation-iteration-count: infinite; animation-direction: alternate; animation-timing-function: linear; } */ /* short */ .sun { animation: 4s color-change-sun infinite alternate linear; } .cloud{ animation: 4s color-change-cloud infinite alternate linear; } @keyframes cloud-move { from { transform: translate(0, 50px); } to { transform: translate(200px, 50px); } } @keyframes cloud-move-reverse { from { transform: translate(446px, 48px); } to { transform: translate(100px, 48px); } } .cloud-front { animation: 30s cloud-move infinite alternate linear; } .cloud-back { animation: 34s cloud-move-reverse infinite alternate linear; } .error-message { color: red; font-size: 0.9rem; margin-top: 5px; } .grid__item img { width: 100%; max-width: 400px; height: auto; margin-bottom: 10px; border-radius: 8px; box-shadow: 0 4px 8px rgba(0,0,0,0.1); } .section-intro { font-size: 1.1rem; color: #666; margin-bottom: 40px; max-width: 700px; margin-left: auto; margin-right: auto; } .project-link { display: inline-block; font-weight: bold; color: #007acc; text-decoration: none; } .project-link:hover { text-decoration: underline; }