/*  font-family: 'Karla', sans-serif; available font weights are 400 and 700 */

body {
    font-family: "Karla";
}

/** top navbar **/
.topnav {
    overflow: hidden;
}

/* Style the links inside the navigation bar */
.topnav a {
    float: left;
    color: #000;
    text-align: center;
    padding: 14px 16px;
    text-decoration: none;
    font-size: 1.5rem;
}

/* Change the color of links on hover */
.topnav a:hover {
    background-color: #ddd;
    color: black;
}

/* Add a color to the active/current link */
.topnav a.active {
    color: blue;
}

/** intro section **/

.sun {
    width: 10%;
    position: fixed;
    right: 10%;
    top: 8%;
    z-index: -1;
    border-radius: 100%;
    animation-duration: 1.5s;
    animation-name: dynamic-sun-rays;
    animation-iteration-count: infinite;
    animation-direction: alternate;
}

@keyframes dynamic-sun-rays {
    from {
	box-shadow: 0px 0px 10px 20px #FFFF77;
    }
    to {
	box-shadow: 0px 0px 20px 40px #FFFF77;
    }
}

.intro-text {
    /**margin: 18rem 3rem 5rem;**/
    display: inline-block;
    position: fixed;
    left: 6%;
    top: 18%;
    z-index: -1;
}


.intro-text h1 {
    font-weight: bold;
    font-size: 5rem;
}


.intro-text p {
    font-size: 2rem;
}

.land {
    width: 100%;
    margin-top: 16rem;
}


#dynamic-background {
    background-color: rgb(145, 198, 86);
    transition: 0.75s;
}

/** about-section **/
#about-section .row {
    width: 100%;
    padding: 10rem;
}

.laptop {
    height: 22rem;
}

.about-text {
    padding: 0rem 5rem 5rem 5rem;
}


.about-text h1 {
    font-size: 3.5rem;
    font-weight: bold;
}

.about-text p {
    font-size: 2rem;
}

#about-section .space {
    height: 100px;
}

/** PROJECTS SECTION **/

#projects-section {
    padding: 4rem;
}


#projects-section h1 {
    margin: 2rem;
    text-align: center;
    font-size: 3.5rem;
    font-weight: bold;
}


.projects-grid {
    margin: auto;
}


/** Project cards and project card animations **/

.flip-card {
    margin: 1rem;
    padding: 0;
    background-color: transparent;
    width: 200px;
    height: 300px;
    border: 1px solid #f1f1f1;
    border-radius: 5%;
    perspective: 1000px; /* Remove this if you don't want the 3D effect */
}


/* This container is needed to position the front and back side */
.flip-card-inner {
    position: relative;
    width: 100%;
    height: 100%;
    text-align: center;
    transition: transform 0.8s;
    transform-style: preserve-3d;
}

/* Do an horizontal flip when you move the mouse over the flip box container */
.flip-card:hover .flip-card-inner {
    transform: rotateY(180deg);
}


/* Position the front and back side */
.flip-card-front, .flip-card-back {
    font-size: 1.2rem;
    position: absolute;
    width: 100%;
    height: 100%;
    border: 1px solid white;
    border-radius: 4%;
    -webkit-backface-visibility: hidden; /* Safari */
    backface-visibility: hidden;
}


/* Style the front side (fallback if image is missing) */
.flip-card-front {
    background-color: white;
    color: black;
}


/* Style the back side */
.flip-card-back {
    padding: 0 0.5rem 0 0.5rem;
    background-color: white;
    color: black;
    transform: rotateY(180deg);
    display: flex;   /** the next two lines make the content shown vertically aligned to center, still not sure tho**/
    align-items: center;
}


.project-img {
    height: 250px;
    width: 180px;
}

/** moon **/

.moon-div {
    width: 100%;
    height: 200px;
    position: relative;
}


.moon-img {
    position: absolute;
    width: 250px;
    top: 100px;
    left: -300px;
}

.moon-rise {
    animation: rise 1.5s ease;
    animation-fill-mode: forwards;
}


@keyframes rise {
    from {
	left: -300px;
    }

    to {
	left: 50px;
    }

}



/** contacts section **/
#contact-section {
    margin: 0rem 0 0rem;
}

#contact-section .row {
    width: 100%;
    padding: 10rem;
}

.mail-img {
    height: 20rem;
}


.contact-text {
    padding: 0rem 5rem 5rem 5rem;
}


.contact-text h1 {
    font-size: 3.5rem;
    font-weight: bold;
}

.contact-text p {
    font-size: 2rem;
}

.resume-button {
    margin: 1rem;
}

/** footer section **/
#footer-section {
    background-color: #2196F3;
}

#footer-section .row {
    width: 100%;
}


.my-account-links {
    padding: 3rem 3rem 1rem;
}


.my-account-links .column {
    width: 5rem;
    margin: 1rem;
}


.account-logo {
    border-radius: 100%;
    transition: box-shadow 0.15s ease-in-out;
}

.account-logo:hover {
    border-radius: 100%;
    box-shadow: 7px 7px 5px rgba(0,0,0,0.4);
}


.copyright {
    background-color: #1A78C3;
    padding: 1rem;
    text-align: center;
}

.copyright a {
    color: white;
}


/** MEDIA QUERIES **/
@media only screen and (max-width: 950px) {  /** for 950px or lesser width screen **/

    .topnav a {
	font-size: 1rem;
    }

    .sun {
	width: 25%;
	top: 10%;
    }

    .land {
	margin-top: 25rem;
    }

    .intro-text h1 {
	font-size: 3.5rem;
    }

    .intro-text p {
	font-size: 1.1rem;
    }


    /** about-section **/
    #about-section .space {
	height: 0;
    }

    #about-section .row {
	padding: 5rem 3rem 3rem 3rem;
    }

    .laptop {
	margin-top: 3rem;
	height: 10rem;
	padding-left: 2rem;
    }

    .about-text {
	text-align: center;
	padding: 1rem 0rem 2rem 1rem;
    }

    .about-text h1 {
	font-size: 2.5rem;

    }

    .about-text p {
	font-size: 1.1rem;
    }

    /** projects-section **/

    #projects-section {
	padding: 2rem;
    }

    #projects-section h1 {
	margin: 1rem;
	font-size: 2.5rem;
    }

    .flip-card {
	width:215px;
	height: 270px;
    }

    .project-img {
	width: 160px;
	height: 210px;
    }

    /** moon **/
    .moon-div {
	height: 100px;
    }

    .moon-img {
	top: 10px;
	width: 150px;
    }

    /** contact section **/
    #contact-section {
	margin: 0rem 0 0rem;
    }

    #contact-section .row {
	padding: 1rem 3rem 3rem 3rem;
    }

    .mail-img {
	margin-top: 3rem;
	height: 10rem;
	padding-left: 2.5rem;
    }


    .contact-text {
	text-align: center;
	padding: 1rem 0rem 2rem 1rem;
    }

    .contact-text h1 {
	font-size: 2.5rem;
    }

    .contact-text p {
	font-size: 1.1rem;
    }

    /** footer section **/

    .my-account-links {
	padding: 3rem 1.5rem 1rem 1.8rem;
    }


    .my-account-links .column {
	width: 3rem;
	margin: 1rem;
    }

    .copyright {
	font-size: 0.75rem;
    }

}



@media only screen and (min-width: 950px) and (max-width: 1300px) {  /** for 950px above and less than 1300px **/

    .land {
	margin-top: 20rem;
    }

    .intro-text h1 {
	font-size: 3rem;
    }

    .intro-text p {
	font-size: 1.5rem;
    }

    /** about section **/
    #about-section .row {
	padding: 5rem 0rem 2rem 3rem;
    }

    .about-text p {
	font-size: 1.5rem;
    }

    /** contact section **/
    #contact-section .row {
	padding: 5rem 0rem 2rem 3rem;
    }

    .contact-text p {
	font-size: 1.5rem;
    }

}