section { display: block; background-color: rgba(255,255,255,0.5); width: 80%; max-width: 800px; margin-left: auto; margin-right: auto; padding: 50px; font-size: 1.2rem; margin-top: 40px; } #ekip{ width: 20vw; height: 10vh; border-radius: 5px; font-size: large; } .btn-equipe{ background-color: #a06827; color: #ffffff; padding: 5vh 10vw 5vh 10vw; margin-top: 30px; border-radius: 10px; font-size: large; font-weight: bolder; } .main-form{ font-size: 2vw; } a.team { display: block; color: black; padding: 10px; margin: auto; margin-top: 10px; background-color: white; width: 50%; text-decoration: none; border: 2px solid white; } a.team:hover { text-decoration: underline; text-decoration-color: red; transition: 0.3s ease-out; border: 2px solid red; } .img_enigme { width: 40%; } .input { width: 50%; background-color: white; border: 3px solid grey; border-radius: 4px; text-align: center; height: 50px; margin: 10px; font-weight: bold; } .submit { width: 50%; background-color: grey; border: 3px solid grey; color: white; border-radius: 4px; text-align: center; height: 50px; margin: 10px; font-weight: bold; } .submit:hover { transition: 0.3s ease; transform: scale(1.05); } @media (max-width: 700px) { .submit { width: 80%; } .input { width: 80%; } } table { border: 0; border-collapse: collapse; font-size: 0.75em; } td,th { border: 3px solid black; padding: 10px; } th { color: white; background-color: black; } td.title { color: red; } @keyframes rotate-zoom { 0% { transform: rotate(0deg) scale(1); } 25%{ transform: rotate(90deg) scale(1.5); } 50% { transform: rotate(180deg) scale(2); } 75%{ transform: rotate(270deg) scale(1.5); } 100% { transform: rotate(360deg) scale(1); } } .prez-ep { animation-name: rotate-zoom; animation-duration: 2s; /* Adjust the duration as desired */ animation-timing-function: linear; animation-iteration-count: infinite; width: 30%; height: 30%; }