body { background-color: #FFC069; padding: 10px; } .container{ margin: auto; background-color: #A45D5D; align-items: center; width: 80%; border: 3px solid #4A403A; border-radius: 15px; padding: 10px; transition: all 0.5s; } /* .spliter{ padding: 1%; } */ .nav{ position: absolute; top: 8px; right: 16px; font-size: 18px; } .nav_btn{ background-color: #A45D5D; border-style: none; border-radius: 4px; width: 100%; height: 20px; font-family: 'Courier New', Courier, monospace; color: #EFEFEF; transition: all 0.5s; cursor: pointer; } .nav_btn:hover{ background-color: #4A403A; } #title{ color: #A45D5D; text-align: center; font-family: 'Courier New', Courier, monospace; font-size: 35px; } .data{ color: #4A403A; font-family: 'Courier New', Courier, monospace; } /* text-align: center; */ .download_container{ text-align: center; margin: auto; background-color: #A45D5D; align-items: center; width: 80%; border: 3px solid #4A403A; border-radius: 15px; padding: 8px; padding-bottom: 2%; transition: all 0.5s; } ul { text-align: center; list-style-position: inside; } .down_btn{ background-color: #4A403A; color: #EFEFEF; border-radius: 6px; width: 30%; height: 35px; font-family: 'Courier New', Courier, monospace; font-size: 16px; font-weight: bold; box-shadow: 0.1px 0.1px 2px 0.1px black; border-style: none; transition: all 0.5s; } .down_btn:hover{ background-color: #FFC069; border-radius: 8px; font-size: 16.5px; } .footer { position: fixed; left: 0; bottom: 0; width: 100%; color: #4A403A; text-align: center; } /* Responsive Code */ @media only screen and (min-width: 400px) { /* For mobiles: */ .down_btn{ height: 100%; } } @media only screen and (min-width: 600px) { /* For tablets: */ .down_btn{ height: 35px; } } @media only screen and (min-width: 768px) { /* For desktop: */ .down_btn{ height: 35px; } }