/*
Theme Name: Child of InHype
Theme URI: https://magniumthemes.com/;
Description: Child theme based on InHype
Author: Your Name
Version: 1.0
Template: inhype
*/

/* theme colors */
/************************/
/* red color : #ff0000  */
/* grey color : #ababab */
/************************/

/* Rule to make 1rem 10px */
:root {
    font-size: 62.5%;
}

/* special fonts and general */

@font-face {
    font-family: 'anderson-supercar';
    src: url('fonts/anderson_supercar/anderson_supercar.woff');
    }

@font-face {
    font-family: 'rocket-rinder';
    src: url('fonts/rocket_rinder/rocket_rinder.woff');
}

@font-face {
    font-family: 'sheeping-dogs';
    src: url('fonts/sheeping_dogs/sheeping_dogs.woff');
}

.bold {
    font-weight: bold;
}

/* Header */
.logo .header-blog-info {
    position: relative;
    top: -20px;
    left: 120px;
    font-size: 1.3rem;
}

.sticky-header {
    top: 0;
}

/* Article / Post jvplus */

/* Top page */
.inhype-post .post-details-bottom {
    display: none;
}

.blog-post-thumb {
    display: none;
}

.jvplus-article-top .jvplus-list {
    list-style-type: none;
    font-size: 1.6rem;
    line-height: 3.5rem;
}

.jvplus-article-top {
    display: grid;
    grid-template-columns: 1fr 3fr;
    border: 4px solid #ff0000;
    padding: 20px;
    margin-bottom: 30px;
}

.top-title {
    font-size: 3rem;
    padding-bottom: 20px;
}

/* Bottom page */
.jvplus-article-bottom {
    display: grid;
    grid-template-columns: 3fr 1fr;
    border: 4px solid #ff0000;
    padding: 20px;
    margin-top: 50px;
}
.jvplus-article-bottom p {
    margin-bottom : 0;
}

.conclusion {
    font-size: 3rem;
}

.jvplus-article-bottom .note-container {
    text-align: center;
    position: relative;
    top: calc(50% - 60px);
}

.jvplus-article-bottom .note {
    font-weight: bold;
    font-size: 5rem;
    position: absolute;
    right: 74px;
    top: 10px;
}

.jvplus-article-bottom .note-on20 {
    right: 90px;
    bottom: 30px;
    position: absolute;
}

/* Note */
.circle-chart__circle {
    animation: circle-chart-fill 2s reverse;
    transform: rotate(-90deg);
    transform-origin: center;
  }
  
  @keyframes circle-chart-fill {
    to { stroke-dasharray: 0 100; }
  }