@import url(reset.css);
@import url(font.css);

@keyframes fade {
    0% {opacity: 100%;}
    25% {opacity: 0%;}
}

@keyframes reverseFade {
    0% {opacity: 0%;}
    25% {opacity: 100%;}
}

@keyframes backgroundScroll {
    0% {background-position: 0%;}
    50% {background-position: 100%;}
    100% {background-position: 0%;}
}

.slideShowImage {
    border: solid black 0.25vw;
    object-fit:cover;
    width: 70vw;
}

#slideShowContainer {
    display: flex;
    justify-content: center;

    animation-duration: 0.2s;
    width: 50vw;
    height: 50vh;
}

body {
    background-image: url(Media/ProjectZomboidPanoBlur.jpg);
    height: 90vh;

    animation-name: backgroundScroll;
    animation-duration: 100s;
    animation-iteration-count: infinite;
    animation-timing-function: cubic-bezier(0,0,0,0);
}

h1 {
    text-align: left;
    font-family: Poppins;
    font-size: 350%;
    padding-left: 1vh;
}

h2 {
    text-align: left;
    font-family: Poppins;
    font-size: 300%;
    text-align: center;
}

header {
    background-color: white;
    width: 90vw;
    margin-left: 5vw;
    margin-top: 4vh;
    height: 12vh;

    display: flex;
    align-items: center;
    justify-content: start;
    border: solid 0.25vw black;
}

#mainContent {
    width: 90vw;
    display: grid;
    grid-template-columns: 1fr 3fr;
    justify-content: center;
    margin-left: 5vw;
    margin-top: 5vh;
    gap: 2vw;
}

.gridContent {
    height: 100%;
    border: solid black 0.25vw;
}

#SideBar {
    border-bottom-right-radius: 5vw;
    height: 50vh;
}

#ContentHolder {
    height: 120%;
    display: flex;
    flex-flow: column;
    align-items: center;
}

p {
    font-family: Poppins;
    align-self: flex-start;
    padding-left: 4vw;
    padding-right: 4vw;
    margin-top: 1vh;
    font-size: 1.5vw;
}

li {
    font-family: Poppins;
    align-self: flex-start;
    padding-left: 4vw;
    padding-right: 4vw;
    margin-top: 1vh;
    font-size: 1.5vw;
}

h3 {
    text-align: left;
    font-family: Poppins;
    font-size: 2vw;
    align-self: flex-start;
    margin-top: 2vh;
    padding-left: 4vw;
    padding-right: 4vw;
    align-self: flex-start;
}

a {
    text-decoration: none;
    color: black;
    align-self: baseline;
}

footer {
    border-top: solid black 0.25vw;
    background-color: white;
    width: 100vw;
    height: 10vh;
    position: fixed;
    bottom: 0%;
    display: flex;
    align-items: center;
    justify-content: center;
}

input {
    font-family: Poppins;
    align-self: flex-start;
    padding-left: 0.5vw;
    padding-right: 0.5vw;
    margin-top: 1vh;
    font-size: 1.5vw;
}

textarea {
    font-family: Poppins;
    align-self: flex-start;
    padding-left: 0.5vw;
    padding-right: 0.5vw;
    margin-top: 1vh;
    font-size: 1.5vw;

    width: 100%;
    height: 20vh;
}

form {
    background-color: gray;
    border: double black 1vw;
    width: 50vw;
    display: flex;
    flex-flow: column;
    padding-left: 0.5vw;
    padding-right: 0.5vw;
    padding-bottom: 1vh;
}