/* * is a special css element that effects everything */ * { font-family: "Lucida Grande", "Helvetica", "Arial", sans-serif; /* This sets the font family. Since it is inside a *, it does it for every element */ } /* things without . do not affect classes, they affect html tags such as , */ html, body { margin: 0px; /* Margin is the area outside of the box that is padded */ } body { /*background-color: rgb(247 166 166); /* Background-Color sets the background color of an element */ /* Linear Gradient */ background-image: url("../img/background_website.png"); /*background: linear-gradient(to top, #ff4e4e, #feb47b); */ } /* things with . affect classes. they affect html tags that have class="" inside of them, like this: */ .content { margin: 8px; /* Margin is the area outside of the box that is padded */ margin-top: 50px; } .contentAboutme { margin: 8px; /* Margin is the area outside of the box that is padded */ margin-top: 50px; color: rgb(0 0 0); /* Color is text color */ text-align: center; } .YTVideo { width: 420px; /* Width of the element */ /* Padding but on the right of the element */ height: 345px; border: black; border-style: solid; margin-top: 10px; margin-left: 10px; border-width: 3px; border-radius: 3px; padding: 5px; background: rgb(156 156 156 / 49%); text-align: center; margin: auto; } .modslist { display: flex; /* flex stuff, confusing */ flex-direction: row; flex-wrap: wrap; align-content: flex-start; justify-content: flex-start; align-items: center; padding: 8px; width: 70%; margin: auto; } @keyframes TopBar_Startup { 0% {left:0px; top:0px; width: 100px;} 25% {left:200px; top:0px; width: min(111px, 92vw);} } @keyframes Box_Startup { 0% {left:0px; top:0px; width: 200px;} 25% {left:0px; top:0px; width: min(720px, 92vw); margin: 50px auto 8px auto;} } .topbar { margin: 8px; /* Margin is the area outside of the box that is padded */ margin-top: 30px; color: rgb(0 0 0); /* Color is text color */ text-align: center; border: black; border-style: solid; border-radius: 3px; padding: 2px; background: rgba(65, 65, 65, 0); border: rgba(255, 255, 255, 0.605); display: flex; justify-content: center; /* Centers horizontally */ white-space: nowrap; } .topbar a { width: min(111px, 92vw); height: 25px; color: rgb(255, 255, 255); border: rgba(255, 255, 255, 0.605); border-style: solid; margin-top: 10px; margin-left: 10px; border-width: 3px; border-radius: 4px; padding: 5px; background: rgba(65, 65, 65, 0.49); display: list-item; text-align: center; font-size: clamp(1rem, 5vw, 1.5rem); animation-iteration-count: 1; animation-fill-mode: forwards; animation-name: TopBar_Startup; animation-duration: 3s; list-style-type: none; } .topbar a:hover { color: rgb(243, 238, 83); text-decoration: underline; } .boxinfo { font-size: 0.9em; margin: 50px auto 8px auto; margin-top: 50px; color: rgb(0 0 0); /* Color is text color */ border: 2px black; /*border-style: solid;*/ border-radius: 2px; width: min(720px, 92vw); /* ← fits any screen */ /*background: rgb(156 156 156 / 49%);*/ box-sizing: border-box; justify-content: center; align-items: center; animation-iteration-count: 1; animation-fill-mode: forwards; animation-name: Box_Startup; animation-duration: 3s; justify-content: center; /* Centers horizontally */ text-align: left; padding: 10px 20px 30px; } .boxinfo a { font-size: 1em; padding: 2px; /* Space inside the box */ box-sizing: border-box; /* Padding won't change box width */ animation-fill-mode: forwards; animation-name: Box_Startup; animation-duration: 1s; white-space: nowrap; } .mod img { width: 180px; /* Width of the element */ margin-left: 0px; /* Margin Left, is the margin for the left side of the content */ height: 180px; border: black; border-style: solid; } .mod p { height: 45px; width: 190px; text-align: center; text-overflow: ellipsis; } .mod p a { margin-left: 0px !important; } .modslist a { margin-left: 20px; } a { color: rgb(255, 255, 255); text-decoration: none; } a:hover { color: rgb(83, 94, 243); text-decoration: underline; } table, th, td { border: 2px solid; color: rgb(0, 0, 0); padding: 0px 2px 0px; border-collapse: collapse; }