:root {
    --mainColor: #eaeaea;
    --secondaryColor: #fff;

    --borderColor: #c1c1c1;
    --profileColor: #ffec80;
    --mainText: black;
    --secondaryText: #4b5156;

    --themeDotBorder: #24292e;

    --previewBg: rgb(251, 249, 243, 0.8);
    --previewShadow: #ffec80;


    --buttonColor: black;


}

html, body {
    padding: 0;
    margin: 0;
}

body * {
    transition: 0.3s;
}

h1, h2, h3, h4, h5, h6, strong {
    color: var(--mainText);
    font-family: 'Russo One', sans-serif;
    font-weight: 500;
}

p, li, span, label, input, textarea {
    color: var(--mainText);
    font-family: "Roboto mono", monospace;
}

.a {
    color: var(--mainText);
}


h1 {
    font-size: 56px;
}

h2 {
    font-size: 36px;
}

h3 {
    font-size: 28px;
}

h4 {
    font-size: 24px;
}

h5 {
    font-size: 20px;
}

h6 {
    font-size: 16px;
}

.s1 {
    background-color: var(--mainColor);
    border-bottom: 1px solid var(--borderColor);
    overflow: auto;
}

.s2 {
    background-color: var(--secondaryColor);
    border-bottom: 1px solid var(--borderColor);
    overflow: auto;
}

.main-container {
    text-align: center;
    width: 1200px;
    margin: 0 auto;
}


.line-1 {
    font-family: 'Anonymous Pro', monospace;
    border-right: 2px solid rgba(255, 255, 255, .75);
    font-size: 70px;
    white-space: nowrap;
    overflow: hidden;

}

/* Animation */
.anim-typewriter {

    animation: typewriter 3s steps(44) 1s 1 normal both,
    blinkTextCursor 500ms steps(30) infinite normal;
}

@keyframes typewriter {
    from {
        width: 0;
    }
    to {
        width: 14em;
    }
}

@keyframes blinkTextCursor {
    from {
        border-right-color: rgba(255, 255, 255, .75);
    }
    to {
        border-right-color: transparent;
    }
}


.greeting-wrapper {
    display: grid;
    text-align: center;
    align-content: center;
    min-height: 10em;

}


.intro-wrapper {
    background-color: var(--secondaryColor);
    border: 1px solid var(--borderColor);
    border-radius: 5px 5px 0 0;

    margin-bottom: 20px;

    -webkit-box-shadow: -1px 1px 3px -1px rgba(0, 0, 0, 0.75);
    -moz-box-shadow: -1px 1px 3px -1px rgba(0, 0, 0, 0.75);
    box-shadow: -1px 1px 3px -1px rgba(0, 0, 0, 0.75);

    display: grid;
    grid-template-columns: 1fr 1fr;

    grid-template-areas:
		'nav-wrapper nav-wrapper'
		'left-column right-column';
}

.nav-wrapper {
    border-radius: 5px 5px 0 0;
    grid-area: nav-wrapper;
    border-bottom: 1px solid var(--borderColor);
    display: flex;
    justify-content: space-between;
    align-items: center;
    background-color: var(--mainColor);
}

#navigation {
    margin: 0;
    padding: 10px;

}

#navigation li {
    display: inline-block;
    margin-right: 5px;
    margin-left: 5px;

}

.dots-wrapper {
    display: flex;
    padding: 10px;
}

#dot-1 {
    background-color: red;
}

#dot-2 {
    background-color: yellow;
}

#dot-3 {
    background-color: green;
}

.browser-dot {
    background-color: black;
    height: 15px;
    width: 15px;
    border-radius: 50%;
    margin: 5px;
    -webkit-box-shadow: -1px 1px 3px -1px rgba(0, 0, 0, 0.75);
    -moz-box-shadow: -1px 1px 3px -1px rgba(0, 0, 0, 0.75);
    box-shadow: -1px 1px 3px -1px rgba(0, 0, 0, 0.75);

}


#theme-options-wrapper {
    display: flex;
    justify-content: center;
    margin-top: 30px;
}

.theme-dot {
    height: 30px;
    width: 30px;
    border-radius: 50%;
    background-color: black;

    margin: 5px;
    border: 2px solid var(--themeDotBorder);

    -webkit-box-shadow: -1px 1px 3px -1px rgba(0, 0, 0, 0.75);
    -moz-box-shadow: -1px 1px 3px -1px rgba(0, 0, 0, 0.75);
    box-shadow: -1px 1px 3px -1px rgba(0, 0, 0, 0.75);
    cursor: pointer;

}

.theme-dot:hover {
    border-width: 5px;
}

#light-mode {
    background-color: #fff;
}

#blue-mode {
    background-color: #192734;
}

#green-mode {
    background-color: #78866b;
}

#purple-mode {
    background-color: #7E4C74;
}

#settings-note {
    font-size: 12px;
    font-style: italic;
    text-align: center;
}

.left-column {
    grid-area: left-column;
    padding-top: 50px;
    padding-bottom: 50px;
}

.right-column {
    grid-area: right-column;
    display: grid;
    align-content: center;

    padding-top: 50px;
    padding-bottom: 50px;
}

#preview-shadow {
    background-color: var(--previewShadow);
    width: 300px;
    height: 180px;
    padding-left: 30px;
    padding-top: 30px;
}

#preview {
    width: 300px;
    border: 1.5px solid #17a2b8;
    background-color: var(--previewBg);
    padding: 15px;
    position: relative;
}

.corner {
    width: 7px;
    height: 7px;
    border-radius: 50%;
    border: 1.5px solid #17a2b8;
    background-color: #fff;
    position: absolute;
}

#corner-tl {
    top: -5px;
    left: -5px;
}

#corner-tr {
    top: -5px;
    right: -5px;
}

#corner-br {
    bottom: -5px;
    right: -5px;

}

#corner-bl {
    bottom: -5px;
    left: -5px;
}


.about-wrapper {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
    padding-bottom: 50px;
    padding-top: 50px;
    gap: 100px;
}

#skills {
    display: flex;
    justify-content: space-evenly;
    background-color: var(--previewShadow);
}

.social-links {
    display: grid;
    align-content: center;
    text-align: center;
}

#social_img {
    width: 100%;

}

.resume {
    display: grid;
    margin-top: 20px;
    justify-content: center;
    font-family: 'Russo One', sans-serif;
    text-color: var(--secondaryColor)

}

.post-wrapper {
    display: grid;
    /*grid-template-columns: repeat(auto-fit, 320px 320px);*/
    grid-template-columns: repeat(4, 1fr);
    gap: 25px;
    justify-content: center;
    padding-bottom: 50px;

}


/* The flip card container - set the width and height to whatever you want. We have added the border property to demonstrate that the flip itself goes out of the box on hover (remove perspective if you don't want the 3D effect */
.flip-card {
    background-color: transparent;
    width: 300px;
    height: 300px;
    border-radius: 20px;
    -webkit-box-shadow: -2px 7px 21px -9px rgba(0, 0, 0, 0.75);
    -moz-box-shadow: -2px 7px 21px -9px rgba(0, 0, 0, 0.75);
    box-shadow: -2px 7px 21px -9px rgba(0, 0, 0, 0.75);
    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%;
    transition: transform 0.8s;
    transform-style: preserve-3d;
    border-radius: 20px;
}

/* 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 {
    position: absolute;
    width: 100%;
    height: 100%;
    border-radius: 20px;
    -webkit-backface-visibility: hidden; /* Safari */
    backface-visibility: hidden;
}

/* Style the front side (fallback if image is missing) */
.flip-card-front {
    border-radius: 20px;
    background-color: #bbb;
    color: black;
}

.flip-card-front img {
    width: 100%;
    height: 100%;
    border-radius: 20px;
}

/* Style the back side */
.flip-card-back {
    background-color: var(--previewBg);
    border-radius: 20px;
    color: white;
    transform: rotateY(180deg);

}

.textPost {
    margin: 20px 5px 40px 5px;
}

.textpost {
    font-family: 'Russo One', sans-serif;
    font-size: 20px;
}


.thumbnail {
    display: block;
    width: 100%;
    height: 180px;

}

.post-preview {
    background-color: var(--previewBg);
    width: 100%;
    height: 100%;
    border-radius: 20px;
    font-size: 15px;


}

.post-title {
    margin-top: 10px;
    font-style: italic;
    font-size: 20px;
    font-family: "Fira Sans Condensed", sans-serif;
    text-decoration: underline;

}

.post-intro {
    color: #4b5156;
    font-size: 14px;
}

#contact-form {
    display: block;
    max-width: 600px;
    margin: 0 auto;
    border: 1px solid var(--borderColor);
    padding: 15px;
    border-radius: 5px;
    background-color: var(--mainColor);
    margin-bottom: 50px;

}

#contact-form label {
    line-height: 2.7em;
}

#contact-form textarea {
    min-height: 100px;
    font-size: 14px;
}


.input-field {
    width: 100%;
    padding-top: 10px;
    padding-bottom: 10px;
    background-color: var(--secondaryColor);
    border-radius: 5px;
    border: 1px solid var(--borderColor);
    font-size: 14px;
}


#submit-btn {
    margin-top: 10px;
    width: 100%;
    padding-top: 10px;
    padding-bottom: 10px;
    color: #fff;
    background-color: var(--buttonColor);
    border: none;
}


.infocardContainer * {
    font-family: 'Fira Sans Condensed', sans-serif;
    font-weight: 300;
}

h2 {
    font-weight: 600;
    font-style: italic;
    font-family: "Fira Sans Condensed", sans-serif;
}

header {
    height: 2em;
    background-color: #111122;
    margin: 0 0 0 0;

    font-size: 2em;
    text-align: center;
    line-height: 2em;
    color: white;
}

a {
    text-decoration: none;
}

a:hover {
    text-decoration: underline;
}

.infocardContainer {
    display: flex;
    height: 200px;
    width: 200px;
    border-radius: 100px;
    background: rgb(0, 159, 255);
    background: linear-gradient(121deg, rgba(255, 255, 255, 0) 13%, var(--previewShadow) 100%);
    transition: all 500ms ease-in;
    transition-delay: 1s;
    margin: auto;


}

.infocardContainer:hover {
    width: 500px;
    border-radius: 100px 10px 100px 100px;
    transition: all 1s ease-out;
}

.infocardContainer div {
    text-color: #ffffff;
    flex-shrink: 1;
    width: 100%;
    --background-color: green;
}

.infocardContainer div * {
    display: flex;
    --flex: inherit;
    overflow: hidden;

    --background-color: yellow;
    white-space: nowrap;
    width: 0;
    height: auto;
    transition: all 450ms ease-in;
    transition-delay: 1s;
}

.infocardContainer:hover div * {
    --background-color: purple;
    display: flex;
    visibility: visible;
    transition: all 1s ease-out;
    transition-delay: 500ms;
    width: 100%;
    height: auto;
}

.infocardContainer #main, .infocardContainer #main img {
    --background-color: red;
    height: 200px;
    width: 200px;
    padding-right: 10px;
    border-radius: 100%;
    flex-shrink: 0;
    object-fit: cover;
}

.infocardContainer #main img {
    transition: none;
    display: grid;
    position: relative;
    border: 10px solid white;
    margin: 0 0 0 0;
    padding: 0 0 0 0;
}

.infocardContainer #textbois {
    position: relative;
    margin: 15px;
}

.infocardContainer #textbois #hotlinks {
    max-width: 60%;
    max-height: 30px;
    --background-color: white;
    position: absolute;
    bottom: 5px;
    display: flex;
    justify-content: space-between;
    border-radius: 13px;
}

.infocardContainer #textbois #hotlinks * {
    background-color: white;
    max-width: 30px;
    --margin: 0 1px 0 1px;
    border-radius: 25px;
}

/*TODO: animate copy main transition style for info*/
.infocardContainer #textbois #hotlinks *:hover {


}


.container {
    margin-left: 15%;
    width: 1000px;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: center;
}

.container .card {
    flex: auto;
    justify-content: center;
    position: relative;
    border-radius: 10px;
}

.container .card .icon {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: #f00;
    transition: 0.7s;
    z-index: 1;
}

.container .card:nth-child(1) .icon {
    background: #e07768;
}

.container .card:nth-child(2) .icon {
    background: #6eadd4;
}

.container .card:nth-child(3) .icon {
    background: #4aada9;
}


.container .card .icon .fa {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    font-size: 80px;
    transition: 0.7s;
    color: #fff;
}

i {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    transition: 0.7s;

}

.container .card .face {
    width: 300px;
    height: 200px;
    transition: 0.5s;
}

.container .card .face.face1 {
    position: relative;
    background: #333;
    z-index: 1;
    transform: translateY(100px);
}

.container .card:hover .face.face1 {
    background: #ff0057;
    transform: translateY(0px);
}

.container .card .face.face1 .content {
    opacity: 1;
    transition: 0.5s;
}

.container .card:hover .face.face1 .content {
    opacity: 1;
}

.container .card .face.face1 .content i {
    max-width: 100px;
}

.container .card .face.face2 {
    position: relative;
    background: #fff;
    padding: 20px;
    box-sizing: border-box;
    box-shadow: 0 20px 50px rgba(0, 0, 0, 0.8);
    transform: translateY(-100px);
}

.container .card:hover .face.face2 {
    transform: translateY(0);
}

.container .card .face.face2 .content p {
    margin: 0;
    padding: 0;
    text-align: center;
    color: #414141;
}

.container .card .face.face2 .content h3 {
    margin: 0 0 10px 0;
    padding: 0;
    color: #fff;
    font-size: 24px;
    text-align: center;
    color: #414141;
}

.container a {
    text-decoration: none;
    color: #414141;
}

/* The Modal (background) */
.modal {
    display: none; /* Hidden by default */
    position: fixed; /* Stay in place */
    z-index: 1; /* Sit on top */
    padding-top: 100px; /* Location of the box */
    left: 0;
    top: 0;
    width: 100%; /* Full width */
    height: 100%; /* Full height */
    overflow: auto; /* Enable scroll if needed */
    background-color: rgb(0, 0, 0); /* Fallback color */
    background-color: rgba(0, 0, 0, 0.4); /* Black w/ opacity */
}

/* Modal Content */
.modal-content {
    position: relative;
    background-color: #fefefe;
    margin: auto;
    padding: 0;
    border: 1px solid #888;
    width: 80%;
    box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
    -webkit-animation-name: animatetop;
    -webkit-animation-duration: 0.4s;
    animation-name: animatetop;
    animation-duration: 0.4s
}

/* Add Animation */
@-webkit-keyframes animatetop {
    from {
        top: -300px;
        opacity: 0
    }
    to {
        top: 0;
        opacity: 1
    }
}

@keyframes animatetop {
    from {
        top: -300px;
        opacity: 0
    }
    to {
        top: 0;
        opacity: 1
    }
}

/* The Close Button */
.close {
    text-align: left;
    color: gray;
    float: left;
    font-size: 28px;
    font-weight: bold;
}

.close:hover,
.close:focus {
    color: #000;
    text-decoration: none;
    cursor: pointer;
}

.modal-body {
    padding: 2px 16px;
}

/* Modal Content */
.modal-content {
    background-color: var(--secondaryColor);
    margin: auto;
    padding: 20px;
    gap: 20px;
    border: 1px solid #888;
    width: 30%;
}


.bottomModel {
    display: grid;
    gap: 20px;
}

@media screen and (max-width: 1200px) {
    .main-container {
        width: 95%;
    }
    .line-1{
        font-size:60px;
    }
    .post-wrapper {
        display: grid;
        /*grid-template-columns: repeat(auto-fit, 320px 320px);*/
        grid-template-columns: repeat(auto-fit, 320px 320px);
        gap: 25px;
        justify-content: center;
    }
    .container {
        margin-left:2%;

    }
}
@media screen and (max-width: 1030px) {
    .main-container {
        width: 95%;
    }
    .line-1{
        font-size:50px;
    }
    .post-wrapper {
        display: grid;
        /*grid-template-columns: repeat(auto-fit, 320px 320px);*/
        grid-template-columns: repeat(auto-fit, 320px 320px);
        gap: 25px;
        justify-content: center;
    }
    /*.container {*/
    /*    margin-left:10%;*/
    /*    display: grid;*/
    /*    grid-template-columns: repeat(auto-fit, 320px 320px);*/
    /*    justify-content:normal;*/
    /*}*/
}

@media screen and (max-width: 700px) {

    .line-1{
        font-size:25px;
    }
    .intro-wrapper {

        grid-template-columns: 1fr;
        grid-template-areas:
			'nav-wrapper'
			'left-column'
			'right-column';
    }

    .about-wrapper {
        width: 90%;
    }
    #skills{
        display: grid;
    }


    .post-wrapper {
        display: flex;
        flex-direction: column;
        align-items: center;
    }

    .right-column {
        justify-content: center;
    }

    .container {
        margin-left:10%;
        width: 50%;
        display: grid;
        justify-content:normal;
    }

}