:root {
    --clr-neutral-900: hsl(207, 19%, 9%);
    --clr-neutral-100: hsl(0, 0%, 100%);
    --clr-neutral-400: hsl(142, 90%, 61%);
    --clr-neutral-500: hsl(241, 52%, 60%);
    --clr-neutral-700: hsl(56, 100%, 50%);
    --clr-neutral-600: hsl(0, 86%, 61%);
}

*,
*::before,
*::after {
    box-sizing: border-box;
}
.logo
{
background-image: url(logo.jpg);
background-repeat: no-repeat;
background-size: 15%;


}

#submit{
    position: absolute;
    left: 950px;
    top: 130px;
    padding: 10px;
    background-color: orangered;
    border-radius: 5px;
    z-index: 20;
}
#submit:hover{
    position: absolute;
    left: 950px;
    top: 130px;
    padding: 10px;
    background-color: whitesmoke;
    border-radius: 5px;
    z-index: 20;
}

.details{
    position: absolute;
    left: 810px;
    top: 29px;
    border-style: solid;
    border-radius: 10px;
    padding: 5px;
    color:white;
}

.member
{
    left: 1225px;
    top: 20px;
    position: absolute;
    color:white;
    z-index: 5;
    font-size: 15px;
    text-align: right;
    border-style: solid;
    border-radius: 10px;
    padding: 5px;
}
.cse{
    left: 1130px;
    position: absolute;
    top: 20px;
    color:white;
    text-align: center;
    z-index: 5;
    border-style: solid;
    border-radius: 10px;
    padding: 5px;
    font-size: 20px;
}
.hed
{
    left: 250px;
    top: 0px;
    position: absolute;
    color: white;
    font-size: 40px;
    text-align: center;
    border-style: solid;
    border-radius: 10px;
    padding: 5px;
   
   }
body {
    display: grid;
    min-height: 100vh;
    line-height: 1.6;
    background: var(--clr-neutral-900);
    font-family: sans-serif;
    padding-right: 15em;
}

.c1 {
    color: var(--clr-neutral-100);
    left: 0px;
    top: 200px;
    position: absolute;
    background-image: url(1.jpg);
    background-size: cover;
    padding: 10rem 0 0;
    max-width: 35ch;
    border-radius: 0.5rem;
    overflow: hidden;
    transition: transform 500ms ease;
}

.c1:hover,
.c1:focus-within {
    transform: scale(1.05);
}

.c1c {
    --padding: 1.5rem;
    padding: var(--padding);
    background: linear-gradient( hsl(0 0% 0%/0), hsl(0 0% 0%/0.3) 20%, hsl(0 0% 0%/1));
    transform: translateY(65%);
    transition: transform 500ms ease;
}

.c1c>*:not(.c1t) {
    opacity: 0;
    transition: opacity 500ms linear;
}

.c1:hover .c1c,
.c1:focus-within .c1c {
    transform: translateY(0%);
    transition-delay: 500ms;
}

.c1:focus-within .c1c {
    transition-duration: 0ms;
}

.c1:hover .c1c>*:not(.c1t),
.c1:focus-within .c1c>*:not(.c1t) {
    opacity: 1;
    transition-delay: 1000ms;
}

.c1t {
    position: relative;
    width: max-content;
}

.c1b {
    color: rgb(255 255 255 / 0.85);
}

.c1t::after {
    content: "";
    position: absolute;
    height: 4px;
    width: calc(100% + var(--padding));
    left: calc(var(--padding) * -1);
    bottom: -2px;
    background: var(--clr-neutral-400);
    transform: scaleX(0);
    transform-origin: left;
    transition: transform 500ms ease;
}

.c1:hover .c1t::after,
.c1:focus-within .c1t::after {
    transform: scaleX(1);
}


.c2 {
    color: var(--clr-neutral-100);
    left: 300px;
    top: 200px;
    position: absolute;
    background-image: url(2.jpg);
    background-size: cover;
    padding: 10rem 0 0;
    max-width: 35ch;
    border-radius: 0.5rem;
    overflow: hidden;
    transition: transform 500ms ease;
}

.c2:hover,
.c2:focus-within {
    transform: scale(1.05);
}

.c2c {
    --padding: 1.5rem;
    padding: var(--padding);
    background: linear-gradient( hsl(0 0% 0%/0), hsl(0 0% 0%/0.3) 20%, hsl(0 0% 0%/1));
    transform: translateY(65%);
    transition: transform 500ms ease;
}

.c2c>*:not(.c2t) {
    opacity: 0;
    transition: opacity 500ms linear;
}

.c2:hover .c2c,
.c2:focus-within .c2c {
    transform: translateY(0%);
    transition-delay: 500ms;
}

.c2:focus-within .c2c {
    transition-duration: 0ms;
}

.c2:hover .c2c>*:not(.c2t),
.c2:focus-within .c2c>*:not(.c2t) {
    opacity: 1;
    transition-delay: 1000ms;
}

.c2t {
    position: relative;
    width: max-content;
}

.c2b {
    color: rgb(255 255 255 / 0.85);
}

.c2t::after {
    content: "";
    position: absolute;
    height: 4px;
    width: calc(100% + var(--padding));
    left: calc(var(--padding) * -1);
    bottom: -2px;
    background: var(--clr-neutral-500);
    transform: scaleX(0);
    transform-origin: left;
    transition: transform 500ms ease;
}

.c2:hover .c2t::after,
.c2:focus-within .c2t::after {
    transform: scaleX(1);
}


.c3 {
    color: var(--clr-neutral-100);
    left: 600px;
    top: 200px;
    position: absolute;
    background-image: url(3.jpg);
    background-size: cover;
    padding: 10rem 0 0;
    max-width: 35ch;
    border-radius: 0.5rem;
    overflow: hidden;
    transition: transform 500ms ease;
}

.c3:hover,
.c3:focus-within {
    transform: scale(1.05);
}

.c3c {
    --padding: 1.5rem;
    padding: var(--padding);
    background: linear-gradient( hsl(0 0% 0%/0), hsl(0 0% 0%/0.3) 20%, hsl(0 0% 0%/1));
    transform: translateY(65%);
    transition: transform 500ms ease;
}

.c3c>*:not(.c3t) {
    opacity: 0;
    transition: opacity 500ms linear;
}

.c3:hover .c3c,
.c3:focus-within .c3c {
    transform: translateY(0%);
    transition-delay: 500ms;
}

.c3:focus-within .c3c {
    transition-duration: 0ms;
}

.c3:hover .c3c>*:not(.c3t),
.c3:focus-within .c3c>*:not(.c3t) {
    opacity: 1;
    transition-delay: 1000ms;
}

.c3t {
    position: relative;
    width: max-content;
}

.c3b {
    color: rgb(255 255 255 / 0.85);
}

.c3t::after {
    content: "";
    position: absolute;
    height: 4px;
    width: calc(100% + var(--padding));
    left: calc(var(--padding) * -1);
    bottom: -2px;
    background: var(--clr-neutral-700);
    transform: scaleX(0);
    transform-origin: left;
    transition: transform 500ms ease;
}

.c3:hover .c3t::after,
.c3:focus-within .c3t::after {
    transform: scaleX(1);
}


.c4 {
    color: var(--clr-neutral-100);
    left: 900px;
    top: 200px;
    position: absolute;
    background-image: url(4.jpg);
    background-size: cover;
    padding: 10rem 0 0;
    max-width: 35ch;
    border-radius: 0.5rem;
    overflow: hidden;
    transition: transform 500ms ease;
}

.c4:hover,
.c4:focus-within {
    transform: scale(1.05);
}

.c4c {
    --padding: 1.5rem;
    padding: var(--padding);
    background: linear-gradient( hsl(0 0% 0%/0), hsl(0 0% 0%/0.3) 20%, hsl(0 0% 0%/1));
    transform: translateY(65%);
    transition: transform 500ms ease;
}

.c4c>*:not(.c4t) {
    opacity: 0;
    transition: opacity 500ms linear;
}

.c4:hover .c4c,
.c4:focus-within .c4c {
    transform: translateY(0%);
    transition-delay: 500ms;
}

.c4:focus-within .c4c {
    transition-duration: 0ms;
}

.c4:hover .c4c>*:not(.c4t),
.c4:focus-within .c4c>*:not(.c4t) {
    opacity: 1;
    transition-delay: 1000ms;
}

.c4t {
    position: relative;
    width: max-content;
}

.c4b {
    color: rgb(255 255 255 / 0.85);
}

.c4t::after {
    content: "";
    position: absolute;
    height: 4px;
    width: calc(100% + var(--padding));
    left: calc(var(--padding) * -1);
    bottom: -2px;
    background: var(--clr-neutral-600);
    transform: scaleX(0);
    transform-origin: left;
    transition: transform 500ms ease;
}

.c4:hover .c4t::after,
.c4:focus-within .c4t::after {
    transform: scaleX(1);
}


.c5 {
    color: var(--clr-neutral-100);
    left: 1200px;
    top: 200px;
    position: absolute;
    background-image: url(5.jpg);
    background-size: cover;
    padding: 10rem 0 0;
    max-width: 35ch;
    border-radius: 0.5rem;
    overflow: hidden;
    transition: transform 500ms ease;
}

.c5:hover,
.c5:focus-within {
    transform: scale(1.05);
}

.c5c {
    --padding: 1.5rem;
    padding: var(--padding);
    background: linear-gradient( hsl(0 0% 0%/0), hsl(0 0% 0%/0.3) 20%, hsl(0 0% 0%/1));
    transform: translateY(65%);
    transition: transform 500ms ease;
}

.c5c>*:not(.c5t) {
    opacity: 0;
    transition: opacity 500ms linear;
}

.c5:hover .c5c,
.c5:focus-within .c5c {
    transform: translateY(0%);
    transition-delay: 500ms;
}

.c5:focus-within .c5c {
    transition-duration: 0ms;
}

.c5:hover .c5c>*:not(.c5t),
.c5:focus-within .c5c>*:not(.c5t) {
    opacity: 1;
    transition-delay: 1000ms;
}

.c5t {
    position: relative;
    width: max-content;
}

.c5b {
    color: rgb(255 255 255 / 0.85);
}

.c5t::after {
    content: "";
    position: absolute;
    height: 4px;
    width: calc(100% + var(--padding));
    left: calc(var(--padding) * -1);
    bottom: -2px;
    background: var(--clr-neutral-100);
    transform: scaleX(0);
    transform-origin: left;
    transition: transform 500ms ease;
}

.c5:hover .c5t::after,
.c5:focus-within .c5t::after {
    transform: scaleX(1);
}