@media (prefers-color-scheme: dark) {
    body{
        color:#eee;
        background-color: #111;
    }
    header{
        background-color: #232323;
    }
    a{
        color:#969696;
        transition-duration:0.3s;
    }
    a:hover{
        color:#eee;
    }
    header p:hover{
        background-color:#333;
    }
    #svgs{
        filter: invert(90%);
        border-bottom: 1px dotted black;
    
    }
    #svgs:hover{
        filter: invert(50%);
    }
    
}
  @media (prefers-color-scheme: light) {
    body{
        color:#444;
        background-color: #fff;
    }
    header{
        background-color: #dfdfdf;
        color:#444;
    }
    a{
        color:#0f0f0f;
    }
    a:hover{
        color:#696969;
    }
    header p:hover{
        background-color:#919191;
    }
    header a:hover{
        color:#eee;
    }
    #svgs{
        filter: invert(30%);
        border-bottom: 1px dotted black;
    
    }
    #svgs:hover{
        filter: invert(60%);
    }
    
}
body{
    margin:0;
    margin-top:0px;
    margin-left:5px;
    font-family:Arial;
}

header{
    margin-top:0;
    padding-top:2px;
    padding-bottom:6px;
    padding-left:10px;
    padding-right:10px;
    margin-left:-5px;
    border-bottom-left-radius: 6px;
    border-bottom-right-radius: 6px;
}
p{
    display:inline;
    padding-left:6px;
    padding-right:6px;
    font-size:20px;
    transition: 0.2s;
    padding-top:2px;
    padding-bottom:4px;
}
#hright{
    float:right;
    margin:0;
    margin-left:16px;
}
header p:hover{
    border-radius:6px;
}
a{
    text-decoration: none;
}
#about-section{
    display: flex;
    font-size:24px;
    justify-content: center;
    align-items: center;
    white-space: pre-wrap;
    min-height:75vh;
    flex-direction: column;
    align-items:center;
}
#about-section-blog{
    display: flex;
    font-size:24px;
    justify-content: center;
    align-items: center;
    white-space: pre-wrap;
    min-height:10vh;
    flex-direction: column;
    align-items:center;
}
#logo-section{
    display: flex;
    font-size:24px;
    justify-content:center;
    align-items: center;
    white-space: pre-wrap;
    min-height:0;
    flex-direction: row;
    align-items:center;
    margin-top:-30vh;
}
#logo-section img{
    margin-left:10px;
    margin-right:10px;
}
#svgs{
    transition: 0.2s;
    position: relative;
    display: inline-block;

}
#response-section{
    display: flex;
    font-size:24px;
    justify-content: center;
    align-items: center;
    white-space: pre-wrap;
    text-align: center;
    line-height: 1.6;
    min-height:0vh;
    flex-direction: column;
    align-items:center;
    margin-top:-2vh;
}
#blog-listing{
    display: flex;
    max-width: 100%;
    width:100%;
    font-size:24px;
    align-items: center;
    flex-direction: column;
    margin-top:0vh;
    justify-content: center;
}
#blog-listing a{
    width:100%;
    height:10%;
    text-align:center;
    display: inline;
}
#blog-listing h4 span{
    text-align: left;
    line-height: 1;
    display:inline-block;
    width:100%;
}
#blog-listing small{
    font-weight: normal;
}
#blog-listing h4{
    font-weight: normal;
    line-height: 0;
    margin-top:15px;
}
.blog-text{
    margin-left:2px;
}
.blog-text p{
    padding-left:0;
}