html,
body {
    font-family: 'Roboto', sans-serif;
    height: 100%;
    margin: 0;
}

.noselect {
    cursor: pointer;
    -webkit-touch-callout: none;
    /* iOS Safari */
    -webkit-user-select: none;
    /* Safari */
    -khtml-user-select: none;
    /* Konqueror HTML */
    -moz-user-select: none;
    /* Old versions of Firefox */
    -ms-user-select: none;
    /* Internet Explorer/Edge */
    user-select: none;
}

.placeholder {
    height: 50vh;
    width: 100%;
    background-image: url(/images/webb.png);
}

.wrapper {
    height: 100%;
}


/*NAVIGATION MENU*/

nav {
    background-color: white;
    position: absolute;
    top: 0;
    min-height: fit-content;
    width: 100%;
    /* z-index: 5; */
}

nav ul {
    display: flex;
    margin-left: 10%;
    justify-content: space-evenly;
    width: 90%;
    list-style: none;
}

nav ul li {
    text-decoration: none;
}


/* The slide menu */

.slide {
    height: 100%;
    /* 100% Full-height */
    width: 0;
    /* 0 width - change this with JavaScript */
    position: fixed;
    /* Stay in place */
    z-index: 1;
    /* Stay on top */
    top: 0;
    left: 0;
    background-color: #111;
    /* Black*/
    overflow-x: hidden;
    /* Disable horizontal scroll */
    padding-top: 60px;
    /* Place content 60px from the top */
    transition: 0.5s;
    /* 0.5 second transition effect to slide in the slide */
}

.pattern {
    background-image: url(../../images/webb.png);
    padding: 2vw;
    margin: 0 2vw;
}

#propic {
    width: 50%;
    border-radius: 50%;
    margin: 10% 25%;
}


/*FLIPCARD */

#bio {
    position: relative;
}

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

.flip-card img {
    /* margin: auto 10%; */
    width: 100%;
    height: auto;
}


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


/* Style the front side (fallback if image is missing) */

.flip-card-front {
    background-color: transparent;
    color: black;
}


/* Style the back side */

.flip-card-back {
    background-color: rgb(0, 0, 0);
    color: white;
    transform: rotateY(180deg);
}


/* The slide links */

.slide a {
    padding: 8px 8px 8px 32px;
    text-decoration: none;
    font-size: 25px;
    color: #818181;
    display: block;
    transition: 0.3s;
}

section h3 {
    color: grey;
    text-align: center;
    font-variant: small-caps;
    font-family: 'Roboto', sans-serif;
}

.material-icons {
    transform: translateY(10%)
}


/* When you mouse over the navigation links, change their color */

.slide a:hover {
    color: #f1f1f1;
}


/* Position and style the close button (top right corner) */

.slide .closebtn {
    position: absolute;
    top: 0;
    right: 25px;
    font-size: 36px;
    margin-left: 50px;
}


/* The button used to open the slide */

.openbtn {
    position: absolute;
    top: 0;
    font-size: 20px;
    cursor: pointer;
    background-color: #111;
    color: white;
    padding: 10px 15px;
    border: none;
    z-index: 10;
}

.openbtn:hover {
    background-color: #444;
}


/*main content*/

main {
    margin-top: 52px
}


/*Twitter*/

.no-modal {
    overflow-x: hidden;
    overflow-y: auto;
}

.twitter {
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    justify-content: space-evenly;
}

.twitter .card {
    flex: 0 2 250px%;
    max-height: 30vh;
}


/* The Modal (background) */

.close {
    font-size: 36px;
}

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

.modalInt-main {
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    justify-content: space-around;
    background-color: lightgray;
}


/* CARDS */

.cardContainer {
    flex: 1 1 25%;
    justify-self: center;
    display: flex;
    flex-direction: column;
    flex-wrap: wrap;
    margin: 1vw 0;
}

.card {
    width: 240px;
    height: 240px;
    background-color: white;
    /* Add shadows to create the "card" effect */
    box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2);
    transition: 0.3s;
}

.card img {
    position: relative;
    width: 90%;
    height: 90%;
    margin: 0 5%;
}


/* On mouse-over, add a deeper shadow */

.card:hover {
    box-shadow: 0 8px 16px 0 rgba(0, 0, 0, 0.2);
}


/* Add some padding inside the card container */

.container {
    width: 240px;
    height: 105px;
    font-size: 1.25vw;
    background-color: white;
    margin: -2.5vh 0 0 0;
    padding: 0 0 3vh 0;
}

.container h4 {
    font-size: large;
    text-align: center;
    margin: 0;
    padding: 1vh 1vw;
}

.container p {
    font-size: small;
    margin: 0;
    padding: .5vh .5vw;
}


/*CryptoWallet Specifics*/

.modalbtc {
    display: none;
    /* Hidden by default */
    position: fixed;
    /* Stay in place */
    z-index: 1;
    /* Sit on top */
    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 */
}

#cryptoModal .cardContainer {
    flex: 1 1 25%;
    max-width: 325px;
    justify-content: center;
    display: flex;
    flex-direction: column;
    flex-wrap: wrap;
    margin: 1vw
}

#cryptoModal .card {
    flex: 1 0 100%;
    width: 100%;
}

#cryptoModal img {
    object-fit: fill;
    height: auto;
    width: 75%;
    margin: 0 12.5%;
}

#cryptoModal p {
    padding-bottom: 5vh;
}

#cryptoModal h4,
#cryptoModal p {
    text-align: center;
}


/* Modal Content/Box */

.modal-content {
    background-color: #fefefe;
    margin: 5% auto;
    /* 15% from the top and centered */
    padding: 2vh 2vw;
    border: 1px solid #888;
    width: 80%;
    /* Could be more or less, depending on screen size */
}


/* On smaller screens, where height is less than 450px, change the style of the sidenav (less padding and a smaller font size) */

@media screen and (max-height: 450px) {
    .slide {
        padding-top: 15px;
    }
    .slide a {
        font-size: 18px;
    }
}