@font-face {
        font-family: 'AntonZora';
        font-style: normal;
        font-weight: 400;
        src: url('fonts/AntonZora.ttf') format('truetype'), local('AntonZora');
      }
.sidebar-nav {
    margin-top: 20px;
    padding: 0;
    list-style: none;
}

body {
    background: url("images/background.jpg") no-repeat;
    enable-background: new;
    background-size: unset;
    font-family: "AntonZora";
    /*transform: scale(1.1);*/
    transform-origin: 0 0;
}

.school_body {
    background-color: white;
    background-size: unset;
    font-family: "AntonZora";
}

.gc_body {
  background: url("images/glorious_city_04.png") no-repeat;/* This ensures your background image is center-positioned vertically and horizontally */

  background-position: center center;
  
  /* This ensures your background image doesn’t tile */
  
  background-repeat: no-repeat;
  
  /*This fixes your background image within the viewport and ensures it doesn’t move when image is smaller than the content’s height */
  
  background-attachment: fixed;
  
  /* This makes your background image responsive and rescale according to the viewport or container size */
  
  background-size: cover;
  
  /* Choose your background color that appears while the image is still uploading */
  
  background-color: #D3D3D3; }


 /* Container holding the image and the text */
 .container {
    position: relative;
    text-align: left;
    color: white;
}

.image_left {
    position: relative;
    text-align: left;
    color: white;
    background-size: 500px 500px;
    display: block;
    margin-left: auto;
    margin-right: auto;
}

.image_middle {
    position: relative;
    text-align: center;
    color: white;
    background-size: 500px 500px;
    display: block;
    margin-left: auto;
    margin-right: auto;
}

.image_right {
    position: relative;
    text-align: right;
    color: white;
    background-size: 500px 500px;
    display: block;
    margin-left: auto;
    margin-right: auto;
}

.center {
    display: block;
    margin-left: auto;
    margin-right: auto;
    width: 50%;
  }

table#table1 {
    text-align:center; 
    margin-left: auto; 
    margin-right:auto; 
    width:200px;
    position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  }

  div.container {
    width:98%; 
    margin:1%;
  }
  td {text-align:left;
    color: chocolate;}

table#table2 {
        text-align:center; 
        margin-left: auto; 
        margin-right:auto; 
        width:200px;
        position: absolute;
    color: black;
      top: 150%;
      left: 20%;
      transform: translate(-50%, -50%);
      }
input#input1 {
        text-align:center; 
        margin-left: auto; 
        margin-right:auto; 
        width:200px;
        position: absolute;
      top: 200%;
      left: 5%;
      transform: translate(30%, 30%);
      }
.box {
        float: left;
        width: 32%;
        margin-right: 2%;
        padding: 20px;
        background: #eee;
        box-sizing: border-box;
       }
.box:last-child {
            margin-right: 0;
       }

.bonbon {
        width: 200px;
        height: 60px; 
        background: yellow; /* old browsers */
        background: linear-gradient(to bottom, white, yellow); 
        box-shadow: inset 0px 0px 6px #fff,inset 0px -1px 6px #fff;
        border: 1px solid #5ea617;
        border-radius: 1em;
        margin: 1em;
      }
     
.bonbon.rot {
         background: linear-gradient(to bottom, white , red); 	
      }	

.bonbon.gruen {
        background: linear-gradient(to bottom, white , rgb(0, 255, 0)); 	
      }	

.bonbon.blau {
        background: linear-gradient(to bottom, white , rgb(0, 0, 255)); 	
      }	
     
.bonbon.orange {
         background: linear-gradient(to bottom, white, orange); 	
      }		

.bonbon.gelb {
        background: linear-gradient(to bottom, white, rgb(255, 255, 0)); 	
     }	

.bonbon.grau {
      background: linear-gradient(to bottom, white, rgb(153, 153, 153)); 	
      }		
     
.bonbon:hover,
.bonbon:focus {
        box-shadow:rgba(0,0,0,0.7) 0px 5px 15px, inset rgba(0,0,0,0.15) 0px -10px 20px;
      }