*, *::before, *::after { margin: 0; padding: 0; box-sizing: border-box; font-family: 'Merriweather Sans', sans-serif; } :root { --colorDark1: #112D4E; --colorDark2: #3F72AF; --colorLight1: #DBE2EF; --colorLight2: #F9F7F7; } .wrapper{ width: 100vw; height: 120vh; color: var(--colorLight2); background-image: linear-gradient(160deg, #112d4e 0%, #3f72af 100%); } h1 { text-align: center; text-transform: uppercase; padding-top: 20px; } .tab-container { width: 90%; display: flex; justify-content: space-between; margin: 0 auto; margin-top: 4rem; max-width: 550px; } .tab { cursor: pointer; font-size: 0.875rem; letter-spacing: 1.75px; padding: 5px 8px; } .tab.current-tab { background-color: rgba(219, 226, 239, 0.5); border-radius: 4px; } .weather-container { margin-block: 4rem; /* display: flex; justify-content: center; align-items: center; flex-direction: column; margin-block: 4rem; */ /* top and bottom margin => margin-block */ } .btn { color: var(--colorLight2); background-color: var(--colorDark2); /* outline: none; */ /* appearance: none; */ /* all: unset; */ border: none; font-size: 0.85rem; padding: 10px 30px; text-transform: uppercase; border-radius: 5px; cursor: pointer; margin-bottom: 10px; } .sub-container { display: flex; flex-direction: column; align-items: center; } .grant-location-container { display: none; } /* .grant-location-container.active { display: flex; } */ .grant-location-container img { margin-bottom: 2rem; } /* p:nth-child(1) */ .grant-location-container p:first-of-type { font-size: 1.75rem; font-weight: 600; } .grant-location-container p:last-of-type { font-size: 0.85rem; font-weight: 500; margin-top: 0.75rem; margin-bottom: 1.75rem; letter-spacing: 0.75px; } /* Loader -> loading Screen */ .loading-container { display: none; } .loading-container.active { display: flex; } .loading-container p { text-transform: uppercase; } .user-info-container.active { display: flex; } .name { display: flex; align-items: center; gap: 0 0.5rem; margin-bottom: 1rem; } .user-info-container p { font-size: 1.5rem; font-weight: 200; } .user-info-container img{ width: 90px; height: 90px; } .name p{ font-size: 2rem; } .name img { width: 30px; height: 30px; object-fit: contain; } /* handling form the custom attribute */ .user-info-container p[data-temp] { font-size: 2.75rem; font-weight: 700; } .parameter-container { display: flex; gap: 10px 20px; justify-content: center; align-items: center; margin-top: 2rem; } .parameter { width: 30%; max-width: 200px; background-color: rgba(219, 226, 239, 0.5); border-radius: 5px; padding: 1rem; display: flex; flex-direction: column; gap: 5px 0; /* justify-content: space-between; */ align-items: center; } .parameter img { width: 50px; height: 50px; } .parameter p:first-of-type { font-size: 1.15rem; font-weight: 600; text-transform: uppercase; } .parameter p:last-of-type { font-size: 1rem; font-weight: 200; } .form-container { display: none; width: 90%; max-width: 550px; margin: 0 auto; /* display: flex; */ justify-content: center; align-items: center; gap: 0 10px; margin-bottom: 3rem; } .form-container.active { display: flex; } .form-container input { all: unset; width: calc(100% - 80px); height: 40px; padding: 0 20px; background-color: rgba(219, 226, 239, 0.5); border-radius: 10px; } .form-container input::placeholder { color: rgba(255, 225, 255, 0.7); } .form-container input:focus { outline: 3px solid rgba(255, 255, 255, 0.7) } .form-container .btn { padding: unset; width: 40px; height: 40px; display: flex; justify-content: center; align-items: center; border-radius: 50%; margin-bottom: 1px; }