a { color: #BD1616; line-height: 10px; font-size: 160%; text-decoration: none; padding: 20px; opacity: 100%; } a:hover { color: #cb5e5e; } body { background-color: #FFFFFF; font-family: "Ruthie", cursive; margin: 0; text-align: center; } h1 { margin-top: 50px; margin-bottom: 35px; font-family: "Ruthie", cursive; font-weight: 400; font-size: calc(7px + 9.2vw); color: #BD1616; /* Explicitly sets the width to 100% of its parent container (usually the ) */ width: 100%; /* Ensures the text is centered within that 100% width */ text-align: center; } h2 { margin-top: 0px; margin-left: 90px; margin-right: 90px; margin-bottom: 30px; font-family: "Alumni Sans SC", sans-serif; font-size: calc(10px + 1.2vw); color: #BD1616; font-weight: normal; } h3 { font-size: 1.7rem; text-align: center; margin-top: -70px; margin-bottom: 40px; color: #cd2a2a; } h4 { font-size: 2rem; font-family: "Alumni Sans SC", sans-serif; font-size: 6.4rem; line-height: 10px; color: #ffda5b; } hr { margin: 0 auto 0 auto; background: linear-gradient(to left, #ffda5b 0%, #e5a842 30%, #ffda56 80%, #fabf44 100%); background-size: 100% 5px; border-style: double none none none; width: 100%; border-width: 15px; opacity: 85%; } p { color: #797979; } .linemiddle { width: 35%; border-width: 4px; border-style: double none none; } .btn { background: #cd2a2a; background-image: -webkit-linear-gradient(top, #cd2a2a, #BD1616); background-image: -moz-linear-gradient(top, #cd2a2a, #BD1616); background-image: -ms-linear-gradient(top, #cd2a2a, #BD1616); background-image: -o-linear-gradient(top, #cd2a2a, #BD1616); background-image: linear-gradient(to bottom, #cd2a2a, #BD1616); -webkit-border-radius: 8; -moz-border-radius: 8; border-radius: 8px; font-family: Verdana; color: #ffffff; font-size: 90%; padding: 10px 20px 10px 20px; text-decoration: none; } .btn:hover { background: #cc4343; background-image: -webkit-linear-gradient(top, #cc4343, #BD1616); background-image: -moz-linear-gradient(top, #cc4343, #BD1616); background-image: -ms-linear-gradient(top, #cc4343, #BD1616); background-image: -o-linear-gradient(top, #cc4343, #BD1616); background-image: linear-gradient(to bottom, #cc4343, #BD1616); text-decoration: none; } .threecards { height: 374px; width: 506px; margin-top: 7px; position: relative; opacity: 100%; z-index: 1; } .contact { margin-bottom: 80px; margin-top: 80px; line-height: 50px; } .contact-text { margin: 5px auto; max-width: 600px; color: #000000; } .headings { font-size: calc(15px + 2.8vw); margin-top: 60px; } .headings-bottom { font-size: 3.3rem; margin-top: 10px; } .deck { margin-top: 60px; width: 100%; float: top; } .card { width: 40%; margin-right: -100px; margin-top: 10px; float: right; } .rules { width: 100%; margin-top: 10px; margin-bottom: 50px; } .icon { width: 5%; float: top; } .text { width: 70%; margin: 50px auto; font-family: "Alumni Sans SC", sans-serif; font-size: calc(13px + 1.1vw); text-align: left; line-height: 2; } .text2 { margin-top: 10px; font-family: "Alumni Sans SC", sans-serif; text-align: center; } .skills { margin-top: 100px; } .top-container { background: linear-gradient(to left, #b5723e 0%, #ffda56 20%, #e5a842 50%, #ffda56 80%, #b5723e 100%); background-color: #f4c86f; padding-top: 44px; height: calc(200px + 15.1vw); width: 100%; display: inline-block; position: relative; } .bottom-container { background: linear-gradient(to left, #b5723e 0%, #ffda56 20%, #e5a842 50%, #ffda56 80%, #b5723e 100%); width: 100%; height: 130px; margin-top: -50px; padding-bottom: 160px; padding-top: 1px; font-size: 0.8rem; display: inline-block; position: relative; } @media (max-width: 480px) { body { font-size: 0.875rem; /* 14px on phones */ } }