@import url('https://fonts.googleapis.com/css2?family=Quicksand:wght@300;400;500;600;700&display=swap');

:root{
    font-family: 'Quicksand', sans-serif;
    --white: hsl(180, 50%, 99.5%);
    --green: hsl(73, 96%, 38%);
    --red: hsl(343, 95%, 44%);
    --yellow: hsl(50, 98%, 48%);
    --orange: hsl(39, 96%, 49%);
    --fire: hsl(11, 98%, 48%);
    --black: hsl(0, 0%, 20%);
    --clay: hsl(0, 0%, 93%);
}

*{
    margin: 0;
    padding: 0;
}

body{
    overflow-x: hidden;
    min-height: 100svh;
    width: 100svw;
    color: var(--black);
    background-color: var(--white);
}


/* Nav bar styleing */

nav{
    width: 100%;
    height: 3rem;
    display: grid;
    place-items: center;
}
ul{
    display: flex;
    justify-content: center;
    align-items: center;
    height: 100%;
}
ul li{
    list-style: none;
    height: 100%;
    padding: 0 2rem;
    line-height: 3rem;
    transition: color 0.2s ease-in-out, background-color 0.2s ease-in-out;
}
li.currentPage{
    background-color: var(--green);
    color: var(--white);
}
li:hover{
    cursor: pointer;
}
li:not(li.currentPage):hover{
    background-color: var(--yellow);
    color: var(--white);
}

/* Main content styling */

h2{
    font-size: 3rem;
    letter-spacing: 0.2rem;
    font-weight: 400;
    margin: 3rem;
}

section{
    width: 100svw;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
}

section:not(section:nth-child(1)){
    display: grid;
    place-items: center;
    padding-bottom: 3rem;
}

.basicInfo{
    width: 100%;
    height: calc(85vh - 3rem);
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    background-image: url(img/bg-image.jpg);
    background-position: center;
}

.basicInfo>*{
    color: var(--white);
    background-color: var(--red);
    padding: 0.5rem;
}

.basicInfo>div{
    display: grid;
    place-items: center;
    width: 200px;
    height: 177px;
}
.basicInfo>div>img{
    width: 100%;
    height: 100%;
}

.basicInfo h1{
    font-size: 4rem;
    font-weight: 400;
}

.basicInfo p{
    font-size: 2rem;
    font-weight: 300;
}

.guests{
    background-color: var(--clay);
}

.guestContainer{
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 2rem;
}

.guest{
    aspect-ratio: 0.8/1;
    width: 14rem;
    background-color: var(--white);
}

.guest>div:nth-child(1){
    height: 15%;
    background-color: var(--red);
    display: flex;
    align-items: center;
}
.guest:nth-child(2)>div:nth-child(1), .guest:nth-child(7)>div:nth-child(1){
    background-color: var(--yellow);
}
.guest:nth-child(3)>div:nth-child(1){
    background-color: var(--orange);
}
.guest:nth-child(4)>div:nth-child(1), .guest:nth-child(5)>div:nth-child(1){
    background-color: var(--green);
}
.guest:nth-child(8)>div:nth-child(1){
    background-color: var(--fire);
}
.guest>div:nth-child(1)>h5{
    padding: 0rem 0.5rem;
    color: var(--white);
    font-weight: 400;
}

.guest>.picture{
    height: 60%;
    overflow: hidden;
}

.guest>.picture>img{
    width: 100%;
    height: 100%;
    transition: transform 0.2s ease-in-out;
}

.guest>.picture>img:hover{
    transform: scale(1.2);
}

.info{
    padding: 0rem 1rem;
    display: grid;
    align-content: center;
}
.guest>.info{
    height: 25%;
}

.info>h6, .info>p{
    font-size: 0.9rem;
}

.schedule{
    width: 60svw;
    display: grid;
    grid-template-columns: repeat(2, 1fr);
}

.schedule>div>h3{
    font-size: 2rem;
    font-weight: 400;
    margin: 0.5rem 0rem;
}

.hourshedule{
    height: 5rem;
    margin: 1rem 0rem;
    display: flex;
}

.circleTime{
    aspect-ratio: 1/1;
    height: 100%;
    border-radius: 50%;
    display: grid;
    place-items: center;
    background-color: var(--green);
    color: var(--white);
}

.hourshedule:nth-child(3) .circleTime{
    background-color: var(--red);
}
.hourshedule:nth-child(4) .circleTime{
    background-color: var(--yellow);
}
.hourshedule:nth-child(5) .circleTime{
    background-color: var(--orange);
}
.hourshedule:nth-child(6) .circleTime{
    background-color: var(--fire);
}

.hourshedule>div>h6{
    font-size: 1.5rem;
    font-weight: 400;
}

.hourshedule>div>h6:hover{
    cursor: pointer;
    text-decoration: solid underline var(--black) 0.1rem;
}

.contact{
    color: var(--white);
    background-color: var(--green);
}

.contact>h2{
    font-size: 3.5rem;
    font-weight: 300;
}

.contactInfo{
    display: grid;
    width: 45%;
    grid-template-columns: repeat(2, 1fr);
    margin: 2rem;
}

.contactInfo h6{
    font-size: 1.2rem;
    font-weight: 500;
}

.contactInfo p{
    font-size: 1rem;
    font-weight: 300;
    color: hsla(180, 50%, 99.5%, 0.7);
}

span.website{
    color: var(--white);
}

span.website:hover{
    cursor: pointer;
    text-decoration: solid underline var(--white) 0.1rem;
}

.contactInfo>div:nth-child(1)>p{
    margin: 0.3rem 0rem;
}

.contact>.button{
    width: 15rem;
    height: 4rem;
    display: grid;
    place-items: center;
    font-size: 1.8rem;
    font-weight: 300;
    border-radius: 8rem;
    background-color: hsla(0, 0%, 20%, 0.3);
}
.button:hover{
    cursor: pointer;
}

.sponsors{
    background-color: var(--black);
    color: var(--green);
}

.sponsors>div{
    width: 60%;
    display: grid;
    grid-template-columns: repeat(5, 1fr);
    gap: 1rem;
    place-items: center;
}

.sponsors>div>div{
    aspect-ratio: 1/1;
    width: 100%;
    display: grid;
    place-items: center;
}

.sponsors>div>div>img{
    padding: 0.2rem;
    max-width: 90%;
    max-height: 60%;
    cursor: pointer;
}

.sponsors>div>div>img:not(.sponsors>div>div:nth-child(2)>img){
    background-color: var(--white);
}