*{margin:0;padding:0}:root{--lightCyan:#cee3e9;--neonGreen:#52ffa8;--grayishBlue:#4e5d73;--darkGrayishBlue:#323a49;--darkBlue:#1f2632}*{font-family:Manrope;font-weight:800}body{background-color:var(--darkBlue);height:100vh;justify-content:center}body,main{display:flex;flex-direction:column;align-items:center}main{width:90%;max-width:405px;border-radius:10px;background-color:var(--darkGrayishBlue);box-sizing:border-box;padding:40px 25px 61px;transform:translateY(-20%);text-align:center;position:relative;justify-content:space-between}h2{color:var(--neonGreen);font-size:10px;letter-spacing:4px;text-transform:uppercase}h2,p{opacity:1;transition:all .3s}p{margin:24px 0;font-size:20px;color:var(--lightCyan)}main img:nth-of-type(2){display:none}.btn-refresh{position:absolute;bottom:-25px;left:calc(50% - 25px);z-index:1;border-radius:50%;width:50px;height:50px;border:none;background-color:var(--neonGreen);cursor:pointer;display:flex;justify-content:center;align-items:center;transition:all .2s}.btn-refresh:hover{box-shadow:0 0 10px var(--neonGreen)}.attribution{font-size:11px;text-align:center}.attribution a{color:#3e52a3}@media (min-width:768px){main{transform:translateY(0);padding:40px 35px 61px}main img:first-of-type{display:none}main img:nth-of-type(2){display:block;width:100%}}