@import url('https://fonts.googleapis.com/css2?family=Josefin+Sans:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;1,100;1,200;1,300;1,400;1,500;1,600;1,700&family=Rubik:ital,wght@0,300;0,400;0,500;0,600;0,700;0,800;0,900;1,300;1,400;1,500;1,600;1,700;1,800;1,900&display=swap'); @font-face { font-family: 'Comic Sans MS'; src: url("../assets/comicb.ttf"); } :root { --color-dark: #2D2424; --color-main-light: #A55540; --color-main: #5C3D2E; --color-light: #E79A58; --color-white: #E1D5D2; --color-gray: #4B4A5A; } * { box-sizing: border-box; padding: 0; margin: 0; scroll-behavior: smooth; } *:any-link { color: var(--color-light); } h1, h2, h3 { font-family: "Comic Sans MS", "Comic Sans", cursive; } .italic { font-style: italic; } p { font-family: 'Josefin Sans', sans-serif; } .right-align { text-align: right; } .left-align { text-align: left; } .btn { border-radius: .25rem; color: black; background-color: var(--color-white); font-weight: 800; padding: 1rem 1rem; text-decoration: none; text-transform: uppercase; display: inline-block; transition: all .3s ease 0s; } .btn:hover { transform: translateY(-3px); background-color: var(--color-light); color: var(--color-white); box-shadow: rgba(50, 50, 93, 0.25) 0px 13px 27px -5px, rgba(0, 0, 0, 0.3) 0px 8px 16px -8px; } .black-bg { height: 100%; width: 100%; position: fixed; background-color: rgba(0, 0, 0, 0.4); backdrop-filter: blur(4px); z-index: 99; display: none; } #loading-bg { height: 100%; width: 100%; position: fixed; background-color: #E79A58; z-index: 99; } #loading-container { width: auto; height: 30%; top: 35%; position: relative; display: flex; flex-direction: column; } .loading-content img { margin: 0.5rem; height: auto; max-width: 15rem; display: flex; margin-left: auto; margin-right: auto; } .loading-content p { color: var(--color-dark); font-size: xx-large; text-align: center; margin: 1rem; } .block-container { justify-content: center; align-items: center; display: flex; flex-direction: column; } @media screen and (min-width: 1000px) { .block { padding: 2rem 2rem; background-color: var(--color-main-light); width: 100%; height: auto; display: flex; box-shadow: rgba(0, 0, 0, 0.25) 0px 54px 55px, rgba(0, 0, 0, 0.12) 0px -12px 30px, rgba(0, 0, 0, 0.12) 0px 4px 6px, rgba(0, 0, 0, 0.17) 0px 12px 13px, rgba(0, 0, 0, 0.09) 0px -3px 5px; flex-direction: row; position: relative; } .block-container img { max-width: 30rem; margin: 2rem 2rem; height: auto; box-shadow: rgba(0, 0, 0, 0.1) 0px 4px 12px; } .block .source { display: flex; float: right; margin: 0 2rem; } .page-header { background-position-y: 50%; background-size: cover; overflow: hidden; width: 100%; height: 50rem; display: flex; position: relative; } .page-header_text h1 { position: absolute; top: 22rem; padding: 0 5rem; font-size: 4rem; } .page-header_text p { position: absolute; top: 28rem; padding: 0 5rem; font-size: 4rem; } } @media screen and (max-width: 1000px) { .block { padding: 2rem 2rem; background-color: var(--color-main-light); width: 100%; height: auto; display: flex; box-shadow: rgba(0, 0, 0, 0.25) 0px 54px 55px, rgba(0, 0, 0, 0.12) 0px -12px 30px, rgba(0, 0, 0, 0.12) 0px 4px 6px, rgba(0, 0, 0, 0.17) 0px 12px 13px, rgba(0, 0, 0, 0.09) 0px -3px 5px; position: relative; flex-direction: column; overflow: clip; } .block .source { display: flex; font-size: x-small; float: center; margin: 0 2rem; } .block-container img { max-width: 25rem; margin: 2rem 2rem; height: auto; box-shadow: rgba(0, 0, 0, 0.1) 0px 4px 12px; } .page-header { background-position-y: 50%; background-size: cover; overflow: hidden; width: 100%; height: 30rem; display: flex; position: relative; } .page-header_text h1 { position: absolute; top: 12.5rem; padding: 0 2rem; font-size: 2.5rem; } .page-header_text p { position: absolute; top: 22rem; padding: 0 2rem; font-size: 2.5rem; } } .page-header_text { flex: 2; height: 100%; } .page-header_img { flex: 1; height: 100%; } .block em { color: var(--color-dark); }