@import url("https://fonts.googleapis.com/css2?family=Protest+Guerrilla&family=SUSE:wght@100..800&display=swap"); @import url("https://fonts.googleapis.com/css2?family=Source+Sans+3:ital,wght@0,200..900;1,200..900&display=swap"); @font-face { font-family: "Supersonic Rocketship"; src: url("../fonts/Supersonic Rocketship.ttf") format("truetype"); } /*** The new CSS reset - version 1.11.3 (last updated 25.08.2024) GitHub page: https://github.com/elad2412/the-new-css-reset ***/ /* Remove all the styles of the "User-Agent-Stylesheet", except for the 'display' property - The "symbol *" part is to solve Firefox SVG sprite bug - The "html" element is excluded, otherwise a bug in Chrome breaks the CSS hyphens property (https://github.com/elad2412/the-new-css-reset/issues/36) */ *:where(:not(html, iframe, canvas, img, svg, video, audio):not(svg *, symbol *)) { all: unset; display: revert; } /* Preferred box-sizing value */ *, *::before, *::after { box-sizing: border-box; } /* Fix mobile Safari increase font-size on landscape mode */ html { -moz-text-size-adjust: none; -webkit-text-size-adjust: none; text-size-adjust: none; } /* Reapply the pointer cursor for anchor tags */ a, button { cursor: revert; } /* Remove list styles (bullets/numbers) */ ol, ul, menu, summary { list-style: none; } /* Firefox: solve issue where nested ordered lists continue numbering from parent (https://bugzilla.mozilla.org/show_bug.cgi?id=1881517) */ ol { counter-reset: revert; } /* For images to not be able to exceed their container */ img { max-inline-size: 100%; max-block-size: 100%; } /* removes spacing between cells in tables */ table { border-collapse: collapse; } /* Safari - solving issue when using user-select:none on the text input doesn't working */ input, textarea { -webkit-user-select: auto; } /* revert the 'white-space' property for textarea elements on Safari */ textarea { white-space: revert; } /* minimum style to allow to style meter element */ meter { -webkit-appearance: revert; -moz-appearance: revert; appearance: revert; } /* preformatted text - use only for this feature */ :where(pre) { all: revert; box-sizing: border-box; } /* reset default text opacity of input placeholder */ ::-moz-placeholder { color: unset; } ::placeholder { color: unset; } /* fix the feature of 'hidden' attribute. display:revert; revert to element instead of attribute */ :where([hidden]) { display: none; } /* revert for bug in Chromium browsers - fix for the content editable attribute will work properly. - webkit-user-select: auto; added for Safari in case of using user-select:none on wrapper element*/ :where([contenteditable]:not([contenteditable=false])) { -moz-user-modify: read-write; -webkit-user-modify: read-write; overflow-wrap: break-word; -webkit-line-break: after-white-space; -webkit-user-select: auto; } /* apply back the draggable feature - exist only in Chromium and Safari */ :where([draggable=true]) { -webkit-user-drag: element; } /* Revert Modal native behavior */ :where(dialog:modal) { all: revert; box-sizing: border-box; } /* Remove details summary webkit styles */ ::-webkit-details-marker { display: none; } .c_content { background-color: var(--angusBlue); display: flex; flex-direction: column; align-items: center; min-width: 100%; min-height: 60rem; } .c_image { min-width: 20%; max-width: 10%; max-height: 100%; padding: 0.25rem; display: flex; justify-content: center; align-items: center; margin-block: 5rem; } .c_copy { color: white; font-size: 48px; text-align: center; } .c_copy h2 { margin-bottom: 3rem; } .c_copy p { font-family: "Source Sans 3"; font-weight: 600; transition: color, 0.15s; } .c_copy p:hover, .c_copy p:focus { color: lightgray; } body { background-color: black; } .body { display: flex; flex-direction: column; } @media (max-width: 500px) { .body { width: 60rem; } } .header { background-image: url(../images/angusOnBlue.webp); background-position: 2rem; height: 40rem; width: 100%; display: flex; } .banner { z-index: 10; background-color: var(--headerGrey); text-align: center; margin-block: auto; width: 100%; padding-block: 2rem; } .banner h1 { font-size: 72px; color: white; } .anim { display: flex; background-color: black; padding-block: 5%; padding-inline: 2%; } @media (max-width: 500px) { .anim { flex-direction: column; align-items: center; } } .a_image { max-width: 55%; } .a_image img { border-radius: 36px; } @media (max-width: 500px) { .a_image { max-width: 90%; } } .title { color: white; font-family: "Source Sans 3"; font-weight: 900; padding-left: 10%; padding-right: 25%; padding-bottom: 2rem; font-size: 56px; } @media (max-width: 500px) { .title { padding-left: 0; padding-right: 0; font-size: 72px; text-align: center; } } .copy { color: white; font-family: "Source Sans 3"; font-weight: 400; padding-left: 10%; padding-right: 25%; margin-bottom: 3rem; font-size: 24px; } @media (max-width: 500px) { .copy { padding-left: 0; padding-right: 0; font-size: 48px; padding-inline: 5rem; } } .list { color: white; font-family: "Source Sans 3"; font-weight: 400; padding-left: 10%; padding-right: 25%; font-size: 20px; } .list li { margin-top: 1rem; } @media (max-width: 500px) { .list { padding-left: 0; padding-right: 0; font-size: 48px; text-align: center; } } .portfolio { display: flex; flex-direction: column; background-color: white; border-bottom: 0.2rem solid black; } .p_title { color: black; font-size: 64px; font-weight: 600; text-align: center; padding-block: 3rem; } @media (max-width: 500px) { .p_title { font-size: 72px; } } .p_copy { color: black; font-size: 32px; font-family: "Source Sans 3"; font-weight: 400; text-align: center; } @media (max-width: 500px) { .p_copy { padding: 7rem; font-size: 48px; } } .s_gallery { background-color: white; } @media (max-width: 500px) { .s_gallery { width: 75rem; } } .s_row { width: 100%; display: flex; flex-direction: row; padding-block: 5%; } @media (max-width: 1000px) { .s_row { flex-direction: column; } } .t_body { display: flex; flex-direction: column; } @media (max-width: 500px) { .t_body { width: 75rem; } } .t_header { background-color: var(--angusBlue); width: 100%; height: 15rem; display: flex; } .t_header h1 { color: white; font-size: 128px; font-weight: 900; margin: auto; } .bio { display: flex; width: 100%; height: 25rem; padding-inline: 10%; margin-block: 5%; } @media (max-width: 500px) { .bio { flex-direction: column; height: 80rem; } } .b_copy { color: black; font-family: "Source Sans 3"; font-size: 24px; font-weight: 400; margin-right: 5%; margin-left: 10%; width: 40%; } @media (max-width: 1000px) { .b_copy { font-size: 16px; } } @media (max-width: 500px) { .b_copy { width: 100%; font-size: 48px; padding-inline: 5rem; margin-right: 0; margin-left: 0; margin-bottom: 2rem; } } .teamPic img { border-radius: 36px; width: 100%; } .meetTeam { background-color: var(--angusBlue); width: 100%; height: 15rem; display: flex; } .meetTeam h2 { color: white; font-size: 128px; font-weight: 900; margin: auto; } .team { display: flex; flex-direction: row; width: 100%; } .founder { display: flex; flex-direction: column; align-items: center; margin-inline: auto; margin-block: 5%; } .founder img { max-width: 18rem; margin-bottom: 5%; border-radius: 36px; } @media (max-width: 500px) { .founder img { max-width: 15rem; max-height: 15rem; } } .founder h3 { color: black; font-size: 32px; font-weight: 700; } .founder p { color: black; font-size: 32px; font-weight: 400; font-family: "Source Sans 3"; } @media (max-width: 500px) { .founder { margin-inline: 4.5rem; } } .proj_body { width: 100%; height: 25%; } .proj_title { background-color: black; width: 100%; height: 10rem; display: flex; padding-top: 3rem; } .proj_title h1 { color: white; font-size: 96px; font-weight: 900; margin: auto; } @media (max-width: 500px) { .proj_title { width: 75rem; align-items: center; justify-content: center; } } .gallery { background-color: black; } @media (max-width: 500px) { .gallery { width: 75rem; } } .row { width: 100%; display: flex; flex-direction: row; padding-block: 5%; } @media (max-width: 1000px) { .row { flex-direction: column; } } .proj { min-width: 25rem; min-height: 25rem; border-radius: 36px; margin-inline: auto; } @media (max-width: 1200px) { .proj { min-width: 5rem; max-height: 5rem; margin-inline: 2rem; } } @media (max-width: 500px) { .proj { min-width: 40rem; max-height: 40rem; margin-inline: auto; margin-block: 2rem; } } .Bella { background-image: url("../images/bellaHeroFrame.webp"); background-size: cover; background-position: right 40% top 50%; } .zach { background-image: url("../images/zSquare.svg"); background-size: cover; background-position: right 40% top 60%; } .astro { background-image: url("../images/astroFrame.webp"); background-size: cover; background-position: right 60% top 60%; } .comingSoon { background-color: var(--angusBlue); } .proj_info { width: 100%; height: 100%; border-radius: 36px; background-color: var(--darkBlueClear); display: flex; align-items: center; justify-content: center; opacity: 0; transition: opacity 0.12s ease-in-out; } .proj_info h3 { font-size: 56px; color: white; } .proj_info:focus, .proj_info:hover { opacity: 1; } .bigTitle { width: 100%; display: flex; text-align: center; align-items: center; justify-content: center; padding-block: 3rem; background-color: black; color: white; font-size: 84px; } .video { width: 100%; display: flex; align-items: center; justify-content: center; padding-top: 2rem; padding-bottom: 5rem; background-color: black; } .projectDescription { min-height: 45rem; max-height: 10%; background-color: white; display: flex; align-items: center; border-bottom: solid black 2px; } @media (max-width: 500px) { .projectDescription { flex-direction: column; padding-bottom: 5rem; } } .projectDescription .copy { width: 50%; color: black; font-family: "Source Sans 3"; font-weight: 500; font-size: 24px; padding-inline: 10rem; order: 1; } .projectDescription .copy h3 { color: black; font-family: "Source Sans 3"; font-size: 64px; font-weight: 700; margin-bottom: 1rem; } @media (max-width: 500px) { .projectDescription .copy h3 { text-align: center; } } @media (max-width: 500px) { .projectDescription .copy { font-size: 36px; padding-bottom: 2rem; order: 2; } } .projectDescription .projectBreakdown { min-height: 45rem; max-height: 10%; background-color: white; display: flex; align-items: center; border-bottom: solid black 2px; } @media (max-width: 500px) { .projectDescription .projectBreakdown { flex-direction: column; padding-bottom: 5rem; } } .projectDescription .projectBreakdown .copy { width: 50%; color: black; font-family: "Source Sans 3"; font-weight: 500; font-size: 24px; padding-inline: 10rem; order: 1; } .projectDescription .projectBreakdown .copy h3 { color: black; font-family: "Source Sans 3"; font-size: 64px; font-weight: 700; margin-bottom: 1rem; } @media (max-width: 500px) { .projectDescription .projectBreakdown .copy h3 { text-align: center; } } @media (max-width: 500px) { .projectDescription .projectBreakdown .copy { font-size: 36px; padding-bottom: 2rem; order: 2; } } .projectDescription iframe { max-width: 45%; margin-right: 5%; border-radius: 30px; order: 2; } @media (max-width: 500px) { .projectDescription iframe { order: 1; margin-right: 0rem; margin-bottom: 2rem; margin-top: 2rem; max-width: 75%; } } .z_bigTitle { width: 100%; display: flex; align-items: center; justify-content: center; padding-block: 3rem; background-color: black; color: white; font-size: 84px; } .z_video { width: 100%; display: flex; align-items: center; justify-content: center; padding-top: 2rem; padding-bottom: 5rem; background-color: black; } .z_projectDescription { min-height: 45rem; max-height: 10%; background-color: white; display: flex; flex-direction: column; align-items: center; border-bottom: solid black 2px; margin-inline: auto; } @media (max-width: 500px) { .z_projectDescription { flex-direction: column; padding-bottom: 5rem; } } .z_projectDescription .z_copy { width: 50%; color: black; font-family: "Source Sans 3"; font-weight: 500; font-size: 24px; padding-inline: 10rem; order: 1; } .z_projectDescription .z_copy h3 { color: black; font-family: "Source Sans 3"; font-size: 64px; font-weight: 700; margin-bottom: 1rem; } @media (max-width: 500px) { .z_projectDescription .z_copy h3 { text-align: center; } } @media (max-width: 500px) { .z_projectDescription .z_copy { font-size: 36px; padding-bottom: 2rem; order: 2; } } .z_projectDescription iframe { max-width: 45%; margin-right: 5%; border-radius: 30px; order: 2; } @media (max-width: 500px) { .z_projectDescription iframe { order: 1; margin-right: 0rem; margin-bottom: 2rem; margin-top: 2rem; max-width: 75%; } } .z_projectDescription .z_topLayer { min-height: 45rem; max-height: 10%; min-width: 100%; justify-content: center; background-color: white; display: flex; align-items: center; } @media (max-width: 500px) { .z_projectDescription .z_topLayer { flex-direction: column; padding-bottom: 5rem; } } .z_projectDescription .z_layer { min-height: 45rem; max-height: 10%; min-width: 100%; justify-content: center; display: flex; flex-direction: row; align-items: center; } @media (max-width: 500px) { .z_projectDescription .z_layer { flex-direction: column; padding-bottom: 5rem; } } :root { --angusBlue: #1C9EF4; --darkAngusBlue: #1577b9; --darkBlueClear: #1577b988; --angusGrey: #D9D9D9; --headerGrey: rgba(20, 20, 20, 0.85); } body { background-color: white; } h1, h2, h3, h4, h5, h6 { font-family: "Source Sans 3"; font-weight: 800; font-style: normal; } .content { margin-bottom: 2%; } .nav { background-color: white; display: flex; width: 100%; height: 3%; padding-inline: 10%; flex-direction: row; } @media (max-width: 1000px) { .nav { padding-inline: 2rem; } } @media (max-width: 500px) { .nav { height: 7rem; padding-inline: 0.5rem; width: 60rem; } } .cowTop { min-width: 5%; max-width: 10%; max-height: 100%; padding: 0.25rem; display: flex; justify-content: center; align-items: center; } @media (max-width: 500px) { .cowTop { min-width: 25%; } } .logo { min-width: 3%; max-width: 10%; display: flex; justify-content: center; align-items: center; margin-left: 2rem; } @media (max-width: 500px) { .logo { min-width: 0%; opacity: 0; } } .tabs { width: 80%; height: 7rem; display: flex; padding-left: 15%; align-items: center; justify-content: center; } @media (max-width: 500px) { .tabs { height: 7rem; padding-left: 2rem; } } .tab { margin-inline: 3rem; } .tab h2 { color: black; font-family: "Source Sans 3"; font-size: 28px; font-optical-sizing: auto; font-weight: 800; font-style: normal; transition: color 0.15s; } .tab h2:hover, .tab h2:focus { color: var(--angusBlue); cursor: pointer; } @media (max-width: 1200px) { .tab { margin-inline: 1rem; } } .body { background-color: var(--black); display: flex; flex-direction: column; width: 100%; height: 80%; } @media (max-width: 500px) { .body { width: 75rem; } } .reel { display: flex; background-color: black; } .reel .showReel { height: 40rem; width: 100%; position: relative; z-index: 0; } @media (max-width: 500px) { .reel .showReel { opacity: 0; width: 0; height: 0; } } .reel .showPic { opacity: 0; width: 0; height: 0; } @media (max-width: 500px) { .reel .showPic { opacity: 1; width: 100%; height: 25rem; margin-bottom: 5rem; } } .intro { min-height: 45rem; max-height: 30%; background-color: black; display: flex; align-items: center; padding-inline: 7%; } @media (max-width: 500px) { .intro { flex-direction: column; padding-bottom: 5rem; } } .intro .copy { color: white; font-family: "Source Sans 3"; font-weight: 500; font-size: 24px; padding-inline: 10rem; order: 1; } .intro .copy h3 { color: white; font-family: "Source Sans 3"; font-size: 64px; font-weight: 700; margin-bottom: 2rem; } @media (max-width: 500px) { .intro .copy { font-size: 48px; padding-bottom: 2rem; order: 2; } } .intro img { min-width: 35%; margin-right: 10rem; border-radius: 30px; order: 2; } @media (max-width: 500px) { .intro img { order: 1; margin-right: 0rem; margin-bottom: 2rem; } } .intro iframe { min-width: 35%; margin-right: 10rem; border-radius: 30px; order: 2; } @media (max-width: 500px) { .intro iframe { order: 1; margin-right: 0rem; margin-bottom: 2rem; } } .offerings { min-height: 30rem; background-color: white; display: flex; flex-direction: column; align-items: center; } .offerings h3 { font-family: "Source Sans 3"; font-weight: 800; font-style: normal; color: black; font-size: 64px; padding-top: 3%; padding-bottom: 2%; } .offerings p { font-family: "Source Sans 3"; font-weight: 500; font-style: normal; color: black; font-size: 32px; text-align: center; padding-inline: 35rem; } @media (max-width: 500px) { .offerings p { font-size: 56px; padding-inline: 10rem; font-weight: 600; } } .offerings .button { background-color: var(--angusBlue); margin-top: 3%; margin-bottom: 3%; padding-inline: 7rem; padding-block: 2rem; border-radius: 60px; font-family: "Source Sans 3"; color: white; font-weight: 900; font-size: 32px; transition: background-color 0.15s; } .offerings .button:hover, .offerings .button:focus { background-color: var(--darkAngusBlue); cursor: pointer; } @media (max-width: 500px) { .offerings .button { font-size: 48px; } } .getStarted { min-height: 55rem; background-color: black; text-align: center; padding-inline: 7%; } .getStarted h3 { font-family: "Source Sans 3"; font-weight: 900; font-style: normal; color: white; font-size: 96px; padding-top: 3%; padding-bottom: 5%; } .getStarted .steps { display: flex; } @media (max-width: 500px) { .getStarted .steps { flex-direction: column; } } .getStarted .step { margin-inline: auto; display: flex; flex-direction: column; align-items: center; } @media (max-width: 500px) { .getStarted .step { margin-block: 3rem; } } .getStarted .step .circleNumber { font-family: "Source Sans 3"; font-weight: 900; font-style: normal; color: white; font-size: 128px; background-color: var(--angusBlue); border-radius: 360px; text-justify: center; margin-inline: auto; margin-bottom: 2rem; width: 10rem; height: 10rem; } .getStarted .step h4 { font-family: "Source Sans 3"; font-weight: 700; font-style: normal; color: white; font-size: 32px; } @media (max-width: 500px) { .getStarted .step h4 { font-size: 64px; margin-bottom: 1rem; } } .getStarted .step p { font-family: "Source Sans 3"; font-weight: 500; font-style: normal; color: white; font-size: 24px; text-align: left; padding-inline: 8rem; } @media (max-width: 500px) { .getStarted .step p { font-size: 48px; padding-inline: 12rem; } } .contact { min-height: 60rem; background-color: black; display: flex; flex-direction: row; } @media (max-width: 500px) { .contact { flex-direction: column; } } .formExplain { width: 35%; padding-inline: 10%; margin-left: 10%; background-color: black; } @media (max-width: 500px) { .formExplain { margin-left: 0; width: 100%; } } .formExplain h3 { color: white; font-family: "Source Sans 3"; font-size: 128px; font-weight: 900; margin-top: 5rem; } @media (max-width: 500px) { .formExplain h3 { margin-inline: 16rem; text-align: center; margin-bottom: 5rem; } } .formExplain p { color: white; font-family: "Source Sans 3"; font-size: 24px; font-weight: 900; } @media (max-width: 500px) { .formExplain p { margin-inline: 8rem; font-size: 48px; } } .interestForm { width: 45%; margin-right: 10%; margin-left: 2%; padding-block: 7%; padding-inline: 2%; } @media (max-width: 500px) { .interestForm { width: 60rem; margin-left: 8rem; margin-right: 8rem; } } .nameField { display: flex; flex-direction: row; } @media (max-width: 500px) { .nameField { flex-direction: column; } } .nameField input { color: rgb(83, 83, 83); font-family: "Source Sans 3"; font-size: 32px; font-weight: 900; background-color: var(--angusGrey); width: 20rem; margin-inline: 0.5rem; margin-left: 2rem; margin-bottom: 3rem; padding-left: 1rem; } @media (max-width: 500px) { .nameField input { width: 60rem; font-size: 64px; margin-left: 0; } } .emailField { display: flex; flex-direction: row; } @media (max-width: 500px) { .emailField { flex-direction: column; } } .emailField input { color: rgb(83, 83, 83); font-family: "Source Sans 3"; font-size: 32px; font-weight: 900; background-color: var(--angusGrey); width: 20rem; margin-inline: 0.5rem; margin-left: 2rem; margin-bottom: 3rem; padding-left: 1rem; } @media (max-width: 500px) { .emailField input { width: 60rem; font-size: 64px; margin-left: 0; } } .messageField { display: flex; } @media (max-width: 500px) { .messageField { flex-direction: column; } } .messageField input, .messageField textarea { color: rgb(83, 83, 83); font-family: "Source Sans 3"; font-size: 24px; font-weight: 900; background-color: var(--angusGrey); width: 100%; height: 25rem; margin-inline: 2rem; margin-bottom: 5rem; padding-left: 1rem; padding-bottom: 45%; padding-top: 1rem; } @media (max-width: 500px) { .messageField input, .messageField textarea { width: 60rem; height: 35rem; font-size: 64px; margin-inline: 0; } } .submit { color: white; background-color: var(--angusBlue); font-family: "Source Sans 3"; font-weight: 900; font-size: 32px; text-align: center; margin-inline: 15%; padding-block: 2%; border-radius: 360px; transition: background-color 0.15s; } .submit:hover, .submit:focus { background-color: var(--darkAngusBlue); cursor: pointer; } @media (max-width: 500px) { .submit { font-size: 64px; } } @media (max-width: 500px) { .footer { display: flex; flex-direction: column; width: 60rem; } } .cowFooter { min-width: 10%; max-width: 10%; max-height: 100%; padding: 0.5rem; margin-left: 2rem; display: flex; justify-content: center; align-items: center; padding-left: 2rem; } @media (max-width: 1000px) { .cowFooter { margin-left: 0.1rem; } } @media (max-width: 500px) { .cowFooter { margin-left: 0; padding-left: 0; margin-top: 2rem; } } .topRow { background-color: white; display: flex; flex-direction: row; width: 100%; height: 13rem; } @media (max-width: 500px) { .topRow { height: 30rem; width: 100%; flex-direction: column; align-items: center; margin-inline: 8rem; } } .form { margin-inline: 5%; } .form p { color: black; font-family: "Source Sans 3"; font-size: 48px; font-optical-sizing: auto; font-weight: 700; text-decoration: underline; transition: color 0.15s; margin-left: 1rem; margin-top: 1rem; } .form p:hover, .form p:focus { color: var(--angusBlue); cursor: pointer; } @media (max-width: 1000px) { .form p { font-size: 36px; margin-inline: 0.2rem; } } @media (max-width: 500px) { .form p { margin-left: 0rem; padding: 0; text-align: center; margin-top: 2rem; font-size: 56px; } } .email p { color: black; font-family: "Source Sans 3"; font-size: 36px; font-weight: 400; transition: color 0.15s; } .email p:hover, .email p:focus { color: var(--angusBlue); cursor: pointer; } @media (max-width: 1000px) { .email p { font-size: 24px; } } @media (max-width: 500px) { .email p { font-size: 56px; margin: 0; padding: 0; text-align: center; } } .socials { margin-inline: 5%; display: flex; flex-direction: column; align-items: center; text-align: center; } .socials p { color: black; font-family: "Source Sans 3"; font-size: 48px; font-optical-sizing: auto; font-weight: 700; margin-top: 1rem; padding-bottom: 1rem; } @media (max-width: 1000px) { .socials p { font-size: 36px; } } @media (max-width: 1000px) { .socials { margin-inline: 0.1rem; } } .socials .logos { display: flex; flex-direction: row; } .socials .icon { width: 25%; max-height: 64px; -o-object-fit: contain; object-fit: contain; margin-inline: 20px; } @media (max-width: 500px) { .socials .icon { max-height: 72px; } } .socials #linkedin { background-image: url(../images/linkedinBlack.svg); height: 56px; width: 56px; } @media (max-width: 1000px) { .socials #linkedin { height: 36px; width: 36px; } } @media (max-width: 500px) { .socials #linkedin { width: 72px; height: 72px; } } .socials #linkedin:hover, .socials #linkedin:focus { background-image: url(../images/linkedinBlue.svg); cursor: pointer; } .socials #instagram { background-image: url(../images/instaBlack.svg); height: 56px; width: 56px; } @media (max-width: 1000px) { .socials #instagram { height: 36px; width: 36px; } } @media (max-width: 500px) { .socials #instagram { width: 72px; height: 72px; } } .socials #instagram:hover, .socials #instagram:focus { background-image: url(../images/instaBlue.svg); cursor: pointer; } .socials #tiktok { background-image: url(../images/tiktokBlack.svg); height: 56px; width: 56px; } @media (max-width: 1000px) { .socials #tiktok { height: 36px; width: 36px; } } @media (max-width: 500px) { .socials #tiktok { width: 72px; height: 72px; } } .socials #tiktok:hover, .socials #tiktok:focus { background-image: url(../images/tiktokBlue.svg); cursor: pointer; } .merch { margin-inline: 5%; } .merch p { color: black; font-family: "Source Sans 3"; font-size: 48px; font-optical-sizing: auto; font-weight: 700; text-decoration: underline; transition: color 0.15s; margin-left: 5rem; margin-top: 1rem; } .merch p:hover, .merch p:focus { color: var(--angusBlue); cursor: pointer; } @media (max-width: 1000px) { .merch p { font-size: 36px; margin-left: 1rem; } } @media (max-width: 500px) { .merch p { opacity: 0; } } .secondRow { display: flex; justify-content: center; } @media (max-width: 500px) { .secondRow { width: 100%; margin-inline: 8rem; } } .copyright { padding-bottom: 1rem; text-align: center; } .copyright p { color: black; font-family: "Source Sans 3"; font-size: 24px; font-optical-sizing: auto; font-weight: 700; } @media (max-width: 500px) { .copyright p { margin-top: 5rem; font-size: 36px; padding-inline: 15rem; } }/*# sourceMappingURL=styles.css.map */