html,body{margin:0;padding:0;font-family:Arial,sans-serif;background-color:#002443;height:100%}h1{color:#f9f9f9}#videos{display:grid;grid-template-columns:repeat(auto-fill,minmax(300px,1fr));gap:20px;padding:1em;margin:0 auto;max-width:1200px}.video{position:relative;list-style-type:none;border:1px solid #c8c8c8;border-radius:10px;padding:1em;background-color:#589400;transition:background-color 1s,border-radius 1s;box-shadow:0 4px 8px #0000001a}.video h2{margin:0 0 10px;font-size:1.2em}.video a{text-decoration:none;color:#000}.video a:hover{text-decoration:underline}iframe{width:100%;height:200px;border:none;border-radius:10px}#button-container{display:flex;justify-content:space-between;align-items:center;margin-top:1em}.vote-button-container{display:flex;align-items:center}.button-icon{font-size:30px;margin:0 10px;cursor:pointer;color:#002443}.button-icon:hover{color:#0050a6}#like-holder{display:flex;align-items:center;font-size:1.5rem;margin:10px 0}li>button{margin-top:.5rem;height:2rem;border:none;background:transparent;cursor:pointer}li>button:hover{color:#0050a6}li>button{margin-top:.5rem;height:2rem}#like-holder{font-size:2rem;width:100%;margin-bottom:10px;margin-top:10px}#heart-icon{margin-right:10px;color:red}#button-container{display:flex;flex-direction:row;justify-content:space-between;align-items:flex-end}.vote-button-container{display:flex;flex-direction:row-reverse;align-items:center;justify-content:right}form{background-color:#589400;padding:1.5em;border-radius:10px;box-shadow:0 4px 8px #0000001a;margin-bottom:2em;max-width:45%;flex:1}form label{margin:.5em 0;font-size:1.2em;color:#111;display:block}form input{width:90%;padding:.5em;margin-bottom:1em;border:1px solid #ccc;border-radius:5px;font-size:1em;display:block}form button{padding:.7em 1.5em;border:none;border-radius:5px;background-color:#0050a6;color:#fff;font-size:1em;cursor:pointer;transition:background-color .3s ease}form button:hover{background-color:#003e85}#form-and-sort-container{display:flex;flex-direction:row-reverse;justify-content:space-evenly;align-items:flex-start;margin-bottom:2em;gap:1em}#drop-down-container{display:flex;flex-direction:row;align-items:center}#drop-down-container>label{color:#f5f5f5;font-weight:bolder;margin-right:5px}#drop-down-container>select{width:9rem;height:2.5rem;font-weight:700;border-radius:5px;border:1px solid #ccc;background-color:#f1f1f1;padding:.3em;font-size:1em;transition:background-color .3s ease,border .3s ease;text-align:center;-webkit-appearance:none;-moz-appearance:none;appearance:none}#drop-down-container>select>option{font-weight:700;text-align:center}#drop-down-container>select:hover,#drop-down-container>select:focus{background-color:#d3d3d3;border-color:#0050a6}.footer{background-color:#002443;padding:10px 0;color:#fff;text-align:center;position:sticky;width:100%;bottom:0;margin-top:auto;border-top:#001e60 solid 1px}.footer-content{max-width:1200px;margin:0 auto}.footer-links{margin-top:7px}.footer-links a{color:#efefef;margin:0 7px;text-decoration:none}.footer-links a:hover{text-decoration:underline}.App{display:flex;flex-direction:column;min-height:100vh}.App-header{flex:1}html,body{margin:0}h1{text-align:center}