.joke{
    background-image: url("images/bg.jpg");
     background-repeat: no-repeat;
     background-size: cover;
}

.container{
    /*makes it so the items will be in a row*/
    display:flex;
}

.item{
    /*flex:1 tells that all items should share the space equally*/
    flex:1;
    text-align:center;
}

h3{
    /*just centers the joke and medallion text*/
    text-align:center;
    background-color:white;
    color:black;
}

h4{
    /*for the joke types text*/
    background-color:white;
    color:black;
    width:50%;
    font-size:20px;
    margin-left:70px;
}

.med{
    display:block;
    margin:auto;
}

/*for home.html*/
.home{
    background-color:black;
}

h1{
    color:white;
    margin-top:200px;
    font-size:90px;
    margin-left:70px;
    /*these next 4 lines are needed for the animation*/
    /*overflow:hidden hides future letters, nowrap makes all the letters on the same line*/
    /*width:100 ensures the animation goes through the whole text*/
    overflow:hidden; 
    width:100%;
    white-space: nowrap;
    animation: typing 11s;
}
@keyframes typing{
    /*starts the animation from the first letter*/
    /*basically the letters are just appearing*/
    from {width:0%};
}

.button-disabled{
    padding:10px;
    font-size:40px;
    background-color:white;
    color:black;
    animation: fade 10s forwards;
    margin-left:45%;
    text-decoration:none;
    font-family:fantasy;
    cursor:not-allowed;
    pointer-events:none;
    display:inline-block;
}

.button-enabled{
    padding:10px;
    font-size:40px;
    background-color:white;
    color:black;
    margin-left:45%;
    text-decoration:none;
    font-family:fantasy;
    cursor:pointer;
    pointer-events:auto;
    display:inline-block;
}

@keyframes fade{
    0%{
        opacity:0;
    }
    70%{
        opacity:0;
    }
    100%{
        opacity:1;
    }
}

.itemSecret{
    margin-top:200px;
}

p{
    background-color:white;
    color:black;
}

input{
    display:block;
    margin:0 auto;
    padding:20px;
    font-size:20px;
}
button{
    margin-top:20px;
    display:block;
    justify-content: center;
    padding:10px;
    font-size:20px;
    background-color:white;
    color:black;
    margin-left:47%;
    font-family:fantasy;
}


#manyJokes, #programming, #knock-knock, #general, #dad{
    color:black;
    padding:10px;
    margin-top:10px;
    text-align:center;
    width:60%;
    margin-left:20%;
    font-size:20px;
}

/*for the random page*/
.random{
    background-color:lightblue;
}

.grid{
    display:grid;
    grid-template-columns: 1fr 1fr 1fr 1fr 1fr;
    padding:10px;
    border:3px solid black;
    background-color:skyblue;
    justify-content: center;
}


.grid h3, button{
    width: 60%;
    margin-left:20%;
}

#showLikedJokes{
    background-color:white;
    width:60%;
    margin-left:20%; 
    color:black;
    text-align:center;
}