html {
    background: #fffffc;
    
}

body {
    background: #fffffc;
    color: #fffffc;
    font-family: 'EB Garamond', serif;
    font-family: 'Scheherazade', serif;
    font-family: 'Be Vietnam', sans-serif;
    font-family:  Helvetica, Arial, sans-serif;
    font-size: 16px;
    line-height: 1.5;
    margin: 0 auto;
    max-width: 1500px;
    padding: 2em 2em 4em;
}

h1, h2, h3, h4, h5, h6 {
    font-family:  Helvetica, Arial, sans-serif;
    color: #000;
    font-weight: 400;
    line-height: 1.3;
}

h2 {
    padding: 1.5em;
    
}

h3{font-family: 'EB Garamond', serif;}

p{
font-family: 'Scheherazade', serif;
color: #000;
    font-weight: 400;
    line-height: 1.3;
}

a:link {
    color: #000;
    text-decoration: none;
}

a:visited{
    color: #000;
    text-decoration: none;
    
}
a:hover {
     color: #5aa847;
     text-decoration: none;
    
}


b, strong {
    font-weight: 600;
}

samp {
    display: none;
}

img {
    background: transparent;
    border-radius: 0px;
    display: initial;
    margin: auto;
    max-width: 50%;

}


#main {
    Position: absolute;
    left: 5%;
    top: 40%;
    max-width: 1200px;
}

#sidebar {
    position:fixed;
    left 10px;
    top: auto;
    
}

#bottomtext{
    position: absolute;
    top: 95%;
    align-content: center;
    
    
}

#content {
    position: relative;
    padding: 20px;
    top: 15%;
        left: 25%;
    max-width: 1300px;
    
}

#text
{
    position: relative;
    padding: 20px;
    top: 15%;
    left: 10%;
    max-width: 700px;
    text-align: justify;
}



.maintitle {
    font-family: 'Roboto', sans-serif;
    font-size: 40px;
    font-weight: 100;
    color: black;
    
}

#container { margin: 0%;

   
}

#circle { position: absolute; width: 100%; padding-bottom: 100%; overflow: hidden; }

#circle text {  font-family: 'Be Vietnam', sans-serif; font-size: 17px; font-weight: bold; }

#circle svg { position: absolute; left: -10%; top: -2%; width: 150%; height: 500px;

  -webkit-animation-name: rotate;
     -moz-animation-name: rotate;
      -ms-animation-name: rotate;
       -o-animation-name: rotate;
          animation-name: rotate;
  -webkit-animation-duration: 7s;
     -moz-animation-duration: 7s;
      -ms-animation-duration: 7s;
       -o-animation-duration: 7s;
          animation-duration: 7s;
  -webkit-animation-iteration-count: infinite;
     -moz-animation-iteration-count: infinite;
      -ms-animation-iteration-count: infinite;
       -o-animation-iteration-count: infinite;
          animation-iteration-count: infinite;
  -webkit-animation-timing-function: linear;
     -moz-animation-timing-function: linear;
      -ms-animation-timing-function: linear;
       -o-animation-timing-function: linear;
          animation-timing-function: linear;

}

@-webkit-keyframes rotate {
    from { -webkit-transform: rotate(360deg); }
    to { -webkit-transform: rotate(0); }
}
@-moz-keyframes rotate {
    from { -moz-transform: rotate(360deg); }
    to { -moz-transform: rotate(0); }
}
@-ms-keyframes rotate {
    from { -ms-transform: rotate(360deg); }
    to { -ms-transform: rotate(0); }
}
@-o-keyframes rotate {
    from { -o-transform: rotate(360deg); }
    to { -o-transform: rotate(0); }
}
@keyframes rotate {
    from { transform: rotate(360deg); }
    to { transform: rotate(0); }
}

@keyframes colorize {
    0% {
        -webkit-filter: grayscale(100%);
        filter: grayscale(100%);
    }
    100% {
        -webkit-filter: grayscale(0%);
        filter: grayscale(0%);
    }
}