@import url('https://fonts.googleapis.com/css?family=Muli');

/* basic css*/

body{
    margin: 0;
    padding: 0;
    font-family: Arial, Helvetica, sans-serif;
    text-align: center; 
    background-color:#c2d4dfc7; 
}

a {
    color: #888;
}

p{
    line-height: 1.8;
}

h1, h2, h3, h4, h5, h6 { font-family: 'Muli', sans-serif; font-weight: normal; }

h1 {
    border-bottom: 1px solid burlywood;
    padding: 0 0 10px 0;
    margin: 10px 0 20px 0;
}

h2 {
    margin: 10px 0 20px 0;
}

ol{
    line-height: 1.5;
}
#title {
    padding: 10px 100px;
    font-size: 20px;
    background: #d7e5eec7;
    color: rgb(146, 82, 3);
    overflow: auto;
    position: sticky;
    text-align: center;
}

#head {
    padding: 10px 100px;
    font-size: 20px;
    background: #d7e5eec7;
    color: rgb(201, 66, 25);
    border-bottom: 10px solid rgb(21, 60, 75);
    overflow: auto;
    position: sticky;
    text-align: center;
}

/*css for header*/
#header {
    padding: 10px 100px;
    font-size: 20px;
    background: #d7e5eec7;
    color: #0e1255;
    border-bottom: 10px solid rgb(100, 100, 228);
    overflow: auto;
    position: sticky;
}

#header .img {
    float: left;
    margin-left: 4%;
    margin-top: 2%;
}

#header.logo {
    color: #0e1255;
}

#header ul.menu {
    list-style: none;
    float: right;
    margin-left: 15%;
    margin-top: 2%;
}
#header ul.menu li {
    float: right;
    padding: 4px 10px;
}

#header ul.menu li.selected a, #header ul.menu li.selected a:hover {
    color: blue;
    font-weight: bold;
}

#header a {
    color: rgb(16, 95, 12);
}

#header a:hover {
    color: rgb(156, 212, 17);
}

#header .user {
    float: right;
    padding-top: 4px;
}

/*css for content*/
#content {
    padding: 30px 100px;
}

pre{
    font:size 30px; 
    text-align: center
}

  .print-container {
    width: 100%;
    padding: 20px;
    box-sizing: border-box;
    text-align: left;
  }

  .print-container .table-label,
  .print-container .table-value {
        text-align: left;
  }

.school-info{
    text-align: center;
    margin-bottom:20px;
  }

  .school-info img{
    width: 100px;
    height: 100px;
    margin:10px;
  }


/*css for forms*/
form {
    display: flex;
    flex-direction: column; /* Stack labels and inputs vertically */
    width: 100%; /* Full width of the container */
}

form p {
    width: 30%;
    overflow: auto;
}

label {
    color: #000;
    margin-bottom: 4px;
    display: block; /* Ensure each label takes the full width */
}

input[type="text"],
input[type="email"],
input[type="password"],
select /* Any other form inputs */
 {
    flex: 2; /* Takes up remaining space */
    padding: 8px;
    font-size: 1rem;
    width: 100%; /* Full width of available space */
}
input, textarea {
    clear: both;
    margin: 0 15px 10px;
    background: #efefef;
    border: 0;
    flex: 2; /* Takes up remaining space */
    padding: 8px;
    font-size: 1rem;
    width: 100%; /* Full width of available space */
}

input[type=submit], a.button {
    font-weight: bold;
    background: rgb(108, 108, 148);
    color: #ffffff;
    padding: 10px 20px;
    font-size: 14px;
    text-transform: uppercase;
    width: 500px;
}

input[type="button"] {
    background: #4caf50;
    color: #fff;
    padding: 10px 20px;
    border: none;
    cursor: pointer;
}

input[type="button"]:hover {
    background: #3e8e41;
}

.errorlist {
    color: red;
    float: left;
    clear: both;
    padding-left: 10pt;
}

.helptext {
    margin: 0 0 20px 0;
    color: #aaa;
    clear: both;
    float: left;
    font-size: 13px;
}


/* The Modal (background) */
.modal {
    display: none; /* Hidden by default */
    position: fixed; /* Stay in place */
    z-index: 1; /* Sit on top */
    left: 0;
    top: 0;
    width: 100%; /* Full width */
    height: 100%; /* Full height */
    overflow: auto; /* Enable scroll if needed */
    background-color: rgba(0,0,0,0.4); /* Black w/ opacity */
  }
  
  /* Modal Content/Box */
  .modal-content {
    background-color: #fefefe;
    margin: 15% auto; /* 15% from the top and centered */
    padding: 20px;
    border: 1px solid #888;
    width: 80%; /* Could be more or less, depending on screen size */
  }
  
  /* The Close Button */
  .close {
    color: #aaa;
    float: right;
    font-size: 28px;
    font-weight: bold;
  }
  
  .close:hover,
  .close:focus {
    color: black;
    text-decoration: none;
    cursor: pointer;
  }

button {
    width:max-content;
    position: relative;
}

.topnav {
    background-color: rgb(10, 32, 32);
    overflow: hidden;
}
.topnav a {
    float: left;
    color: aqua;
    text-align: center;
    padding: 14px 16px;
    text-decoration: solid;
    font-size: 17px;
}
.topnav a:hover {
    background-color: rgb(249, 249, 232);
    color: rgb(25, 155, 40);
    text-decoration: none;
}
.topnav a.active {
    background-color: rgb(16, 163, 176);
    color: rgb(255, 255, 255);
}
/* Resetting margin and padding for fieldset */
fieldset {
    display: flex;
    flex-direction: column; /* Stack content vertically */
    margin: 0;
    margin-bottom: 15px;
    padding: 20px; 
    border: 1px solid #ccc; 
    width: 100%; 
    box-sizing: border-box; 
}

/* Style for the legend (title of fieldset) */
legend {
    font-size: 1.2em;
    padding: 0 10px;
    margin-bottom: 10px;
}

/* Ensure inputs within the fieldset are full width */
fieldset input,
fieldset select,
fieldset textarea {
    width: 100%; /* Full width of the fieldset */
    box-sizing: border-box; /* Include padding in width calculation */
    margin-bottom: 15px; /* Space between input fields */
    padding: 10px;
}






.box-container {
    display: flex;
    flex-wrap: wrap;
    gap: 100px;
    perspective: 1000px; /* Add perspective to the container */
    margin-top: 20px;
    justify-content: center;     /* Center horizontally */
    align-items: center;    
}

.box {
    width: 400px; /* Set the box width */
    height: 400px; /* Set the box height */
    position: relative;
    transform-style: preserve-3d; /* Allow 3D transformations */
    transition: transform 0.5s; /* Transition for the flip effect */
}

.box:hover {
    transform: rotateY(180deg); /* Flip on hover */
}

.box-face {
    position: absolute;
    width: 100%;
    height: 100%;
    backface-visibility: hidden; /* Hide back face when not visible */
    border: 2px solid #2f2735; /* Optional border */
    border-radius: 10px; /* Optional rounded corners */
}

.front {
    background: linear-gradient(135deg, rgba(102, 205, 170, 0.8), rgba(72, 61, 139, 0.8)); /* Example gradient */
    color: rgb(10, 32, 32); /* Front text color */
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.2em;
    flex-direction: column;     /* Stack items vertically */
    height: 100%;               /* Make sure the front face takes full height */
    text-align: center;         /* Center text within the box */
    gap: 30px;
}

.back {
    background-color: #fff; /* Back face color */
    color: #1820b3; /* Back text color */
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.5em;
    transform: rotateY(180deg); /* Rotate back face to hide it */
    text-align: center;
}

i {
    font-size: 80px;            /* Icon size */
}

.social-media-icons a {
    margin: 0 10px; /* Space between icons */
    color: #000;     /* Default color */
    font-size: 5px; /* Icon size */
}

.social-media-icons a:hover {
    color: #1056a1;  /* Change color on hover */
}

.question-form {
    padding: 15px;
    border: 1px solid #ddd;
    margin-bottom: 15px;
    background-color: #f9f9f9;
}

.table-container {
    display: flex;
    flex-direction: column;
  }
  
  .table-row {
    display: grid;
    grid-template-columns: 150px 300px;
    grid-gap:20px;
    margin-bottom: 20px;
    padding: 10px;
    border-bottom: 1px solid #ddd;
  }
  
  .table-label {
    width: 150px;
    font-weight: bold;
    display: inline-block;
  }
  
  .table-value {
    width: 300px;
    display: inline-block;

  }

.table-row:nth-child(odd) {
    background-color: #f9f9f9;
}

.table-row:nth-child(even) {
    background-color: #fff;
}

.dropdown-menu {
    display: none;
    position: absolute;
    top: 100%;
    left: 0;
    z-index: 1000;
    float: left;
    min-width: 160px;
    padding: 5px 0;
    margin: 2px 0 0;
    font-size: 14px;
    text-align: left;
    list-style: none;
    background-color: #fff;
    border: 1px solid #ccc;
    border-radius: 4px;
    box-shadow: 0 6px 12px rgba(0, 0, 0, 0.175);
}

.dropdown-menu > li > a {
    display: block;
    padding: 3px 20px;
    clear: both;
    font-weight: normal;
    line-height: 1.42857143;
    color: #333;
    white-space: nowrap;
}

.dropdown-menu > li > a:hover {
    background-color: #f5f5f5;
    color: #262626;
}

.sidebar .dropdown-toggle::after {
    display: inline-block;
    margin-left: .255em;
    vertical-align: .255em;
    content: "";
    border-top: .3em solid;
    border-right: .3em solid transparent;
    border-bottom: 0;
    border-left: .3em solid transparent;
}

#welcome-section {
    position: relative;
    width: 100%;
    height: 100vh; /* Full viewport height */
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    animation: slideShow 15s infinite;
  }
  
  /* Overlay for text styling */
  .overlay {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    text-align: center;
    color: white;
    background: rgba(0, 0, 0, 0.5); /* Semi-transparent background */
    padding: 20px;
    border-radius: 10px;
  }
  
  /* Keyframes for slideshow */
  @keyframes slideShow {
    0% {
      background-image: url('css/kenniola_logo.png');
    }
    33% {
      background-image: url('css/kids.jpg');
    }
    66% {
      background-image: url('css/books.jpg');
    }
    100% {
      background-image: url('css/schoolkids.jpg'); /* Loop back to the first image */
    }
  }