html {
     padding: 0;
     margin: 0;
 }

 body {
     padding: 0;
     margin: 0;
     background-color: #4D4743;
     background-image: url("../resources/camel_final_3.png");
     background-size: 6%;
     font-size: 0.9em;
 }


 @font-face {
     font-family: "CreteRound";
     src: url("../resources/CreteRound-Regular.ttf");
 }



 header {
     font-family: "CreteRound";
     width: 100%;
     position: fixed;
     top: 0px;
     background-color: #cc9c75;
     background-image: url("../resources/fire.gif");
     z-index: 5;
 }

 header .h_boxes {
     display: inline-block;
     flex: row;
 }


 header #h_main_logo {
     position: absolute;
     width: 13%;
     transition: 0.7s ease;
 }

 header #h_main_logo img {
     width: 100%;
     overflow: visible;
     border: 1px solid;
     transition: 0.7s ease;
 }

 header #h_main_logo img:hover {
     width: 200%;
     transition: 8s ease;
 }



 header #h_text {
     padding-left: 2%;
     padding-right: 0.7%;
     padding-top: 10px;
     padding-bottom: 15px;
     margin-left: -1%;
     width: 85%;
     vertical-align: top;
     float: right;
     overflow: hidden;
     height: 110px;
     transition: 0.7s ease;
 }

 header #h_text #h_content #h_intro {
     font-size: 1em;
 }


 header #h_text #h_content {
     vertical-align: top;
     padding-left: 5%;
     width: 60%;
     display: inline-flex;
     flex-direction: column;
 }

 header #h_text #h_content #h_title {
     padding-left: 12%;
     text-align: center;
     transition: 0.7s ease;
 }

 header #h_text #h_content #h_title img {
     width: 7%;
 }


 header #h_text #h_counter {
     width: 30%;
     display: inline-flex;
     flex: row;
     vertical-align: bottom;
     float: right;
     transition: 0.7s ease;
 }

 header #h_text #h_counter * {
     float: center;
 }

#memes_content {
     margin-top: 120px;
     z-index: 3;
     text-align:center;
}

.card-columns {
    width:85%;
    margin:7%;
}

#coms {
     background-color: rgba(0, 0, 0, .5);
     border: solid 1px;
     color: white;
     float: right;
     /*position:fixed;*/
     margin-top: 300px;
     margin-right: 10px;
}

.card {
     width: 30%;
}

.yellow {
     /*display: inline-flex;*/
     background-color: gold;
     /*margin:auto;*/
     /*margin-top:15px;*/
     /*padding:1%;*/
     text-align: center;
     /*display: block;*/
     /*border-radius:10px;
    border:6px outset yellow;*/
}

footer {
    background-color: #cc9c75;
    background-image: url("../resources/fire.gif");
    margin:auto;
    margin-top:15px;
    padding:1%;
    text-align:center;
    width:35%;
    border-radius:10px;
    border:6px;
    padding:0;
    width:max-content;
}

footer * {
    padding-left:2px;
    cursor:pointer;
}
 .dyn_nav {
    background-color:rgba(0, 0, 0, 0);
    border:none;
}

.nav {
    font-size:1.7em;
    display:inline;
    background-color:rgba(0, 0, 0, 0);
    border:none;
}

@media screen and (max-width:820px) {
    header {
        font-size: 0.5em;
    }

    header #h_text {
	padding-left: 0%;
        height: 60px;
    }

    header #h_text #h_counter {
        display: inline-block;
    }
    
    header #h_text #h_content {
	padding-left: 0%;
	width: 100%;
    }
    
    header #h_text #h_counter {
        width: 50%;
        display: default;
        vertical-align: bottom;
        float: right;
    }

    header #h_text #h_content #h_title {
	padding-left: 0.5%;
	text-align: left;
    }
    
    header #h_main_logo {
        width: 14%;
    }

    #memes_content {
        margin-top: 65px;
        z-index: 3;
    }

    .card {
        width: 100%;
    }

    footer {
        font-size: 0.5em;
        width: 100%;
    }
}