html, body {
    font-family: 'Roboto Condensed', '微軟正黑體', 'Microsoft JhengHei', 'Segoe UI Semibold', 'Segoe UI', 'Lucida Grande', Verdana, Arial, Helvetica, sans-serif;
    font-size: 16px;
    color: #000000;
    line-height: 24px;
}

body
{
    background-image: linear-gradient(to right top, #f8f3c8, #dff7d5, #cef7e6, #c9f4f4, #d0effb, #d2edfb, #d4ecfb, #d7eafb, #d0ecfb, #c9eefa, #c3f0f5, #c1f2ef);
    padding : 0 1rem;
}

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

.blockTitle a {
    color : #8B0000;
}

.variableContent{min-height : 80vh;}

.vktc2-header
{
   display : flex;
   flex-direction : row;
   flex-wrap : nowrap;
   align-items: center;
   justify-content: flex-start;

}

.vktc2-logo
{
    width : 90px;
    height : auto;
}

.vktc2-schoolName
{
    margin-left : 10px;
    color : #8B0000;
}

.vktc2-schoolNameEnglish
{
    font-family: 'Playfair Display SC', serif;
}



.vktc2-mainMenu
{

    margin-bottom : 5px;
}

.vktc2-footer
{
    
}

@media (max-width: 480px) 
{
   .vktc2-logo
   {
       width : 50px;
   }


   .vktc2-schoolName h1

   {
      font-size : 1rem;

   }
}
@media (min-width: 481px) and (max-width: 767px) 
{
   .vktc2-logo
   {
       width : 60px;
   }

   .vktc2-schoolName h1
   {
      font-size : 1.2rem;
   }
}
@media (min-width: 768px) and (max-width: 979px) 
{
   .vktc2-logo
   {
       width : 70px;
   }

   .vktc2-schoolName h1
   {
      font-size : 1.4rem;
   }
}
@media (min-width: 980px) and (max-width:1199px) 
{
   .vktc2-logo
   {
       width : 80px;
   }

   .vktc2-schoolName h1
   {
      font-size : 1.6rem;
   }
}
@media (min-width: 1200px) and (max-width:1919px) {}
@media (min-width: 1920px) 
{
   
}