#uploadWindow { position:absolute; left:50%; top:50%; transform:translate(-50%,-50%); padding:5px 10px 10px 10px; background-color:#222222; color:#ddd; h1, p, a { margin: 0px; font-size: 14px; } a { color:#999; } h1 { font-weight:600; font-size: 25px; } .number { font-family: "Inconsolata", monospace; } #add_new_files { background-color:#191919; border: 1px solid gray; width:350px; padding: 0px 0px 10px 0px; @media screen and (max-width: 500px) { width:100%; } p { font-family: "Fira Code", monospace; text-align: left; margin: 0px 0px 0px 10px; font-size: 30px; span { font-size:16px; position:relative; top:-4px; left:10px; } @media screen and (max-width:500px) { font-size: 40px; span { font-size:20px; position:relative; top:-6px; left:10px; } } } #file_add_btns { width:calc( 100% - 20px ); margin:auto; position:relative; display:flex; flex-direction:row; column-gap:10px; button { background-color:#333333; color:#DDDDDD; border:none; padding:5px; flex-basis:50%; flex-grow:1; transition-duration:250ms; cursor:pointer; @media screen and (max-width: 500px) { font-size:16px; padding:10px; } &:hover { @media screen and (min-width: 500px) { transition-duration:250ms; flex-basis: 60%; } background-color:#393939; color: #ffffff; } } } } @media screen and (max-width: 500px) { width: calc( 100% - 20px ); height: calc( 100% - 20px ); border-radius:0px; background-color:#00000000; transform:none; left:10px; top:10px; padding:0px; } }