@import url('https://fonts.googleapis.com/css2?family=Didact+Gothic&display=swap');

:root {
    --primary-color: #434346;
    --overlay-color: #480986;
    --menu-speed: 0.75s;
}

* {
    font-family: 'Didact Gothic', sans-serif;
    line-height: 1.4;
    box-sizing: border-box;
    margin: 0;
    padding: 0;
}

body {
    background-image: url("/assets/images/jeremy-perkins-uhjiu8FjnsQ-unsplash.jpg");
    background-size: cover;
}


/* Style for our header texts
	* --------------------------------------- */
h1 {
    font-size: 64px;
    font-family: 'Didact Gothic', sans-serif;
    font-weight: normal;
    color: #fff;
    margin: 0;
    padding: 0;
}

p {
    font-size: 2.5em;
    font-family: 'Didact Gothic', sans-serif;
    font-weight: normal;
    color: #fff;
}

.myHomeContainer p {
    font-size: 2vw;
    font-family: 'Didact Gothic', sans-serif;
    font-weight: normal;
    color: #fff;
    margin: 0;
    padding: 0;
}

.myAboutText {
    padding: 5vmin;
}

.myProjectDescription {
    padding: 5vmin;
    max-width: calc(max(min(50vh, 100vw), calc(100vw / 3)) * 1.5);
}

.myHomeContainer p:first-child {
    font-size: 5vw;
}

@media (max-width: 600px) {
    .myHomeContainer p {
        font-size: 5vw;
    }

    .myHomeContainer p:first-child {
        font-size: 10vw;
    }
}

@media (hover:none),
(hover:on-demand) {
    .myHomeContainer p {
        font-size: 5vw;
    }

    .myHomeContainer p:first-child {
        font-size: 10vw;
    }
}

@media screen and (orientation:portrait) {
    .myHomeContainer p {
        font-size: 5vw;
    }

    .myHomeContainer p:first-child {
        font-size: 10vw;
    }
}



/* Centered texts in each section
	* --------------------------------------- */

.section {
    text-align: center;
}


/* Defining each section background and styles
	* --------------------------------------- */

#section0 {
    background: #1111119b;
    /* Fallback */
    background-color: linear-gradient(#640995dd, #1111119b);
    background-image: url(/assets/images/jake-weirick-Q_RBVFFXR_g-unsplash.png), linear-gradient(#640995dd, #1111119b);
    background-size: cover;
}

#section1 {
    background: #1111119b;
    /* Fallback */
    background-color: linear-gradient(#1111119b, #d2afff5c);
    background-image: url(/assets/images/jake-weirick-Q_RBVFFXR_g-unsplash.png), linear-gradient(#1111119b, #d2afff5c);
    background-size: cover;
}

#section3 {
    background: #1111119b;
    /* Fallback */
    background-color: linear-gradient(#1111119b, #1111119b);
    background-image: url(/assets/images/jake-weirick-Q_RBVFFXR_g-unsplash.png), linear-gradient(#1111119b, #1111119b);
    background-size: cover;
}

#section4 {
    background: #1111119b;
    /* Fallback */
    background-color: linear-gradient(#1111119b, #c44cf032);
    background-image: url(/assets/images/jake-weirick-Q_RBVFFXR_g-unsplash.png), linear-gradient(#1111119b, #c44cf032);
    background-size: cover;
}

#section5 {
    background: #1111119b;
    /* Fallback */
    background-color: linear-gradient(#c44cf032, #1111119b);
    background-image: url(/assets/images/jake-weirick-Q_RBVFFXR_g-unsplash.png), linear-gradient(#c44cf032, #1111119b);
    background-size: cover;
}


/*Adding background for the slides
	* --------------------------------------- */

#slide0 {
    background: #1111119b;
    /* Fallback */
    background-color: linear-gradient(#d2afff5c, #1111119b);
    background-image: url(/assets/images/jake-weirick-Q_RBVFFXR_g-unsplash.png), linear-gradient(#d2afff5c, #1111119b);
    background-size: cover;
}

#slide1 {
    background: #1111119b;
    /* Fallback */
    background-color: linear-gradient(#d2afff5c, #1111119b);
    background-image: url(/assets/images/jake-weirick-Q_RBVFFXR_g-unsplash.png), linear-gradient(#d2afff5c, #1111119b);
    background-size: cover;
}

#slide2 {
    background: #1111119b;
    /* Fallback */
    background-color: linear-gradient(#d2afff5c, #1111119b);
    background-image: url(/assets/images/jake-weirick-Q_RBVFFXR_g-unsplash.png), linear-gradient(#d2afff5c, #1111119b);
    background-size: cover;
}


/* Bottom menu
	* --------------------------------------- */

#infoMenu {
    bottom: 80px;
}

#infoMenu li a {
    color: #fff;
}

#fp-nav {
    position: fixed;
    z-index: 100;
    top: 20%;
    opacity: 1;
    transform: translateY(-20%);
    -ms-transform: translateY(-20%);
    -webkit-transform: translate3d(0, -20%, 0);
}