kitoy-chocolate/css/base.css

@font-face{
    font-family:"Rosa Black Sans";
    src:url("fonts/hinted-RosaSans-Black.ttf") format("truetype");
    font-weight:normal;
    font-style:normal
}

@font-face
{
    font-family:"Rosa Black Italic";
    src:url("fonts/hinted-RosaSans-BlackItalic.ttf") format("truetype");
    font-weight:normal;font-style:italic
}

@font-face
{
    font-family:"Rosa Black Bold";
    src:url("fonts/hinted-RosaSans-Bold.ttf") format("truetype");
    font-weight:bold;
    font-style:normal
}

html
{
    height:100%;
    width:80%;
    margin-left:10%
}

body
{
    color:#fff487;
    background-color:#45050c
}

.icon
{
    margin-bottom:5px
}

.icons img
{
    width:2vw;
    height:2vw;
    margin-top:10px;
    display:inline-block;
    align-items:center
}

h1{
    padding-bottom: 2vw;
}

hr
{
    color:#fff487
}

*
{
    -moz-box-sizing:border-box;
    box-sizing:border-box
}

a
{
    color:#d39050;text-decoration:none
}

.date
{
    margin-bottom:0
}

.slug
{
    text-align:left;
    margin-bottom:2rem;
}

.readmore
{
    text-align:right
}

.readmore a
{
    color:#fff487;
    text-decoration:underline
}

.menugauche
{
    position:fixed;
    max-width:100px
}

.menu img
{
    max-width:20px;
    max-height:20px;
}


.copyleft
{
    display:inline-block;
    transform:rotate(180deg);
    padding-bottom:-15px
}

pre
{
    white-space:pre-wrap;
    white-space:-moz-pre-wrap;
    white-space:-pre-wrap;
    white-space:-o-pre-wrap;
    word-wrap:break-word;
}

.toggle
{
    background-color:#fff487;
    text-align:center;
    height:100px;
    width:100px;
    border-radius:50%;
    position:fixed;
    margin:140px;
    margin-left:10%;
    top:20%;
    bottom:0px;
    left:0px;
    right:0px
}

.toggle h2
{
    margin-top:1.5em;
    color:#45050c
}

.menu{
    background-color:#d39050;
    height:100px;
    width:100px;
    transform:scale(0);
    border-radius:50%;
    border-style:double;
    border-color:#fff487;
    position:fixed;
    margin-top:140px;
    margin-left:10%;
    top:20%;
    bottom:0px;
    left:0px;
    right:0px;
    z-index:-1;
    transition:.7s
}

.menu a{
    display:inline-block;
    position:fixed;
    font-size:15px;
    color:#45050c
}

ul{
    list-style-type:none;
    margin:0;
    padding:0
}

.menu p
{
    margin-top:-4px;
    font-size:5px;
}


.articles
{
    margin-left:21rem;
    margin-top:5rem;
    margin-bottom:3rem;
    padding:.5em;
    border:7px double;
    border-color:#fff487;
    border-radius:10px 10px 10px 10px;
    line-height:1.5;
    letter-spacing:.1vw
}

.articles ul
{
    list-style-type:disc;
    margin:5vw;
    padding-top:1vw;
    padding-bottom:1vw;
    padding-left:1.5vw
}

.articles h2,h3,h4
{
    color:#d39050
}

.articles .titre
{
    color:#d39050;
    text-align:center
}

.articles img
{
    display:block;
    margin-left:auto;
    margin-right:auto;
    width:50%;
    margin-bottom:2vw;
}

.articles .description
{
    text-align:center;
    font-weight:300;
    font-style:italic;
    font-size:1vw;
    padding-bottom:30px;
    color:#fff487
}

.pagination a
{
    border:1px solid;
    border-color:#d39050;
    padding:3px;
    font-size:13px
}

.center
{
    margin:auto;
    width:50%;
    padding:10px
}

.contact
{
    text-align:center;
}

footer
{
    position:relative;
    bottom:0px;
    width:100%;
    text-align:center
}

.btn:hover a:hover {
    text-decoration: underline;
}

@media only screen and (max-width: 980px)
{
    .articles .description{
	font-size:4vw
    }

    .articles
    {
	margin-left:0;
	position:relative;
	font-size:3.5vw
    }

    .toggle
    {
	display:none
    }

    .menugauche
    {
	max-width:unset;
	position:sticky;
	top:0px;
	z-index:5;
	width:100%
    }

    .menu {
	width:100%;
	height:13vw;
	border-radius:0%;
	border:5px double;
	border-color:#fff487;
	position:sticky;
	margin-top:0rem;
	border-radius:10px 10px 10px 10px;
	margin-bottom:0px;
	margin-left:0;
	transform:none
    }

    .menu a{
	display:inline-block;
	position:absolute
    }

    .menu img{
	transform:scale(4)}
    .menu p{margin:.3rem;
	    font-size:13px
	   }

    .menu img:hover
    {
	transform:scale(5)
    }

    a:nth-child(1)
    {
	top:4vw;
	left:20%
    }

    a:nth-child(4)
    {
	top:4vw;
	left:40%
    }

    a:nth-child(2)
    {
	top:4vw;
	left:60%
    }

    a:nth-child(3)
    {
	top:4vw;
	left:80%
    }

    footer
    {
	font-size:3vw
    }
    .icons img
    {
	width:7vw;
	height:7vw;
	margin:20px;
	display:inline-block;
	align-items:center
    }

    .articles img{
	display:block;
	margin-left:auto;
	margin-right:auto;
	width:80%
    }

}

@media only screen and (max-width: 980px)
{
    html
    {
	height:100%;
	width:100%;
	margin:0
    }
    .menu p
    {
	display:none
    }

    .menu
    {
	align-self:center
    }
}

@media only screen and (max-width: 768px)
{
    .menu{height:15vw}
    .menu img
    {
	max-width:10px;
	max-height:10px
    }
    .title h1
    {
	font-size:5vw
    }

    .icons img{
	width:7vw;
	height:7vw;
	margin:20px;
	display:inline-block;
	align-items:center;
    }
}